选择器:筛选具有相似特征的元素 * 分类: 1. 基础选择器 1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一 * 语法:#id属性值{} 2. 元素选择器:选择具有相同标签名称的元素 * 语法: 标签名称{} * 注意:id选择器优先级高于元素选择器 3. 类选择器:选择具有相同的class属性值的元素。 * 语法:.class属性值{} * 注意:类选择器选择器优先级高于元素选择器 2. 扩展选择器: 1. 选择所有元素: * 语法: *{} 2. 并集选择器: * 选择器1,选择器2{} 3. 子选择器:筛选选择器1元素下的选择器2元素 * 语法: 选择器1 选择器2{} 4. 父选择器:筛选选择器2的父元素选择器1 * 语法: 选择器1 > 选择器2{} 5. 属性选择器:选择元素名称,属性名=属性值的元素 * 语法: 元素名称[属性名="属性值"]{} 6. 伪类选择器:选择一些元素具有的状态 * 语法: 元素:状态{} * 如: <a> * 状态: * link:初始化的状态 * visited:被访问过的状态 * active:正在访问状态 * hover:鼠标悬浮状态
属性 1. 字体、文本 * font-size:字体大小 * color:文本颜色 * text-align:对其方式 * line-height:行高 2. 背景 * background: 3. 边框 * border:设置边框,符合属性 4. 尺寸 * width:宽度 * height:高度 5. 盒子模型:控制布局 * margin:外边距 * padding:内边距 * 默认情况下内边距会影响整个盒子的大小 * box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小 * float:浮动 * left * right