-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss基础.html
168 lines (150 loc) · 5.76 KB
/
css基础.html
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基础</title>
<style>
h4{
color: yellow;
size: 60px;
}
:link{
color: blue;
}
:visited {
color: yellow;
font-size: 50px;
}
a:hover{
font-size: 50px;
}
:active{
color: gray;
}
p:hover{
font-size: 50px;
}
</style>
</head>
<body>
<!--
三种方式通过css来设置文本样式
一（内联样式、行内样式）
在标签内使用style属性来设置样式
一般不推荐使用
二（内部样式表）
将样式编写到head中国到style标签里
然后通过css的选择器来选中元素并为其设置各种样式
三（外部样式表）最佳实践
可以将css样式编写到一个外部的css文件中
然后通过link标签来引入外部的css文件
外部样式表需要link标签进行引入
意味着只要想使用这些样式的网页都可以对其进行引用
使样式可以在不同网页页面之间进行复用
将样式编写到外部css文件中可以使用到游览器的缓存机制
从而加快网页的加载速度提高用户的体验
四种常用选择器
1、元素选择器
作用：根据标签名来选中指定元素
语法：标签名{}
例子：p{} h1{} div{}
2、id选择器
作用：根据元素的ID值选中指定元素
语法：#id属性值{}
例子：#box{}
3、类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值{}
4、通用选择器
作用：选中页面中所有元素
语法：*{}
两种复合选择器
1、交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器4{}
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
2、并集选择器
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器4{}
关系选择器
1、子元素选择器
作用：选中父代的指定子代
语法：夫>子
2、后代选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代
3、兄弟选择器
(1)作用：选中下一个兄弟
语法：前一个+后一个
（2）作用：选中下面的所有兄弟
语法：兄～第
属性选择器
1、语法：[属性]
作用：选择含有指定属性的元素
2、语法：[属性=属性值]
作用：选择含有指定属性和属性值的元素
3、语法：[属性^=属性值]
作用：选择属性值以指定值开头的元素
4、语法：[属性$=属性值]
作用：选择属性值以指定值结尾的元素
5、语法：[属性*=属性值]
作用：选择包含指定属性值的元素
伪类选择器
伪类：不存在的类特殊的类
伪类用来描述一个元素的特殊状态，
比如：第几个元素，点击的元素，访问过的元素，鼠标移入的元素
伪类一般情况下都是用：开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(i) 第i个子元素
特殊值： n所有元素
2n 或 even所有偶数元素
2n+1 或 odd 所有奇数元素
以上的伪类根据所有元素排序
:first-of-type
:last-of-type
:nth-of-type
以上根据指定类型的元素排序
:not()
否定伪类：将符合条件的伪类从选择器中剔除
a标签中的伪类
：link 正常的标签（未访问过的标签）
：visited 访问过得标签，因隐私原因只能修改颜色
：active 鼠标点击的标签
：hover 鼠标移入的状态
伪元素选择器
伪元素：表示页面中特殊的不是真实存在的元素（特殊位置）
用::开头
::first-letter 第一个元素
::first-line 第一行
::selection 选中的元素
::before 元素的开始
::after 元素的最后
before和after必须结合content属性来使用
选择器的权重
样式的冲突：用不同的选择器选中相同的元素，并为相同的样式设置不同的值时，
此时发生了样式的冲突
发生样式的冲突时应用哪个样式，由选择器的权重（优先级）决定
选择器的优先级
内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
统配选择器 0，0，0，0
继承的样式 没有优先级
比较选择器的优先级时应该将所有的优先级相加然后进行比较，
但是在相加时不能超过最高优先级的位数
当一个样式的最后加上！important后该样式的优先级最高（一般不用）
-->
<p>woxiangkankansizehefantsizeddequbei</p>
<p style="font-size: 50px" >woxiangkankansizehefantsizeddequbei</p>
<a href="#abc">点击跳转</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="" name="abc">跳转</a>
<p style="color: red;size: 50px;">方案一的实现</p>
<a href="">cheshi</a>
<h3 title="sgsdabc">方案二的实现</h3>
<h6>方案三的实现</h6>
<link rel="stylesheet" href="./style.css">
</body>
</html>