Web前端——CSS层叠样式表
>css概述：层叠样式表
- 样式：调整HTML的显示效果（大小，颜色，对齐，边框，阴影，行高，文本样式，文字，阴影，内填充，外边距，定位，过渡，动画）
- HTML中就可以进行一些基本的样式调整，css2中更丰富具体的调整，css3中在css2的基础上增加了 过渡/转换/动画...等进阶效果；
- 在HTML中使用css代码有三种方式：A行内样式；B内部样式；C外部样式；
>A行内样式：
给某个HTML标签添加效果，就在HTML标签里写style=" css代码 ";
css代码风格： css属性名：css属性值；
其中，多个css属性kv对之间用分号隔开；
注意，css属性可能与HTML属性名一致，但绝大多数不一样，不要混；
<p style="background-color: pink; font-family: '宋体'; font-size: 16px;">行内样式演示</p>>B内部样式
内部样式需要在头部标签内，写一个style标签
<style type="text/css"></style>然后再style标签内部通过选择器选择需要调整的标签，进行样式调整；
选择器（css的选择器被Jqurey模仿）：
- ID选择器：备选标签id属性的值不能以数字开头，不能含有特殊符号；id选择器： #id{ css代码 }
- 类选择器：备选标签： class="类名"；类选择器： .类名{ css代码 }
- 标签选择器：备选标签无操作； 标签选择器：标签名{ css代码 }
- 通用选择器（没啥用）： *{ css代码 }
- 并列选择器： 选择器1，选择器2{ css代码 }
- 派生选择器：为了更清晰的看到层次，在选择器上带上父子关系； 父选择 子选择{ css代码 }；
- 如h2 #h{ css },h2标签里面的，id为h的子标签；
- 属性选择器：标签 [属性]
- table里的 属性含有name 且name属性中含有p的 tr标签
- table里的 属性含有name 且name属性中最后以y结尾的 tr标签
- table里的 属性含有name和class 的 tr标签
-
<style type="text/css"> table tr[name*='p']{ background-color: deeppink; } table tr[name$='y']{ background-color: blue; } table tr[name][class]{ background-color: yellow; } </style> <table border="1px" width="200px" height="200px"> <tr name="ttty"><td></td><td></td><td></td></tr> <tr name="ppp"><td></td><td></td><td></td></tr> </table> - 后代选择器：后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
- 子元素选择器：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
- 相邻兄弟选择器：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
- 伪类选择器：元素：...{css代码} 锚伪类：
-
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ -
在一个元素前后插入 :before{ content: } :after{ content: }
-
-
当一个元素是任何元素的第一个孩子的时候 :first-child{}
-
>C外部样式
外部样式，是引用外部css代码文件，css文件以.css为后缀，一个网站的N个页面可以共同引用同一个外部css文件，方便维护；
其中css文件里写 选择器{ css代码 }
在头标签内部使用link标签引用该文件：
<link type="text/css" rel="stylesheet" href="css/my.css" />>CSS 字体
浏览器字体大小默认为16px，10em=10*16 px；
HTML标签里的字体有继承属性，em/rem 两个相对大小的单位，用来做响应式布局时，字体随着你设置的body/html字体大小而设置；
字体属性：
| 属性 | 描述 |
|---|---|
| font | 简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
| font-family | 设置字体系列。 |
| font-size | 设置字体的尺寸。 |
| font-size-adjust | 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。） |
| font-stretch | 对字体进行水平拉伸。（CSS2.1 已删除该属性。） |
| font-style | 设置字体风格。 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 设置字体的粗细。 |
>CSS 文本
文本，我们关注颜色 、修饰、和对齐方式；
文本属性：
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| line-height | 设置行高。 |
| letter-spacing | 设置字符间距。 |
| text-align | 对齐元素中的文本。 |
| text-decoration | 向文本添加修饰。 |
| text-indent | 缩进元素中文本的首行。 |
| text-shadow | 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 |
| text-transform | 控制元素中的字母。 |
| unicode-bidi | 设置文本方向。 |
| white-space | 设置元素中空白的处理方式。 |
| word-spacing | 设置字间距。 |
>CSS 背景
注意：css里路径使用url();
背景属性：
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
>CSS 列表
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
列表属性(list)：
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中。 |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
| marker-offset |
>盒子/框模型
- element : 元素。
- padding : 内边距，也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距（css存在外边距合并，两个盒子取大的，不是单纯相加），也有资料将其翻译为空白或空白边。
- 可以使用margin：auto；实现块级元素居中，一般做布局时，外边距不建议使用；
图示：其中行框不建议调整盒子模型，块框可以调整；布局时先使用块div，再使用span；
形象的说：
>CSS 边框
|
属性 |
描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| border-left-style | 设置元素的左边框的样式。 |
| border-left-width | 设置元素的左边框的宽度。 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| border-right-color | 设置元素的右边框的颜色。 |
| border-right-style | 设置元素的右边框的样式。 |
| border-right-width | 设置元素的右边框的宽度。 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| border-top-color | 设置元素的上边框的颜色。 |
| border-top-style | 设置元素的上边框的样式。 |
| border-top-width | 设置元素的上边框的宽度。 |
>CSS 定位与浮动
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。
固定定位（绝对的进阶）：某元素脱离了文档流排版，绝对定位在屏幕上；原来元素在文档中的位置不会保留,其他元素会占据；并且不随页面的滚动而滚动；
相对定位：是将元素定位到和原来位置有一定位移的位置；原来元素在文档中的位置保留（其他元素不会占据，留空白）；
- 文档流（默认）：块级元素独占一行；行级元素和其他行级元素挤在一行；
- 浮动模式下：1.块级元素可以再一行显示；2.文字（行级）环绕行级元素；
- 绝对定位：某元素脱离了文档流排版，绝对定位在屏幕上；原来元素在文档中的位置不保留,其他元素会占据；
>display属性
none：不显示，也不占用文档流；
block：块框； inline：行框；
可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
>position 属性
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative（相对定位）
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute（绝对定位）
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed(固定定位)
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
>z-index 属性
调整元素在z轴上的覆盖顺序；
>DIV的opacity 属性
<div style="opacity: 0.1; background-color: #FF1493; width: 100px; height: 100px;"></div>>DIV的float 属性
浮动：从当前位置，腾空排列，腾出的位置，按正常文档流排序；
>DIV的clear 属性
清空：清空的是别人飘走后，腾空的位置要被补位的效果，也就是说不想补位；
>DIV内容溢出时可以使用overflow属性进行控制；
>文字环绕图片：文字环绕图片（将图片漂浮）
CSS 定位属性：
| 属性 | 描述 |
|---|---|
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 |
| clip | 设置元素的形状。元素被剪入这个形状之中，然后显示出来。 |
| vertical-align | 设置元素的垂直对齐方式。 |
| z-index | 设置元素的堆叠顺序。 |
>媒体查询，动态响应：
实现媒体查询：在html头部要添加上这句话；
<meta name="viewport" content="width=device-width, initial-scale=1">例子：div根据屏幕宽度，变化宽度；
<style type="text/css">
@media only screen and (max-width:1400px ) {
#m{width: 80%;}
}
@media only screen and (max-width:700px ) {
#m{width: 100%;}
}
</style>
<div id="m" style="width：80%; height: 1000px; background-color: aqua; margin: auto;" >>css3