一、首先介绍如何使用css样式
1、内联样式
通过style属性来控制标签显示的样式
<h1 style="color: red;font-size: 20px">内联样式</h1>
2、内部样式表
在html的头部定义一个style的标签，定义某个标签的css的样式，比如可以定义
a、现在head中定义style标签
<style>
h2{
color: blue;
font-size: 10px;
}
h3{
color: palevioletred;
font-size: 20px;
}
h1{
color: aqua;
}
</style>
b、在body中使用该css样式
<h2>内部样式表</h2>
<h3>内部样式表</h3>
如果内部样式表和内联样式表有冲突，那么哪个会生效呢，实际测试，发现内联样式的生效优先级高于内部样式表
3、外联样式
定义一个stylesheet文件这个文件中定义某个标签的样式，然后在html文件中通过link去引入文件，这样html中对应的标签就会使用stylesheet文件中定义的样式
a、定义一个stylesheet文件，文件的内容如下
div{
color: palevioletred;
font-size: 20px;
}
h1{
color:green;
font-size: 10px;
}
b、在html文件中使用
<div>外联样式</div>
<link type="text/css" href="css.css" rel="stylesheet">
二、css的语法规则
div{
color: palevioletred;
font-size: 20px;
}
选择器
元素
class
声明
属性名
属性值
比如div这里就是选择器，color是属性名，palevioletred是属性值
.xdd{
color: palevioletred;
font-size: 20px;
}
<p class="xdd"></p>
比如这里的例子，定义个样式，名称为.xdd，然后在标签中通过class属性来设定该标签的样式
三、css的属性
1、css定义颜色
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
color定义字体的颜色 定义css样式 <style> .xxx{ color: red; } .yyy{ color: blue; } p{ color:brown; } </style> 使用定义的样式 <p class="xxx">第一个段落1</p> <p class="yyy">第一个段落2</p> <p>第一个段落3</p> <p>第一个段落4</p> |
2、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
|
<style> body{ 设置背景颜色 background: url("../1.ico"); 设置背景图片 background-repeat: no-repeat; 设置背景图片不重复 /*background-repeat: repeat-x;*/ 设置背景图片横向重复 /*background-repeat: repeat-y;*/ 设置背景图片纵向重复 /*background-repeat: repeat;*/ 设置备份图片横向纵向同时重复 background-position: right top; 设置背景图片的位置 /*background-position: 10px 20px;*/ 设置背景图片的位置，用像素的方式 /*background-position: 20% 30%;*/ 设置背景图片的位置，用百分比的方式 background-attachment: fixed; 设置背景图片固定 } </style> |
3、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
29
30
31
32
33
34
35
36
37
|
css定义边框属性 p{ border- 4px; 设置边框的宽度 border-style: solid; 设置边框的风格类型 border-color: aquamarine; 设置边框的颜色 border-radius: 50px; 设置边框的圆角，像素越大，圆角越明显 } 设置四个框的的属性 div{ border-left-color: brown; border-left-style: solid; } 也可以单独设置某个边框的属性 css定义padding属性，设置文字举例内边框的距离 .xxx{ border- 20px; border-style: solid; border-color: aqua; padding: 20px; } 同时设置文字距离4个边框的长度 .yyy{ border- 20px; border-style: solid; border-color: aqua; padding-bottom: 10px; padding-left: 15px; padding-right: 20px; padding-top: 25px; } 分别设置文件距离4个内边框的距离 |
4、css定义margin属性，设置标签距离外部其他元素的距离
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
style> .cc{ border-color: red; border-style: solid; border- 2px; padding: 20px; margin: 40px; } </style> 设置一个margin的属性为40px，那么引用cc的这个元素距离外部的元素的距离是40个像素 <h1>测试margin</h1> <p class="cc">这是一个margin</p> <h2>测试margin</h2> 这个效果就是p标签距离h1和h2标签的距离都是40像素，同样，margin也可以分别设定上下左右的margin的属性值 |
5、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
29
30
31
32
33
|
<style> .cc{ border-style: solid; border- 2px; border-color: red; 50px; height: 100px; }</style>设置宽度和高度，这里设置了具体的值，也可以设置为百分比，这个百分比相当于body的百分比<h1 class="cc">测试元素的宽度和高度</h1><p class="cc">测试元素的宽度和高度</p><h2 class="cc">测试元素的高度和宽度</h2>css设置元素的外边框,这个和border还不一样，outline这个外边框在border外面 <style> .cc{ border- 3px; border-style: solid; border-color: black; outline-color: blue; outline-style: solid; outline- 4px; }</style><p class="cc">css设置元素的外边框,这个和border还不一样，outline这个外边框在border外面</p> |
6、css定义文本相关样式
|
1
2
3
4
5
6
7
8
|
color：设置字体颜色text-align:设置文本的位置，靠左，靠右text-docration:定义文本中线【line-throngh】，下划线【underline】，上线【overline】text-transform: lowercase;定义文本中的字母都为小写，用来转换字母的属性text-indent：设置文本内容缩行，设置文档的首行往里缩多少个像素text-spacing：设置文本内容的字符的间隔line-height:设置文本中的行间距，属性值是数字，是标准行间距的倍数，也可以设置像素值 |
7、css定义字体
|
1
2
3
4
|
font-family:设置字体的类型font-style：设置字体的风格，比如斜体font-size：设置字体的大小，一般默认的字体大小是16个像素值font-weight：设置字体的粗度的效果 |
8、css控制元素的显示状态display属性
|
1
2
3
4
|
display：none 隐藏标签display：block 显示标签，且会被行内标签调整为块级标签display：inline 把块级标签调整为行内标签visibility：hidden：隐藏元素，但是被隐藏的元素所占的高度和宽度还会继续保留，不会被其他元素占用，这个就是和display不一样的地方 |
9、
css定义元素的最大宽度
max-weith：
10、css定义元素位置
|
1
2
3
4
|
position static，一般就是元素原来的位置，static和没有这个属性的效果是一样的，就算设置了left right top buttom都会不生效 relative,可以设置left right top buttom的值，意思就是距离左边多远，右边多远，上边多远，下边多远，相对于参数static时候的位置 fixed，他的效果和relative的效果一致，唯一的区别就是如果有滚动条，如果拉动滚动条，那么relative的的元素会变，而fix的元素位置是固定的 |
11、css定义元素层次
|
1
2
|
z-index 如果有2个元素在一个位置，z-index就是定义哪个元素在上面显示哪个元素在下面显示，z-index的值越大，则显示的越在上面 |
12、css控制元素的溢出
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
overflow visible:如果一个元素在框中，而元素的内容已经超出元素的外框，那么元素就溢出，不会做任何处理 hidden：如果一个元素在框中，而元素的内容以及超出元素的外框，那么超出外框的元素就会被隐藏不会被显示 scroll：如果一个元素在框中，而元素的内容已经超出元素的外框，那么就会有滚动条出现，如果元素的内容没有超出外框，外框也有滚动的栏出现 auto：如果一个元素在框中，而元素的内容已经超出元素的外框，那么就会有滚动条出现，如果元素的内容没有超出外框，外框就不会有滚动的栏出现.auto{ border- 2px; border-style: solid; border-color: pink; 300px; height: 100px; overflow: auto;} |
13、css控制元素浮动
|
1
2
3
4
5
|
css控制元素浮动 float none left right |
14、css定义元素：把元素从水平方向摆放，如果浏览器变大，会自动向下摆放
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
inline-block<style>.cc{ border- 2px; border-style: solid; border-color: red; 440px; height: 80px; display: inline-block;}.bb{ border- 2px; border-style: solid; border-color: blue;}</style> |
15、css定义元素的对齐方式
|
1
2
3
4
5
6
7
8
9
|
元素居中对齐 .cc{ border-color:red; border-style:solid; border-2px; 50%; margin: auto; } 上面的办法可以实现元素居中显示，如果元素要居中，对已块级标签，则必须要有一定的宽度 |
|
1
2
3
4
5
6
7
8
9
10
|
文本的居中对齐 <style> .cc{ border-color:red; border-style:solid; border-2px; 50%; text-align: center; } </style> |
|
1
2
3
4
5
|
图片居中对齐 .pic{ display: block; margin: auto; } |
|
1
2
3
4
5
6
7
8
|
元素的左对齐，右对齐 .right{ 100px; height: 50px; position: absolute; right: 0; } |
16、css定义元素的透明度
|
1
2
3
4
5
|
opacity .opacity{ opacity: 0.2; } |
17、css定义元素的阴影
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.box{border-color: red;border-style: solid;border- 2px; 300px;height: 300px;color: green;box-shadow: 20px 15px 10px black}20px 15px 10px black20：定义x轴的宽度15：定义y轴的宽度10：定义虚幻的程度，这个可以不加，非必须的black：阴影的颜色 |
18、css定义元素样式过度
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
transition .transition{ 100px; height: 200px; transition: 1s; } .transition:hover{ 150px; height: 250px; } 上面这个例子的效果就是，把鼠标放到标签上，过1s后，样式会自动过度到transition:hover的样式上，如果没有定义transition: 1s，那么只要鼠标放在标签上，就会立刻切换到 transition:hover的样式上 |
19、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
29
30
31
32
33
34
35
|
animation <style> .animation{ 200px; height: 200px; border-color: blue; border- 1px; border-style: solid; position: relative; animation: example 10s; } @keyframes example { from{ 200px; height: 200px; border-color: blue; border- 1px; left: 0px; top: 0px; } to { 400px; height: 400px; border-color: red; border- 10px; left: 600px; top: 100px; } } </style> 上面的例子的意思是，初始的样式为animation定义的样式，然后在10s完成切换，然后从keyframes example from切换到keyframes example to的状态 |
|
1
2
3
|
animation: example 4s infinite; 这个的意思是4s完成切换，但是会一直切换，也就是无穷尽的执行 |
|
1
2
3
4
|
animation: example 4s ease-in-out alternate infinite;这个意思是无穷尽的切换，从from到to，然后从to到fromalternate的效果是从from到to，然后从to到frominfinite的效果是无穷尽的切换 |
四、最后介绍一下css的选择器
元素选择器
用标签的名称作为css的名称，去定义样式，如果有定义，那么该标签都会自动应用该样式
类选择器
以点“.”开头，然后在标签中通过class去应用该样式，就可以在该标签中应用该样式
id选择器
以“#”号开头，在标签中id为样式定义的id的标签会应用定义的样式
组合选择器
div p{
}
这个意思是div中的p元素应用该样式，如果div中有个span，在span中又有一个p元素，这个p元素也会应用该样式
div > p{
}
这个意思只对div下的p元素生效，如果div中有个span，span中又有一个p，则该p不会应用该样式