CSS创建（样式表引入）

来源：互联网发布：全球云计算开源大会编辑：程序博客网时间：2024/05/24 03:22

一、如何插入样式表

1.外部样式表

2.内部样式表

3.内联样式

二、外部样式表详解

每个页面使用<link>标签链接到样式表，<link>标签在（文档的）头部。

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

浏览器会从文件mystyle.css中读到样式声明，并格式化文件。

外部样式表mystyle.css注意事项

1、文件不能包含任何html标签。

2、样式表应该以.css扩展名进行保存

3、不要再属性值和单位之间留有空格（例如"margin-left:20px"不能写成"margin-left:20 px"）

例子：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

三、内部样式表详解

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

例子：

<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style></head>

四、内联样式

要使用内联样式时，你需要在相关的标签内使用style样式属性，

例子：

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

五、多重样式及层叠顺序

1、如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

2、当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权

i 浏览器缺省设置

ii 外部样式表

iii 内部样式表（位于<head>标签内部）

iV 内联样式（在HTML元素内部）

0 0