CSS中样式表详解

来源：互联网发布：烟台大数据产业园编辑：程序博客网时间：2024/06/05 16:41

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

0 0