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

一、本堂课重点内容：

CSS 代码构成
CSS 使用方法
CSS 流程之选择器组、文本渲染
CSS 选择器的特异度
CSS 继承

二、详细知识点介绍：

CSS基础

css是什么？

css用来定义页面元素的样式

设置紫日和颜色
设置位置和大小
添加动画效果

例如：

h1 {
    color: white;
    font-size: 14px;
}

其中h1是选择器、color是属性、while是属性值

在页面中如何使用css

嵌入式
内联式（不推荐）
外链式

css如何工作

选择器

作用：找出页面中的元素，以便给他们设置样式

使用多种方式选择元素：

按照标签名、类名或id
按照属性
按照DOM树中的位置

多种选择器

通配选择器

所有选择器中范围最广，能匹配页面中所有元素。

* {
    margin：0； /*定义外边距*/ 
    padding：0； /*定义内边距*/
    backcolor: #ccc;
}

标签选择器

标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。

div {
    margin：0； /*定义外边距*/ 
    padding：0； /*定义内边距*/
    backcolor: #ccc;
}

id选择器

id选择器使用#进行标识，后面紧跟id名。

id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。

#app {
    margin：0； /*定义外边距*/ 
    padding：0； /*定义内边距*/
    backcolor: #ccc;
}

类名选择器

类选择器使用.(英文点号)进行标识，后面紧跟类名，类名即为HTML元素的class属性值。

优点是可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，可以实现为不同类型的标记指定相同的样式。同时，一个HTML元素也可以应用多个class类，设置多个样式，此时多个类名之间需要用空格隔开

.abc {
    margin：0； /*定义外边距*/ 
    padding：0； /*定义内边距*/
    backcolor: #ccc;
}

属性选择器

属性选择器可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

选择器	描述
`[attribute]`	用于选取带有指定属性的元素
`[attribute=value]`	用于选取带有指定属性和值的元素
`[attribute~=value]`	用于选取属性值中包含指定词汇的元素
`[attributeI=value]`	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
`[attribute^=value]`	匹配属性值以指定值开头的每个元素
`[attribute$=value]`	匹配属性值以指定值结尾的每个元素
`[attribute*=value]`	匹配属性值中包含指定值的每个元素

[title] {
    margin：0； /*定义外边距*/ 
    padding：0； /*定义内边距*/
    backcolor: #ccc;
}

伪类选择器（不基于标签和属性定义元素）

状态伪类基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

选择器	作用	应用对象
`:hover`	定义标记在鼠标悬停(划过)时的样式	所有显示标记
`:link`	定义标记在超链接状态下的样式	a标签
`:focus`	定义标记在获取焦点时的样式	a标签(IE浏览器不支持)
`:visited`	定义标记被访问过后的样式	a标签
`:active`	定义标记在选定时刻下的样式	a标签

结构性伪类（css3新增选择器）

利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

选择器	作用
`:first-child`	选择父元素中第一个子元素
`:first-of-type`	第一个指定类型的元素
`:last-child`	选择父元素中最后一个子元素
`:last-of-type`	最后一个指定类型的元素
`:nth-child(n)`	正数第 n 个元素
`nth-of-type(n)`	正数第 n 个指定类型的元素
`:nth-last-child(n)`	倒数第 n 个元素个元素
`nth-last-of-type(n)`	倒数第 n 个指定类型的元素
`:only-child`	选择的元素是它的父元素的唯一一个子元素
`:only-of-type`	选择一个元素是它的上级元素的唯一一个相同类型的子元素；
`:empty`	选择的元素里面没有任何内容

伪元素选择器

伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中！常见的伪元素选择器包括：

选择器	作用
`::first-letter`	选择元素文本的第一个字（母）。
`::first-line`	选择元素文本的第一行。
`::before`	在元素内容的最前面添加新内容。
`::after`	在元素内容的最后面添加新内容。

伪元素的应用：消除浮动

如果父元素的所有子元素都是浮动的，父元素的高度则无法撑开。可以通过对父元素添加after伪类撑开父元素高度，因为after就是其最后一个子元素。

.clear:after {
    content: '';
    display: block;
    clear: both;
}

选择器组合

选择器组（并集选择器）

是同时匹配多个选择器，取多个选择器的并集，选择器之间用逗号隔开，如

选择器权重

!important 最高优先级（慎用）内联样式 1，0，0，0 id选择器 0，1，0，0 类和伪类选择器 0，0，1，0 标签选择器 0，0，0，1 通配选择器 0，0，0，0 继承的样式没有优先级（最低）

a）比较优先级时，需要组合的选择器将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示 （叠加原则），选择器单独计算，不叠加。 b）选择器的累加不会超过其最大的数量级（例如类选择器再高也不会超过id选择器） c）如果优先级计算后相同，此时则优先使用靠下的样式**（就近原则）** d）在某一个样式的后边添加 !important，则此时该样式会获取到最高的优先级，甚至超过内联样式（开发时慎用）

最终得到了CSS属性的值。

继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值。
当元素的一个继承属性（inherited property）没有指定值时，则取父元素的同属性的计算值
当元素的一个非继承属性(在 Mozilla code 里有时称之为reset property ) 没有指定值时，则取属性的初始值
initial 关键字代表改变该元素或其父元素的所有属性至初始值。
inherit 关键字允许显式的声明继承性，它对继承和非继承属性都生效。

颜色设置

采用十六进制，如 #ffffff
采用rgb(,,)，如 rgb(255,0,3)
透明色rgba(,,)，如 rgba(255,255,255,0.3)

三、总结：

css基础重点学习选择器使用。

走进前端技术栈CSS| 青训营笔记