CSS语法
整理了 一下CSS的语法，这里记录一下。
1 <html> 2 <head> 3 <title>CSS的基本语法</title> 4 5 <!--链接外部样式--> 6 <link href="../demo.css" rel="stylesheet" type="text/css"/> 7 8 <!--导入外部样式--> 9 <style type="text/css"> 10 @import url("../demo.css"); 11 </style> 12 13 <!--内部样式--> 14 <style type="text/css"> 15 /*基本选择器：标签选择器、类选择器、id选择器，优先级由低到高*/ 16 /*标签选择器*/ 17 h1{ 18 font-size: 12px; 19 color: red; 20 visibility: visible; /*设置h1标签里的内容是否可见：visible可见，hidden不可见*/ 21 } 22 23 /*类选择器*/ 24 .className{ 25 /*字体设置*/ 26 font-family:"隶书"; 27 font-size:12px; 28 font-style:italic; 29 font-weight:bold; /*normal：标准字体，bold：粗体，bolder：更粗，lighter：更细，400等同于normal，700等同于bold*/ 30 font:italic bold 36px "宋体"; /*必须按照这个顺序*/ 31 color:red; /*设置字体为红色*/ 32 33 /*文本设置*/ 34 text-align: right; /*设置排列方式，left：左排列，right：右排列，center：中间排列，justify：两端对齐排列，inherit：继承父元素的排列方式*/ 35 text-indent: 20px; /*设置首行缩进20px*/ 36 text-decoration: underline; /*文本装饰，none：默认值，underline：下划线，overline：上划线，line-through：删除线*/ 37 line-height: 25px; /*设置行高25px*/ 38 39 /*盒子自身参数*/ 40 width:90%; /*宽度等于父盒子的90%*/ 41 width:200px; /*宽200px*/ 42 height:200px; /*高200px*/ 43 background：red; /*设置背景色为红色*/ 44 45 /*盒子边框颜色*/ 46 border-top-color:red; 47 border-right-color:red; 48 border-bottom-color:red; 49 border-left-color:red; 50 border-color:red blue; /*上下red，左右blue*/ 51 border-color:red blue yellow; /*上red，左右blue，下yellow*/ 52 border-color:red blue yellow green; /*依次是：上下左右*/ 53 54 /*盒子边框宽度*/ 55 border-top-width:5px; 56 border-right-width:5px; 57 border-bottom-width:5px; 58 border-left-width:5px; 59 border-width:5px; /*四边都是5px*/ 60 border-width:5px 10px; /*上下5px，左右10px*/ 61 border-width:5px 10px 15px; /*上5px，左右10px，下15px*/ 62 border-width:5px 10px 15px 20px; /*依次是：上下左右*/ 63 64 /*盒子边框样式*/ 65 border-top-style:solid; /*solid：实线，dotted：点线，dashed：线段，double：*/ 66 border-right-style:solid; 67 border-bottom-style:solid; 68 border-left-style:solid; 69 border-style:solid; /*四边都是solid*/ 70 border-style:solid dotted; /*上下solid，左右dotted*/ 71 border-style:solid dotted dashed; /*上solid，左右dotted，下dashed*/ 72 border-style:solid dotted dashed double; /*依次是：上下左右*/ 73 74 /*盒子边框设置简写*/ 75 border:1px solid red; /*必须按照这个顺序*/ 76 77 /*盒子外边距*/ 78 margin-top:1px; 79 margin-right:1px; 80 margin-bottom:1px; 81 margin-left:1px; 82 margin:1px; /*四边都是1px*/ 83 margin:1px 2px; /*上下1px，左右2px*/ 84 margin:1px 2px 3px; /*上1px，左右2px，下3px*/ 85 margin:1px 2px 3px 4px; /*依次是：上下左右*/ 86 margin:0 auto; /*上下0，左右自动，最终的效果就是盒子居中显示*/ 87 88 /*盒子内边距*/ 89 padding-top:10px; 90 padding-right:10px; 91 padding-bottom:10px; 92 padding-left:10px; 93 padding:10px; /*四边都是10px*/ 94 padding:10px 20px; /*上下10px，左右20px*/ 95 padding:10px 20px 30px; /*上10px，左右20px，下30px*/ 96 padding:10px 20px 30px 40px; /*依次是：上下左右*/ 97 98 /*块元素和行元素*/ 99 display:inline; /*将块元素变成行元素，即两个块级元素不会换行显示，而是在一行显示*/ 100 display:block; /*将行元素变成块元素，即两个行元素不在同一行显示，而是换行显示*/ 101 display:inline-bolck; /*既具有块元素特性，也具有行元素特性*/ 102 103 disply:fled; /*设置元素弹性浮动*/ 104 flex-direction:column; /*弹性浮动的元素竖直排列，row是水平排列*/ 105 align-items:center; /*弹性浮动的元素中间对齐*/ 106 107 /*盒子浮动*/ 108 float:left; /*左浮动*/ 109 float:right; /*右浮动*/ 110 clear:left; /*清除左边的浮动元素*/ 111 clear:both; /*清除两边的浮动元素*/ 112 113 /*盒子相对定位*/ 114 position：relative; /*相对定位，相对于盒子原来的位置*/ 115 top:50px; /*相对于原来的位置，距上边50px*/ 116 left:30px; /*相对于原来的位置，距左边30px*/ 117 bottom:20px; /*相对于原来的位置，距下边20px*/ 118 right:10px; /*相对于原来的位置，距右边10px*/ 119 120 /*盒子绝对定位（相对于整个页面）*/ 121 position: fixed; 122 123 /*盒子绝对定位（相对于父盒子）*/ 124 position:absolute; /*绝对定位，相对于父盒子的位置*/ 125 top:50px; /*相对于父盒子原来的位置，距父盒子上边50px。ps：如果父盒子没有设置position属性或没有父盒子，就相对于整个页面做移动*/ 126 left:30px; /*相对于父盒子原来的位置，距父盒子左边30px。ps：如果父盒子没有设置position属性或没有父盒子，就相对于整个页面做移动*/ 127 bottom:20px; 128 right:10px; 129 130 /*绝对定位的层叠顺序*/ 131 z-index:1; /*盒子显示的层叠顺序，值可以为正数也可以为负数，值大的，就显示在上方*/ 132 } 133 134 /*id选择器*/ 135 #idName{ 136 137 } 138 139 /*列表样式*/ 140 .list{ 141 list-style-type: disc; 142 } /*设置列表前标记符号的样式，none：无标记符号，disc：实心圆（默认的），circle：空心圆，square：实心正方形，decimal：数字*/ 143 144 /*背景*/ 145 #block{ 146 width: 800px; /*设置block所在div的宽度*/ 147 width: 100%; /*设置block所在div宽度，为父盒子的100%*/ 148 height: 500px; /*设置block所在div的高度*/ 149 background-color: red; /*设置整个块元素的背景为红色*/ 150 background-image: url("../img/2.png"); /*设置2.png为整个块元素的背景图片*/ 151 background-repeat: no-repeat; /*设置背景图片的平铺方式，no-repeat：不平铺（即只显示一次），repeat：水平和垂直方向平铺，repeat-x：水平平铺，repeat-y：垂直平铺*/ 152 background-position: 100px 200px; /*设置背景图片的位置*/ 153 background-position: 30% 50%; /*用百分比设置背景图片的位置*/ 154 background-position: left center; /*用关键词设置背景图片的位置，水平方向：left、center、right，垂直反向：top、center、bottom*/ 155 background: #FFFFFF url("../img/2.png") 200px 100px no-repeat; /*依次是：背景颜色、背景图片、图片水平定位、图片垂直定位、图片平铺方式*/ 156 background-size: auto; /*设置背景图片的大小，auto：自动大小，40% 60%：用百分比设置背景图片大小，cover：填充整个块元素，contain：等比缩放填充块元素*/ 157 opacity: 1; /*设置背景的透明度，1是不透明，0是完全透明，可以设置0~1之间的值*/ 158 overflow-y: auto; /*竖直方向出现滚动条*/ 159 overflow-x: auto; /*水平方形出现滚动条*/ 160 } 161 162 /*高级选择器：层次选择器、结构伪例选择器、属性选择器*/ 163 /*层次选择器：又分为后代选择器、子选择器、相邻兄弟选择器、通用选择器*/ 164 /*后代选择器*/ 165 body p{ 166 background: red; 167 } /*body里面所有的P元素都这样修饰，包括<ul>里的p*/ 168 169 /*子选择器*/ 170 body>p{ 171 background: red; 172 } /*body里面所有的直接子元素p都这样修饰，不包括<ul>里的p*/ 173 174 /*相邻兄弟选择器*/ 175 .title+p{ 176 background: red; 177 } /*只有紧邻h1标签（title类名所在的标签）的下一个同级p元素才会被修饰（不同级不行），也就是“我是段落1”所在的p元素*/ 178 179 /*通用选择器*/ 180 .title~p{ 181 background: red; 182 } /*h1标签（title类名所在的标签）下面的所有同级p元素都会被修饰（不同级不行），也就是“我是段落1”和“我是段落2”所在的p元素*/ 183 184 /*结构伪例选择器*/ 185 ul li:fitst-child{ 186 background: red; 187 } /*ul（无序列表）里的第一个子元素会被修饰*/ 188 189 ul li:last-child{ 190 background: red; 191 } /*ul（无序列表）里的最后一个子元素会被修饰*/ 192 193 p:nth-child(2){ 194 background: red; 195 } /*body里面的第二个元素，且必须是p元素，就会被修饰*/ 196 197 p:nth-of-type(2){ 198 background: red; 199 } /*body里面第二个p元素（从第一个p元素开始数，不是从第一个元素开始数），就会被修饰*/ 200 201 /*属性选择器*/ 202 a[id]{ 203 background: red; 204 } /*是a标签，且里面存在id属性，就会被修饰*/ 205 206 a[id=first]{ 207 background: red; 208 } /*是a标签，且里面存在id属性，且id属性的值等于first，就会被修饰*/ 209 210 a[class=link]{ 211 background: red; 212 } /*是a标签，且里面存在class属性，且class属性的值等于link，就会被修饰*/ 213 214 a[class*=link]{ 215 background: red; 216 } /*是a标签，且里面存在class属性，且class属性的值包含link，就会被修饰*/ 217 218 a[href^=http]{ 219 background: red; 220 } /*是a标签，且里面存在href属性，且href属性的值以http开头，就会被修饰*/ 221 222 a[href$=com]{ 223 background: red; 224 } /*是a标签，且里面存在href属性，且href属性的值以com结尾，就会被修饰*/ 225 226 /*超链接的伪样式*/ 227 a:link{ 228 color: blue; 229 } /*超链接展示时，以蓝色展示*/ 230 231 a:hover{ 232 color: red; 233 } /*鼠标移到超链接上时，超链接变成红色*/ 234 235 a:visited{ 236 color: yellow; 237 } /*超链接被点击后，变成黄色*/ 238 239 a:active{ 240 color: black; 241 } /*鼠标点击，但未放开时，超链接变成黑色*/ 242 </style> 243 </head> 244 245 <body> 246 <!--行内样式--> 247 <h1 class="title" style="color:blue; font-size:10px;"></h1> 248 249 <!--段落--> 250 <p>我是段落1</p> 251 <p>我是段落2</p> 252 253 <!--无序列表--> 254 <ul class="list"> 255 <li><p>4</p></li> 256 <li><p>5</p></li> 257 <li><p>6</p></li> 258 </ul> 259 260 <p> 261 <a href="Demo1.html" class="link first" id="first" target="_self">超链接（跳转到html界面）</a> 262 <a href="Demo1.html" class="link" ><img src="../img/2.png"></img>超链接（点击图片以跳转）</a> 263 <a href="http://www.baidu.com" class="" id="baidu">超链接（跳转到对应的网址）</a> 264 </p> 265 266 <div id="block">我是块元素</div> 267 </body> 268 </html>
。
