forked from Y-Dian/LearnXinYminutes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlearncss-cn.css
151 lines (103 loc) · 3.42 KB
/
learncss-cn.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
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
/* 注释 */
/* ####################
## 选择器
####################*/
/* 一般而言，CSS的声明语句非常简单。 */
选择器 { 属性: 值; /* 更多属性...*/ }
/* 选择器用于指定页面上的元素。
针对页面上的所有元素。 */
* { color:red; }
/*
假定页面上有这样一个元素
<div class='some-class class2' id='someId' attr='value' />
*/
/* 你可以通过类名来指定它 */
.some-class { }
/* 给出所有类名 */
.some-class.class2 { }
/* 标签名 */
div { }
/* id */
#someId { }
/* 由于元素包含attr属性，因此也可以通过这个来指定 */
[attr] { font-size:smaller; }
/* 以及有特定值的属性 */
[attr='value'] { font-size:smaller; }
/* 通过属性的值的开头指定 */
[attr^='val'] { font-size:smaller; }
/* 通过属性的值的结尾来指定 */
[attr$='ue'] { font-size:smaller; }
/* 通过属性的值的部分来指定 */
[attr~='lu'] { font-size:smaller; }
/* 你可以把这些全部结合起来，注意不同部分间不应该有空格，否则会改变语义 */
div.some-class[attr$='ue'] { }
/* 你也可以通过父元素来指定。*/
/* 某个元素是另一个元素的直接子元素 */
div.some-parent > .class-name {}
/* 或者通过该元素的祖先元素 */
div.some-parent .class-name {}
/* 注意，去掉空格后语义就不同了。
你能说出哪里不同么？ */
div.some-parent.class-name {}
/* 你可以选择某元素前的相邻元素 */
.i-am-before + .this-element { }
/* 某元素之前的同级元素（相邻或不相邻） */
.i-am-any-before ~ .this-element {}
/* 伪类允许你基于页面的行为指定元素（而不是基于页面结构） */
/* 例如，当鼠标悬停在某个元素上时 */
:hover {}
/* 已访问过的链接*/
:visited {}
/* 未访问过的链接*/
:link {}
/* 当前焦点的input元素 */
:focus {}
/* ####################
## 属性
####################*/
选择器 {
/* 单位 */
width: 50%; /* 百分比 */
font-size: 2em; /* 当前字体大小的两倍 */
width: 200px; /* 像素 */
font-size: 20pt; /* 点 */
width: 5cm; /* 厘米 */
width: 50mm; /* 毫米 */
width: 5in; /* 英尺 */
/* 颜色 */
background-color: #F6E; /* 短16位 */
background-color: #F262E2; /* 长16位 */
background-color: tomato; /* 颜色名称 */
background-color: rgb(255, 255, 255); /* rgb */
background-color: rgb(10%, 20%, 50%); /* rgb 百分比 */
background-color: rgba(255, 0, 0, 0.3); /* rgb 加透明度 */
/* 图片 */
background-image: url(/path-to-image/image.jpg);
/* 字体 */
font-family: Arial;
font-family: "Courier New"; /* 使用双引号包裹含空格的字体名称 */
font-family: "Courier New", Trebuchet, Arial; /* 如果第一个
字体没找到，浏览器会使用第二个字体，一次类推 */
}
<!-- 你需要在文件的 <head> 引用CSS文件 -->
<link rel='stylesheet' type='text/css' href='filepath/filename.css' />
<!-- 你也可以在标记中内嵌CSS。不过强烈建议不要这么干。 -->
<style>
选择器 { 属性:值; }
</style>
<!-- 也可以直接使用元素的style属性。
这是你最不该干的事情。 -->
<div style='property:value;'>
</div>
/*A*/
p.class1[attr='value']
/*B*/
p.class1 {}
/*C*/
p.class2 {}
/*D*/
p {}
/*E*/
p { property: value !important; }
<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
</p>