css字体和文本样式

最新推荐文章于 2024-04-13 08:10:06 发布

Zhuang

最新推荐文章于 2024-04-13 08:10:06 发布

阅读量163

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/toufachangdehen/article/details/124880519

版权

学习笔记

一，字体基本

1.font-size（大小）

属性名：font-size（浏览器默认字号是16）

取值：数字+px

  <style>
    p
    {
      font-size: 25px;
    }
  </style>
</head>
<body>
  <p>段落文字</p>
</body>

2.font-weight（粗细）

属性名：font-weight

取值：

关键字：正常：normal（400），加粗：bold（700）
纯数字：100~900的整百数

  <style>
    div
    {
      font-weight: 800;
    }
  </style>
</head>
<body>
  <div>div文字</div>
</body>

3.font-style（倾斜）

属性名：font-style

取值：正常：normal，倾斜：italic

  <style>
    div
    {
      font-style: italic;
    }
    em
    {
      font-style: normal;
    }
  </style>
</head>
<body>
  <div>div文字</div>
  <em>em</em>
</body>

4.字体系列font-family

属性名：font-family

Windows：默认微软雅黑，macOS默认苹方

  <style>
    div
    {
      /*如果用户电脑没有安装微软雅黑，就按照黑体显示文字，
      没有黑体就任意一种非衬线字体显示*/
      font-family: 微软雅黑,黑体,sans-serif;
    }
  </style>
</head>
<body>
  <div>div文字</div>
</body>

5.样式的层叠问题

问题：

给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？

结果：

如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

  <style>
    p
    {
      color :red ;
      color:blue;
    }
  </style>
</head>
<body>
  <p>div文字</p>
</body>

6.字体font属性的连写

属性名：font

取值：font：style，weight，size，family

  <style>
    p
    {
      /*font:style weight size 字体;*/
      font:italic 700 66px 宋体;
    }
  </style>
</head>
<body>
  <p>这是p标签</p>
</body>

省略要求：只能省略前两个，如果省略了相当于设置了默认值

Zhuang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css字体和文本样式

css字体
复制链接

扫一扫