您的位置：首页 > Web前端 > CSS

CSS学习<3>

2015-11-17 11:29 531 查看
一、CSS创建

当读到一个样式表时，浏览器会根据它来格式化（样式化）HTML文档。

样式表插入的方式有三种：

1.外部样式表

2.内部样式表

3.内联样式表

1.1、外部样式表

当样式需要应用于很多页面时，外部样式表是个理性选择。在使用外部样式表时，你可以通过改变一个文件来改变整个站点的外观。

外部样式表每个页面使用<link>标签来链接到样式表。<link>标签处于文档的头部。

如：

<head>

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

</head>

浏览器会从文件mystyle.css中读取样式声明，并根据他来格式和HTML文档。

外部样式表可以在任何文本编辑器中编辑。文件不能包含任何的HTML标签。样式表以.css扩展名进行保存。

1.2、内部样式表

当单个文档需要特殊样式时，应该使用内部样式表。内部样式表使用<sytle>标签在文档头部进行定义内部样式表。

如：

<head>

<sytle type = "text/css">

h1 {color : red;}

p {margin-left : 20px;}

</style>

</head>

1.3、内联样式表

由于要将内容和表现混杂在一起，内联样式表会损失掉样式表的许多优势。请慎用此方式，且仅当需要在一个元素（标签）内修改样式时使用此方式。

使用内联样式表，需要在相关标签内使用style属性，style属性可以包含任何CSS属性。

如：

<p style = "color : red; margin-left : 20px;">

你好，世界。

</p>

2、多重样式

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

继承的方式依据于优先级顺序。

如：

外部样式表拥有针对h3选择器的三个属性：

h3 {

color : red;

text-align : left;

font-size : 8pt;

}

内部样式表针对h3的两个属性：

h3 ｛

text-align : right;

font-size : 20pt;

｝

那么假如拥有内部样式表的页面同时和外部样式表链接时，具体样式结果：

color : red;

text-algin : right;

font-size : 20pt;

也就是说如果样式表中同一个选择器中的属性相同，那么将根据优先级顺序来进行具体样式获取。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航