1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
6 <title>CSS层叠样式表</title>
7 <!--外部样式表
8 <head>
9 <link rel="stylesheet" type="text/css"href="mystyle.css">
10 </head>
11 hr{color:red;}
12 p{margin-left:20px;}
13 body{background-color:blue;}
14 -->
15
16
17 <!--内部样式表
18 <head>
19 <style>
20 hr{color:red;}
21 p{margin-left:20px;}
22 body{background-color:blue;}
23 </style>
24 </head>
25 -->
26
27
28 <!--内联样式表
29 <p style="hr{color:red;margin-left:20px;"></p>
30 -->
31
32 <style type="text/css">
33 /*id选择器*/
34 #para1
35 {
36 text-alignLcenter;
37 color:red;
38 }
39 /*class(类)选择器*/
40 .center{text-align:center;}
41 /*指定特定的元素使用class*/
42 p.center{text-align:center;}
43
44 /*文本对齐方式*/
45 h1{text=align:center;}
46 /*文本修饰*/
47 a{text-decoration:none;}
48 h1{text-decoration:overline;}
49 h2{text-decoration:line-through;}
50 h3{text-decoration:underline;}
51 /*文本转换*/
52 p.uppercase{text-transform:uppercase;}
53 p.lowercase{text-transform:lowercase;}
54 p.capitalize{text-transform:capitalize;}
55 /*文本缩进*/
56 p{text-indent:50px;}
57
58 /*字体样式 正常 斜体 倾斜的文字*/
59 p.normal{font-style:normal;}
60 p.italic{font-style:italic;}
61 p.oblique{font-style:oblique;}
62
63 /*用em来设置字体大小*/
64 p{font-size:2.5em;}/*40px/16=2.5em*/
65
66 /*CSS链接样式*/
67 a:link{color:red;}/*正常,未被访问过的链接*/
68 a:visited{color:red;}/*用户已经访问过的链接*/
69 a:hover{color:red;}/*当用户鼠标放在链接上时*/
70 a:active{color:red;}/*链接呗点击的那一刻*/
71
72 /*列表-缩写属性*/
73 ul
74 {
75 list-style:spuare url("spaurple.gif");
76 }
77
78 /*表格 折叠边框*/
79 table
80 {
81 border-collapse:collapse;
82 }
83 bable,th,td
84 {
85 border:1px solid black;
86 }
87 /*表格属性*/
88 td
89 {
90 text-align:center;
91 height:100px;
92 width:100px;
93 vertical-align:bottom;
94 padding:10px;
95 border:1px solid blue;
96 background-color:green;
97 color:black;
98 }
99
100 /*CSS边框属性*/
101 border-style:none;/*默认无边框*/
102 border-style:dotted;/*点线框*/
103 border-style:dashed;/*虚线框 */
104 border-style:solid;/*实线边界*/
105 border-style:double;/*定义两个边界 值等于border-width*/
106 border-style:groove;/*3D沟槽边界*/
107 border-style:ridge;/*3D脊边界*/
108 border-style:inset;/*3D的嵌入边框*/
109 border-style:outset;/*3D的突出边框*/
110
111
112 /*CSS Display(显示) Visibility(可见性)*/
113 a.hidden{visibility:hidden;}/*任然占空间*/
114 a.hidden{visibility:none;}/*不占空间*/
115
116
117 /*改变元素显示*/
118 li{display:inline;}/*把列表项显示为行内元素*/
119 span{display:block}/*把span元素显示为块元素*/
120
121 /*CSS 定位*/
122 /*相对定位relative 原本锁占空间不变*/
123 h2.pos_top
124 {
125 position:relative;
126 top:-50px;
127 }
128 /*绝对定位Absolute 不占据空间*/
129 h2
130 {
131 position:absolute;
132 left:100px;
133 top:150px;
134 }
135 /*Fixed 定位 位置固定 即使窗口滚动 也不移动*/
136 p.pos_fixed
137 {
138 position:fixed;
139 top:30px;
140 right:5px;
141 }
142
143 /*CSS 水平对齐 Horizontal align*/
144 /*中心对齐 使用margin属性*/
145 .center
146 {
147 margin-left:auto;
148 margin-right:auto;
149 width:70%;
150 background-color:red;
151 }
152 /*使用position属性设置左右对齐*/
153 .right
154 {
155 position:absolute;
156 right:0px;
157 width:300px;
158 background-color:blue;
159 }
160 /*使用float属性设置左右对齐*/
161 .right
162 {
163 float:right;
164 width:300px;
165 background-color:red;
166 }
167
168 /*CSS组合选择符*/
169 /*后代选取器*/
170 div p
171 {
172 font-size:12px;
173 }
174
175 /*子元素选取器*/
176 div>p
177 {
178 font-size:12px;
179 }
180 /*相邻兄弟选取器*/
181 div+p
182 {
183 font-size:12px;
184 }
185 /*普通相邻兄弟选取器*/
186 div~p
187 {
188 font-size:12px;
189 }
190 ul
191 {
192 list-style:none;
193 margin:0;
194 padding:0;
195 }
196 /*垂直导航栏*/
197 /*a
198 {
199 display:block;
200 width:60px;
201 }*/
202 /*水平导航栏*/
203 li
204 {
205 display:inline;
206 }
207
208 /*图片栏*/
209 div.img
210 {
211 margin:2px;
212 border:1px solid red;
213 height:auto;
214 width:auto;
215 float:left;
216 text-align:center;
217 }
218 div.img img
219 {
220 display:inline;
221 margin:3px;
222 border:1px solid blue;
223 }
224 div.img a:hover img
225 {
226 border:1px solid pink;
227 }
228 div.desc
229 {
230 text-align:center;
231 font-weight:normal;
232 width:120px;
233 margin:2px;
234 }
235 </style>
236 <script type="text/javascript">
237 document.write("CSS详细样式");
238 </script>
239 </head>
240 <body>
241 <div>
242 <ul>
243 <li><a href="default.asp">Home</a></li>
244 <li><a href="news.asp">News</a></li>
245 <li><a href="contact.asp">Contact</a></li>
246 <li><a href="about.asp">About</a></li>
247 </ul>
248 </div>
249
250 </body>
251 </html>