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>