*CSS: 级联样式表
1.样式表的引入
-行内样式
-内部样式
-外部样式
样式冲突: 就近原则 样式不冲突: 样式合并
2.基本选择器(权值)
-标签选择器
-类选择器
.name{...}
-ID选择器
#name{...}
-通配选择器(*)
-群组选择器
选择器之间存在样式冲突: ID选择器 > 类选择器 > 标签选择器 > 通配选择器
3.层次选择器
E F : 选择E元素的后代F元素设定样式 【后代选择器】
E>F : 选择E元素的子F元素设定样式 【子类选择器】
E+F : 选择E元素的相邻兄弟元素F设定样式 【相邻兄弟选择器 】
E~F : 选择E元素的所有兄弟元素F设定样式 【通用兄弟选择器】
4.结构伪类选择器
先选择第N个儿子,再看此元素是否为要设定的元素。
E: first-child
E: nth-child
E: last-child
先筛选元素,再选择元素当中的第N个元素。
E: first-of-type
E: nth-of-type
E: last-of-type
5.超链接伪类选择器
a:link 点击之前
a:visited 点击后
a:hover 悬浮时
a:active 点击时
注意: a:link > a:visited > a:hover > a:active
6.CSS常用样式属
【背景属性】
background-color : 背景颜色
颜色表示方式: 1.英语单词 2.十六进制 例如: #00FFFF 3.rgb(0,255,255) 4.rgb(0,255,255,0.3)
background-image: 背景图片
background-repeat:背景平铺 [1.repeat 2.no-repeat 3.repeat-x 4.repeat-y]
background-position: 背景定位
background-size : 背景尺寸
background: 背景图片 背景颜色 背景定位 背景平铺
【文本属性】
color: 文本颜色
text-align:文本水平对齐方式
text-decoration: 文本装饰
text-indent: 文本缩进
line-height:行高
letter-spacing:字母间距
word-spacing: 字间距
text-shadow:文本阴影 [阴影颜色 X偏移 Y偏移 模糊半径]
【字体属性】
font-size: 字体大小
font-family: 字体系列
font-style : 字体风格
font-weight:字体粗细 [100-900]
font-variant :字体变形
font: 字体 [风格 粗细 大小 系列]
【列表属性】
list-style-type: 列表风格类型
list-style-image: 列表风格图片
list-style-position:列表标志定位
list-style:综合型列表风格
宽度: width
高度: height
-元素分类
1.块元素 p,hx,div,ul,li...
特点: 独占一行,有宽度和高度
2.内联元素 strong,em,img.....
特点: 不独占一行,没有宽度和高度
元素类型转换(display)
-block:块元素
-inline:行元素
-inlin-block:块-行元素
-none:没有