第6章 使用CSS样式表美化网页
*
CSS概述
CSS样式的创建与应用
设置CSS属性
实践与演练
第6章 CSS样式表
*
采用CSS 技术，可以有效地对页面布局、字体、背景和其他效果实现更加精确的控制。用CSS不仅可以制作令浏览者赏心悦目的网页，还能给网页添加许多特效。创建CSS样式表的过程，就是对各种CSS属性的设置过程，所以了解和掌握CSS属性设置非常重要。CSS有较强的易读性。
第6章 CSS样式表
*
CSS样式概述
CSS（Cascading Style Sheets 层叠样式表 ）是用于控件网页样式并允许将样式信息与网页内容分离的一种标识性语言。已经成为目前网页设计必不可少的工具之一。使用CSS样式不仅可以轻松地让网页中的对象产生动态效果，同时还简化了HTML中各种繁琐的标签，使得各个标签的属性更具有一般性和通用性。
CSS样式的主要功能如下:
将网页的格式与结构分离；
可以精确地控制网页中各个元素的位置，增强网页布局能力。
简化代码，提高下载速度。
维护和更新网页更加容易。
代码兼容性更好。
CSS概述
*
*
CSS样式的特点:
在传统网页设计方法中，利用HTML标签中与样式相关的属性实现网页元素的样式设置，这种方式下，各元素的样式设置分散在各元素标签中，不便于管理。
CSS技术改变了网页设计的传统格局，利用CSS既能够轻松设置网页中同类元素的共同样式（如所有文本的样式），也可以单独设置某个元素的专属样式。
CSS样式设置集中在文档的head区域或保存在独立的外部CSS文件中，便于分类和管理，同一样式可以被多个文档的多个元素共用，大大简化了网页设计操作。
同时，CSS技术可以实现各种复杂的网页特效（如文字特效、图像滤镜和鼠标光标的特殊样式等），将HTML与CSS结合，可以使网页效果更加美观、大方。
CSS概述
CSS样式的语法格式
选择符{样式属性：取值；样式属性：取值；样式属性：取值；…}
（1）选择符：指这组样式编码所要针对的对象，可以是一个HTML标签，如body、h1;也可以是已定义了的特定id或class的标签。
（2）样式属性：是CSS样式控制的核心，对于每一个HTML中的标签，CSS提供了丰富的样式属性，如颜色、大小、定位和浮动方式等。
（3）值：指属性的值，它的形式有两种，一种是指定范围的值，如align属性，只可以应用left、right和center 3个值；另一种是数值，如width能够取值与0～9999px。
CSS概述
*
2. 选择器类型
（1）类样式（也称自定义样式）：使用户可以将样式属性设置为任何文本范围或文本块，如以下代码：
.a1{color:#66FF00;font-size:12px}
（2）ID属性的样式：用于创建以“#”开头的“ID”CSS样式规则，它可用于具体对应ID号的网页元素。
（3）HTML标记样式：重定义特定标记（如h1）的格式。创建或更改h1标记的CSS样式时，所有使用h1标记设置了格式的文本都将立即更新，如以下代码： h1{font-family:arial}
（4）复合标记样式：同时作用于多个标记或ID或类的复合规则。
如重新定义链接的有关格式，代码如下：
a:link{color:red},
a:active{color:blue;font-size:126%},
a:visited{color:green;font-size:86%},
a:hover{color:blue}
CSS概述
*
CSS样式的存放位置(3种)
（1）直接在标记中定义。(内联式－行内嵌式)
<p style="color:blue;font-size:10px">CSS 实例</p>
这种方法的特点是使用简单、显示直观，但无法发挥样式表的优势。
（2）添加在HTML的<head>和</head>标记之间。(内部样式)
<style type= "text/css">
<!--
放置样式表的具体内容
-->
</style>
这是一种经常使用的添加方法。
（3）链接样式表（外部样式）
<link rel= “stylesheet” type=“text/css” href="" >
这种方法适合大型网站的CSS样式定义。
CSS概述
*
CSS样式的分类
第6章 CSS样式表 来自淘豆网m.daumloan.com转载请标明出处.
