CSS字体 ，文本属性(2022/9/20)

1.css字体

1.1 font-family

• 作用：设置文本的字体系列

• 语法：font-family:字体名称；

• 常用值：

  • 一个字体名称或系列名称（介绍常用字体名称、字体系列）

    • 微软雅黑 Microsoft YaHei

    • 宋体 SimSun

    • 黑体 HeiTi

    • 楷体 KaiTi

  • 多个字体名称

    • 逗号分开 如果浏览器不支持第一个字体，则会尝试下一个（回退机制）

注意:如果字体名称包含空格、汉字、特殊字符，必须加引号!

语法:

.box{font-family: "Microsoft YaHei";}

1.2 font-size

• 作用：设置字体的大小

• 语法：font-size:值；

• 常用值：

  • 长度值（通常是像素px）

  • 百分比（相对于父元素计算）

  • em相对单位

    如果用于字号，相当于父元素字号计算，如果用于其它属性，相对于当前元素的字号

• 大多数浏览器的默认值字号：16px

1.3 font-style

• 作用：设置字体的大小

• 语法：font-style:值；

• 常用值：

  • normal默认值

  • italic斜体显示

1.4 font-weight

• 作用：设置字体粗细

• 语法：font-weight:值；

• 常用值：

  • normal默认值

  • bold加粗

  • 100-900九级字重，400相当于normal，700相当于bold

  • 注意：不是所有字体都内置了九级字重

 

2.2 text-decoration

2.3 text-indent

2.4 color

• 作用：设置行高（效果是产生文本行间距）

• 语法：line-height:值；

• 特性：实现单行文本的垂直居中

• 测量：文字高+行间距

• 常用值

  • normal默认。设置合理的行间距。

• px 设置固定的行间距。

  • number设置数字，此数值会与当前的字号相乘来设置行间距。

  • 百分比:相对于font-size计算

  .box{
       /*line-height:2;*/
   line-height:200%; /*产生的效果一致都是字号的两倍*/
  }

• 1.6 font简写

• 作用：设置所有字体属性

• 语法：

  font: 字体风格 字体加粗 字号/行高 字体；

• 总结：

  只有当【字号和字体】同时存在简写才是有效的，简写属性可以精简代码

• 

  2、css文本

  2.1 text-align

• 作用：设置文本的水平对齐方式

• 语法：text-align:值；

• 常用值

  • left居左对齐 [默认值]

  • right居右对齐

  • center居中对齐

  • justify两端对齐

• 注意：适用于块状元素

• 作用：设置文本装饰

• 作用：设置文本块首行的缩进

• 语法：line-height:值；

• 常用值

  • 默认值：0

  • 长度值，px,em(更方便)

  • 百分比: 相对于元素内容宽进行计算

  • 允许负值

• 作用：设置文字的颜色

• 语法：color:颜色值；

• 常用值

  • 颜色的常用表式方法

    • 颜色名称：如red、blue等

    • 十六进制颜色表示方法

      • 语法：如#ff0000

      • 说明：#rrggbb r,g,b取值范围为00-ff

        • r red 红色

        • g green 绿色

        • b blue 蓝色

      • 认识常见颜色的写法

  • 白色（#ffffff）、黑色（#000000） 红色（#ff0000）、绿色(#00ff00)、蓝色(#0000ff)

• rgb颜色表示方法

  • 语法：rgb(255,0,0)

    • 说明：rgb(r,g,b) r,g,b取值范围为0-255

      • 认识常见颜色的写法

        • 白色： rgb(255,255,255) 、黑色 : rgb(0,0,0) 红色： rgb(255,0,0) 、绿色： rgb(0,255,0) 、蓝色： rgb(0,0,255)

  • 语法：text-decoration:值；

  • 常用值

    • none 默认。定义标准的文本。 【常用】

    • underline 定义文本下的一条线 【常用】

    • line-through 定义穿过文本的一条线。【比较常用】

    • overline 定义文本上的一条线。 【不常用】