样式表有三种插入方式
一.外部样式表
· 使用外部样式表可以将同一样式应用于多张网页,通过这个方法你只需改动一个文件就能改变整个网站的外观。
例:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
使用<link>标签让每个页面都连接到样式表。<link>标签在head区域使用。
注:文件内容不应该包含任何的html标签,后缀名应为.css。
二.内嵌样式表
· 内嵌样式表应该在当有单独文档有特殊样式的时候使用。
例:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
使用<style>标签在head区域内定义样式。
注:浏览器会忽略未知标签,当老浏览器不支持<style>标签时,便会将里面的代码显示到屏幕,用<!--注释-->语句将代码括起可以防止此问题。
三.行内样式
· 一般这类方法在个别元素需要改变样式的时候使用。
例:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
在相关的标签上用style属性来加入行内样式。样式属性可以包含任何CSS属性。链子中将展示怎样给一个段落加上左外补丁并将颜色改为sienna
四.多重样式表
如果一些属性被相同的选择器设置成不同的样式,值就会向更为具体的样式所继承(具体化)。
举个例子,一个外部样式表有这样的h3选择器属性:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
同时有一个内嵌样式表有这样的h3选择器属性:
h3
{
text-align: right;
font-size: 20pt
}
如果页面在有内嵌样式表的同时又连接到外部样式表的话h3的属性将变为:
color: red;
text-align: right;
font-size: 20pt
颜色是继承了外部样式表而文字对齐和文字大小被内嵌的样式表所替换。