网页设计与制作精品课程2
- 格式：doc
- 大小：380.50 KB
- 文档页数：16
第二章 CSS第一节 CSS基础2.1.1 什么是CSSCSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。
2.1.2 CSS的两个作用（1）它能够简化网页的格式设置工作（2）它能够增强网页的表现力，因为相比HTML标记符而言，CSS样式属性提供了更多的格式设置功能。
第二节在网页中使用CSS2.2.1 在标记中直接嵌套样式信息使用HTML语言标记的style属性可以直接在标记中嵌入样式定义，其格式如下：<标记 style=“属性1：值1；属性2：值2；属性3：值3；..........”>例题2-1：<html><head><title>在标记中直接嵌套样式信息</title></head><body><h1 style="font-family:楷体_gb2312;text-align:center">一代人</h1><p style="font-size:24px;text-align:center">黑夜给了我黑色的眼睛<br>我却用它寻找光明</p></body></html>2.2.2 在STYLE标记中定义样式信息在HTML标记中直接指定样式信息显然没有简化网页设计的格式设置和维护工作，因为每一个style属性都必须单独设置。
如果能将同类的样式都统一定义，然后再具体应用到网页中的元素，那么就能简化网页设计的格式设置和维护工作。
这正是CSS应用于网页的最常用方式，即在HEAD标记内使用STYLE标记，然后在STYLE标记中定义样式。
定义样式的格式：<style><!--selector1{属性1：值1；属性2：值2；属性3：值3；..........}selector2{属性1：值1；属性2：值2；属性3：值3；..........}…………………--></style>其中，selector1和selector2表示样式作用的对象，在style标记内的定义样式时，在样式信息周围加上注释标记可以确保不支持style标记和CSS的浏览器把其作为注释忽略掉；当前绝大多数浏览器都支持CSS，所以注释标记可以省略。
例题2-2：<html><head><title>在STYLE标记中定义样式信息</title><style><!--p{font-size:24px;text-align:center}h1{font-family: 楷体_gb2312;text-align:center }--></style></head><body><h1>一代人</h1><p>黑夜给了我黑色的眼睛<br>我却用它寻找光明</p></body></html>2.2.3 链接外部样式表中的样式信息在style标记中定义样式对于单独网页的格式设置和维护很有效，但如果在一个网站中，为每个页面都定义类似的样式，显然又是效率不高的，这时最好的办法是将重复在多个网页中使用的样式放在外部样式表文件中，然后通过连接的方式引用其中的样式。
连接式样式的优点很明显，网页设计者可以在一个连接的CSS文件上作修改，然后所有引用他的网页都会自动更新。
连接外部样式表的方法是在head标记内使用link标记。
连接外部样式表的格式：<link rel="stylesheet" type="text/css" href="样式表文件名.css">创建样式表文件的方法是：将style标记与其中的样式定义一起放置到一个空白的文本文件中，然后将文件保存为.css扩展名即可。
操作方法与用“记事本”保存.htm文件类似。
例题2-3：（1）样式表文件：文件名为mycss.css，与网页文件同目录<style><!--p{font-size:24px;text-align:center}h1{font-family: 楷体_gb2312;text-align:center }--></style>（2）网页文件<html><head><title>链接外部样式表中的样式信息</title><link rel="stylesheet" type="text/css" href="mycss.css"> </head><body><h1>一代人</h1><p>黑夜给了我黑色的眼睛<br>我却用它寻找光明</p></body></html>第三节 CSS样式定义样式表项的组成如下：selector{属性1：值1；属性2：值2；属性3：值3；..........}其中，selector表示需要应用样式的内容，它有5种：html标记，具有上下文关系的html标记，用户定义类，用户定义ID，虚类。
2.3.1 HTML标记selectorhtml标记是最典型的selector类型，我们可以为某个或某些具体的html标记应用样式定义。
对于不同的标记，我们可以采用编组的方式简化样式定义。
例如：h1{color:#ff0000}h2{color:#ff0000}h3{color:#ff0000}可以转换成编组样式如下：h1,h2,h3{color:#ff0000}2.3.2 具有上下文关系的HTML标记selector若需要为位于某个标记内的标记设置特定的样式规则，则应将selector指定为具有上下文关系的html标记。
例如：如果只想使位于h1标记内的B标记具有特定的属性，则应使用以下格式：h1 B{color:blue}注意：h1和B之间以空格分隔，这表示只有位于h1标记内的B标记具有指定样式，其他B标记不具有该样式。
2.3.3 用户定义的类selector可以使用类来为单一html标记创建多个样式，将一个类包括到样式定义中有两种情况：1.定义通用类：通用类可以应用到所有html标记，其定义格式如下：.类名{属性1：值1；属性2：值2；属性3：值3；..........}其引用格式如下：<标记名 class="类名">…………</标记名>例如：定义一个通用类如下：.red{color:red}引用该类如下：<p class="red">本行文字为红色</p><h1 class="red">本行标题为红色</h1>此时，如果使用了h1和p标记但没有使用相应的class属性，则不应用所定义的样式，此处所定义的类在任何标记中都可以引用。
2.为html标记定义类：其定义格式如下：标记.类名{属性1：值1；属性2：值2；属性3：值3；..........}其引用格式如下：<标记名 class="类名">…………</标记名>例如：为h1标记定义如下类：h1.color_red{color:red}h1.color_yellow{color:yellow}h1.color_blue{color:blue}引用这些类如下：<h1 class="color_red">此标题为红色</h1><h1 class="color_yellow">此标题为黄色</h1><h1 class="color_blue">此标题为蓝色</h1>此时，如果使用了h1标记但没有使用相应的class属性，则不应用所定义的样式,这里所定义的类最好在定义该类的标记中使用。
2.3.4 用户定义的ID selector我们要想在网页中使用通用的样式，除了定义通用类之外，还可以使用ID定义样式，其定义格式如下：#ID名称{属性1：值1；属性2：值2；属性3：值3；..........}其引用格式如下：<标记名 ID="ID名称">…………</标记名>例如：定义一个ID样式如下：#red{color:red}引用该样式如下：<p id="red">本行文字为红色</p><h1 id="red">本行标题为红色</h1>2.3.5 虚类selector对于A标记，可以用虚类的方式设置不同类型超连接的显示方式，所谓不同类型超连接，是指访问过的，未被访问的，正被访问的，鼠标指针悬停其上的这4种状态的超连接。
可以通过指定下列selector之一来设置超连接样式：1.A:link或:link 当超连接没有被访问过时，所设置的样式应用于超连接。
2.A:visited或:visited 当超连接已被访问过时，所设置的样式应用于超连接。
3.A:active或:active 当超连接正在被访问过时，所设置的样式应用于超连接。
4.A:hover或:hover 当鼠标指针移动到超连接上时，所设置的样式应用于超连接。
例如：<style><!--:link{color:black;text-decoration:none}:visited,:active{color:gray;text-decoration:none}:hover{color:red;text-decoration:underline}--></style>该组定义可以使网页中的超连接文字在未访问过时以黑色显示，访问过和被选中时以灰色显示，鼠标悬停其上时以红色显示，除了鼠标悬停时有下划线，其他状态均没有下划线。
第四节 CSS的属性2.4.1 字体与文本属性1.字体属性（1）font-family属性该属性用来确定要使用的字体列表，取值可以是字体名称，也可以使字体族名称，值之间用逗号分隔。
