什么是css？
CSS是一种用于向用户指定文档如何呈现的语言 — 它们如何被指定样式、布局等。
css如何工作的？
-当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：
- 浏览器将 HTML转化成 DOM（文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
- 浏览器显示 DOM 的内容。]
如何在HTML里应用css？
1.外部样式表
将你的 CSS 保存在一个独立的扩展名为 .css 的文件中，并从HTML的 <link> 元素中引用它。
<link rel="stylesheet" href="style.css">
2.内部样式表
将你的css放入<style>元素中，该元素包含在HTMLhead内。
3.内联样式
内联样式是仅影响一个元素的CSS声明，被 style 属性包括着。
CSS语句组成
从最基本的层次来看，CSS是由两块内容组合而成的：
- 属性（Property）：一些人类可理解的标识符，这些标识符指出你想修改哪一些样式，例如：字体，宽度，背景颜色等。
-
属性值（Value）：每个指定的属性都需要给定一个值，这个值表示你想把那些样式特征修改成什么样，例如，你想把字体，宽度或背景颜色改成什么。
属性和属性值之间，用英文半角冒号 (:) 隔离，如下图所示。
声明
CSS选择器
在CSS中，选择器用于定位我们想要样式化的网页HTML元素。各种各样可用的CSS选择器允许我们精确选择要样式化的元素。
选择器可以被分为以下类别：
- 简单选择器（Simple selectors）：通过元素类型、class或 id 匹配一个或多个元素。
- 属性选择器（Attribute selectors）：通过 属性 / 属性值 匹配一个或多个元素。
- 伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。
- 伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
- 组合器（Combinators）：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。
- 多重选择器（Multiple selectors）：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。
元素选择器
此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。
p {
color: red;
}
类选择器
类选择器由一个点“.”以及类后面的类名组成。类名是在HTMLclass文档元素属性中没有空格的任何值。
<p class = "first">This is a graph.</p>
<style>
.first{
color = red;
}
</style>
ID选择器
ID选择器是由一个哈希/磅符号 (#)，后面跟着给定元素的ID名称组成的。 任何元素都可以使用id属性设置唯一的ID名称。id的名称必须是文档中唯一的。
<p id="say"> — "Good morning."</p>
#say {
color = red;
}
通用选择器
它允许选择在一个页面中的所有元素。用*表示。
* {
padding: 5px;
border: 1px solid black;
}
属性选择器
这些属性选择器尝试匹配精确的属性值：
[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。
子串值属性选择器
这种情况的属性选择器也被称为“伪正则选择器”。
[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
[attr^=val] :选择attr属性的值以 val 开头（包括 val）的元素。
[attr$=val] :选择attr属性的值以 val 结尾（包括 val）的元素。
[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）。
伪类选择器
一个CSS伪类（pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。
a类选择
a:link 匹配所有未被点击的链接
a:visited 匹配所有已被点击的链接
a:active 匹配鼠标已经其上按下、还没有释放的E元素
a:hover 匹配鼠标悬停其上的E元素
其他
:first-child 匹配作为长子（第一个子女）的元素
:nth-child(n) 匹配父元素的第n个子元素，必须先找到父元素，然后再向下找
:nth-last-child(n) 匹配其父元素的倒数第n个子元素
:nth-of-type 父元素下，同种标签类型的第一个元素
:nth-last-type(n) 与nth-last-child(n)，匹配使用同种标签的元素
:first-of-type 匹配父元素下使用同种标签的第一个子元素
:last-of-type 匹配父元素下使用同种标签的最后一个子元素
伪元素
伪元素跟伪类很像，但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两个冒号 (::) ， 同样是添加到选择器后面去选择某个元素的某个部分。
::after ::after用来创建一个伪元素，作为已选中元素的最后一个子元素。
::before::after用来创建一个伪元素，作为已选中元素的最后一个子元素。
::first-letter第一行的第一个字母
::first-line第一行应用样式
组合器和选择器组
选择器组
A, B匹配满足A（和/或）B的任意元素
后代选择器
A B 匹配B元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
子选择器
A > B 匹配B元素，满足条件：B是A的直接子节点
相邻兄弟选择器
A + B 匹配B元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
通用兄弟选择器
A ~ B 匹配B元素，满足条件：B是A之后的任意一个兄弟节点（AB有相同的父节点，B在A之后，但不一定是紧挨着A）
网友评论