06CSS基础技术方案.pptVIP

类选择器 .class color: green; font-size: 20px; 类别选择器 属性 值 属性 值 声明 声明 类别名称 类选择器 style type text/css .one color: red; .two font-size:20px; 选择器之标记选择器1 p class one 应用第一种class选择器样式 p class two 应用第二种class选择器样式 p class one two 同时应两种class选择器样式 h3 class two h3同样适用 以上定义了类别名的元素都会应用相应的类选择器的样式，其中第四行通过class “one two”将两种样式同时加入，得到红色20象素的大字体。第一行的p元素因未定义类别名则不受影响。 id选择器 id选择器的使用方法与class选择器基本相同，不同之处在于一个id选择器只能应用于html文档中的一个元素，因此其针对性更强，而class选择器可以应用于多个元素。 id选择器以半角“#”开头，且id名称的第一个字母不能为数字 。 #UserName ID选择器 ID选择器 #id color: yellow; font-size: 30px; ID选择器 属性 值 属性 值 声明 声明 ID选择器 style type text/css #one font-weight:bold; /* 粗体 */ #two font-size:30px; /* 字体大小 */ color:#009900; /* 颜色 */ p id one ID选择器1 p id two ID选择器2 p id “two” ID选择器3 /*不推荐 ，ID应该唯一*/ p id “one two” ID选择器3 /*错误*/ ID选择器 上例中，第一行应用了#one的样式，第二行和第三行将一个id选择器应用到了两个元素上，显然违反了一个id选择器只能应用在一个元素上的规定，但浏览器却也显示了CSS样式风格且没有报错。虽然如此，我们在编写CSS代码时，还是应该养成良好的编码习惯，一个id最多只能赋予一个html元素，因为每个元素定义的id不只是CSS可以调用，JavaScript等脚本语言也可以调用，如果一个html中有两个相同id属性的元素，那么将导致JavaScript在查找id时出错，例如函数getElementById 。第四行在浏览器中没有任何CSS样式风格显示，这意味着ID选择器不支持像class选择器那样的多风格同时使用。因为元素和id是一一对应的关系，不能为一个元素指定多个id，也不能将多个元素定义为一个id。类似id one two这样的写法是完全错误的 类名和id名的大小写 关于类名和id名的大小写：CSS大体上是不区分大小写的语言，但是对于标记实体的类名和id名是否区分大小写取决于标记语言是否区分大小写，如果使用XHTML，那么类名和id名是区分大小写的，如果是HTML，则不区分大小写 。 关联选择器 关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如， 以下的上下文选择符 P B background: yellow 是P B。这个值表示段落中的强调文本会是黄色背景；而其它的强调文本则不受影响。 组合选择器 为了减少样式表的重复声明，组合的选择符声明是允许的。例如，文档中所有的标题可以通过组合给出相同的声明: H1, H2, H3, H4, H5, H6 color: red; font-family: sans-serif 容器标记 div和span div和span是不含有任何语义的标记，用来在其中放置任何网页元素，就象一个容器一样，当把文字放入后，文字的格式外观都不会发生任何改变，应用容器标记的主要作用是通过引入CSS属性对容器内元素内容的表现进行设置。 div和span的唯一区别是div是块级元素，span是行内元素。 1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。 例如，如果某元素以 12pt 显示，那么 2em 是24pt。 在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。 * CSS 概述 CSS 概述 CSS是Cascading Styles Sheets的缩写，中文译名为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 HTML和CSS的关系就是“内容”和“形式”的关系，由HTML组织网页的结构和内容，而通过CSS来决定