本文最后更新于:4 个月前
概念
Cascading Style Sheets :层叠样式表
层叠:多个样式可以作用在同一个html的元素上,同时生效
好处
- 功能强大
- 将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
使用方式
CSS与html结合方式
1.内联样式(作用域最小)
- 在标签内使用style属性指定css代码
- 如:
<div style="color:red;">hello css</div>
2.内部样式
- 在head标签内,定义style标签,style标签的标签体内容就是css代码
- 如:
<style> div{ color:blue; } </style> <div>hello css</div>
3.外部样式(作用域最大)
- 定义css资源文件。
- 在head标签内,定义link标签,引入外部的资源文件
- 如:
<!--a.css文件--> div{ color:green; } <!--html文件--> <link rel="stylesheet" href="css/a.css"> <div>hello css</div> <div>hello css</div>
特别注意
- 1,2,3种方式 css作用范围越来越大
- 第1方式不常用,后期常用第2,3种
- 第3种格式可以写为:
<style> @import "css/a.css"; </style>
语法格式
- 格式:
选择器 { 属性名1:属性值1; 属性名2:属性值2; ... }
- 选择器:
筛选具有相似特征的元素 - 注意:
每一对属性需要使用;
隔开,最后一对属性可以不加;
选择器
筛选具有相似特征的元素
分类
选择器分两种:
- 基础选择器
- 扩展选择器
基础选择器
id选择器
选择具体的id属性值的元素.建议在一个html页面中id值唯一
- 语法:
#id属性值{ 属性名1:属性值1; 属性名2:属性值2; ... }
元素选择器
选择具有相同标签名称的元素
- 语法:
标签名称{ 属性名1:属性值1; 属性名2:属性值2; ... }
- 注意:id选择器优先级高于元素选择器
类选择器
选择具有相同的class属性值的元素。
- 语法:
.class属性值{ 属性名1:属性值1; 属性名2:属性值2; ... }
- 注意:类选择器选择器优先级高于元素选择器
扩展选择器
选择所有元素
- 语法:
* { 属性名1:属性值1; 属性名2:属性值2; ... }
并集选择器
选择多个元素
- 语法:
选择器1, 选择器2 { 属性名1:属性值1; 属性名2:属性值2; ... }
子选择器
筛选 选择器1下 的 选择器2 元素
语法:
选择器1 选择器2{ 属性名1:属性值1; 属性名2:属性值2; ... }
区别于 子选择器:
- 多个选择器之间的分隔符,一个是逗号,一个是空格。
父选择器
筛选 选择器2 的 父元素选择器1
- 语法:
选择器1 > 选择器2{ 属性名1:属性值1; 属性名2:属性值2; ... }
属性选择器
选择元素名称,属性名=属性值的元素
- 语法:
元素名称 [属性名 = "属性值"] { 属性名1:属性值1; 属性名2:属性值2; ... }
伪类选择器
选择一些元素具有的状态
语法:
元素: 状态{ 属性名1:属性值1; 属性名2:属性值2; ... }
比如:
a:link{ color:red; } a:hover{ color: yellow; } a:visited{ color: blue; } a:active{ color: brown; }
<a>
的状态:
link:初始化的状态
visited:被访问过的状态
active:正在访问状态
hover:鼠标悬浮状态
属性
属性有字体、文本、背景、边框、尺寸……
字体、文本
边框
- border:设置边框,符合属性
尺寸
- width:宽度
- height:高度
盒子模型:控制布局
- margin:外边距
- padding:内边距
- 默认情况下内边距会影响整个盒子的大小
- box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
- float:浮动
- left
- right
实践案例
这里有 70个CSS实例
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!