1 CSS概要
CSS(Cascading Style Sheets)称为层叠样式表，用于美化页面(单纯HTML写的页面只是网页框架和内容的组合，相当于赤裸的人，而CSS则是给赤裸的人穿上华丽的外衣)，基本上所有的HTML页面都或多或少的使用了CSS。
CSS在页面中存在的三种方式：元素内联、页面嵌入和外部引入(语法：style='key1:value1;key2:value2;')
(1)标签内联：在HTML标签中使用 style='属性:属性值;'
(2)页面嵌入: ，即在头部先定义CSS样式块，后面再进行引用
(3)引入外部已写好的CSS文件
三种表现形式的优先级：标签内联>页面嵌入>外部引用，这个仅在三种形式中存在同样的样式时起作用。
2 CSS的三种存在形式
2.1 标签内联
标签内联，即在HTML标签中直接写入属性和属性值
1 <div style="color:red;">
2 第1种：标签内联
3 div>
2.2 页面嵌入
页面嵌入，即在HTML中的头部先定义CSS样式块，然后在后续使用该样式
1 DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Titletitle>
7
8
9 <style>
10 .re{
11 color:red;
12 }
14 #name{
15 background-color: antiquewhite;
16 }
17
18 span{
19 font-size: 100px;
20 }
22 style>
26 head>
27
28 <body>
30 <span class="re">第2种：页面嵌入span>
31 <span style="color:#ddddde" class="re">第2种：标签内联和页面嵌入同时存在span>
33 <span id="name" class="re">第2种：引用id值，页面嵌入span>
35 body>
36 html>
2.3 引用外部CSS文件
引用外部CSS文件，即在外部已写好CSS文件，在HTML文件中直接引用CSS样式
#已写好的CSS文件，命名为common.css
1 .re{
2 color:red
3 }
4
5 .name{
6 background-color: green;
7 }
1 DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Titletitle>
7
8
9 <link rel="stylesheet" href="common.css">
10 head>
11
12 <body>
13 <span class="re">第3种：引入外部CSS文件span>
14 <span style="color:#ddddde" class="re">第3种：标签内联和引入外部CSS文件同时存在span>
16 <span id="name" class="re">第3种：引用id，引用外部CSS文件span>
18 body>
19 html>
3 CSS中的选择器(重点)
3.1 class/id/标签选择器
1 DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Titletitle>
7 head>
8
9 <body>
10
11
12 <style>
13
14 .re{
15 color:red;
16 }
17
18 #name{
19 background-color: antiquewhite;
20 }
21
22 span{
23 font-size: 100px;
24 }
25 p{
26 color:blue
27 }
28 div{
29 color:yellow
30 }
32 style>
33
34 <body>
35 <div>
36 应用上面div中定义的样式
37 div>
38 <p>
39 应用上面p中定义的样式
40 p>
41 <span class="re">aaaspan>
42 <span style="color:#ddddde" class="re">bbbspan>
44 <span id="name" class="re">cccspan>
45 body>
46 html>
3.2 关联选择器
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Titletitle>
6
7 <style>
/*CSS中的注释符号为/**/,注意与HTML注释的区别*/
8 /*第1种形式：container下的li标签样式*/
9 .container li{
10 background-color: red;
11 }
12 /*第2种形式：container中的li标签中的a标签样式，这种形式下后面的都为HTML标签*/
13 .container li a{
14 background-color: green;
15 }
16 /*第3种形式：(1)先找class=container的标签;(2)再找container下class=li的标签;(3)再找li下class=b的标签*/
17 .container .li .b{
18 background-color: yellow;
19 }
20 style>
21
22 head>
23
24 <body>
25
26 <div class="container">
27 <ul>
28 <li>关联选择器：第一种形式li>
29 <li>
30 <a>关联选择器：第二种形式a>
31 li>
32 <li>
33 <a class="l">
34 <span class="b">关联选择器：第三种形式span>
35 a>
36 li>
37 ul>
38 div>
39
40 body>
41 html>
| 关联选择器 的标签，再去id=i1的标签中找a标签，再去a标签中找class=cc1的标签，进而应用该样式，如果没有则不会应用 |
3.3 组合选择器
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Titletitle>
6
7 <style>
8 .c1 #i1 b,a .cc1,.cc2{
9 color: red;
10 }
11 style>
12 head>
13
14 <body>
15
16
17
18
19 <div class="c1">
20 <div id="i1">
21
22 <a>
23 <span class="cc1">.c1 #i1 a .cc1span>
24 a>
25 <br/>
26
27 <b>.c1 #i1 bb>
28 <br/>
29
30 <span class="cc2">.c1 #i1 .cc2span>
31 div>
32 div>
33
34 body>
35 html>
3.4 属性选择器
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Titletitle>
6
7 <style>
8 /*属性选择器，选择input标签自有的属性*/
9 .con input[type="text"][name="username"]{
10 border: 3px solid red;
11 }
12 /*属性选择器，选择自定义属性*/
13 .con input[self_define="attr"]{
14 border: 3px solid red;
15 }
16 style>
17
18 head>
19
20 <body>
21
22 <div class="con">
23 <input type="text" name="username">
24
25 <input self_define="attr" type="text" name="username" value="自定义">
26 <input type="file">
27 <input type="password">
28 <input type="text">
29 <input type="button">
30 <input type="checkbox">
31 <input type="reset">
32 div>
33
34 body>
35 html>
4 CSS中常用的属性
(1)背景颜色/背景图片/图片移动
1 DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Titletitle>
7
8 <style>
9 /*此样式相当于只显示图片的部分区域，根据需要进行调整，其中height和width相当于孔的大小，
10 background-position属性表示移动图片的坐标，图片左上角坐标为(0,0)，此处的移动是移动图片，
11 即background-position的坐标为图片左上角的坐标*/
12 .c{
13 background-image: url("test.jpg");
14 height: 80px;
15 width:80px;
16 background-repeat: no-repeat;
17 background-position: -24px -130px;
18 }
19 style>
20 head>
21
22 <body>
23
24 <div style="background-color: red">
25 背景颜色
26 div>
27
28
29 <div style="background-image: url(favicon.ico);height: 80px;" >
30 div>
31
32
33 <div style="background-image: url(favicon.ico);height: 80px;background-repeat: no-repeat" >
34 div>
35
36 <div class="c">
37
38 div>
39
40 body>
41 html>
(2)border边框(border-top/bottom/left/right表示上下左右边框，如果只写border，则是上下左右边框)
1
2
3 <div style="border:1px solid red;height:10px">div>
4
<div style="height: 20px">div>
5
6 <div style="border:1px dotted blue;height:10px">div>
7 <div style="height: 20px">div>
8
9 <div style="border:1px dashed purple;height:10px">div>
10
11 <div style="border-left:3px solid red">左边框div>
(3)内边矩与外边距
<margin可以水平居中,即margin:0 auto；>
1 <h2>外边距，自己本身大小不变，改变自己外部离其它标签的边距，margin-top/bottom/left/right分别表示上下左右，如果单独写成margin则表示上下左右h2>
2 <div style="border: 1px solid red;height: 70px;">
3 <div style="background-color:green; height:50px; margin-top:10px; margin-left:10px; margin-right:10px; margin-bottom:20px;">
4 div>
5 div>
6
7 <h2>内边距，增加自己本身的大小，padding-top/bottom/left/right分别表示上下左右，如果单独写成padding则表示上下左右h2>
8 <div style="border: 1px solid red;height: 90px;">
9 <div style="background-color: green;height: 60px;padding-top: 10px;">
div>
10 div>
注：padding值的设置默认为顺时针(上右下左：padding-top/right/bottom/left)，在赋值的时候也可以直接,即表示上右下左的值
分别为10px/20px/0/30px；当赋值形式为，即表示上下值为10px，左右值为20px。其它类似属性也可以类推
(4)display显示属性
1
2 <div style="display: none;">displaydiv>
3
4 <div style="background-color:red;display:inline">displaydiv>
5
6 <a style="background-color:red;display:block">displaya>
(5)cursor鼠标动作属性
1 <div style="cursor:pointer">停放在这里显示小手(pointer)div>
2 <div style="cursor:help">停放在这里显示问号(help)div>
3 <div style="cursor:wait">停放在这里显示等待(wait)div>
4 <div style="cursor:move">停放在这里显示移动(move)div>
5 <div style="cursor:crosshair">停放在这里显示定位(crosshair)div>
(6)浮动(float)
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Titletitle>
6
7 <style>
8 .w-letf{
9 width: 20%;
10 background-color: red;
11 height: 400px;
12 float: left;
13 }
14 .w-center{
15 width: 40%;
16 background-color: green;
17 height: 400px;
18 float: left;
19 }
20 .w-right{
21 width: 20%;
22 background-color: blue;
23 height: 400px;
24 float: left;
25 }
26 style>
27 head>
28
29 <body>
30
31 <div class="w-letf">div>
32 <div class="w-center">div>
33 <div class="w-right">div>
34
35 body>
36 html>
float属性补充：当在float的过程中，会覆盖掉父标签的样式，一般有两种方法去掉此种影响:第1种方法是在父标签中设置高度属性；第2种方法是利用clear：both属性
1 DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Titletitle>
7
8 head>
9
10 <body>
11
12 <div style="background-color: red">
13 <div style="float:left;">1111div>
14 <div style="float:left;">2222div>
15
16 <div style="clear: both">div>
17 div>
18 body>
19 html>
(7)position位置属性
fixed属性
1 DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Titletitle>
7
8 head>
9
10 <body>
11
12 <div id="top" style="height:2000px; background-color: #ddd;">
13
14 <a style="position:fixed; right:30px;bottom:30px;">返回顶部a>
15
16 <a style="position:fixed; right:30px;bottom:30px;"href="#top">返回顶部a>
17 div>
18 body>
19 html>
relative和absolute属性—它们必须结合使用
1 DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Titletitle>
7
8 head>
9
10 <body>
11
12 <div id="top" style="height:2000px; background-color: #ddd;">
13
14 <div style="position: relative;background-color: beige;height:300px;width:300px;margin:0 auto;">
15 <h1>修改数据h1>
16 <a style="position: absolute;right: 0px;bottom:0px">abcda>
17 div>
18 div>
19 body>
20 html>
position属性
fixed——固定浏览器窗口的位置
relative——相对位置
absolute——绝对位置，必须结合relative一起使用，否则无任何意义(relative标签是包含absolute标签的)
(8)overflow属性(overflow:auto当内容超过高度时,会出现滚动条；overflow:hidden当内容超过高度时,超过内容会被隐藏掉)
1 DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Titletitle>
7
8 head>
9
10 <body>
11 <div style="overflow:auto;height:100px;background-color: red">
12 aaaaaa <br/>
13 aaaaaa <br/>
14 aaaaaa <br/>
15 aaaaaa <br/>
16 aaaaaa <br/>
17 aaaaaa <br/>
18 aaaaaa <br/>
20 div>
21 body>
22 html>
(9)body属性(1个页面只有1个body标签)
1 DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Titletitle>
7 <style>
8 /*页面居中，消除页面默认的属性，也可以body标签中设置：*/
9 body{
10 margin:0 auto;
11 }
12 style>
13
14 head>
15
16 <body>
17 <div style="height:100px;background-color: red">
18
19 div>
20 body>
21 html>
(10)透明度
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对IE8以及更早的版本 */
}
IE9/Firefox/Chrome/Opera/Safari使用属性opacity来设定透明度。opacity属性能够设置的值从0.0到1.0。值越小，越透明。
IE8以及更早的版本使用滤镜 filter:alpha(opacity=x)。x能够取的值从0到100。值越小，越透明。
(11)z-index(标签的分层处理)
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Titletitle>
6 head>
7 <body>
8 测试文本
9 <input type="button" value="提交数据"/>
10 <div style="height:2000px">div>
11
12
14 <div style="z-index:1;position:fixed;top:0;right:0;bottom:0;left:0;
15 background-color:black;opacity:0.2;">div>
16
17 <div style="z-index:2;position:fixed;left:50%;top:50%;margin-left:-140px;
18 margin-top:-120px;">
19
20 <img src="123.gif">
21
22 <input />
23 <input />
24 <input />
25 <input />
26 div>
27 body>
28 html>
(12)简单的页面布局
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Titletitle>
6
7 <style>
8 body{
9 margin:0 auto;
10 }
11
12 .pg-header{
13 height: 48px;
14 background-color: blue;
15 }
16
17 .pg-body .menu{
18 background-color: red;
19 position: absolute;
20 top:50px;
21 left: 0;
22 bottom: 0;
23 width: 200px;
24 overflow: auto;
25 }
26
27 .pg-body .content{
28 background-color: aqua;
29 position: absolute;
30 top:50px;
31 left: 210px;
32 bottom: 0px;
33 right: 0px;
34 overflow: auto;
35 }
36 style>
37 head>
38 <body>
39 <div class="pg-header">div>
40 <div class="pg-body">
41 <div class="menu">
42 <a>目录1a> <br/>
43 div>
44 <div class="content">
45 内容
46 <div style="height:500px">
47 <h1 style="color:red">标题1h1>
48 div>
49 div>
50 div>
51 body>
52 html>
参考资料：
http://www.cnblogs.com/luotianshuai/p/5167944.html
http://www.cnblogs.com/yangyinghua/p/5159156.html
转载于:https://www.cnblogs.com/maociping/p/5173563.html