您当前位置：首页 > web前端 > htmlcss > 浅析插入css的三种方法（译）

浅析插入css的三种方法（译）

来源：程序员人生发布时间：2013-12-07 17:31:33 阅读次数：2552次

　　当浏览器读取样式表，将格式化根据它的文件。有三种方法插入一个样式表：外部样式表，内部样式表和内联样式。下面是详细信息。

　　外部样式表

　　外部样式表时，是理想的样式应用于许多网页。与外部的样式表，你可以改变整个网站通过改变一个文件看看。每个页面必须链接到样式表使用标记。标记里面去头部分：

以下为引用的内容：
<head>
<link rel="stylesheet" type="text/css" href="teststyle.css" />
</head>

　　外部样式表能够写在任何文本编辑器。该文件不应该包含任何HTML标记。您的样式表应保存的。CSS扩充。一个样式表文件的示例如下所示：

以下为引用的内容：
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("backimage.gif")}

　　注意：不要离开之间的财产价值和单位的空间！"margin-left:20 px" (而不是"margin-left:20px") 在IE下正常，但在Firefox or Opera不可以。

　　内部样式表

　　一个内部样式表时，应使用一个单一的文件，具有独特的风格。只要定义的HTML网页的开头部分的内部风格，通过使用<style>标记，如下所示：

以下为引用的内容：
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("backimage.gif")}
</style>
</head>

　　内联样式

　　内联式混合失去介绍内容与样式表的许多优点。谨慎使用此方法！

　　要使用您使用相关标记的样式属性内联样式。 style属性可以包含任何CSS属性。这个例子展示了如何改变颜色和段落的左边距：

以下为引用的内容：
<p style="color:red;margin-left:20px">This is a paragraph.</p>

　　多个样式表

　　如果某些特性已在不同的样式表设置相同的选择，该值将被继承了更具体的样式表。

　　例如，外部样式表的H1已选择这些属性：

以下为引用的内容：
h1
{
color:blue;
text-align:center;
font-size:8pt
}

　　并且内部样式表的H1已选择这些属性：

以下为引用的内容：
h1
{
text-align:right;
font-size:20pt
}

　　如果与内部样式表页面还链接到外部样式表的H1的属性将是：

以下为引用的内容：
color:blue;
text-align:right;
font-size:20pt

　　也就是：继承的颜色从外部样式表和文字对齐及字体大小，是由内部样式表所取代。

　　但请注意：如果外部的样式表链接后，在HTML样式表放在内部的<head>，外部样式表将取代内部样式表！

　　此外：

　　一般来说，我们可以说，所有的样式将“级联到一个新的”虚拟“样式表”的，下面的规则在4号具有最高的优先级：

　　1。浏览器默认

　　2。外部样式表

　　3。内部（在头节样式表）

　　4。内联样式（在HTML元素）

　　因此，内联样式（HTML元素内），具有最高优先级，这意味着它将覆盖<head>标签内，或在外部的样式表，或在浏览器（默认值）定义的一种样式。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 .NET连接Sybase数据库的几种方法

下一篇 sqlserver中获取当前日期的午夜的时间值的实现方法

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点