1 基本语法：selector {declaration1; declaration2; ... declarationN } 2 ID选择器：#red {color:red;} 3 类选择器：.center {text-align: center} 4 组选择器：h1,h2,h3,h4,h5,h6 { color: green; } 5 属性选择器：[title]{color:red;} 6 后代选择器：h1 em {color:red;} 7 选择子元素：h1 > strong {color:red;} 8 选择相邻兄弟：h1 + p {margin-top:50px;} 9 伪类的语法： 10 selector : pseudo-class {property: value} 11 selector.class : pseudo-class {property: value} 12 伪元素的语法： 13 selector:pseudo-element {property:value;} 14 selector.class:pseudo-element {property:value;} 15 ========================================================================== 16 伪类 17 18 W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。 19 属性 描述 CSS 20 :active 向被激活的元素添加样式。 1 21 :focus 向拥有键盘输入焦点的元素添加样式。 2 22 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 1 23 :link 向未被访问的链接添加样式。 1 24 :visited 向已被访问的链接添加样式。 1 25 :first-child 向元素的第一个子元素添加样式。 2 26 :lang 向带有指定 lang 属性的元素添加样式。 2 27 -------------------------------------------------------- 28 伪元素 29 30 W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。 31 属性 描述 CSS 32 :first-letter 向文本的第一个字母添加特殊样式。 1 33 :first-line 向文本的首行添加特殊样式。 1 34 :before 在元素之前添加内容。 2 35 :after 在元素之后添加内容。 2 36 ========================================================================== 37 外部样式表： 38 <head> 39 <link rel="stylesheet" type="text/css" href="mystyle.css" /> 40 </head> 41 内部样式表： 42 <style type="text/css"> 43 hr {color: sienna;} 44 p {margin-left: 20px;} 45 body {background-image: url("images/back40.gif");} 46 </style> 47 内联样式： 48 <p style="color: sienna; margin-left: 20px"> 49 This is a paragraph 50 </p> 51 ========================================================================== 52 背景色：p {background-color: gray;} 53 背景图像：body {background-image: url(/i/eg_bg_04.gif);} 54 body 55 { 56 background-image:url('/i/eg_bg_03.gif'); 57 background-repeat:no-repeat; 58 background-position:center; 59 } 60 CSS 背景属性 61 属性 描述 62 background 简写属性，作用是将背景属性设置在一个声明中。 63 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 64 background-color 设置元素的背景颜色。 65 background-image 把图像设置为背景。 66 background-position 设置背景图像的起始位置。 67 background-repeat 设置背景图像是否及如何重复。 68 ========================================================================== 69 CSS 文本属性 70 属性 描述 71 color 设置文本颜色 72 direction 设置文本方向。 73 line-height 设置行高。 74 letter-spacing 设置字符间距。 75 text-align 对齐元素中的文本。 76 text-decoration 向文本添加修饰。 77 text-indent 缩进元素中文本的首行。 78 text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 79 text-transform 控制元素中的字母。 80 unicode-bidi 设置文本方向。 81 white-space 设置元素中空白的处理方式。 82 word-spacing 设置字间距。 83 ========================================================================== 84 CSS 字体属性 85 属性 描述 86 font 简写属性。作用是把所有针对字体的属性设置在一个声明中。 87 font-family 设置字体系列。 88 font-size 设置字体的尺寸。 89 font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。） 90 font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。） 91 font-style 设置字体风格。 92 font-variant 以小型大写字体或者正常字体显示文本。 93 font-weight 设置字体的粗细。 94 ========================================================================== 95 css链接 96 <style> 97 a:link {text-decoration:none;} /* 未被访问的链接 */ 98 a:visited {text-decoration:none;} /* 已被访问的链接 */ 99 a:hover {text-decoration:underline;} /* 鼠标指针移动到链接上 */ 100 a:active {text-decoration:underline;} /* 正在被点击的链接 */ 101 </style> 102 ========================================================================== 103 CSS 列表属性(list) 104 属性 描述 105 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。 106 list-style-image 将图象设置为列表项标志。 107 list-style-position 设置列表中列表项标志的位置。 108 list-style-type 设置列表项标志的类型。 109 ========================================================================== 110 CSS Table 属性 111 属性 描述 112 border-collapse 设置是否把表格边框合并为单一的边框。 113 border-spacing 设置分隔单元格边框的距离。 114 caption-side 设置表格标题的位置。 115 empty-cells 设置是否显示表格中的空单元格。 116 table-layout 设置显示单元、行和列的算法。 117 ========================================================================== 118 CSS 边框属性 119 "CSS" 列中的数字指示哪个 CSS 版本定义了该属性。 120 属性 描述 CSS 121 outline 在一个声明中设置所有的轮廓属性。 2 122 outline-color 设置轮廓的颜色。 2 123 outline-style 设置轮廓的样式。 2 124 outline-width 设置轮廓的宽度。 2 125 ========================================================================== 126 CSS 内边距属性 127 属性 描述 128 padding 简写属性。作用是在一个声明中设置元素的所内边距属性。 129 padding-bottom 设置元素的下内边距。 130 padding-left 设置元素的左内边距。 131 padding-right 设置元素的右内边距。 132 padding-top 设置元素的上内边距。 133 ========================================================================== 134 CSS 边框属性 135 属性 描述 136 border 简写属性，用于把针对四个边的属性设置在一个声明。 137 border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 138 border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 139 border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 140 border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。 141 border-bottom-color 设置元素的下边框的颜色。 142 border-bottom-style 设置元素的下边框的样式。 143 border-bottom-width 设置元素的下边框的宽度。 144 border-left 简写属性，用于把左边框的所有属性设置到一个声明中。 145 border-left-color 设置元素的左边框的颜色。 146 border-left-style 设置元素的左边框的样式。 147 border-left-width 设置元素的左边框的宽度。 148 border-right 简写属性，用于把右边框的所有属性设置到一个声明中。 149 border-right-color 设置元素的右边框的颜色。 150 border-right-style 设置元素的右边框的样式。 151 border-right-width 设置元素的右边框的宽度。 152 border-top 简写属性，用于把上边框的所有属性设置到一个声明中。 153 border-top-color 设置元素的上边框的颜色。 154 border-top-style 设置元素的上边框的样式。 155 border-top-width 设置元素的上边框的宽度。 156 ========================================================================== 157 CSS 外边距属性 158 属性 描述 159 margin 简写属性。在一个声明中设置所有外边距属性。 160 margin-bottom 设置元素的下外边距。 161 margin-left 设置元素的左外边距。 162 margin-right 设置元素的右外边距。 163 margin-top 设置元素的上外边距。 164 ========================================================================== 165 position 属性规定元素的定位类型。 166 可能的值 167 值 描述 168 absolute 169 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 170 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 171 fixed 172 生成绝对定位的元素，相对于浏览器窗口进行定位。 173 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 174 relative 175 生成相对定位的元素，相对于其正常位置进行定位。 176 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 177 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 178 inherit 规定应该从父元素继承 position 属性的值。 179 img.x{ 180 position:absolute; 181 left:0px; 182 top:0px; 183 z-index:-1 184 } 185 ========================================================================== 186 CSS3 动画属性（Animation） 187 属性 描述 CSS 188 @keyframes 规定动画。 3 189 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3 190 animation-name 规定 @keyframes 动画的名称。 3 191 animation-duration 规定动画完成一个周期所花费的秒或毫秒。 3 192 animation-timing-function 规定动画的速度曲线。 3 193 animation-delay 规定动画何时开始。 3 194 animation-iteration-count 规定动画被播放的次数。 3 195 animation-direction 规定动画是否在下一周期逆向地播放。 3 196 animation-play-state 规定动画是否正在运行或暂停。 3 197 animation-fill-mode 规定对象动画时间之外的状态。 3 198 ========================================================================== 199 CSS 背景属性（Background） 200 属性 描述 CSS 201 background 在一个声明中设置所有的背景属性。 1 202 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1 203 background-color 设置元素的背景颜色。 1 204 background-image 设置元素的背景图像。 1 205 background-position 设置背景图像的开始位置。 1 206 background-repeat 设置是否及如何重复背景图像。 1 207 background-clip 规定背景的绘制区域。 3 208 background-origin 规定背景图片的定位区域。 3 209 background-size 规定背景图片的尺寸。 3 210 ========================================================================== 211 CSS 边框属性（Border 和 Outline） 212 属性 描述 CSS 213 border 在一个声明中设置所有的边框属性。 1 214 border-bottom 在一个声明中设置所有的下边框属性。 1 215 border-bottom-color 设置下边框的颜色。 2 216 border-bottom-style 设置下边框的样式。 2 217 border-bottom-width 设置下边框的宽度。 1 218 border-color 设置四条边框的颜色。 1 219 border-left 在一个声明中设置所有的左边框属性。 1 220 border-left-color 设置左边框的颜色。 2 221 border-left-style 设置左边框的样式。 2 222 border-left-width 设置左边框的宽度。 1 223 border-right 在一个声明中设置所有的右边框属性。 1 224 border-right-color 设置右边框的颜色。 2 225 border-right-style 设置右边框的样式。 2 226 border-right-width 设置右边框的宽度。 1 227 border-style 设置四条边框的样式。 1 228 border-top 在一个声明中设置所有的上边框属性。 1 229 border-top-color 设置上边框的颜色。 2 230 border-top-style 设置上边框的样式。 2 231 border-top-width 设置上边框的宽度。 1 232 border-width 设置四条边框的宽度。 1 233 outline 在一个声明中设置所有的轮廓属性。 2 234 outline-color 设置轮廓的颜色。 2 235 outline-style 设置轮廓的样式。 2 236 outline-width 设置轮廓的宽度。 2 237 border-bottom-left-radius 定义边框左下角的形状。 3 238 border-bottom-right-radius 定义边框右下角的形状。 3 239 border-image 简写属性，设置所有 border-image-* 属性。 3 240 border-image-outset 规定边框图像区域超出边框的量。 3 241 border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 3 242 border-image-slice 规定图像边框的向内偏移。 3 243 border-image-source 规定用作边框的图片。 3 244 border-image-width 规定图片边框的宽度。 3 245 border-radius 简写属性，设置所有四个 border-*-radius 属性。 3 246 border-top-left-radius 定义边框左上角的形状。 3 247 border-top-right-radius 定义边框右下角的形状。 3 248 box-decoration-break 3 249 box-shadow 向方框添加一个或多个阴影。 3 250 ========================================================================== 251 Box 属性 252 属性 描述 CSS 253 overflow-x 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。 3 254 overflow-y 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。 3 255 overflow-style 规定溢出元素的首选滚动方法。 3 256 rotation 围绕由 rotation-point 属性定义的点对元素进行旋转。 3 257 rotation-point 定义距离上左边框边缘的偏移点。 3 258 ========================================================================== 259 Color 属性 260 属性 描述 CSS 261 color-profile 允许使用源的颜色配置文件的默认以外的规范。 3 262 opacity 规定书签的级别。 3 263 rendering-intent 允许使用颜色配置文件渲染意图的默认以外的规范。 3 264 ========================================================================== 265 Content for Paged Media 属性 266 属性 描述 CSS 267 bookmark-label 规定书签的标记。 3 268 bookmark-level 规定书签的级别。 3 269 bookmark-target 规定书签链接的目标。 3 270 float-offset 将元素放在 float 属性通常放置的位置的相反方向。 3 271 hyphenate-after 规定连字单词中连字符之后的最小字符数。 3 272 hyphenate-before 规定连字单词中连字符之前的最小字符数。 3 273 hyphenate-character 规定当发生断字时显示的字符串。 3 274 hyphenate-lines 指示元素中连续断字连线的最大数。 3 275 hyphenate-resource 规定帮助浏览器确定断字点的外部资源（逗号分隔的列表）。 3 276 hyphens 设置如何对单词进行拆分，以改善段落的布局。 3 277 image-resolution 规定图像的正确分辨率。 3 278 marks 向文档添加裁切标记或十字标记。 3 279 string-set 3 280 ========================================================================== 281 CSS 尺寸属性（Dimension） 282 属性 描述 CSS 283 height 设置元素高度。 1 284 max-height 设置元素的最大高度。 2 285 max-width 设置元素的最大宽度。 2 286 min-height 设置元素的最小高度。 2 287 min-width 设置元素的最小宽度。 2 288 width 设置元素的宽度。 1 289 ========================================================================== 290 可伸缩框属性（Flexible Box） 291 属性 描述 CSS 292 box-align 规定如何对齐框的子元素。 3 293 box-direction 规定框的子元素的显示方向。 3 294 box-flex 规定框的子元素是否可伸缩。 3 295 box-flex-group 将可伸缩元素分配到柔性分组。 3 296 box-lines 规定当超出父元素框的空间时，是否换行显示。 3 297 box-ordinal-group 规定框的子元素的显示次序。 3 298 box-orient 规定框的子元素是否应水平或垂直排列。 3 299 box-pack 规定水平框中的水平位置或者垂直框中的垂直位置。 3 300 ========================================================================== 301 CSS 字体属性（Font） 302 属性 描述 CSS 303 font 在一个声明中设置所有字体属性。 1 304 font-family 规定文本的字体系列。 1 305 font-size 规定文本的字体尺寸。 1 306 font-size-adjust 为元素规定 aspect 值。 2 307 font-stretch 收缩或拉伸当前的字体系列。 2 308 font-style 规定文本的字体样式。 1 309 font-variant 规定是否以小型大写字母的字体显示文本。 1 310 font-weight 规定字体的粗细。 1 311 ========================================================================== 312 内容生成（Generated Content） 313 属性 描述 CSS 314 content 与 :before 以及 :after 伪元素配合使用，来插入生成内容。 2 315 counter-increment 递增或递减一个或多个计数器。 2 316 counter-reset 创建或重置一个或多个计数器。 2 317 quotes 设置嵌套引用的引号类型。 2 318 crop 允许被替换元素仅仅是对象的矩形区域，而不是整个对象。 3 319 move-to 从流中删除元素，然后在文档中后面的点上重新插入。 3 320 page-policy 确定元素基于页面的 occurrence 应用于计数器还是字符串值。 3 321 ========================================================================== 322 Grid 属性 323 属性 描述 CSS 324 grid-columns 规定网格中每个列的宽度。 3 325 grid-rows 规定网格中每个列的高度。 3 326 ========================================================================== 327 Hyperlink 属性 328 属性 描述 CSS 329 target 简写属性，设置target-name、target-new以及target-position属性。 3 330 target-name 规定在何处打开链接（链接的目标）。 3 331 target-new 规定目标链接在新窗口还是在已有窗口的新标签页中打开。 3 332 target-position 规定在何处放置新的目标链接。 3 333 ========================================================================== 334 CSS 列表属性（List） 335 属性 描述 CSS 336 list-style 在一个声明中设置所有的列表属性。 1 337 list-style-image 将图象设置为列表项标记。 1 338 list-style-position 设置列表项标记的放置位置。 1 339 list-style-type 设置列表项标记的类型。 1 340 marker-offset 2 341 ========================================================================== 342 CSS 外边距属性（Margin） 343 属性 描述 CSS 344 margin 在一个声明中设置所有外边距属性。 1 345 margin-bottom 设置元素的下外边距。 1 346 margin-left 设置元素的左外边距。 1 347 margin-right 设置元素的右外边距。 1 348 margin-top 设置元素的上外边距。 1 349 ========================================================================== 350 Marquee 属性 351 属性 描述 CSS 352 marquee-direction 设置移动内容的方向。 3 353 marquee-play-count 设置内容移动多少次。 3 354 marquee-speed 设置内容滚动得多快。 3 355 marquee-style 设置移动内容的样式。 3 356 ========================================================================== 357 多列属性（Multi-column） 358 属性 描述 CSS 359 column-count 规定元素应该被分隔的列数。 3 360 column-fill 规定如何填充列。 3 361 column-gap 规定列之间的间隔。 3 362 column-rule 设置所有 column-rule-* 属性的简写属性。 3 363 column-rule-color 规定列之间规则的颜色。 3 364 column-rule-style 规定列之间规则的样式。 3 365 column-rule-width 规定列之间规则的宽度。 3 366 column-span 规定元素应该横跨的列数。 3 367 column-width 规定列的宽度。 3 368 columns 规定设置 column-width 和 column-count 的简写属性。 3 369 ========================================================================== 370 CSS 内边距属性（Padding） 371 属性 描述 CSS 372 padding 在一个声明中设置所有内边距属性。 1 373 padding-bottom 设置元素的下内边距。 1 374 padding-left 设置元素的左内边距。 1 375 padding-right 设置元素的右内边距。 1 376 padding-top 设置元素的上内边距。 1 377 ========================================================================== 378 Paged Media 属性 379 属性 描述 CSS 380 fit 示意如何对width和height属性均不是auto的被替换元素进行缩放。 3 381 fit-position 定义盒内对象的对齐方式。 3 382 image-orientation 规定用户代理应用于图像的顺时针方向旋转。 3 383 page 规定元素应该被显示的页面特定类型。 3 384 size 规定页面内容包含框的尺寸和方向。 3 385 ========================================================================== 386 CSS 定位属性（Positioning） 387 属性 描述 CSS 388 bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。 2 389 clear 规定元素的哪一侧不允许其他浮动元素。 1 390 clip 剪裁绝对定位元素。 2 391 cursor 规定要显示的光标的类型（形状）。 2 392 display 规定元素应该生成的框的类型。 1 393 float 规定框是否应该浮动。 1 394 left 设置定位元素左外边距边界与其包含块左边界之间的偏移。 2 395 overflow 规定当内容溢出元素框时发生的事情。 2 396 position 规定元素的定位类型。 2 397 right 设置定位元素右外边距边界与其包含块右边界之间的偏移。 2 398 top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 2 399 vertical-align 设置元素的垂直对齐方式。 1 400 visibility 规定元素是否可见。 2 401 z-index 设置元素的堆叠顺序。 2 402 ========================================================================== 403 CSS 打印属性（Print） 404 属性 描述 CSS 405 orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。 2 406 page-break-after 设置元素后的分页行为。 2 407 page-break-before 设置元素前的分页行为。 2 408 page-break-inside 设置元素内部的分页行为。 2 409 widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。 2 410 ========================================================================== 411 CSS 表格属性（Table） 412 属性 描述 CSS 413 border-collapse 规定是否合并表格边框。 2 414 border-spacing 规定相邻单元格边框之间的距离。 2 415 caption-side 规定表格标题的位置。 2 416 empty-cells 规定是否显示表格中的空单元格上的边框和背景。 2 417 table-layout 设置用于表格的布局算法。 2 418 ========================================================================== 419 CSS 文本属性（Text） 420 属性 描述 CSS 421 color 设置文本的颜色。 1 422 direction 规定文本的方向 / 书写方向。 2 423 letter-spacing 设置字符间距。 1 424 line-height 设置行高。 1 425 text-align 规定文本的水平对齐方式。 1 426 text-decoration 规定添加到文本的装饰效果。 1 427 text-indent 规定文本块首行的缩进。 1 428 text-shadow 规定添加到文本的阴影效果。 2 429 text-transform 控制文本的大小写。 1 430 unicode-bidi 设置文本方向。 2 431 white-space 规定如何处理元素中的空白。 1 432 word-spacing 设置单词间距。 1 433 hanging-punctuation 规定标点字符是否位于线框之外。 3 434 punctuation-trim 规定是否对标点字符进行修剪。 3 435 text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3 436 text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3 437 text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3 438 text-outline 规定文本的轮廓。 3 439 text-overflow 规定当文本溢出包含元素时发生的事情。 3 440 text-shadow 向文本添加阴影。 3 441 text-wrap 规定文本的换行规则。 3 442 word-break 规定非中日韩文本的换行规则。 3 443 word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3 444 ========================================================================== 445 2D/3D 转换属性（Transform） 446 属性 描述 CSS 447 transform 向元素应用 2D 或 3D 转换。 3 448 transform-origin 允许你改变被转换元素的位置。 3 449 transform-style 规定被嵌套元素如何在 3D 空间中显示。 3 450 perspective 规定 3D 元素的透视效果。 3 451 perspective-origin 规定 3D 元素的底部位置。 3 452 backface-visibility 定义元素在不面对屏幕时是否可见。 3 453 ========================================================================== 454 过渡属性（Transition） 455 属性 描述 CSS 456 transition 简写属性，用于在一个属性中设置四个过渡属性。 3 457 transition-property 规定应用过渡的 CSS 属性的名称。 3 458 transition-duration 定义过渡效果花费的时间。 3 459 transition-timing-function 规定过渡效果的时间曲线。 3 460 transition-delay 规定过渡效果何时开始。 3 461 ========================================================================== 462 用户界面属性（User-interface） 463 属性 描述 CSS 464 appearance 允许您将元素设置为标准用户界面元素的外观 3 465 box-sizing 允许您以确切的方式定义适应某个区域的具体内容。 3 466 icon 为创作者提供使用图标化等价物来设置元素样式的能力。 3 467 nav-down 规定在使用 arrow-down 导航键时向何处导航。 3 468 nav-index 设置元素的 tab 键控制次序。 3 469 nav-left 规定在使用 arrow-left 导航键时向何处导航。 3 470 nav-right 规定在使用 arrow-right 导航键时向何处导航。 3 471 nav-up 规定在使用 arrow-up 导航键时向何处导航。 3 472 outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 3 473 resize 规定是否可由用户对元素的尺寸进行调整。 3
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
