1. 概述
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = 'key1:value1;key2:value2;'
- 行内式：
在标签中使用 style='xx:xxx;'单独加在某个标签上，style增加其他属性需要以分号分隔；
|
1
2
|
<div style
=
"height: 100px;width:100px"
>我是div
<
/
div>
|
- 嵌入式：
在页面中嵌入 < style type="text/css"> </style >块
|
1
2
3
4
5
6
7
8
9
10
11
|
<head>
<meta charset
=
"UTF-8"
>
<title>Title<
/
title>
<style>
div{
background
-
color:darkgrey;
height:
100px
;
width:
100px
;
}
<
/
style>
<
/
head>
|
- 链接式：
将.css文件引入到HTML文件中，创建一个.css文件，将css文件放入link标签中
|
1
2
3
4
5
|
<head>
<meta charset
=
"UTF-8"
>
<title>Title<
/
title>
<link href
=
"mystyle.css"
rel
=
"stylesheet"
type
=
"text/css"
/
>
<
/
head>
|
- 导入式：
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中
|
1
2
3
4
5
6
7
|
<head>
<meta charset
=
"UTF-8"
>
<title>Title<
/
title>
<style
type
=
"text/css"
>
@import
"mystyle.css"
;
#此处要注意.css文件的路径
<
/
style>
<
/
head>
|
注意：import 会先解析页面所有信息，先不会渲染页面，等待所有信息加载后再渲染页面，如果加载慢会出现无渲染页面，导致用户体验不好，推荐使用嵌入式和链接式
2. CSS选择器
2.1 基础选择器
2.1.1 通用元素选择器
通用元素选择器，匹配任何元素
|
1
2
3
|
*
{
color: darkgrey;
}
|
2.1.2 标签选择器
匹配所有使用XX标签的元素；
例如，需要选择所有标签为div的元素设置样式
|
1
2
3
4
|
div{
color: grey;
background
-
color: antiquewhite;
}
|
2.1.3 class选择器
.info 或E.info ：class属性选择器，匹配所有class属性中包含info的元素，class属性可以重复，即多个class属性相同的元素；
|
1
2
3
4
5
6
7
8
9
|
.cs1{
color: grey;
background
-
color: antiquewhite;
}
<div
class
=
"cs1"
>我是div1标签<
/
div>
<div
class
=
"cs1"
>我是div2标签<
/
div>
<p
class
=
"cs1"
>我是p标签<
/
p>
<!
-
-
以上三个标签都会变成.cs1的样式
-
-
>
|
2.1.4 id选择器
#info或E#info :id属性选择器，匹配所有id属性等于info的元素
|
1
2
3
4
5
6
7
8
|
#cs1{
color: grey;
background
-
color: antiquewhite;
}
<div
id
=
"cs1"
>我是div1标签<
/
div>
<div
class
=
"cs1"
>我是div2标签<
/
div>
<!
-
-
以上标签，只有
id
=
cs1的标签会变成
#cs1的样式-->
|
2.2 组合选择器
2.2.1 多元素选择器
E,F：多元素选择器，同时匹配所有E标签元素或F标签元素，E和F之间用逗号分隔
|
1
2
3
4
5
6
7
8
9
|
div,p{
color: grey;
background
-
color: antiquewhite;
}
<div
id
=
"cs1"
>我是div1标签<
/
div>
<p
class
=
"cs1"
>我是p标签<
/
p>
<span>我是span<
/
span>
<!
-
-
以上标签，除span标签，即div和p标签都会变成设置的样式
-
-
>
|
2.2.2 后代元素选择器
E F：后代元素选择器，匹配所有属于E标签元素后代的F标签元素，即所有类似形式的所有后代，子子孙孙，E和F之间用空格分隔;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
div p{
color: grey;
background
-
color: antiquewhite;
}
<div
id
=
"cs1"
>
<p
class
=
"cs1"
>我是p1标签<
/
p>
<div
class
=
"cs3"
>
<p
class
=
"cs1"
>我是p2标签<
/
p>
<div
class
=
"cs2"
>
<p
id
=
"cs1"
>我是p3标签<
/
p>
<
/
div>
<
/
div>
<
/
div>
<!
-
-
以上标签，p1、p2、p3均会变成设置的样式
-
-
>
<!
-
-
扩展：可以结合基础选择器使用，例如div
#cs1，div .cs1等 -->
|
2.2.3 子元素选择器
E > F ：子元素选择器，匹配所有E元素的子元素F，只匹配到子元素，子元素的子元素匹配不到;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<style>
#outer>.c1{
color: aqua;
}
<
/
style>
<div
id
=
"outer"
>
<p
class
=
"c1"
>p1.....<
/
p>
<div
class
=
"c2"
>
<p
class
=
"c1"
>p2....<
/
p>
<
/
div>
<
/
div>
<!
-
-
以上标签，p1会变成设置的样式，p2不会变，即儿子辈的会变，儿子辈的后代不会变
-
-
>
|
2.2.4 毗邻元素选择器
E + F:毗邻元素选择器，匹配所有紧随E元素之后的同级元素F ，即只匹配挨着的下一个F元素，如不相邻也不起作用;
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<style>
#outer+.c1{
color: aqua;
}
<
/
style>
<p
class
=
"c1"
>p1....<
/
p>
<div
id
=
"outer"
>
<
/
div>
<p
class
=
"c1"
>p2.....<
/
p>
<div
class
=
"c1"
>div1...<
/
div>
<!
-
-
以上标签，p1不会变更样式，p2为挨着的下一个
class
=
c1的元素，所以p2会变更样式，div1的
class
属性也满足但并未挨着
id
=
outer的元素，故不起作用
-
-
>
|
2.3 属性选择器
根据属性进行筛选匹配，只有第一个input标签匹配上对应的样式
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<head>
<meta charset
=
"UTF-8"
>
<title>Title<
/
title>
<style>
input
[name
=
"James"
]{width:
20px
;height:
20px
;}
<
/
style>
<
/
head>
<body>
<
input
type
=
"text"
name
=
"James"
>
<
input
type
=
"text"
>
<
input
type
=
"password"
>
<
/
body>
|
3. 常用属性
3.1 颜色属性
color：
①英文单词形式，例如：red，yellow
②编码形式，例如：#cc3399，如双重可简写#c39
③基调颜色透明度设置，例如：rgb（255,255,255,0.5），red、green、blue三色透明度设置,最后一个值设置透明度
3.2 字体属性
font-size: 20px/50%/larger 设置字体大小；
font-family:'Lucida Bright' 文本的字体系列；
font-weight: lighter/bold/border/ 字体的粗细；
font-style:normal/oblique/italic 文本的字体样式；
3.3 背景属性
background-color: 背景底色；
background-image: 背景图片；
background-repeat：平铺方式，no-repeat 不平铺，repeat 平铺满；
background-size: 图片大小设置，auto；
background-position：center 上下左右居中；left center左侧上下居中；top，bottom，right类似；
3.4 文本属性
text-align：center 文本居中
line-height：xxpx；行高 ，针对文本处理
width：xxpx；宽 %50
height：xxpx；高 %50
text-indent：xxpx 首行缩进，基于父元素
letter-spacing：xxpx；字母与字母之间距离
word-spacing：xxpx ；单词之间距离
direction：rt1
text-transform：capitalize；将单词首字母大写
min-height:设置默认最小高度
height：auto！important 以此样式为准
vertical-align：xxpx;垂直居中
opacity：0.3 透明度
3.5 CSS样式边框
border-style：solid；边框样式
border-color：red；边框颜色
border-width：1px；边框宽度
border-radius：20%；边框变成圆角
| border | 在一个声明中设置所有的边框属性。 |
| border-bottom | 在一个声明中设置所有的下边框属性。 |
| border-bottom-color | 设置下边框的颜色。 |
| border-bottom-style | 设置下边框的样式。 |
| border-bottom-width | 设置下边框的宽度。 |
| border-color | 设置四条边框的颜色。 |
| border-left | 在一个声明中设置所有的左边框属性。 |
| border-left-color | 设置左边框的颜色。 |
| border-left-style | 设置左边框的样式。 |
| border-left-width | 设置左边框的宽度。 |
| border-right | 在一个声明中设置所有的右边框属性。 |
| border-right-color | 设置右边框的颜色。 |
| border-right-style | 设置右边框的样式。 |
| border-right-width | 设置右边框的宽度。 |
| border-style | 设置四条边框的样式。 |
| border-top | 在一个声明中设置所有的上边框属性。 |
| border-top-color | 设置上边框的颜色。 |
| border-top-style | 设置上边框的样式。 |
| border-top-width | 设置上边框的宽度。 |
| border-width | 设置四条边框的宽度。 |
| outline | 在一个声明中设置所有的轮廓属性。 |
| outline-color | 设置轮廓的颜色。 |
| outline-style | 设置轮廓的样式。 |
| outline-width | 设置轮廓的宽度。 |
| border-bottom-left-radius | 定义边框左下角的形状。 |
| border-bottom-right-radius | 定义边框右下角的形状。 |
| border-image | 简写属性，设置所有 border-image-* 属性。 |
| border-image-outset | 规定边框图像区域超出边框的量。 |
| border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
| border-image-slice | 规定图像边框的向内偏移。 |
| border-image-source | 规定用作边框的图片。 |
| border-image-width | 规定图片边框的宽度。 |
| border-radius | 简写属性，设置所有四个 border-*-radius属性。 |
| border-top-left-radius | 定义边框左上角的形状。 |
| border-top-right-radius | 定义边框右下角的形状。 |
| box-decoration-break | |
| box-shadow | 向方框添加一个或多个阴影。 |
简写方式：
|
1
|
border: solid
1px
red
|
3.6 CSS样式浮动
正常文档流：将元素（标签）在进行排版布局时按照从上到下、从左到右的顺序分布排版的流；
脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在该元素重新布局；
float 浮动标签属性（非完全脱离）：
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
注意：当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。
float：left，right，both
清除浮动： clear : none | left | right | both
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
|
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
29
30
31
32
33
34
35
36
37
|
<style>
#div4{
border:solid
1px
lavender;
background
-
color: rebeccapurple;
height:
100px
;
}
#div1{
background
-
color: darkolivegreen;
height:
100px
;
width:
980px
;
margin: auto;
}
#div2{
border
-
left: solid
1px
lavender;
height:
100px
;
width:
100px
;
background
-
color: darkgray;
float
: left;
}
#div3{
border
-
left: solid
1px
lavender;
height:
100px
;
width:
100px
;
background
-
color: darkgray;
float
: left;
}
#clear{
clear:both;
}
<
/
style>
<div
id
=
"div4"
>
<div
id
=
"div1"
>
<div
id
=
"div2"
>div2<
/
div>
<div
id
=
"div3"
>div3<
/
div>
<
/
div>
<div
id
=
"clear"
><
/
div>
<
/
div>
|
注：div2和div3使用float浮动起来，如想将div4的样式显示出来，需增加一个clear标签将架子撑起来，清除浮动
清除浮动第二种方法，overflow：hidden 将溢出的信息隐藏
overflow：auto;不光隐藏并出现滚动条
3.7 CSS样式display
块级标签和行内标签相互转换
|
1
2
3
4
|
<body>
<div style
=
"display: inline"
>块级<
/
div>
<span style
=
"display: block"
>行内<
/
span>
<
/
body>
|
注：display:inline 转换为行内标签；display：block转换为块级标签；另还有display：none不显示
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
|
1
2
3
4
|
<body>
<span style
=
"display: inline-block;height: 50px;width: 70px"
>行内<
/
span>
<div style
=
"display: inline"
>块级<
/
div>
<
/
body>
|
注：display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）
3.8 CSS样式边距
外边距margin
|
1
2
3
4
5
6
|
<body>
<div style
=
"border: 2px solid red;height: 70px;"
>
<div style
=
"background
-
color: green;height:
50px
;
margin
-
top:
25px
;"><
/
div>
<
/
div>
<
/
body>
|
内边距padding
|
1
2
3
4
5
6
|
<body>
<div style
=
"border: 2px solid red;height: 70px;"
>
<div style
=
"background
-
color: green;height:
50px
;
padding
-
top:
25px
;"><
/
div>
<
/
div>
<
/
body>
|