CSS层叠样式表

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS的优点 (4)

只要通过修改一个文件就改变多个的网页的外观和格式，更快更容易地维护及更新大量的网页没有样式表时，如果想更新整个站点中所有主体文本的字体，必须一页一页地修改每张网页,更新每一模板中每一个实例实例的<FONT FACE>。样式表的主旨就是将格式和结构分离。使用样式表，可以将站点上所有的网页都指向单一的一个 CSS文件，只要修改CSS文件中某一行，那么整个站点都会随之发生变动。
选择符

选择符的种类

第四种选择符。即关联选择符，也称上下文选择符。关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。
关联选择符例子：
P EM { background: yellow }/*只对包含在<p>元素中的<em>元素的内容起作用，而不能对没有包含在p>元素中的<em>元素的内容起作用*/

ID选择符注意事项

整个文档当中的每个ID属性的值都必须是唯一的。其值必须是一个以字母开头紧接字母、数字或连字符。字母限于A-Z和a-z。 HTML 4.0允许在ID属性中有句号，但CSS1不允许在ID选择符中有句号。也要注意CSS1允许 Unicode字符161-255而且忽略Unicode字符为一个数字代码，但HTML 4.0不允许这些字符在一个ID属性值当中。当一个样式只需要在任何文档中应用一次时，使用ID是很适合的。
首先写出各类：
P.first { color: red } P.second { color: green } P.third { color: gray }
然后在HTML代码中引入各类样式即可：
<P CLASS=first>The first paragraph, with a class name of "first."</P> <P CLASS=second>The second paragraph, with a class name of "second."</P> <P CLASS=third>The third paragraph, with a class name of "third."</P>
总结：

利用样式表可以更精确，更一致地对呈现细节进行控制。提高了Web文档样式的一致性。 HTML/XHTML 某些标签和某些标签的属性可以用来描述呈现细节，但是已经不建议使用了。
学习内容

CSS语法

样式表的作用范围，即选择HTML文档哪个部分内容按照所定义的样式显示？ ——选择符定义显示的样式是什么样子？ ——属性，和属性值以三层的形式加以定义，从底层到高层的顺序，分别为行内样式表，文档层样式表，外部样式表较低层的样式表能够覆盖较高层的样式表，所以一个标签内容的样式是通过一个层叠的样式表来确定的。

HTML用于控制所呈现的内容 CSS用于控制这些内容在浏览器中呈现的方式
CSS的优点 (1)

以前所未有的能力控制页面的布局可以对HTML文档的布局、字体、颜色、背景和其它文图效果实现更加精确的控制。 HTML样式不可能精确地生成80象素的高度，不可能控制行间距或字间距，我们不能在屏幕上精确定位图象的位置。 CSS使这一切都成为可能。 CSS控制能力比 HTML本身样式控制能力强.
类选择符的例子（1）
类选择符是应用样式到HTML文档中，可以起到一部分区分文档结构的效果。
1.分类功能够在同一HTML页面中实现更为复杂的样式。比如，我们想让主体文字的第1段用红色显示，第2段用绿色显示，而第3段则用灰色显示，那么就可以使用分类功能，将段落P分成3种不同的类别，每一类应用不同的样式表说明。

CSS样式的规则定义
选择符(或称标记名) ｛属性：值；属性：值；„„｝定义形式由3部分组成： (1) 选择符：解决选择HTML文档哪个部分按照所定义的样式显示的问题.CSS的选择符有四种：第一种是HTML标记, 比如 P, BODY, A等；第二种叫类选择符(class)；第三种叫ID选择符；第四种叫关联选择符。 (2) 属性：就是那些将要被修改的性质, 比如 color，fontsize等。 (3) 值：即赋给属性的值 , 例如给 color 的值可以是 red 或 yellow等。（2）（3）形成的属性列表解决了所选择的这部分文档显示的样式是什么样的问题。
选择符的层叠

选择符的继承实际上，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更改。例如，一个BODY定义了的颜色值也会应用到段落的文本中。选择符的优先级:选择范围小的优先级高没有冲突的属性叠加
选择符的组合
为了减少样式表的重复声明，组合的选择符声明是允许的。文档中所有的标题可以通过组合给出相同的声明。例如： h1 {color:black;font-family:Times New Roman} h2 {color:black;font-family:Times New Roman} h3 {color:black;font-family:Times New Roman} h4 {color:black;font-family:Times New Roman} h5 {color:black;font-family:Times New Roman} h6{color:black;font-family:Times New Roman} 可以写成: h1,h2,h3,h4,h5,h6{color:black;font-family:Times New Roman}
P.warning { font-weight: bolder; color: red; background: white } P.punk{color: green; background: black}

