这是我参与「第四届青训营」笔记创作活动的的第2天

课堂内容

CSS基础分类器
字体、颜色、文本等的设置

伪类

不基于标签和属性定位元素

状态伪类

链接伪类：

:link:指示作为超链接（即有一个href属性）并指向一个未访问地址的所有锚

:visited:作为已访问地址超链接的所有锚

动态伪类

它们可以根据用户行为改变文档的外观

focus:指示房前拥有输入焦点的元素，可以接受键盘输入或者能以某种方式激活的元素（可以凸显你正在输入的输入框）

hover:指示鼠标指针停留的元素

active:指示用户输入激活的元素，例如鼠标停留在一个超链接上，如果点击，就会激活这个超链接，active就指示这个超链接

选择子元素

:first-child:选择作为某元素作为第一个子元素的em元素写成：em：first-child(利用向标记增加具体类来理解)

:last-child:最后一个子元素

组合

选择器组

使用逗号分隔，这样就定义了一个规则，逗号告诉浏览器，规则中包含多个不同的选择器：

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
  margin: 0;
  padding: 0;
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

颜色

RGBA:RGBA是代表Red（红色）Green（绿色）Blue（蓝色）和Alpha的色彩空间。#000000(16进制)/rgb（0，0，0）
HSL：HSL即色相、饱和度、亮度（Hue, Saturation, Lightness）。HSL(0,100%,80%)
直接使用color：black;这样的,一般黑白用的比较多
alpha：（不）透明度，为1的时候为完全不透明

字体

font-family:字体一般会指定多个字体，因为有的设备没有字体，要一层一层匹配，在最后一定要加上serif（通用字体族）在中英文混用的情况

要将英文字体的样式写在前面，因为是按照每个字符一个一个去匹配

<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

使用Web Font：

使用时会带来一些性能的开销，会先去url链接里下载相应的字体

@font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

font-size：

绝对大小：small、medium、large等，是相对地来定义的，根据不同的缩放因子

百分数大小：根据从父元素继承的大小来计算

em：em等价于百分数值，1em=100%

font-style：

值：italic（斜体）、oblique（倾斜）、normal（默认）

font-weight:字体加粗

值：normal、bold、lighter、100、200、300、...、900

文本属性

line-height:两行文字的基准线之间的距离

使用没有单位的数字，表示行高为字体大小的多少倍 eg:

  p {
    font-size: 20px;
    line-height: 1.6;        //20*1.6=32px
  }

text-align(文字对齐):

值：left/center/right/justify(两端对齐，最后一行不生效)

间距：

1.letter-spacing：每个字符间距

2.word-spacing：词之间的间距

首行缩进 text-indent
文本装饰：

text-decoration:none(默认)/underline/line-through/overline

对空格的处理：white-space

html中多个连续的换行会被合并成一个，

pre：保留所有的空格和换行

pre-wrap：一行内显示不下了做换行

pre-line：保留空格，合并换行

选择器的特异度

优先级：id>伪类选择器>标签选择器

通过计算id选择器，伪类选择器，标签选择器的个数比大小

继承

CSS中的某些属性会自动继承父元素的计算值，除非显示指定一个值

理解CSS(2) | 青训营笔记

课堂内容

伪类

选择器的特异度

继承