CSS :Capcading Style Sheets 层叠样式表 或 级联样式表
引用方法
1、内联引用
<div style="background:red"></div>
2、嵌入引用
<head>
<style type="text/css">
div{
background:red;
}
</style>
</head>
3、链接引用
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
4.导入引用
<head>
<style type="text/css">
@import url(style.css)
</style>
</head>
注释
/* 注释内容 */
选择器
（一）单选择器
1、属性选择器 *{ }
2、标签选择器 标签名{ }
3、class选择器 .class值{ }
4、id选择器（唯一性） #id值{ }
（二）复合选择器
1、多元素选择器 选择器1,选择器2,选择器3{ }
2、后代元素选择器 元素 所属其所有后代该元素{ }
3、子元素选择器 元素>所属下代该子元素{ }
4、相邻元素选择器 元素+所有紧随的同级该元素{ }
（三）伪类选择器
1、元素:link{ } 正常状态 超级链接没有被访问
2、元素:visited{ } 访问过后状态 超级链接已经被访问
3、元素:hover{ } 鼠标放上状态 鼠标放在超级链接上面，但是并没有将鼠标的左键按下去
4、元素:active { } 鼠标放在元素上面时，点击的一瞬间
（四）属性选择器
[属性名] 选择所有拥有该属性的元素
[属性名="值"] 选择所有该属性等于这个值的元素
[属性名*=”字符串“] 选择所有该属性其值包含该字符串的元素
[属性名^="字符串"] 选择所有该属性其值开头符合此字符串的元素
[属性名$=”字符串“] 选择所有该属性其值以此字符串结尾的元素
（五）结构伪类选择器
1、E:first-child 匹配第一个孩子
2、E;last-child 匹配最后一个孩子
3、E:nth-child(n) 匹配第n个孩子
4、E:nth-child(2n)或 匹配偶数的孩子
E:nth-child(even)
5、E:nth-child(2n+1) 匹配奇数的孩子
E;nth-child(odd)
6、E:only-child 匹配有且只有一个孩子
（六）元素伪类选择器
1、:first-letter 操作当前元素中第一个字
2、:first-line 操作当前元素中第一行
3、::before 在之前插入，在一一个盒子内部的最前面(将文字放上在content中)
4、::after 在之后插入，在一个盒子内部的最后面(将文字放上在content中)
优先级
1、标签选择器 1
2、类选择器 10
3、ID选择器 100
4、行内样式 1000
值越大表示其优先级越高。
!important 可以无限提升属性优先级（为了避免属性被覆盖使用）
尺寸属性
width height background
span标签 不可以设置高宽，它是行标签
行标签是用后不换行，块标签用完直接换行
div是块级元素。
文本属性
1、color 设置颜色 #ffffff / red / rgb(3,4,5)
2、text-align 设置对齐方式 left / right / center
3、text-decoration 设置线 none / underline / overline / linethrough
4、text-transforme 设置文字转换 capitalize / uppercase / lowercase
5、Line-height 设置行高 px
6、text-indent 设置首行缩进 px或em
7、letter-spacing 设置字符间距 px
8、word-spacing 设置单词间距 px
列表属性
1、list-style-type 设置列表项样式 none / disc / sqare / circle
2、list-style-position 设置列表项标记的位置 inside / outside
3、list-style-image 设置图片为列表项标记 url
4、list-style 在一个申明中设置所有属性
背景属性
1、background-color 设置背景颜色 #ffffff / red / rgb(3,4,5)**
2、background-image 设置背景图片 url
3、background-repeat 设置图片覆盖区域的方式 repeat / repeat-x / repeat-y / no-repeat
4、background-position 背景图像起始位置(精灵图或雪碧图) x y
5、background-attachment 设置背景图片滚动或固定 scroll（滚动）/fixed（固定）
6、background 在一个申明中设置所有属性
继承性
并不是所有样式能被继承，只有 / 文本 / 与 / 字体样式 / 属性能被继承，其他样式属性不能被继承
标准文档流
从左到右，从上到下
1、空白折叠
2、高矮不齐、底部对齐
浮动 float
能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度!让多个元素排在同一行:行内元素的特性
1、浮动元素它脱离标准文档流它不再占用空间了
2、我们可以把浮动元素理解为“漂”
3、浮动元素它的层级要比标准文档流里面的元素层级要高，它会将标准文档流中的元素给压盖住
4、浮动元素它遇到了父元素的边框然后就停止了浮动
5、浮动元素它还会遇到上一个浮动元素后就停止了浮动
6、浮动元素浮动以后 其父元素不会再包裹着浮动元素
7、我们将行内元素进行浮动以后 那么这个行内元素它会变成块级元素
清除浮动
1、给浮动的父级元素设定固定高度（不建议）一般不设置高度，由其内容撑起高度适宜。
2、在浮动元素下面元素设置clear:both属性
3、overflow:hidden 原意是用来将溢出的部分进行隐藏 还可以用于清除浮动
盒子模型(padding+margin+border)
内容 (content) +内填充 (padding) +边框(border) +外边距( margin)
一个盒子的总宽度=盒子里面内容的宽度+左右两边的填充+左右两边的边框线
一个盒子的总高度=盒子里面内容的高度+上下两边的填充+上下两边的边框线
一个盒子中的主要属性: width、height、padding、border、marginu
padding与margin都是顺时针
margin竖直方向会塌陷（只取较大值），水平不会，浮动元素不会出现塌陷。
margin：0 auto; 水平居中
margin 用于来描述兄弟与兄弟元素之间的关系不是用于描述父子元素之间的关系。
描述父子元素的关系最好使用给其父元素设置 padding 属性。
border:粗细 线型 颜色;border: 1px solid #f00；
border-collapse 这个属性主要是用于来合并边框线 其值为：collapse
display属性
它是“显示”的意思，用来进行行内元素与块级元素之间的相互转换！将隐藏的元素显示或者将显示的元素进行隐藏。
Display 属性取值：inline (行内)、block (块级)、none (无)
1、将一个行内元素的 display 属性值设置为 block 后，这个元素就会被转换为块级元素（水平排版变垂直排布）
2、将一个块级元素的 display 属性设置 为 inline，这个元素就会从块级元素转换为行内元素（垂直排版变水平排版）
position属性
position:fixed 固定定位：它是相对于浏览器窗口来进行定位。不管页面如何滚动，固定定位元素显示的位置不会改变!
1、固定定位元素它脱离了标准文档流
2、固定定位元素的的层级比标准文档流里面的元素要高所以固定定位元素它会压盖住标准文档流里面的元素
3、固定定位元素它不再占用空间。
4、固定定位元素它显示的位置不会随着浏览器滚动而滚动
position:relative 相对定位：相对定位相当于“自己”来定位；
1.相对定位元素它没有脱离标准文档流
2.相对定位元素没有设置定位坐标，那么相对定位元素还在原来位置
3.相对定位元素设置了定位坐标，就会在原位置留下一个空白元素
4.相对定位元素会将标准文档流中的元素压盖住
5.相对定位元素的定位值可以为负数
position:absolute 绝对定位：绝对定位元素是相对于“祖先定位元素”来进行定位!一直往上级找是否有定位属性，没有则到浏览器窗口定位。(一般配合父级relative使用)
z-index属性
1、z-index 表示谁压盖着谁，数值大的会压盖住数值小的
2、只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有 z-index属性
3、z-index 的值是没有单位的,值是一个正整数,默认的 z-index 的值是0
4、如果定位元素没有设置 z-index 属性或者 z-index 值设置一样,那么写在 HTML 后面的定位前面的定位元素
阴影
文本阴影
text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色。
例：text-shadow: 3px 3px 3px #FFF；
盒子阴影
box-shadow: 水平方向的阴影 垂直方向的阴影 阴影的清晰度 阴影的大小 阴影的颜色 阴影的位置
例：box-shadow: 2px 2px 2px 2px #FFF outset;
圆角矩形
border-radius：左上 右上 右下 左下 （顺时针）
例：border-radius: 10px 20px 30px 40px;
透明度
Rgba（红色，绿色，蓝色，透明度）
opacity 0--1
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
