1 <!DOCTYPE html> 2 <!--表示这是一段注释 --> 3 <html lang="en"> 4 <head> 5 <meta charset="utf-8"> 6 <title>学习css</title> 7 <!--style type="text/css"></style>--> style必须在head标签内 8 9 一.添加方法： 10 行内添加：标签内设置属性 11 内嵌添加：引用选择器设置样式 12 单独文件添加：通过链接外部文件设置样式 13 14 优先级：离元素就近原则 行内>内嵌>单独(链接)>浏览器默认样式 15 16 二.选择器类型：以下7种用法 17 标签选择器：与标签同名，如：body{}，div{}，p{}... 18 class选择器：即类别选择器，通过class属性值引用，以点.名称{}引用，如：.one{},.two{}... 19 id选择器：具有唯一性，通过id属性值引用，一般只引用一次，以#名称{}引用，如：#one{},#two{}... 20 嵌套声明：标签内在嵌套标签，格式标签空格标签{}，如：p span{} 21 集体声明：多个标签一起引用，格式标签逗号标签{}，如：h1,p{} 22 全局声明：全部标签一起引用，格式用*{}代表全部，可以清除浏览器默认样式，如：*{} 23 混合：1.多个class选择器混用,如：<div class="one tow left right">...</div>， 24 2.id和class选择器混用，如：<div id="nan" class="one left">...</div>,id选择器不可以多个同时使用 25 26 *{清除浏览器默认样式 27 padding: 0; 28 margin: 0; 29 } 30 p{<--选择器+属性名+分号组成 31 font-size:12px; 字号 32 color:blue; 文字颜色 33 font-weight:bold; 加粗 34 text-align:center; 居中 35 } 36 37 三.样式 38 单位：px-像素，1px表示1个像素；em-字符，1em表示1个字符；%-百分比，120%表示原字体大小12px*120% 39 40 颜色：红蓝绿：red,blue,green 41 RGB值：rgb(x,x,x),每个颜色分量取值0-255，如：红色rgb(255,0,0)，灰色rgb(66,66,66)，黑色rgb(0,0,0) 42 RGB百分比值：rgb(x%,x%,x%),每个颜色分量取值0%-100%，红色rgb(100%,0%,0%) 43 RGB值-透明度：rgba(x,x,x,x),a值：0.0表示完全透明，1.0表示完全不透明，如：红色半透明rgba(255,0,0,0.5) 44 十六进制数：#rrggbb，如：红色：#ff0000,即#f00,去掉重复位 45 46 文本属性： 47 color：文本颜色，取值：red,rgb(0,0,255) 48 letter-spacing: 字符间距,取值：2px,-3px 49 line-height：行高,取值：14px,1.5em,120% 50 text-align：对齐,取值：center,left,right, justify：每行对齐 51 text-decoration： 装饰线,取值：none：无线,overline：上划线,underline：下划线,line-throuhgh：删除线 52 text-indent：首行缩进,取值：2em 53 54 字体属性：在一个声明中设置所有的字体属性，如：font:bold 18px '楷体' 55 font-family: 字体系列， 56 第1个字体类型不存在则显示第2个，以此类推，字体名称有空格用“”：font-family: "HiraginoSans GB","Microsoft YaHei",sans-serif; 57 font-size：字号,14px 120% 58 font-style：斜体,italic 59 font-weight：粗体,bold 60 font属性简化使用：font:斜体 粗体 字号/行高 字体，如：font:italic bold 16px/1.5em '宋体' 61 62 背景属性：background，空元素需先定义元素的高度和宽度 63 background-color:背景颜色 64 background-image:url("logo.jpg"),添加url函数，背景图片 65 background-repeat:背景图片的填充方式，通过设定高度和宽度填充图片 66 repeat:全部填充，repeat-x：填充一行，repeat-y：填充一列，no-repeat:只显示一次背景图片 67 68 超链接属性：伪类选择器，使用必须按顺序：a:link和a:visited>a:hover>a:active 69 a:link;普通的、未被访问的链接 70 a:visited;已访问的链接 71 a:hover;鼠标指针位于链接的上方悬停 72 a:active;链接被点击的时刻（活动的超链接，按下鼠标时） 73 74 列表属性：list:无序列表ul和有序列表ol 75 list-style:所有用于列表的属性，设置于一个声明中 76 list-style-image:为列表项设置图像；通过函数url("路径+文件")显示：url("image/loge.png"); 77 list-style-position:标志图片的位置；inside:标号向右缩进；outside：标号向左突出 78 list-style-type:标志的类型 79 ul类型：none:无标记；disc：默认，标记是实心圆；circle：标记是空心圆；square：标记是实心方块； 80 ol类型：decimal:标记是数字 81 lower-roman:小写罗马数字，如：i,ii,iii,iv,v... 82 upper-roman:大写罗马数字，如：I,II... 83 lower-alpha:小写英文字母，如：a,b,c,d... 84 upper-alpha:大写英文字母，如：A,B,C,D... 85 lower-Greek:小写希腊字母，如：alpha,beta,gamma... 86 lower-latin:小写拉丁字母，如：a,b,c,d... 87 upper-latin:大写拉丁字母，如：A,B.C.D... 88 89 表格属性： 90 border:设置表格边框样式 91 设置表格宽度 92 height:设置表格高度 93 border-collapse:collapse;表示上下左右边框叠加或坍缩 94 奇偶选择器：显示不同行样式，格式：标签名称:nth-child(odd/even)；如：tr:nth-child(odd/even){}， 95 odd：奇数，even：偶数；也可以用数字表示，如：tr:nth-child(2){} 96 四.布局和定位 97 盒子模型：盒子可以是页面上区域，图片，导航，列表，段落... 98 1.页面元素的大小；2.边框；3.与其他元素的距离 99 布局： 100 container：容器 101 header：页眉 102 navbar：导航栏 103 main：主要内容 104 menu：菜单 105 content：内容 106 sidebar：边栏 107 footer：页脚 108 109 组成：1.content内容（文字、图片等）；2.内容的高度height、宽度width；3.border；4.padding；5.margin 110 属性：盒子区分上右下左，top,right,bottom,left;如：border-top；padding-bottom；margin-left 111 border：边框，盒子的边框 112 padding:内边距，位于边框和内容之间的空白距离 113 margin：外边距，可以设置两个盒子之间的距离 114 115 overflow属性：设置内容超出盒子框时，是否显示 116 hidden：超出部分不可见 117 scroll：显示滚动条，横向、纵向滚动条 118 auto：如果有超出部分，显示滚动条，没有则不显示滚动条，由浏览器自动判断是否超出 119 120 border属性：设置边框样式 121 border- 像素-px,粗-thick,中-medium,细-thin 122 border-style:dashed：由横线组成的线条； dotted：由点组成的线条； solid：实线； double：双实线; 123 border-color: 颜色 124 border简化写法：width style color,如：border:1px solid red;border-top:1px solid red 125 126 padding、margin属性： 127 取值：px、%； 128 组成：按顺序区分上右下左，即顺时针，如：padding:top right bottom left; 129 写法：padding:1px 1px 1px 1px;缩写padding:1px;都相同 130 padding:1px 2px 1px 2px;缩写padding:1px 2px;按顺序相同像素即可缩写 131 padding:1px 2px 3px 2px;缩写padding:1px 2px 3px; 132 padding:1px 2px 1px 3px;这里不能缩写，缩写之后就同上面了 133 134 margin合并：垂直方向合并，水平方向不合并；取决于两个盒子的上下间距，合并之后的间距取值为大的上间距或下间距 135 margin水平居中：文字、图片水平居中：text-align:center; 136 div区域水平居中：margin:0 auto; 即上下边距为0，左右边距是浏览器根据外层盒子的一个宽度和div区域的一个宽度，自行判断除以2的取值， 137 即margin-left和margin-right取值相等 138 139 五.定位机制： 140 文档流： 141 元素特征：从上到下，从左到右排列 142 元素分类： 143 block：元素特点：独占一行；元素的height、width、margin、padding都可设置 144 常见的block元素：div、p、h1-h6、ol、ul、table、from 145 146 inline：元素特点：不单独占用一行；width、height不可设置； 147 常见的inline元素：span、a 148 149 inline-block：元素特点：不单独占用一行；元素的height、width、margin、padding都可设置 150 常见元素：img 151 152 元素类型转换：display属性,以上3个元素可以互相转换 153 a{ 154 display:block;a标签不换行，转换类型后，可以让链接独占一行 155 } 156 157 浮动定位： 158 float属性：让盒子脱离文档流位置 159 left：向左浮动 160 right：向右浮动 161 none：不浮动，体现block元素特点，每个盒子独占一行 162 163 clear属性：清除浮动即向一个方向清除浮动时，清除浮动的方向上不会有元素，就是另起一行 164 left：向左清除浮动，即它的左侧不会有元素 165 right：向右清除浮动，即它的右侧不会有元素 166 both：清除左右两边的浮动 167 none：是默认值，只在需要移除已指定的清除时用到 168 主要用于多个盒子的排列组合 169 170 层定位：设置一个页面元素叠加或者覆盖到另一个元素上面的效果 171 position属性：相对于谁定位，根据不同的参照物定位 172 static：默认值，没有层定位，元素出现在正常的文档流中；left、right、top、bottom、Z-index无效 173 fixed：固定定位，相对于浏览器窗口进行定位；left、right、top、bottom、Z-index有效 174 relative：相对定位，相对于直接父元素（即上级父元素）进行定位，无论其父元素是什么定位方式；left、right、top、bottom、Z-index无效 176 定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在，static类型的元素不会占据它的位置 177 absolute：绝对定位，相对于static定位以外的第一个父元素（即relative或absoulute元素，如果每个父元素都不是relative和absoulute元素，则根据body定位）
进行定位；left、right、top、bottom、Zindex无效
定位为absolute的元素脱离文档流，但与relative的区别：其在正常的文档流中的原位置不再存在，static类型的元素会占据它的位置 179 180 left属性：相对父元素向右偏移 181 right属性：相对父元素向左偏移 182 top属性：相对父元素向下偏移 183 bottom属性：相对父元素向上偏移 184 Z-index属性：值大的在上层，取值：-999 - 999 185 186 <style type="text/css"> 187 p{ 188 color: blue; 189 } 190 .one{ 191 font-size:18px; 192 text-align: center; 193 } 194 #nan{ 195 font-size:24px; 196 color:red; 197 } 198 p span{ 199 color: red; 200 } 201 h2{ 202 text-decoration: overline; 203 } 204 h3{ 205 text-decoration: underline; 206 } 207 h4{ 208 text-decoration: line-through; 209 } 210 a{ 211 text-decoration: none; 212 } 213 #toutiao{ 214 height: 100px; 215 width: 1140px; 216 background: url("image/toutiao.png") repeat; 217 } 218 table{ 219 width: 500px; 220 height: 200px; 221 border-collapse: collapse; 222 } 223 table,td,th{ 224 border: 1px solid #eee; 225 } 226 tr:nth-child(odd){ 227 background-color: red; 228 } 229 #box{ 230 width: 100px; 231 height: 100px; 232 border: 10px solid; 233 padding: 30px; 234 margin: 20px; 235 overflow: scroll; 236 } 237 #newsimagelist{ 238 text-align: center; 239 font-size: 0;/*否则图间有间隙,浏览器默认的样式，为0不用加像素*/ 240 } 241 #newsimagelist img{ 242 height: 200px; 243 width: 200px; 244 margin-left: 5px; 245 padding: 5px; 246 border: 1px solid #0cf; 247 } 248 #nav{ 249 width: 300px; 250 margin: 100px auto; 251 } 252 a{ 253 display: inline-block; 254 width: 80px; 255 height: 30px; 256 font-size: 14px; 257 text-align: center; 258 line-height: 30px; 259 text-decoration: none; 260 border-bottom: 1px solid #ccc; 261 } 262 a:hover{ 263 color: white; 264 background-color: #ccc; 265 border: 1px solid; 266 border-left-color: orange; 267 border-top-color: orange; 268 border-right-color: orange; 269 } 270 div{ 271 width: 200px; 272 height: 200px; 273 border: 1px solid; 274 float: left; 275 background-color: red; 276 } 277 #fix-box{ 278 width: 100px; 279 height: 100px; 280 border: 1px solid red; 281 position: fixed; 282 left:100px; 283 top: 50px; 284 } 285 #relative-box{ 286 width: 100px; 287 height: 100px; 288 border: 2px solid #6ef; 289 position: relative; 290 left: 50px; 291 top: 50px; 292 } 293 294 </style> 295 <!--css单独外部添加连接方法,通过link链接标签引用外部css文件，定义样式--> 296 <link rel="stylesheet" type="text/css" href="style.css" /> 297 </head> 298 <body> 299 <p style="color: red;">css行内添加方法,标签内定义样式</p> 300 <p>css内嵌添加方法，通过引用选择器，定义样式</p> 301 <h1>css单独外部添加连接方法，通过引用外部css文件，定义样式</h1> 302 <p class="one">通过class引用选择器</p> 303 <p id="nan">通过id引用选择器</p> 304 <p>css<span>嵌套声明</span>使用</p> 305 <h2>上划线</h2> 306 <h3>下划线</h3> 307 <h4>删除线</h4> 308 <a href="#">链接无装饰线</a> 309 <div id="toutiao">填充背景图片 填充背景图片填充背景图片 填充背景图片</div> 310 <table> 311 <tr> 312 <th>表头1</th> 313 <th>表头2</th> 314 </tr> 315 <tr> 316 <td>显示边框</td> 317 <td>叠加边框用border-collapse: collapse</td> 318 </tr> 319 <tr> 320 <td>显示不同行样式用tr:nth-child(odd/even){}</td> 321 <td>内容</td> 322 </tr> 323 <tr> 324 <td>内容</td> 325 <td>内容</td> 326 </tr> 327 </table> 328 <br/> 329 <div id="box">盒子的高度、宽度=width+height+border+padding+margin</div> 330 <div id="newsimagelist"> 331 <img src="margin.jpg"/> 332 <img src="margin.jpg"/> 333 <img src="margin.jpg"/> 334 </div> 335 <div id="nav"> 336 <a href="#">链接1</a> 337 <a href="#">链接2</a> 338 <a href="#">链接3</a> 339 </div> 340 <div>box1</div> 341 <div>box2</div> 342 <div id="fix-box"> 343 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 344 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 345 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 346 </div> 347 <div> 348 <div id="relative-box"> 349 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 350 </div> 351 <div>不会占据relative的元素定位的位置</div> 352 </div> 353 </body> 354 </html>