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>