2020年4月28日总结

一、文本属性

1.1.text-decoration

• 设置文字的装饰线

• none：无装饰线

  • 可以去除a元素默认的下划线

• underline：下划线

• overline：上划线

• line-through：中划线(删除线)

• u、ins元素默认就是设置了text-decoration为underline

1.2.letter-spacing、word-spacing

• letter-spacing：字母之间的间距
• word-spacing：单词之间的间距

1.3.text-transform

• 设置文字的大小写转换
• 可以设置以下值：
  • capitalize：将每个单词的首字母变为大写
  • uppercase：将每个单词的所有字符变为大写
  • lowercase：将每个单词的所有字符变为小写
  • none：没有任何影响

1.4.text-indent

• 用于设置第一行内容的缩进

1.5.text-align

• 设置元素内容在元素中的水平对齐方式
• 常用的值：
  • left：左对齐
  • right：右对齐
  • center：正中间显示

二、文字属性

2.1.font-size

• 决定文字的大小

• 具体的数值

  • 比如100px
  • 也可以使用em单位

• 百分比

2.2.font-family

• 用于设置字体的名称，操作系统的字体
• 一般设置多个字体
  • 一般情况下，英文字体只适用于英文，中文字体同时适用于中文和英文
  • 所以，如果希望中英文使用不同的字体，应该先将英文字体写在前面，中文字体写在后面
  • 每一种字体都加一个单引号

2.3.font-weight

• 设置文字的粗细(重量)
• 100|200|300|400|500|600|700|800|900：每一个数字表示一个重量
• normal：表示400
• bold：等于700

2.4.font-style

• 设置文本的常规、斜体显示
• 设置的值：
  • normal：常规显示
  • italic：用字体斜体显示(前提是font-family这种字体是支持斜体的)
  • oblique：文本倾斜显示(让文字倾斜)

2.4.font-variant

• 可以影响小写字母的显示形式
• 可以设置的值如下：
  • normal:常规显示
  • small-caps:将小写字母替换为缩小过的大写字母

2.5.line-height

• 用于设置文本的最小行高

• 行高可以简单理解为一行文字所占据的高度

• 为什么文本需要行高？

  • 产生间距，便于阅读

• 行高严格定义是：两行文字基线(baseline)之间的间距

  • 基线(baseline)：与小写字母x最底部对齐的线
  • 行距：上面那一行文字的底线和下面那一行文字的顶线之间的距离

    

  • 注意区分height和line-height的区别：
    • height：元素的整体高度
    • line-height：元素中每一行文字所占据的高度
    • 应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中
      • 让line-height等同于height
      • 其实原理是这样的：
        • div的高度height为200px
        • 文字高度text-height为20px，行高line-height为30px，而行距=(30-20)/2=5px
        • 当文字垂直居中的时候，文字高度仍为20px，而文字中心线到div顶部的高度为100px，所以行距是变为90px的，所以行高=90*2+20=200px
        • 从而可以得出当lian-height=height时，文字将垂直居中

2.6.font

• font是一个缩写属性
• font-style font-variant font-weight font-size/line-height font-family
  • font-style font-variant font-weight可以随意调换顺序，也可以省略
  • /line-height可以省略，如果不省略，必须跟在font-size后面
  • font-size font-family不可以调换顺序

三、更多选择器

3.1.属性选择器

• 拥有title属性的元素[title]
• 恰好等于某个属性[title="one"]
• 包含某个属性[title*="one"]
• 以某个属性开头[title^="one"]
• 以某个属性结尾[title$="one"]

3.2.后代选择器(div span)

• div元素里面的span元素(包括直接子元素、间接后代元素)

3.3.子选择器(div > span)

• div元素里面的直接span子元素(不包括间接子元素)

3.4.相邻兄弟选择器(div+p)

• div元素后面紧挨着的p元素(且div、p元素必须是兄弟关系)

3.5.全体兄弟选择器(div~p)

• div元素后面的p元素(且div、p元素必须是兄弟关系)

3.6.选择器组-交集选择器(div.one)

• 同时符合两个条件的元素：div元素、class值有one

3.7.选择器组-并集选择器(div,.one)

• 所有的div元素 + 所有class值有one的元素 + 所有title属性值等于test的元素