一、基本概念
CSS 主要用于页面美化和布局控制
Cascading Style Sheets 层叠样式表
层叠:多个样式可以作用在同一个html的元素上,同时生效
1. 功能强大
2. 将内容展示和样式控制分离
* 降低耦合度。解耦(耦合度:模块之间的关联程度)
* 让分工协作更容易
* 提高开发效率
二、使用方式
CSS的使用方式指的是与CSS与html结合方式
- 内联样式(不推荐使用,并没有达到样式内容分离的目标)
* 在标签内使用style属性指定css代码
* 如:<div style="color:red;">hello css</div>
- 内部样式
* 在head标签内,定义style标签,style标签的标签体内容就是css代码
* 如:
<style>
div{
color:blue;
}
</style>
- 外部样式
1. 定义 css 资源文件。
2. 在head标签内,定义link标签,引入外部的资源文件
* 如:
* a.css文件:
div{
color:green;
}
* <link> 标签定义文档与外部资源的关系。
<link rel="stylesheet" href="css/a.css">
注意:
* 1,2,3 种方式 css作用范围越来越大
* 第1种方式不常用,后期常用2,3
* 第3种格式可以写为:
<style>
@import "css/a.css";
</style>
三、css语法
格式:
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
选择器筛选具有相似特征的元素
注意:每一对属性需要使用;隔开,最后一对属性可以不加;
案例参考
四、选择器
选择器筛选具有相似特征的元素
1. 基础选择器
(1)id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
* 语法:#id属性值{}
(2)元素选择器:选择具有相同标签名称的元素
* 语法: 标签名称{}
* 注意:id选择器优先级高于元素选择器
案例参考
(3)类选择器:选择具有相同的class属性值的元素。
* 语法:.class属性值{}
* 注意:类选择器选择器优先级高于元素选择器
2. 扩展选择器
(1)选择所有元素:
* 语法: *{}
案例参考
(2)并集选择器:
* 选择器1,选择器2{}
(3)子选择器:筛选选择器 1 元素下的选择器 2 元素
* 语法: 选择器1 选择器2{}
案例参考
(4)父选择器:选择父元素为
元素的所有
元素。
* 语法: div>p
案例参考
(5) 属性选择器:选择元素名称,属性名=属性值的元素
* 语法: 元素名称[属性名="属性值"]{}
(6)伪类选择器:选择一些元素具有的状态
* link:初始化的状态
* visited:被访问过的状态
* active:正在访问状态
* hover:鼠标悬浮状态
五、属性
- 字体、文本
* font-size:字体大小
* color:文本颜色
* text-align:对其方式
* line-height:行高
- 背景
* background
- 边框
* border:设置边框,符合属性
- 尺寸
* width:宽度
* height:高度
- 盒子模型:控制布局
* margin:外边距
* padding:内边距
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
* float:浮动
* left
* right