目标

  • 掌握并且通过所学的属性进行设置
  • 掌握文本的修饰
  • 如何去除下划线

  • 如果进行行间距以及首行缩进的设置

    1.0 Color:文本颜色

  • 作用：Color属性用于定义文本的颜色

  • 其取值方式为： | 表示表示 | 属性值 | | —- | —- | | 预定义的颜色值 | red，green，blue，还有我们的御用色 pink | | 十六进制 | #FF0000，#FF6600，#29D794 | | RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |

  • 注意：

    • 实际开发中以16进位的方式居多

1.1 Text-align：文本水平对齐方式

  • 作用：用于设置文本内容的水平对齐方式，等同于HTML中的algin对齐属性
  • 其可用属性值如下： | 属性 | 解释 | | —- | —- | | left | 左对齐（默认值） | | right | 右对齐 | | center | 居中对齐 |
  • 注意：是让盒子里面的内容水平居中， 而不是让盒子居中对齐

1.2 line-height：行间距

  • 作用：用于设置行间距，就是行与行之间的距离，即字符的垂直间距，称为行高
  • 单位：
    • 像素px （使用居多）
    • 相对值em
    • 百分比%
      1. line-height:24px;
      2. 一般情况下行距比字号大7-8个像素左右即可

1.3 text-indent：首行缩进

  • 作用：用于设置首行文本的缩进
  • 属性值：
    • 其属性值为不同单位的数值，em字符宽度的倍数，或相对于浏览器窗口宽度的百分比%，允许为负值
    • 建议使用em作为单位

em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

  1. p {
  2.       /*行间距*/
  3.       line-height: 25px;
  4.       /*首行缩进2个字  em  1个em 就是1个字的大小*/
  5.       text-indent: 2em;  
  6.  }

1.4 text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

值 描述
none 默认。定义标准的文本。 取消下划线（最常用）
underline 定义文本下的一条线。下划线 也是我们链接自带的（常用）
overline 定义文本上的一条线。（不用）
line-through 定义穿过文本下的一条线。（不常用）

1.5 CSS外观属性总结

属性 表示 注意点
color 颜色 我们通常用 十六进制 比如 而且是简写形式 #fff
line-height 行高 控制行与行之间的距离
text-align 水平对齐 可以设定文字水平的对齐方式
text-indent 首行缩进 通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration 文本修饰 记住 添加 下划线 underline 取消下划线 none

1.6 图片对齐方式

属性值 说明
top 与顶部基线对齐
middle 与父类元素中部
bottom 与底部基线对齐