文档介绍：css样式表
高二年级信息技术
CSS样式表
一、CSS样式表的特点
CSS样式表作为当前网页制作中的一个常用技术,不仅可以对文字格式进行设置,还可以更加精确地控制布局、字体、颜色、背景和其他图文效果。它主要有以下几个优点。
1、只需修改一个CSS代码就可以改变页数不定的网页外观和格式。
2、可以更好地控制页面布局和外观
3、在所有浏览器和平台之间具有较好的兼容性
4、精简网页,提高下载速度
CSS样式表
一、常用CSS样式定义方式
1、嵌入式样式表
在每个要应用样式的HTML的标记后写上CSS属性就可以了。这种方式主要用于对具体的标记作具体的调整,其作用的范围只限于本标记。例如,想规定一个<table>标记中的文字为红色,字体大小为10pt,则可以书写为:
<table style=”color: red; font-size: 10pt”>
CSS样式表
一、常用CSS样式定义方式
2、内联样式表
把样式表放在<head></head>的中间,从而使样式表对当前整个HTML页面产生作用,这就是一个内联样式表。其引用方式如下:
<head>
……
<style type=”text/css”>

</style>
……
</head>
其中,<!—注释内容-->是HTML语言中的注释标签,在样式表中使用,是为了帮助不支持CSS的浏览器过滤掉CSS代码,避免网页在浏览器中显示时CSS代码不被执行而是以源代码的方式显示在浏览器中。
CSS样式表
一、常用CSS样式定义方式
3、外部样式表
一个网站的同类页面,其风格往往是相同的或类似的,我们显然不希望每次都在<head>和</head>中插入相同的繁琐复杂的样式表。其实我们可以只编写一个CSS文件,借助于引入外部样式表来实现不同页面的风格,并且当外部样式表被更改时,各引用该样式表的网页风格也随之发生变化,不需要手工逐个修改。定义方法为:
(1)定义一个外部样式表文件(),这个文件以”.css”为后缀,其中只需要对样式进行定义,不必包含<style>标识符。
(2)在需要引用的HTML文件的<head>和</head>。
<link rel=”stylesheet” href=”” type=”text/css”>
CSS样式表
三、样式定义方法
我们需要掌握的样式定义方式有两种,一种是对具体的标记定义,一种是类定义。其中超级链接标记a定义特别,单独说明。以下将举例说明,其中定义方法是通用的,同样适用于其他标签。
1、对具体标记定义
例如:TD { font-family: ”宋体”; font-size: 12pt } 对网页中所有表格中的单元格中的文字样式进行定义,
定义字体为宋体,字号为12磅(pt)。
CSS样式表
三、样式定义方法
2、对具体标记的一类进行定义
例如:
{ font-weight: bold; color: #00ff00; line-height: 1cm; text-align: left}
{ font-weight: normal; color: #0000ff; line-height: 20px; text-align: right}
对于段落标记p定义两种类型,p1类型为文字加粗,文字颜色为绿色,行高1厘米,文字对齐方式为左对齐。p2类型为文字正常,文字颜色为蓝色,行高20象素,文字对齐方式为右对齐。
p1和p2类只适用于p标签,引用方式为在p标签中加class属性,例如
<p class=p1>段落一</p>,将p1类定义应用于段落一;
<p class=p2>段落二</p>,将p2类定义应用于段落二
CSS样式表
三、样式定义方法
3、通用类定义
例如:.abc { font-size: 9pt; color: green; text-decoration: underline}
定义一个类abc,并没有指定具体的标签,表示这个类可以被任何合适的标签。
例如p、font、table等等调用,其使用方法为在标签中添加属性class=abc,例如<font class=abc>
CSS样式表
三、样式定义方法
4、超链接分状态定义
超级链接四种状态,超链未访问状态(link)、超链已访问状态(visited)、鼠标正好移在超链上状态(hover),超链正被点击状态(active),我们可以对超链的每种状态进行定义。例如:
A:link { color: red; font-family: ”宋体”; text-decoration: none}