CSS

W3C CSS教程
W3C CSS3 教程
W3C CSS参考手册

概念

Cascading Style Sheets 层叠样式表

层叠:多个样式可以作用在同一个html的元素上,同时生效

好处

1
2
3
4
5
1. 功能强大
2. 将内容展示和样式控制分离
* 降低耦合度。解耦
* 让分工协作更容易
* 提高开发效率

使用方式

  1. 内联样式(不推荐)
    1
    2
    * 在标签内使用style属性指定css代码
    * 如:<div style="color:red;">hello css</div>
  2. 内部样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    * 在head标签内,定义style标签,style标签的标签体内容就是css代码
    * 如:
    <style>
    div{
    color:blue;
    }

    </style>
    <div>hello css</div>
  3. 外部样式(常用)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    1. 定义css资源文件。
    2. 在head标签内,定义link标签,引入外部的资源文件
    * 如:
    * a.css文件:
    div{
    color:green;
    }
    <link rel="stylesheet" href="css/a.css">
    <div>hello css</div>

    * 也可以写为
    <style>
    @import "css/a.css";
    </style>

语法

1
2
3
4
5
6
7
8
9
* 格式:
选择器 {
/*我是注释*/
属性名1:属性值1;
属性名2:属性值2;
...
}
* 选择器:筛选具有相似特征的元素
* 注意:每一对属性需要使用分号;隔开,最后一对属性可以不加

选择器

CSS选择器
:筛选具有相似特征的元素

id选择器

1
2
:选择具体的id属性值的元素.建议在一个html页面中id值唯一
* 语法:#id属性值{}

元素选择器

1
2
3
:选择具有相同标签名称的元素
* 语法: 标签名称{}
* 注意:id选择器优先级高于元素选择器

类选择器

1
2
3
:选择具有相同的class属性值的元素。
* 语法:.class属性值{}
* 注意:类选择器选择器优先级高于元素选择器

通配符选择器

1
* 语法: *{}

并集选择器

1
2
* 选择器1,选择器2{}
* div,p{}

后代选择器

1
2
3
:筛选1下的所有2元素
* 语法: 选择器1 选择器2{}
* div p{}

子选择器

1
2
3
:筛选只在1下的2元素
* 语法: 选择器1 > 选择器2{}
* ul > li {}

属性选择器

1
2
3
:选择元素名称,属性名=属性值的元素
* 语法: 元素名称[属性名="属性值"]{}
* input[type='text']{}

伪类选择器

1
2
3
4
5
6
7
8
9
:选择一些元素具有的状态
* 语法: 元素:状态{}
* 如: <a>
* 状态:
* link:初始化的状态
* visited:被访问过的状态
* active:正在访问状态
* hover:鼠标悬浮状态
* a:hover{}

属性

CSS参考手册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1. 字体、文本
* font-size:字体大小
* color:文本颜色
* text-align:文字对其方式
* vertical-align: middle;元素竖直对齐
* line-height:行高
2. 背景
* background:
background: url("img/logo.jpg") no-repeat center;
3. 边框
* border:设置边框,符合属性
border: 1px solid red;
4. 尺寸
* width:宽度
* height:高度
5. 盒子模型:控制布局
* 对应参数
* 4 上右下左
* 3 上 右左 下
* 2 上下 右左
* 1 全部
* margin:外边距
* padding:内边距
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
* float:浮动
* left
* right

flex弹性布局