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