CSS学习（1）开篇

来源：互联网发布：摄像头自动对焦算法编辑：程序博客网时间：2024/04/27 15:47

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。

样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

h1 {color:red; font-size:14px;}

选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成，使用花括号来包围声明。如果要定义不止一个声明，则需要用分号将每个声明分开。分号在英语中是一个分隔符号，不是结束符号。

属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。如果值为若干单词，则要给值加引号。

与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

选择器的分组

可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

继承及其问题

根据 CSS，子元素从父元素继承属性。但有些旧式浏览器无法理解继承，可以通过"Be Kind to Netscape 4" 的冗余法则处理该问题。
创建一个针对子元素的特殊规则，这样它就会摆脱父元素的规则。

body  {     font-family: Verdana, sans-serif;     }td, ul, ol, ul, li, dl, dt, dd  {     font-family: Verdana, sans-serif;     }p  {     font-family: Times, "Times New Roman", serif;     }

派生选择器
通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。

比如，希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {    font-style: italic;    font-weight: normal;  }<ol><li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li></ol>

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。

#red {color:red;}<p id="red">这个段落是红色。</p>

id 属性只能在每个 HTML 文档中出现一次。

在现代布局中，id 选择器常常用于建立派生选择器。

#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}

上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。

CSS 类选择器

在 CSS 中，类选择器以一个点号显示。

.center {text-align: center}<h1 class="center">This heading will be center-aligned</h1>

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

和 id 一样，class 也可被用作派生选择器：

.fancy td {color: #f60;background: #666;}

在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）

元素也可以基于它们的类而被选择：

td.fancy {color: #f60;background: #666;}<td class="fancy"> </td>

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

CSS 属性选择器

对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

[title]{color:red;}<p title="Hi">Hi!</p>

CSS 选择器参考手册
选择器描述

[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

0 0