初识 CSS
层叠样式表（英语：Cascading Style Sheets，简写CSS）一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
h1 {color:red; font-size:14px;}
CSS引入方式
<p style="background-color: red">Hello World</p> <!-- 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 -->
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: red; } </style> </head> <!-- 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中 -->
<style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style> <!-- 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中 -->
<link href="mystyle.css" rel="stylesheet" type="text/css"/> <!-- 将一个.css文件引入到HTML文件中 -->
注意：为什么推荐使用链接式引入css渲染html
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。CSS的选择器
基本选择器
<!-- * 匹配所有标签 E 匹配标签(E为何种标签) .info 匹配class对应值为info的标签 E.info 匹配标签E class对应值为info的标签 #info 匹配id对应值为info的标签 E#info 匹配标签E id对应值为info的标签 注意：id的值是唯一的 -->
组合选择器
<!-- E, F # 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 E F # 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 E > F # 子元素选择器，匹配所有E元素的子元素F(隔代无效果) E + F # 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F -->
属性选择器
<!-- E[att] # 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] E[att=val] # 匹配所有att属性等于“val”的E元素 E[att~=val] # 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 E[attr^=val] # 匹配属性值以指定值开头的每个元素 E[attr$=val] # 匹配属性值以指定值结尾的每个元素 E[attr*=val] # 匹配属性值中包含指定值的每个元素 -->
伪类与伪元素选择器
css引入伪类和伪元素概念是为了格式化文档树以外的信息。
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
伪类选择器：
<!-- a:link() 没有接触过的链接 用于定义了链接的常规状态。 a:hover() 鼠标放在链接上的状态 用于产生视觉效果。 transition-duration: 0.4s; 通过这条css代码可以渲染浮动速度 a:visited 访问过的链接 用于阅读文章，能清楚的判断已经访问过的链接。 a:active 在链接上按下鼠标时的状态 用于表现鼠标按下时的链接状态。 -->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style> p:first-letter {color:red;} </style> </head> <body> <p>Hello World, and wish you have a good day!</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style> li:first-child{color: red;} </style> </head> <body> <ul> <li>我是第一个</li> <li>我是第二个</li> </ul> </body> </html>
示例效果：
Hello World, and wish you have a good day!
- 我是第一个
- 我是第二个
<!-- CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。 然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。 对于伪元素是使用单冒号还是双冒号的问题，w3c标准中的描述如下： Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being. 大概的意思就是：虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，我们建议你在目前还是使用单冒号的写法。 实际上，伪元素使用单冒号还是双冒号很难说得清谁对谁错，你可以按照个人的喜好来选择某一种写法。 -->
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| .class | .intro | 选择 class="intro" 的所有元素。 |
| #id | #firstname | 选择 id="firstname" 的所有元素。 |
| * | * | 选择所有元素。 |
| element | p | 选择所有 <p> 元素。 |
| element,element | div,p | 选择所有 <div> 元素和所有 <p> 元素。 |
| element element | div p | 选择 <div> 元素内部的所有 <p> 元素。 |
| element>element | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。 |
| element+element | div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素。 |
| [attribute] | [target] | 选择带有 target 属性所有元素。 |
| [attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 |
| [attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 |
| :link | a:link | 选择所有未被访问的链接。 |
| :visited | a:visited | 选择所有已被访问的链接。 |
| :active | a:active | 选择活动链接。 |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 |
| :focus | input:focus | 选择获得焦点的 input 元素。 |
| :first-letter | p:first-letter | 选择每个 <p> 元素的首字母。 |
| :first-line | p:first-line | 选择每个 <p> 元素的首行。 |
| :first-child | p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 |
| :before | p:before | 在每个 <p> 元素的内容之前插入内容。 |
| :after | p:after | 在每个 <p> 元素的内容之后插入内容。 |
| :lang(language) | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 |
| element1~element2 | p~ul | 选择前面有 <p> 元素的每个 <ul> 元素。 |
| [attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 |
| [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 |
| [attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 |
| :first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 |
| :root | :root | 选择文档的根元素。 |
| :empty | p:empty | 选择没有子元素的每个 <p> 元素（包括文本节点）。 |
| :target | #news:target | 选择当前活动的 #news 元素。 |
| :enabled | input:enabled | 选择每个启用的 <input> 元素。 |
| :disabled | input:disabled | 选择每个禁用的 <input> 元素 |
| :checked | input:checked | 选择每个被选中的 <input> 元素。 |
| :not(selector) | :not(p) | 选择非 <p> 元素的每个元素。 |
| ::selection | ::selection | 选择被用户选取的元素部分。 |
了解更多请参考关于伪类与伪元素的文章：总结伪类与伪元素
CSS优先级和继承
继承
继承可以这样理解：后代的元素使用祖先的CSS样式，但是继承的优先级非常低，任何显示申明的规则都可以覆盖其继承样式。
注意：CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序.
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是:
- 内联样式表的权值最高 style=""－－－－－－－－1000;
- 统计选择符中的ID属性个数 #id －－－－－－－－－－100
- 统计选择符中的CLASS属性个数 .class －－－－－－－－－10
- 统计选择符中的HTML标签名个数 p －－－－－－－－－－－ 1
按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较.
当存在一个id 多个class类似的情况，这时候不需要相加比较，就是id权重最高。
- 文内的样式优先级为1000，所以始终高于外部定义。
- 有!important声明的规则高于一切。
- 如果!important声明冲突，则比较优先权。
- 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
- 由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
CSS常用属性
<div style="color:blueviolet">hello lcg</div> <div style="color:#ffee33">hello lcg</div> <div style="color:rgb(255,0,0)">hello lcg</div> <div style="color:rgba(255,0,0,0.5)">hello lcg</div>
<!-- font - size: 20px / 50 % / larger 字体大小 font - family: 'Lucida Bright' 字体种类 font - weight: lighter / bold / border / 字体粗细 <h1 style="font-style: oblique">斜体</h1> 字体样式 -->
<!-- background-color: cornflowerblue # 背景色 background-image: url('1.jpg'); # 背景图url background-size: 40% 100%; # 背景大小 background-repeat: no-repeat;(repeat:平铺满) background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom) 简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')"> <div style=" 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')"> 注意：如果将背景属性加在body上，要记得给body加上一个height，否则结果异常，这是 因为body为空，无法撑起背景图片；另外，如果此时要设置一个width＝100px，你也看不出效果，除非你设置出html。 -->
<!-- .contents{ position:fixed; height: 100%; 100%; } img{ position:absolute; z-index:-1; 100%; height:100%; top:0px; left:0px; } -->
text-align 属性规定元素中的文本的水平对齐方式。
- left 把文本排列到左边。默认值：由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐文本效果。
<!-- font-size: 10px; text-align: center; 居中 line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 text-indent: 150px; 首行缩进 text-transform: capitalize; 文本单词首字母大写 none 默认。定义带有小写字母和大写字母的标准的文本。 capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 lowercase 定义无大写字母，仅有小写字母。 inherit 规定应该从父元素继承 text-transform 属性的值。 text-shadow: 5px 5px 5px #FF0000; 文本阴影 水平阴影、垂直阴影、模糊距离，以及阴影的颜色 letter-spacing: 10px; 字符间距 word-spacing: 20px; 英文单词间距 -->
vertical-align 垂直高度
<style> #i1{vertical-align: bottom;} </style> <div>这日子没发过了<img src="riz.png" alt="" id="i1"></div>
<!-- box-shadow:10px 10px 5px #888888; 边框阴影 添加一个或多个阴影 border-style: solid; 边框样式 border-color: chartreuse; 边框颜色 border- 20px; 边框宽度 border-radius: 3px; 圆角边框 border-image: url(filepath) 30 30 round 图片边框 简写：border: 20px rebeccapurple solid; 顺序无需注重 -->
ul,ol{ list-style: decimal-leading-zero; list-style: none; <br> list-style: circle; list-style: upper-alpha; list-style: disc; }
<!-- none block 变为块级标签 inline 变为内联标签 inline-block 既有内联又有块级(不自占一行，可设置长宽) -->
外边距(margine)与内边距(padding)
盒子模型
margin : 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding : 用于控制内容与边框之间的距离；
Border(边框) : 围绕在内边距和内容外的边框。
Content(内容) : 盒子的内容，显示文本和图像。
<!-- 简写属性 ：上 右 下 左 margin:10px 20px 20px 10px； 上边距为10px 右边距为20px 下边距为20px 左边距为10px margin:10px 20px 10px; 上边距为10px 左右边距为20px 下边距为10px margin:10px 20px; 上下边距为10px 左右边距为20px margin:25px; 所有的4个边距都是25px margin:0 auto -->
注意：边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，解决方法是将body的设置margin设置为0
body{
margin: 0;
}
.....
float浮动
基本浮动规则：
先来了解一下block元素和inline元素在文档流中的排列方式。
block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。一般block元素可以设置width、height、margin、padding属性；
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效
- 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .r1{ width: 300px; height: 100px; background-color: #7A77C8; float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; /*float: left;*/ } .r3{ width: 100px; height: 200px; background-color: darkgreen; float: left; } </style> </head> <body> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> </body> </html>
都不浮动
r2不浮动r1 r3浮动
都浮动
解决父级坍塌：
.clearfix:after{
content: '';
display: block;
clear: both;
position 定位
position(定位)
1 static
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
2 position: relative／absolute
position:relative 相对定位。
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
position:absolute 绝对定位。
设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。
position:fixed
对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
补充
透明度：
opacity: 0.5;
持续更新中......