🌹一、CSS的使用方式

要为HTML元素设定样式，有以下三种方式来使用CSS:

🌱1、在元素中指定style属性

"border:solid 2px red; background-color: white; font-size: 20px">
1

也称为内嵌样式，只针对对应的这个标签生效

🌱2、在页面中嵌入style样式块

1
2
3
4
5
6
7
8

通常建议将style标签放置于head标签中，可以针对当前页面所有元素生效

🌱3、在页面中引入外部cSS文件

"stylesheet" type="text/css" href="/page/css/bootstrap.css" />
1

外部CSS文件，可以针对全站的引入了这个CSS的多个页面生效，放置于head标签中

🌹二、CSS选择器

计算器样例：

    
    
    
    
    


    "450" height="120" border="0" bgcolor="gray" cellspacing="5" align="center">
        

            
"gray" height="50">
                
"point-red">
                
"point-blue">
                
"point-green">
                
"title">帅哥计算器
            
        
        

            
"white" style="border:solid 2px red">
        
    

    "450" height="400" border="0" cellspacing="4" class="button">
        

            
AC
            
+/-
            
%
            
➗
        
        

            
7
            
8
            
9
            
*
        
        

            
4
            
5
            
6
            
-
        
        

            
1
            
2
            
3
            
+
        
        

            
0
            
del
            
.
            
=
        
    


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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

选择器是指CSS如何与元素及样式建议关联关系的很重要的一种手段。CSS选择器的使用，决定了CSS样式作用于哪一个元素或者哪一种元素，对于快速或精确设置元素的样式将至关重要。CSS样式主要分为以下6类:

🌱1、标签选择器

使用类型选择器，可以向这种元素类型的每个实例上应用声明。

/*为当前页面中所有的单元格设计统一的样式*/
td {
	background-color : #7fffd4;
	width: 25%;
	text-align: center ;
	font-size: 30p×;
}
1
2
3
4
5
6
7

🌱2、类选择器

通过设置元素的class属性定位元素，在同一个页面中，多个元素可以归属为同一个类。

/*类选择器，以﹒开头，对元素中指class="title”的元素设计样式*/
.title {
	color : white;/*文字的颜色*/
	font-size: 22px;/*文字的大小*/
	float: right;/*设置容器为向右浮动*/
	margin-right: 10px;/*设置容器距离右边10px*/
}
1
2
3
4
5
6
7

🌱3、ID选择器

HTML页面的任何一个元素，即任何一个标签，都拥有ID这个属性，我们可以通过为元素设置一个唯一的ID识别符，进而利用CSS的ID选择器对其使用样式。

/*ID选择器，以#开头，对元素中指定id="tit1e”的元素设计样式*/
#title {
	color : white;
	font-size: 22px;
	float: right;
	margin-right: 10px;
}
1
2
3
4
5
6
7

🌱4、属性选择器

/*为DIV元素下拥有type="button"属性的元素设计样式*/
div [type="button"] {
	color : white;
	font-size: 22px;
}
1
2
3
4
5

🌱5、组合选择器

可以将标签选择器、ID选择器、类选择器和属性选择器等，组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器，可以更加精确地处理希望赋予某种表示的元素。我们也可以通过指定父子关系来对元素进行选择。

/*组合使用ID和标签选择器，并实现了层次关系*/
#button td {
	font-size: 32px;
	font-family:微软雅黑;
	text-align: center;
}
1
2
3
4
5
6

🌱6、伪类选择器

设计伪类和伪元素可以实现其中的一些效果。使用伪类可以根据一些情况改变文档中链接的样式，如根据链接是否被访问，何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素，可以更改元素的第一个字母和第一行的样式，或者添加源文档中没有出现过的元素。

/*使用hover伪类设置鼠标划过时的变换效*/
#button td:hover {
	backgr ound-color : red;/*当鼠标滑动时，变换背景颜色*/
1
2
3

🌹三、DIV盒模型

🌱1、盒模型(Box Model)

盒模型〈也可称之为盒子模型)是CSS中一个重要的概念，理解了盒模型才能更好的排版。我们先来相像一下一个盒子，它有:外边距(margin，与其他盒子之间的距离)、边框(border)、内间距_(padding，盒子边框与内容之间的填充距离)、内容(content)四个属性;让我们俯视这个盒子，它有上下左右四条边，所以每个属性都包括四个部分:上下左右;这四部分可同时设置，也可分别设置;内间距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。

我们换种方式来理解这个盒模型:
(1)内容(content)就是盒子里装的东西，可多可少，可以是任意类型
(2)填充(padding）就是怕盒子里装的东西损坏而添加的泡沫或者其他抗震的辅料。
(3)边框(border）就是盒子本身了，当然，边框也是有厚有薄的，也可以有不同色彩。
(4)边界(margin）则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。

    
    
    
    
    


    
"outer">
        
"inner">I am number one

        
"inner">I am number one
    
    


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
38
39
40
41
42
43
44

🌹四、使用div标签完成对计算器的改编

先分析：

"en">

    "UTF-8">
    "X-UA-Compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1.0">
    
    



    
    
"top">
        
"point red">
        
        
"point blue">
        
"point green">
        
"cal-title">靓仔专用计算器
    

    
"result">

    
"button">
        
AC
        
+/-
        
%
        
➗
        
7
        
8
        
9
        
*
        
4
        
5
        
6
        
-
        
1
        
2
        
3
        
+
        
0
        
del
        
.
        
=
    
    


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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113