这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
在页面中使用css
- 外链link
- 嵌入style标签
- 内联style属性
css工作：
加载解析html、css，把样式添加到创建的DOM树的节点，然后出现展示页面。
层叠、优先级和继承
- ID：选择器中包含 ID 选择器则百位得一分。
- 类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
- 元素：选择器中包含元素、伪元素选择器则个位得一分。
CSS 选择器
链接状态
链接存在时处于不同的状态，每一个状态都可以用对应的 伪类 来应用样式：
- Link (没有访问过的): 这是链接的默认状态
- Visited: 这个链接已经被访问过了 (存在于浏览器的历史纪录)
- Hover: 当用户的鼠标光标刚好停留
- Focus: 一个链接当它被选中的时候 (比如通过键盘的Tab移动到这个链接的时候
- Active: 一个链接当它被激活的时候 (比如被点击的时候)
颜色
**rgb或rgba(含透明度）、**hsl(颜色，饱和度%，亮度%)
文字
white-space属性中，
nowrap表示强制不换行，
pre表示保留所有的，包括多个空格
背景与边框
background-color 背景颜色
background-image 背景图片
background-repeat 控制图像的平铺
no-repeat— 不重复。repeat-x—水平重复。repeat-y—垂直重复。repeat— 在两个方向重复。
下列布局技术会覆盖默认的布局
display属性的 value，如block,inline或者inline-block元素.- 浮动——应用
float值，如left能够让块级元素互相并排成一行 position属性 ,允许精准设置盒子中的盒子的位置，正常布局流中，默认为static- 表格布局— 表格的布局方式可以用在非表格内容上，可以使用
display: table和相关属性在非表元素上使用。 - 多列布局— 这个 Multi-column layout 属性可以让块按列布局，比如报纸的内容就是一列一列排布的。
定位 (positioning) 能够让我们把一个元素从它原本在正常布局流 (normal flow) 中应该在的位置移动到另一个位置。
- 静态定位（Static positioning)将元素放在文档布局流的默认位置
- 相对定位（Relative positioning）允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。
- 绝对定位（Absolute positioning）我们可以将元素相对于页面的
<html>元素边缘固定,如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。 - 固定定位（Fixed positioning）与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。
- 粘性定位（Sticky positioning）是一种新的定位方式，它会让元素先保持和
position: static一样的定位，当它的相对视口位置（offset from the viewport）达到某一个预设值时，它就会像position: fixed一样定位。
CSS规则集包括：
-选择器,如p为标签选择器
-声明=属性+属性的值，声明表示一个单独的规则，属性改变HTML元素样式的途径，属性的值指从指定属性的众多外观中选择一个值。
CSS的布局主要基于盒模型，每个占据页面空间的块都有这样的属性：
- padding：内边距 ，围绕着内容的空间
- border：边框 ，紧接着内边距的线
- margin：外边距 ，围绕着元素外部的空间
