CSS
Cascading Style Sheets 层叠样式表
层叠 -> 多个样式可以作用在同一个html元素上
1. CSS分类
- 内联 ->
<div style="color: darkorange">Hello CSS</div>
- 内部 -> head 标签定义
- 外部 ->
<link rel="stylesheet" href="css/8.css">
2.CSS语法
- 格式:
- 选择器 -> 筛选具有相似特征的元素
选择器 {
属性名1: 属性值1;
属性名2: 属性值2;
...
}
- 选择器
- 分类:
- 基础选择器
- id选择器
- 语法 ->
#id属性值{}
- 语法 ->
- 元素选择器
- 语法 ->
标签名{}
- 语法 ->
- 类选择器
- 语法 ->
.class属性值{}
- 语法 ->
- id选择器
- 扩展选择器
- 所有选择器 ->
*{}
- 并集选择器 ->
选择器1,选择器2{}
- 子选择器 ->
父选择器1 子选择器2{}
- 夫选择器 ->
父选择器1 > 子选择器2{}
- 属性选择器 ->
元素名称[属性名="属性值"]{}
- 伪类选择器 ->
元素:状态{}
- 所有选择器 ->
- 基础选择器
- 分类:
- 属性
- 字体, 文本
font-size
: 字体大小color
: 文本颜色text-align
: 对齐方式line-height
: 行高
- 背景
background
: 背景
- 边框
border
: 边框
- 尺寸
width
: 宽度hright
: 高度box-sizing: border-box
: 固定大小
- 盒子模型 - 控制布局
margin
: 外边距 - 上右下左padding
: 内边距 - 上右下左float
: 浮动
- 字体, 文本