css权威指南

Author：Chemandy 第一章 CSS和文档 略 第二章 选择器 1. 选择器分类： 1) 文档结构选择器 ①元素选择器：如p{} span{} ②集团选择器：p, body, img, div{} ③类选择器：.class1{} ④多类选择器：.class1.class2{} ⑤ID选择器：#di1{} ⑥后代选择器：body ul li{} ⑦直接后代选择器：div > p{} ⑧相邻兄弟选择器： div + p{} 说明：选择div元素后面的p元素兄弟节点。 2) 属性选择器 ①简单属性选择：h1[class]{} 说明：含class属性的h1 ②具体属性选择：h1[class="head"]{} 说明：含class属性值为head的h1 ③空格分离属性选择：h1[class~="head"]{} 说明：class属性值含有head或空格+head的h1 ④开头属性选择：h1[foo^="bar"]{} 说明：选择foo属性以bar开头的h1 ⑤结尾属性选择：h1[foo$="bar"]{} 说明：选择foo属性以bar结尾的h1 ⑥包含属性选择：h1[foo*="bar"]{} 说明：选择foo属性含有bar字符片段的h1 ⑦杠开头属性选择：h1[foo|="bar"]{} 说明：选择foo属性以bar开头或bar-开头的h1 3) 伪类选择器 ①:link ②

一、基本规则 CSS的核心特性就是能向文档中的一组元素类型应用某些规则。 二、规则结构 选择器+声明块。 h1{ color:red;background:yellow;} ，声明块由一个或多个声明组成。 三、元素选择器 文档的元素就是最基本的选择器，故叫元素选择器。 如果一个属性的值可以取多个关键字，关键字通常由空格分隔。 四、选择器分组 h1,h2,h3{CSS规则} 通配选择器 *{通配选择器} 对声明分组时，一定要在各个声明的最后使用分号。 类选择器和ID选择器 p.class{} p#id{} 多类选择器：通常把两个类选择器连接在一起，仅可以选择同时包含这些类名的元素，类名的顺序不限。 class="urgent warning"; ID选择器不允许有以空格分隔的词列表。 属类选择器 h1[class]{color:silver;} 这种格式要求必须与属性值完全匹配。 子串匹配属性选择器 ^开头 $结尾 *包含 [foo^="bar"] 选择foo属性值以“bar”开头的所有元素。 [foo$="bar"]选择foo属性值以“bar”结尾的所有元素。 [foo*="bar"]选择foo属性值包含子串“bar”的所有元素。 [att|="val"] 选择att属性值等于val或者以val开头的所有元素。 使用文档结构 理解父子关系。 后台选择器 h1 em{color

前言：CSS即层叠样式表 主要是影响一个或者一组文档的表现，没有文档，CSS毫无用处。 一、web的衰落 完全结构化的文本太过古板，太平常，虽然有N个理由要求使用结构化标记，但HTML已然走到了今天。 二、CSS做救星 丰富的样式，易于使用，在多个页面上使用样式，层叠，缩减文件大小，为未来做准备，所以CSS有更加丰富的外观，在一个位置上就能修改和创建整个文档的外观，可将样式表链接到网站上所有的文档，同时还规定了冲突规则，这些规则统称为层叠。 同时可以缩减文件大小，为将来做准备。 三、元素 元素时文档结构的基础，可以分为如下几类： 1》替换元素和非替换元素。 替换元素时指用来替换元素内容的部分并非由文档内容直接表示。如img元素。 input元素等。 大部分的HTML和Xhtml元素都是非替换元素，如span，h1~h6标题标签，表单元格，列表和Xhtml中的几乎所有的元素都是非替换元素。 2》元素显示角色 块级元素和行内元素。 块级元素生成一个元素框，会填充父元素的内容区，在元素框之前和之后生成了“分隔符”。如p，div元素，替换元素可以是块级元素，但通常都不是。 行内元素 行内元素在文本行内生成元素框，而不会打断这行文本，如a标签，strong和em也属于。 区别：在HTML和XHTML中，块级元素不能继承自行内元素，级不能嵌套在行内元素中。但是在CSS中

元素的外边距内就是元素的边框。即围绕元素内容和内边距的一条或多条线。由于元素的背景不会在元素外边距以内，所以背景在元素外边框边界处停止。 边框有三个方面：宽度或粗细，样式或外观，颜色。 宽度默认值为medium，通常为2px，默认none，所以不一定能看到边框。 颜色默认是元素的前景色，如果没有前景色则是元素文本颜色，如果也没有，那么将继承父元素的文本颜色。 边框和背景 大多数浏览器遵循CSS2.1的定义，元素的背景是内容、内边距和边框处的背景。 有样式的边框 样式控制着边框的显示，没有样式，就没有边框。 border-style定义了10个不同的非inherit样式，包括默认值none。 double定义为两条线的宽度再加上这两条线之间的空间等于border-width值。两条线的粗细以及线之间的空间的宽度由用户代理决定。 多种样式 可以为给定边框定义多个样式，例如： p.aside { border-style : solid dashed dotted solid ;} 结果是段落由一个实线上边框、虚线右边框、点线下边框和一个实线左边框。 单边样式 border-top/right/bottom/left-style 如果三边有边框，一边无边框，有两种写法，第一种在样式里一一声明，这里不多说，说说第二种， h1 { border-style : solid ; border