HTML+CSS 学习笔记 04

一. 文本属性

1.1 text-decoration

text-decoration 用于给文本添加装饰线,主要取值有:

• none:无装饰线,主要清除a元素自带的下划线
• underline: 下划线
• overline:上划线
• line-through 中划线,删除线

注意: u,ins这类的标签就是浏览器默认加了text-decoration: underline

1.2 letter-spacing和word-spacing

• letter-spacing,word-spacing分别设置字母,单词之间的间距
• 默认为0,也可以设置负数

1.3 text-transform

• text-transform用于文字的大小写转化
• 可以设置以下值:
  • none: 默认值,没有任何影响
  • capitalize: 将每个单词的首字母大写
  • uppercase:将每个单词都转化为大写
  • lowercase: 将每个单词都转化为小写

1.4 text-indent

• text-indent:用于设置文本首行缩进
• text-indent:2em; 正好是首行缩进2个文字

1.5text-align

• text-align用于设置 元素内容 在元素中的水平对齐方式
• 可以设置以下的值:
  • left:文本居左对齐
  • right: 文本居右对齐
  • center: 文本居中对齐
  • justify: 两端对齐(但是对最后一行文本无效,若想最后一行文本也生效,需要设置 text-align-last:justify才能生效)

二.字体属性

2.1 font-size

• font-size用于设置文字的字体大小
• 常用的设置:
  • 具体的数值+单位
    • 比如100px:像素,绝对单位
    • 比如2em, 1em相当于父元素的字体大小
    • 比如2rem 1rem相当于html元素的字体大小
  • 百分比
    • 比如 100%,基于父元素的font-size计算

2.2 font-family

• 用于设置字体的字体名称
• 可以设置一个或多个字体,中间由逗号隔开,浏览器会从左到右依次加载字体,直到找到可用的字体为止
• 一般来说,英文字体只适用于英文,中文字体通常适用于中文和英文'
  • 所以,如果希望中英文使用不同字体,建议英文字体写在前面,中文字体写在后面

2.3 font-weight

• 用于设置文字的粗细
• 可设置如下值:
  • 100|200|300|400|500|600|700|800|900 每个数字代表一个重量
  • normal 正常 ,默认 400
  • bold 700
  • bolder
  • 常用的就是normal(400),bold(700)和bolder
• strong,h1-h6,b等标签font-weight值默认就是bold

2.4 font-style

• 用于设置文本的常规,斜体显示
• 可以设置的值:
  • normal: 常规显示,这是默认值
  • italic：用字体的斜体显示(前提, 是font-family这种字体本身是支持斜体)
  • oblique：文本倾斜显示(让文字倾斜,不管这种字体支不支持斜体)
• em,i,address,cite标签font-style默认值就是itatic
• 设置font-style的值是italic的span元素等同于em元素

2.5 font-variant

• 可以影响小写字母的显示形式
• 可以设置的值有:
  • normal: 常规显示,这是默认值
  • small-caps: 将小写字母转化为大写,但是以小写的大小显示

2.6 line-height

• 用于设置文本的最小高度
• 行高可以简单的理解为一行文本所占的高度
• 行高的严格定义是:两行文本的基线之间的距离
• image.png

• 注意区分高度和行高的区别

  • 高度: 元素的整体高度

  • 行高: 元素的每一行文本所占据的高度

  • 总结: 行高 = 文字高度 + 2*上下的行距

  • 应用实例: 假设一个有具体高度的div里只有一行文本,如何让文本垂直居中?

    • 让行高等于div盒子的高度即可

  • 应用实例: 假设一个有具体高度的div里有多行文本,如何让文本垂直居中?

    • 添加以下代码

    • div {
          display:table-cell;
          vertical-align:middle;
          overflow:hidden;
      }
      

2.7 font的缩写属性

• font是一个缩写属性: font-style font-variant fong-weight font-size/line-height font-family

• div {
      font:italic small-caps 700 20px/1.5 '微软雅黑';
  }
  

• font缩写时需要注意的点:

  • font-style font variant fong-weight,这三个书写顺序可以任意,也可以省略
  • /line-height可以省略,但是如果不省略,就一定要放在font-size后面
  • font-size font-family 不可省略,而且顺序必须是这样

三. 更多CSS选择器

3.1 属性选择器

• [attr]: 匹配拥有attr属性的元素
• [attr=val]: 匹配拥有attr,且attr的值等于val的元素
• [attr*=val]: 匹配拥有attr属性,且值包含val的元素
• [attr^=val]: 匹配拥有attr属性且值以val开头的元素
• [attr$=val]: 匹配拥有attr属性且值以val结尾的元素
• [attr|=val]: 匹配拥有attr属性并且属性值恰好等于val 或者 以单词val开头且后面紧跟着连字符-的元素
• [attr~=val]: 匹配拥有attr属性并且属性值包含单词one的元素（单词val与其他单词之间必须用空格隔开）

3.2 后代选择器

• 形式是: div p : 匹配div后代所有的p元素(直接子元素和间后代元素)

3.3 子代选择器

• 形式是: div > p : 匹配div的直接子元素的p元素(p元素必须是div的直接子元素才可以)

3.4 兄弟选择器

• 相邻兄弟选择器: div+p : 匹配 div元素后面紧挨着的p元素（且div、p元素必须是兄弟关系）
• 全体兄弟选择器 : div~p: 匹配 div元素后面的p元素（且div、p元素必须是兄弟关系）

3.5 选择器组

• 交集选择器: 匹配满足所有规则的元素
• 并集选择器: 匹配满足任一规则的元素