-
概念:Cascading Style Sheets 层叠样式表
*层叠:多个样式可以作用在同一个html的元素上,同时生效
-
好处
1.功能强大 2.将内容的展示和样式的控制分离, * 降低耦合度。解耦 * 让分工协作更容易 * 提高开发的效率
-
CSS的使用:CSS和html的结合
1. 内联样式 * 在标签内使用 style 属性指定css样式 2. 内部样式 * 在head标签内,定义 style 标签,style标签的标签体就是css代码 3. 外部样式 * 定义css资源文件 * 在head标签内,定义 link 标签,引入外部的资源文件 * <link rel="stylesheet" href="./styles.css"> 注意: * 1,2,3 三种方式,css的作用范围越来越大 * 1方式不常用,后期常用2,3 * 还有一种格式可以写作 <style> @import "css/a.css"; </style>
-
CSS的语法
* 格式: 选择器{ 属性名1:属性值1; 属性名2:属性值2; 属性名3:属性值3;. ....... } * 每一对的属性需要分号隔开,最后一对属性可以不加分号
-
选择器:筛选具有相似特征的元素
* 基本选择器 1. id选择器:选择具体的 id 属性值的元素,建议在一个html页面中 id 唯一 * 语法:#id属性值{} 2. 元素选择器:选择具有相同标签名称的元素 * 语法:标签名称{} * 注意:id选择器优先级高于元素选择器 3. 类选择器:选择具有相同的class属性值的元素 * 语法:.class属性值{} * 注意:类选择器优先级高于元素选择器 优先级:类选择器 > id选择器 > 元素选择器 * 扩展选择器 1. 选择所有元素: * 语法:*{ } 2. 并集选择器: * 语法:选择器1,选择器2{ } 3. 子选择器:筛选选择器1元素下的选择器2元素 * 语法:选择器1 选择器2{ } 4. 父选择器:沙宣选择器2的父元素选择器1 * 语法:选择器1 > 选择器2{ } 5. 属性选择器:选择元素名称,属性名=属性值的元素 * 语法:元素名称[属性名=“属性值”]{} 6. 伪类选择器:选择一些元素具有的状态 * 语法:元素:状态{} * 如:<a> * 状态 * link:初始化的状态 * hover: 鼠标悬浮状态 * active:正在访问的状态 * visited:被访问的状态
6.属性
1 字体,文本
* font-size : 字体大小
* color:文本颜色
* text-align:对齐方式
* line-heighte:行高
2 背景
* background: url("") no-repeat center;
* 背景图片路径 不重复 居中
3 边框
* border:设置边框,复合属性
4 尺寸
* width:宽度
* height:高度
5 盒子模型:控制布局
* margin:外边距
* padding:内边距
* 默认情况下,内边距会影响整个盒子的大小
* box-sizing: border-box;设置盒子的属性,让width和height就是最终盒子的大小
* float:浮动
* left:左浮动
* right:右浮动
* 上下居中: vertical-align: middle;
* 左右居中:margin: auto;
##案例