CSS语法格式
选择器{
属性名1:属性值1;
属性名2:属性值2;
…
}
- 选择器:筛选具有类似特征的元素
- 注意:每一对属性需要用分号隔开,最后一个属性后可以不加分号
选择器
分类
基础选择器
- id选择器:选择具有id属性值的元素,建议在一个huml页面中id唯一
#id属性值{} - 元素选择器:选择具有相同标签名的元素
标签名{} - 类选择器:选择机油箱同class类属性值的元素
.class属性值{}
优先级:id选择器>类选择器>元素选择器
扩展选择器
- 选择所有元素 *{}
- 并集选择器 选择器1,选择器2{}
- 子选择器 选择器1 选择器2{}(只能对子选择器2生效)
- 后代选择器 选择器1>选择器2{}(能对子孙生效)
- 伪类选择器 选择一些元素具有的状态(链接a)
状态:
a:link{}:初始化的状态
a:hover{}:鼠标悬浮状态
a.active{}:正在访问的状态
a.visited{}:被访问过的状态
属性
- 字体、文本
font-size:文本大小
color:文本颜色
text-align:对齐方式
lint-height:行高 - 背景
background - 边框
border 复合属性 - 尺寸
width:宽度
height:高度 - 盒子模型(相对概念)
margin:外边距
padding:内边距(默认情况下内边距会影响整个盒子的大小,box-sizing:border-box;设置盒子的属性,让width和height就是最终盒子的大小)
float:浮动(left right)</