CSS：层叠样式表
CSS优先级
内联样式 > 内部样式表 > 外部样式表
ID选择器 > 类选择器 > 标签选择器
选择器
- 标签选择器
- 类选择器
- ID选择器
选择器 {
属性：值；
}
CSS样式
- 内联样式—标签后+style，特定标签
- 内部样式表
- 外部样式表（创建 . css文件）
文本属性
color：文本颜色
text - align：对齐方式；left、right、center
text - indent：首行缩进；px、em
line - height：文本行高
text - decoration：文本装饰
none：无
underline：下划线
overline：上划线
line - through：删除线
垂直对齐：vertical - align
middle：中间、top：上、bottom：下
阴影：text - shadow：阴影颜色、水平位移、垂直位移、模糊范围
font - family：字体类型
font - size：字体大小
font - style：字体风格
font - weight：字体粗细
font - weight属性：
normal：正常字体
bold：粗体字体
bolder：更粗字体
lighter：更细字体
font：font-style font - weight font - size font - family
font：字体风格——字体粗细——字体大小——字体类型
链接样式
a：link：未单机访问
a：visited：单机访问后
a：hover：鼠标悬浮其上的样式
a：active：单机未释放的样式
例如： a：hover {
color：#ff0000；
}
顺序：a : link > a : visited > a : hover > a : active
引入css
- 内联样式
<p style=" "></p>
- 内部样式表
<style></style>
- 外部样式表
创建一个外部的css文件 : * . css , 把样式写在这个文件中
(1) 链接式（优先选择）
<link rel= " stylesheet " href= " 路径 " / >
(2) 导入式
<style>
@ import " css / types . css " ;
</style>
链接式与导入式区别：
链接式：先加载css后显示页面；
导入式：先显示页面后加载css
背景属性
background-img；background-color
背景尺寸：background - size
auto：默认，保持原来的
percentage：相对于元素宽度
cover：填充整个
contain：适应定义背景区域
背景颜色：background - color transparent：透明
背景图片：background - image：url（路径）；
背景重复：background - repeat
repeat：沿水平和垂直方向平铺
no - repeat：只显示一次
repeat - x：只沿水平方向平铺
repeat - y：只沿垂直方向平铺
角弧度：border - radius：左上右上右下左下（顺时针）——上右下左
扇形：三同：宽高半径
一不同：圆角取值位置
背景渐变色：linear - gradient（方向，颜色1，颜色2......）
background : - webkit - linear - gradient ( to top,orange,blue ) ; <!--要支持其他内核浏览器，把相应的前缀加上即可（-webkit）-->
选择器
交集选择器、并集选择器、子选择器、后代选择器、属性选择器
盒子模型
边框：border 外边距：margin 内边距：padding
border - color：上右下左
上边框颜色：border - top - color、右边框颜色：border - right - color
下边框颜色：border - bottom - color、左边框颜色：border - left - color
border - style：dotted点线 dashed虚线 soild实线 double双线
none无
盒模型：border + padding + margin + 内容宽度
盒子阴影：box—shadow：类型 x y 范围 颜色
标准文档流
1.块级元素
2.内联元素
内联元素可以包含块级元素，成为子元素，反之不成立
display
block块元素 inline行内元素 inline—block行内块 none无
浮动
float：left、right
1.可以决定排列方向
2.浮动以后脱离文档流、对周围元素产生影响、必须在它的父级上添加清除浮动的样式
清除浮动
clear：left、right、both（清除两侧浮动）
1.浮动元素后面添加div
简单，空div会造成代码重复
2.设置父元素的高度
简单，固定高，降低扩展性
3.父级添加overflow属性
简单，下拉列表框不能用
4.父级添加伪类after
稍复杂，无副作用
overflow：
visible：默认值，多出的内容在盒子之外
hidden：其余内容被剪掉，不可见
scroll：内容被修剪，呈现滚动条
auto：内容被修剪，呈现竖滚动条，没有超出的内容就没有滚动条
父级添加伪类
例如：
.clear:after {
content : ‘ ‘ ; 添加空内容
display : block ; 转成块元素
clear : both ; 清除两侧浮动
}
定位
position：relative 相对定位
相对路径的定位为相反方向
position：absolute 绝对定位
position：fixed 固定定位
图层
图层优先级：
z - index : 1; （默认优先级为0）
图层透明度：
opacity : x ; （ x 范围 0 - 1 越小越透明）
filter : alpha ( opacity = x ) ; x 范围 0 - 100 越小越透明
注释
/* */
css
原文：https://www.cnblogs.com/3-14/p/11190683.html
