700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > CSS中样式表详解

CSS中样式表详解

时间:2024-02-22 22:25:41

相关推荐

CSS中样式表详解

CSS中样式表:

向html文件或者jsp文件中插入CSS样式表有三种方法:

1.以外部样式表插入

2.以内部样式表插入

3.直接为元素定义内联样式

CSS样式表介绍:

1.外部样式表:

当样式表需要应用于多个页面时,外部样式表是最理想的选择。在使用外部样式表的情况下,你可以通过仅改变

样式表中的样式,从而对所有引用这个样式表的页面进行外观改造,极大的提高了效率和重用率。每个页面使用

<link>标签连接到样式表。<link>标签在(文档的)头部使用,也就是如下:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

其中type表示引用的是css样式文件,href表示文件的位置。

浏览器会从mystyle.css中读到样式的声明,并根据它来格式文档。

下面是一个外部的样式文件的例子,样式文件以.css进行保存。

hr{

color:sienna;

}

p{

margin-left:20px;

}

body{

background-image:url("/images/back40.gif");

}

2.内部样式表

当单个文档需要特殊的样式时,就应该使用内部样式表。使用<style>标签在文档头部定义内部样式表。

<head>

<style>

hr{

color:sienna;

}

p{

margin-left:20px;

}

body{

background-image:url("/images/back40.gif");

}

</style>

</head>

3.内联样式

直接在文档中为某个html元素进行样式的设计。由于要将表现和内容混杂在一起,所以内联样式会损失掉

样式表的许多优势。需要谨慎使用,例如当样式仅需要在一个元素上应用时。

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

多重样式导致的问题

由于样式可以规定在单个html元素中,在html页的头元素中,或者在一个外部的CSS文件中。甚至

可以在同一个html文档内部引用多个外部样式表。所以某些元素可能存在多个样式的定义,从而

可能导致混乱。在CSS中规定,多重样式将层叠为一个,即按照以下的优先级顺序对某些样式的进行

取值,下面排序优先级从高到低:

1.内联样式(在html元素内部声明的样式)

2.内部样式表

3.外部样式表

4.浏览器缺省设置

例如:

外部样式表定义为:

h3{

color:red;

text-align:left;

font-size:8pt;

}

内部样式表定义为:

h3{

text-align:right;

font-size:20pt;

}

内联样式定义为:

<h3 font-size="30pt">中华</h3>

则最后h3的样式为:

color:red;

text-align:rigth;

font-size:30pt

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。