第四章 CSS层叠样式表Word文档下载推荐.docx
- 文档编号:18321611
- 上传时间:2022-12-15
- 格式:DOCX
- 页数:29
- 大小:456.39KB
第四章 CSS层叠样式表Word文档下载推荐.docx
《第四章 CSS层叠样式表Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《第四章 CSS层叠样式表Word文档下载推荐.docx(29页珍藏版)》请在冰豆网上搜索。
我们通过它定义一个样式,也通过它使用该样式。
2.属性(Property):
需要定义的显示属性,一个样式中可定义多个显示属性。
3.属性值(Value):
各属性的取值,包括单位。
以下是一个样式一般的语法格式:
selector{property:
value;
}
例如:
p{color:
blue;
其中,p就是选择符,它对应HTML中的<
标签;
color是属性,表示需要
设置<
标签中的内容颜色;
blue是属性值,表示<
标签中的内容颜色为纯蓝色。
最后以一个分号“;
”作为一个“属性:
值对”的结尾,一个选择符可以包含多条属性,属性间以分号“;
”间隔,例如:
P{color:
font-size:
12px;
定义了一个样式之后,就可以在html代码中使用这一样式。
样式的使用(引用)共有三种方式,分别是:
内联引用、内部引用(嵌入)与外部引用。
1.CSS的内联引用
内联,即把CSS样式直接作用在html标签中,例如:
<
pstyle="
font-size:
color:
"
>
(该段落的文字大小为12个像素,其颜色为纯蓝色)
/p>
除了<
BASEFONT>
PARAM>
和<
SCRIPT>
这三个html标签外,STYLE属性可以应用于任意BODY元素(包括<
BODY>
标签本身)。
这个属性将任何数量的CSS声明当作自己的值,而每个声明用分号“;
”隔开。
使用内联CSS的网页制作者必须将<
META>
标签里的CONTENT属性设置为text/css,而HTTP-EQUIV属性设置为Content-Style-Type,例如:
<
METAHTTP-EQUIV="
Content-Style-Type"
CONTENT="
text/css"
注意:
中文网页的标记为:
Content-Type"
因为和需要展示的内容混合在一起,内联样式会失去一些样式表的优点。
一般情况下,应当尽量避免使用。
需要注意的是,使用内联方式时,其样式只在使用了style属性的这一标签中有效,在其它的标签中是无效的。
(该段落的文字的显示属性为默认)
2.CSS的内部引用(嵌入)
可以使用<
style>
标签直接把CSS代码加载到html文档内部,例如:
styletype="
/*----------文字样式开始----------*/
/*定义在<
P>
标签中的文字大小为12个像素,颜色为纯蓝色*/
P
{
/*----------文字样式结束----------*/
/style>
在内部引用样式时,<
标签的type属性必须设置为“text/css”。
与内联方式不同的是,一旦在一个html页面中定义了某个标签的显示属性,则其在该页面内所有与之匹配的标签中都有效。
(该段落的文字大小也为12个像素,其颜色为纯蓝色)
最后需要注意的是,通常<
标签应放在HEAD部分。
3.CSS的外部引用
外部引用CSS是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计W3C规范所推荐的)。
内联引用虽然是一种快捷的方式,但是不利于以后的统一修改和表现的一致性,除了在需要使用样式表的层叠以外,是不提倡使用的。
CSS的外部引用可分为2种方式:
一种是使用<
link>
标签,一种是使用<
标签的“@import”方法。
①使用<
标签
head>
linkrel="
stylesheet"
type="
href="
http:
//localhost/style.css"
/>
/head>
LINK>
标记应放置在文档的HEAD部分。
“rel”属性用于定义连接的文件和HTML文档之间的关系。
rel=“stylesheet”指定一个固定或首选的样式而rel=“alternatestylesheet”定义一个交互样式。
固定样式在样式表激活时总被应用,一般使用固定样式。
“href”属性指出指定外联的CSS文件的地址,可以为相对地址也可为绝对地址。
需要注意的是,外联的CSS文件不应包含<
或<
这样的html的标签,只需要如:
P{
这样的代码所组成的文件就可以了。
②使用@import
@importurl(http:
//localhost/style.css);
url()中的地址仍然可以是相对地址,也可以是绝对地址。
需要注意的是,@import的CSS文件应当放在<
标签的开始部分,这是由CSS的层叠规则所决定的。
我们将在4.3节详细解释CSS的层叠规则。
4.2.2CSS的选择符
可以通过不同的方式来定义和使用一个选择符。
一般来说,除了上面提到的基本方式以外,选择符还可分为以下五种类型:
1.选择符组
你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义,例如:
h1,h2,h3,h4,h5,h6{color:
green}
(这个组里包括从<
~<
h6>
的所有的HTML标题元素,每个标题元素的文字都为绿色)
p,table{font-size:
9pt}
(段落和表格里的文字尺寸为9号字)
其效果完全等效于:
p{font-size:
table{font-size:
2.类选择符
使用类选择符你能够把相同的元素分类定义不同的样式。
定义类选择符时,在自定类的名称前面加一个点号。
假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:
p.right{text-align:
right}
p.center{text-align:
center}
然后用在不同的段落里,只要在HTML标记里加入你定义的class参数,例如:
<
pclass="
right"
(这个段落里的文本内容是向右对齐的)
center"
(这个段落里的文本内容是居中排列的)
注意:
类的名称可以是任意英文单词或以英文开头与数字的组合,一般以其功能和效果简要命名。
类选择符还有一种重要的用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式,例如:
.center{text-align:
center}(注意选择符前有一个点号“.”)
(定义.center的类选择符为文字居中排列)
这样的类可以被应用到任何元素上。
下面我们使<
元素(标题1)和<
元素(段落)都归为“center”类,这使两个元素的样式都跟随“.center”这个类选择符里的定义,例如:
h1class="
(这个标题是居中排列的)
/h1>
(这个段落也是居中排列的)
这种省略HTML标记的类选择符是我们以后最常用的CSS方法。
使用这种方法,我们可以很方便的在任意元素上套用预先定义好的类样式。
3.ID选择符
在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。
定义ID选择符要在ID名称前加上一个“#”号。
和类选择符相同,定义ID选择符的属性也有两种方法。
下面这个例子,ID属性将匹配所有id="
intro"
的元素:
#intro
{
font-size:
110%;
font-weight:
bold;
color:
#0000ff;
background-color:
transparent
}
(字体尺寸为默认尺寸的110%;
粗体;
蓝色;
背景颜色透明)
下面这个例子,ID属性只匹配id="
的段落<
元素:
p#intro
}
ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。
将上例中的类用ID替代:
pid="
(这个段落向右对齐)
注意:
ID选择符局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用。
4.包含选择符
可以单独对某种元素包含关系定义的样式表,如元素1里包含有元素2。
这种方式只对在元素1里的元素2定义有效,对单独的元素1或元素2无定义,例如有如下定义:
tablea
12px
(定义在表格<
内的链接<
a>
改变样式,文字大小为12象素;
而表格外的链接<
的文字仍为默认大小,并且表格<
内的非链接文本的字体也不变。
)
5.伪类与伪元素
在我们上面所介绍的4种选择符中,其实现是采用模式(pattern)匹配的方式,这里的模式就是我们所定义的选择符的名字和属性。
例如在前面介绍的类选择符中,如果我们有如下定义:
p.right{text-align:
right}
那么当我们在html代码中使用如下<
标签时:
则段落里的文本内容是向右对齐的。
而之所以能够实现这样的效果,是因为浏览器在解释代码时,p.right与<
被认为是一对匹配的模式。
伪类或伪元素的实现机制与我们上面介绍的所有选择符都不同。
伪类或伪元素对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容。
下面我们分别介绍常用的伪类和伪元素。
1类
伪类的语法格式是selector:
pseudoclass{property:
},简单地用一个半角英文冒号(:
)来隔开选择符和伪类。
常用的伪类有:
:
first-child,:
link,:
vistited,:
hover,:
active,:
focus,:
lang
由于first-child和lang不为IE(internetexplorer)支持,我们介绍能够安全使用的四个伪类。
由于它们一般应用在锚结点上,因此又被称为锚伪类。
下面是一个锚伪类的例子:
a:
link{color:
red}/*未被访问的链接红色*/
visited{color:
green}/*已被访问过的链接绿色*/
hover{color:
blue}/*鼠标悬浮在上的链接蓝色*/
active{color:
white}/*鼠标点中激活链接白色*/
需要注意的是,首先,用于进行匹配的不是选择符的名字<
而是其行为(未访问、已访问等);
其次,由于CSS的层叠规则,其书写顺序是不能颠倒的,一定要按照a:
link,a:
visited,a:
hover,a:
actived的顺序书写。
伪类也可以与类结合使用,这时其语法格式为selector.class:
pseudo-class{property:
value},例如:
a.tz:
②伪元素
伪元素是创造关于html语言能够指定的文档树之外的抽象,例如html不提供访问元素内容第一字或者第一行的机制。
伪元素允许设计师引用它们,并且还还提供设计师给在源文档中不存在的内容分配样式(例如:
before和:
after能够访问产生的内容)的机制。
常见的伪元素有:
first-line,:
first-letter,:
before,:
after
由于伪元素的语法格式与伪类相同,因此本书不予详细介绍。
4.2.3CSS的单位
在CSS中,一共有七种类型的单位,分别是:
长度单位、百分比单位、颜色单位、URLs、时间单位、频率单位以及角度单位。
下面分别介绍前四种常用单位。
1.长度单位
一个长度的值由可选的正号"
+"
或负号"
-"
、接着的一个数字以及标明单位的两个字母组成。
在一个长度的值之中是没有空格的,例如,1.3em就不是一个有效的长度的值,但1.3em就是有效的。
一个为零的长度不需要两个字母的单位声明。
CSS中的长度单位有2种类型:
相对值单位与绝对值单位。
相对值单位确定一个相对于另一长度属性的长度,表明了其长度单位会随着它的参考值的变化而变化。
因为它能更好地适应不同的媒体,所以是首选的。
以下是有效的相对单位:
em(em,元素的字体的高度,其值相对于当前对象内文本的字体尺寸。
如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
)
ex(x-height,字母"
x"
的高度。
其值相对于字符“x”的高度,此高度通常为字体尺寸的一半。
如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
px(像素,相对于屏幕的分辨率)
绝对值长度单位视输出介质而定,所以逊色于相对单位。
以下是有效的绝对单位:
in(英寸,1英寸=2.54厘米)
cm(厘米,1厘米=10毫米)
mm(米)
pt(点,1点=1/72英寸)
pc(帕,1帕=12点)
一般Web页面上正文的字体大小为12px或9pt。
值得注意的是,对于计算机的屏幕设备(显示器)而言,像素(Pixel)或者说px是一个最基本的单位,其它所有的单位,都和像素成一个固定的比例换算关系。
所有的长度单位基于屏幕进行显示的时候,都统一先换算成为像素的多少,然后进行显示。
所以,就计算机的屏幕而言,相对长度和绝对长度没有本质差别。
任何单位其实都是像素,差别只是比例不同。
但在其它不以像素作为其基本长度单位的设备中(如打印机),相对长度单位与绝对长度单位仍然是有差别的。
2.百分比单位
一个百分比值由可选的正号"
+"
-"
、接着的一个数字,还有百分号"
%"
。
在一个百分比值之中是没有空格的。
百分比值是相对于其它数值,同样地用于定义每个属性。
最经常使用的百分比值是相对于元素的字体大小,这时可以把百分比单位看作一个相对长度单位。
h1{font-size:
120%}
1.2em}
这两条定义的功能是一样的,都是使一级标题标签<
中的字体大小按照预设的1.2倍显示。
3.颜色单位
CSS中的颜色值可以划分为两大类:
一种是关键字,一种是RGB格式的数字。
WindowsVGA(视频图像阵列)形成了16各关键字:
aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,andyellow。
在进行CSS设计的时候,可以直接引用以上关键字,例如:
div{color:
navy;
RGB格式的颜色可以有四种形式,其中R代表红色,G代表绿色,B代表蓝色:
#rrggbb(如,#00cc00;
注意参数采用16进制,且为2位数,如不足2位应在参数前填0)
#rgb(如,#0c0,它就等于#00cc00)
rgb(x,x,x)x是一个介乎0到255之间的十进制整数(如,rgb(0,204,0))
rgb(y%,y%,y%)y是一个介乎0.0到100.0之间的整数,它代表的是某一原色相对于十进制数255的大小(如,rgb(0%,80%,0%),它就等于rgb(0%,80%*255,0%)即rgb(0,204,0))
#0000FF;
#00F;
rgb(0,0,255)}
rgb(0%,0%,100%)}
以上四种形式都表示<
div>
中的文本内容以纯蓝色(div{color:
})显示。
4.统一资源定位符URLs
一个URL值的格式为:
url(foo),foo是一个URL(internet中某资源的地址,既可以是相对地址也可以是绝对地址)。
URL可以选择用单引号('
)或者双引号("
),并且在URL之前或之后可以包含空格。
BODY{background:
url(style.gif)}
url("
style.gif"
)}
url(http:
//localhost/style.gif)}
4.2.4CSS的属性
CSS的属性非常丰富,常用的有:
字体属性、颜色和背景属性、文本属性、边距属性、填充距属性、边框属性、分级属性以及鼠标属性等。
其属性名以及属性的含义见表4.1:
表4.1CSS的属性
1.字体属性(font)
属性名
属性含义
属性值
font-family
使用什么字体
所有的字体,如宋体,仿宋体,MingLiu体等
font-style
字体是否斜体
Normal、italic、oblique
font-variant
是否用小体大写
Normal、small-caps
font-weight
字体的粗细
Normal、bold、bolder、lithter等
font-size
字体的大小
使用前面学过的长度单位。
绝对长度单位和相对长度单位都可以使用
2.颜色和背景属性
Color
定义前景色
在Web页面中,前景色即页面的文本颜色。
它可以使用上面介绍的所有颜色单位
Background-color
定义背景色
在Web页面中,背景色一般指的就是文本之后的屏幕颜色。
它也可以使用上面介绍的所有颜色单位
Background-image
定义背景图案
也可以简写为Background,其值是一个URL,可以使用相对路径或绝对路径
Background-repeat
背景图案的重复方式
当背景图案的大小小于页面的整体大小时,采用何种方式进行平铺,其值为Repeat-x(横向平铺)、repeat-y(纵向平铺)、no-repeat
Background-attachment
设置背景图案的滚动方式
当背景图案的大小大于页面的整体大小时,允许滚动背景图案而不影响前景的显示,其值为Scroll(拖动滚动条滚动)、Fixed(不允许滚动)
Background-position
背景图案的初始位置
Percentage、length、top、left、right、bottom等
3.文本属性
Word-spacing
单词之间的间距
Normal
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第四章 CSS层叠样式表 第四 CSS 层叠 样式