[note] CSS 文本|字体|高级选择器

---

---

CSS属性

一. 文本属性

text-decoration: 设置文字的装饰线

• none：无任何装饰线
  • 可以去除a元素默 认的下划线
• underline：下划线
  • u、ins元素默认(user agent stylesheet)就是设置了text-decoration为underline
• overline：上划线
• line-through：中划线（删除线）

letter-word-spacing: 设置字母、单词之间的间距

• letter-spacing、word-spacing分别用于设置字母、单词之间的间距
• 默认是0，可以设置为负数

text-transform: 文字的大小写转换

• capitalize：将每个单词的首字符变为大写

• uppercase：将每个单词的所有字符变为大写

• lowercase：将每个单词的所有字符变为小写

• none：没有任何影响

• my name is coderwhy 方法大师傅打发到

  MY NAME IS CODERWHY

  My Name is Coderwhy

  my name is coderwhy

text-indent: 第一行内容的缩进

• text-indent: 2em;刚好是缩进2个文字

• 注意：【em】
  • text-indent中的em是相对于自己本身元素的font-size

text-align: 元素内容在元素中的水平对齐方式

• left：左对齐
• right：右对齐
• center：正中间显示
• justify：两端对齐
  • text-align: justify对最后一行没有效果，如果要加上最后一行，用text-align-last: justify

• 注意：【div->div的情况】
  • 由于div是block的缘故，占一整行，text-align对其无用
  • 如果强行要用text-align，可以display: inline-block，设置为行内元素即可居中

二. 字体属性

font-size: 文字的大小

• 具体数值+单位
  • 比如：Chrome默认font-size为16px，最小font-size 为12px
  • 也可以使用em单位：1em代表100%，2em代表200%，0.5em代表50%
• 百分比
  • 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

• 注意：【什么属性会继承】
  • 与文字相关的属性会继承下去，length、width是不继承的
• 注意：【em相对于自身还是父元素】
  • font-size中的em是相对于父元素的size
  • text-indent中的em是相对于自身的size
  • em的使用没有rem广泛

font-family: 文字的字体名称

• 可以设置1个或者多个字体名称（从左到右按顺序选择字体，直到找到可用的字体为止）

textarea {
    font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}
/* 这里类似"\5B8B\4F53"都可以加上单双引号，表示为一个字符串整体，更正确稳妥，但各大网站都没加 */

• 一般情况下，英文字体只适用于英文，中文字体同时适用于英文和中文
• 如果在开发中, 中英文使用不同的字体:
  • 建议: 将英文字体写到前面, 中文字体写到后面
  • 英文字体 中文字体
  • 中文字体 英文字体（已经有字体了，就不会继续往后找字体了）
• 网络字体（待补充）

font-weight: 文字的粗细（重量）

• 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900：每一个数字表示一个重量
• normal：等于400
• bold：等于700
• strong、b、h1~h6等标签的font-weight默认就是bold

font-style: 文字的常规、斜体显示

• normal：常规显示
• italic：用字体的斜体显示(前提, 是font-family这种字体本身是支持斜体)
  • em、i、cite、address、var、dfn等元素的font-style默认就是italic
  • i比较常用（用伪类i:: after做小图标，例如小箭头），其他的标签用得少
• oblique：文本倾斜显示(让文字倾斜)

font-varient: 小写字母的显示形式（在中文里极少用到）

• normal：常规显示
• small-caps：将小写字母替换为缩小过的大写字母

line-height: 文本的最小行高

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

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

• 基线（baseline）：与小写字母x最底部对齐的线

• line-height=文字高度font-size+行距（即上下两个半行距）

行高 行距

• 注意区分height和line-height的区别：

  • height：元素的整体高度
  • line-height：元素中每一行文字所占据的高度

• 应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中

  • line-height=height

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不可以调换顺序，不可以省略

  font: 12px/1.5 Microsoft YaHei,Heiti SC,arial,"\5B8B\4F53",sans-serif;
  

三. 更多选择器

属性选择器（attribute selectors） - [att]

拥有title属性的元素（每个元素都可以有title属性，鼠标悬停在上面会显示）

• [attr]
  表示带有以 attr 命名的属性的元素。
• [attr=value]
  表示带有以 attr 命名的属性，且属性值为 value 的元素。
• [attr*=value]
  表示带有以 attr 命名的属性，且属性值包含有 value 的元素。
• [attr^=value]属性值是以 value 开头的元素
• [attr$=value]属性值是以 value 结尾的元素
• [attr|=value]
  表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。
• 典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。
• [attr~=value]
  表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

  /* 存在title属性的元素 */
  [title] {
    color: purple;
  }
  
  /* 存在href属性并且属性值匹配"https://example.org"的元素 */
  [href="https://example.org"] {
    color: green;
  }
  
  /* 存在href属性并且属性值包含"example"的元素 */
  [href*="example"] {
    font-size: 2em;
  }
  
  /* 存在href属性并且属性值结尾是".org"的 元素 */
  a[href$=".org"] {
    font-style: italic;
  }
  
  /*  elements whose class attribute contains the word "logo" */
  /* 相当于类选择器.logo */
  a[class~="logo"] {
    padding: 2px;
  }

后代选择器（包括直接、间接子元素）（常用！）

• 使用 （空格） 选择符

• 元素1 元素2 {样式声明 }

  div span { 
    background-color: DodgerBlue; 
  }
  .class1 span { 
    background-color: White; 
  }
  

注意

里不能嵌套

，结构会乱掉

子代选择器（不包括间接子元素）

• 使用 > 选择符

• 元素1 > 元素2 {样式声明 }
  

  div > span {
    background-color: DodgerBlue;
  }
  

兄弟选择器（较少使用）

• 相邻兄弟选择器

  • 使用 + 选择符
  • 例：div元素后面紧挨着的p元素（且div、p元素必须是兄弟关系）

• 通用兄弟选择器

  • 使用 ~ 选择符
  • 位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素
  • 例：div元素后面的p元素（且div、p元素必须是兄弟关系）

交集选择器

• 连起来写，没有空格

并集选择器（常用！）

• 使用 , 选择符

• 之前的基础选择器
  • 类选择器
  • id选择器
  • 元素选择器
  • 统配选择器