类选择符是通过元素的CLASS属性应用到html文档中:
<H1 CLASS=punk>属性扩展</H1> <P CLASS=warning>一些属性扩展会有负值的边效果，产生于支持和不支持的浏览器上...
样式表文件内注释
样式表文件内也可以加入注释，注释方法和C语言的注释方法一样。例如： H1{color: black; font-family: Times New Roman } /*set color and font-family*/
伪类和伪元素
伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素 ( 例如， visited links(已访问的连接)和active links(可激活连接) 描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。

如何将CSS内容引入HTML文档？
Βιβλιοθήκη Baidu
CSS基本规则
例子：引用了CSS样式的HTML文件头选择符属性取值列表 <HEAD> 属性 <TITLE>例子</TITLE> 值 <STYLE TYPE="text/css"> H1 { font-size: large; color: red;} H2 { font-size: small; color: blue } </STYLE> </HEAD>
CSS的优点 (2)

制作出体积更小下载更快的网页,更少的编码、更少的页数和更快的下载速度有了CSS之后，以前必须求助于GIF的事情现在通过CSS就可以实现同时使用层叠式样式表可以减少表格标记及其它加大HTML体积的代码，减少图象用量从而减少文件尺寸。
CSS的优点 (3)

将格式和结构分离 HTML原本只定义了网页的结构和要素的功能，而让浏览器自己决定应该让各要素以何种模样显示。 HTML中如<b><font>等样式标记加入编码变得越来越臃肿不堪，要想将什么内容迅速加到网页中变得越来越难。层叠式样式表通过将定义结构的部分和定义格式的部分分离使我们能够对页面的布局施加更多的控制。HTML仍可以保持简单明了的初衷。 CSS代码独立出来从另一角度控制页面外观。
类选择符的例子（2）
2.使用类给CSS源代码和HTML源代码使用不同的样式： code.html { color: green } code.css { color: blue } 注意：每个选择符只允许有一个类， code.html.css就是错误的。
选择符

选择符的种类
第二种选择符：类选择符（
A:link {color:red} /* unvisited link */ A:hover {color:yellow} /* hover link */ A:active {color:blue; font-size:125%} /* active links */ A:visited {color:green; font-size:85%} /* visited links */ NS7支持，IE6不支持： input：hover{color:red;}/*当鼠标移动到输入元素如文本框的内容上方时*/ input：focus{color:green;}/*当输入元素如文本框获得焦点时*/
选择符

选择符的种类

第二种选择符：类选择符，这样同一种元素可以分成为不同的类(CLASS)，也就是允许同一元素有不同样式，使用元素的CLASS属性来指定元素属于何种样式的类。分成两种，相关类选择符（书：类选择器），独立类选择符（书：通用选择器）

选择符定义中有相关标签的名称，这种叫相关类选择符。选择符定义是首先给定一个类的名称，然后将其附加到某一个标签名称的后面。相关类选择符如:
伪类或伪元素规则的形式如选择符:伪类 { 属性: 值 }或选择符:伪元素 { 属性: 值 }

定位锚伪类
伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示，甚至不同字体大小和风格。

可用于不同标签）
选择符的定义中没有包含标签的名称，这个类叫独立类选择符（书：通用选择器）可以用于所有元素。
独立类选择符如:.punk {color: lime;

background: #ff80c0 }

类选择符是通过元素的CLASS属性应用到html文档中:
<H1 CLASS=punk>属性扩展</H1> <P CLASS=punk>一些属性扩展会有负值的边效果，产生于支持和不支持的浏览器上...
选择符

选择符的种类

第一种选择符：简单的选择符

任何HTML元素的都可以是一个CSS的选择符。如：H1 { font-size: large; color: red;} 这时选择的是html文档中某种元素的显示样式。即规则中的属性值能够应用于所有以此为名称的标签元素。如选择符是一个星号（*），那么其属性将应用于文档中的每一个标签元素。
选择符

选择符的种类
第三种选择符。即ID选择符。 ID选择符是将样式表的作用范围限定为某个特定的元素。一个ID选择符指定要有指示符"#"在名字前面。这样就可以利用元素的ID属性用于定义一个元素的独特的样式。一个CSS规则如 #wdg97 { font-size: 20;color:yellow} 可以通过ID属性应用到HTML中: <P ID=wdg97>欢迎访问Web Design Group及TV water 168!</P> 就指定了上述元素的字体为20，颜色为黄色
第三章网页样式:css 语言
教学目的：介绍网页制作的CSS技术可以参考 http://www.htmlhelp.com/zh/reference/css/
CSS概述

什么是CSS
CSS是层叠式样式表(Casding Style Sheet)的简称，它是用来对HTML文档的布局、字体、颜色、背景和其它文图效果实现更加精确的控制。 HTML/ XHTML VS. CSS
<H1>< EM >Emma Thompson</ EM >, Actress </H1> <P>Dramatic actor, inspired comedienne. Is there < EM >nothing</ EM > she can't do?</P>
该代码执行时将告诉浏览器只将所有<P>和</P>之内加重显示的文字即“nothing”以红色显示，而<P>和</P>之外加重显示的标题文字 “Emma Thompson”则不会以红色显示。