css课件(上课用)解答.ppt

CSS层叠样式表;CSS层叠样式表; CSS样式通常保存在外部的 .css 文件中。通过仅仅 编辑一个简单的 CSS 文档，外部样式表使你有能力同时 改变站点中所有页面的布局和外观。这样，创建的文档 内容和文档的显示外观就有着明显的相互独立。 当然，CSS样式也可以以style标签的形式写在网页 文件的head标签中，或是直接将CSS语句书写在某个元 素标签的属性部分。; 当同一个 HTML 元素被不止一个样式定义时，会使用 哪个样式呢？ 一般而言，所有的样式会根据下面的规则层叠于一个 新的虚拟样式表中，它们产生作用的优先级别为如下顺 序： 内联样式（在 HTML 元素内部） 内部样式表（位于 head 标签内部） 外部样式表（以CSS文件独立存在） 例题 css-1.html;CSS 语法 CSS 语法由三部分构成：选择器、属性和值： selector {property: value} 选择器 (selector) 通常是你希望定义的HTML元素或标签，属性 (property)是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）,例如： body {color: blue;} 如果值为若干单词，则要给值加引号： p {font-family: sans serif;} ; 如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则是不需要加分号的，但是一般在每条声明的末尾都会加上分号，包括最后一条规则。这么做的好处是尽可能的减少出错的可能性。 p {text-align:center; color:red;} 在书写的时候可以每行只描述一个属性，以便使样式定义的可读性更强。 p { text-align: center; color: black; font-family: arial; ｝ ;选择器的分组 可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明，用逗号将需要分组的选择器分开。 h1,h2,h2,h3,h5,h6 { color: green; } 在上面的例子中，对所有的标题标签进行了分组。所有的标题元素都是绿色的。 ;选择器的类型 1 派生选择器 通过依据元素在其位置的上下文关系来定义样式，在 CSS中，通过这种方式来应用规则的选择器被称为派生选择器 。这样可以利用元素的上下文关系来应用或者避免某项规则。 li b { font-style: italic; font-weight: normal; } 例题 css-2.html;2 id选择器 id 选择器可以为标有特定id的HTML元素指定特定的样式。id 选择器以 “#” 来定义。下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： #red {color:red;} #green {color:green;} p id=red这个段落是红色。/p font id=“green”这句文本是绿色。/font 注意：一个值的id属性只能在每个HTML文档中出现一次。;id选择器和派生选择器 id选择器常常用于建立派生选择器。 #sidebar p { font-style: italic; text-align: right; margin-top: 10px; } 上面的样式只会应用于出现在id是sidebar的元素内的段落。这个元素很可能是 div 或者是表格单元，即使被标注为sidebar的元素只能在文档中出现一次，这个id选择器作为派生选择器也可以被使用很多次。 例题 css-3.html;3 类选择器 在 CSS 中，类选择器以一个点号显示： .center {text-align: center} 因此，所有拥有 center 类的HTML元素均为居中。 h1 clas