CSS创建（样式表引入）

最新推荐文章于 2023-01-21 15:03:07 发布

fjnjxr

最新推荐文章于 2023-01-21 15:03:07 发布

阅读量619

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/fjnjxr/article/details/64920872

版权

3 篇文章 0 订阅

订阅专栏

一、如何插入样式表

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元素内部）

fjnjxr

关注

专栏目录