HTML样式

分享于 

4分钟阅读

Web开发

  繁體

设置html元素的样式

当涉及到Web页面的显示时,HTML表现能力相当有限。它最初被设计成一种简单的信息呈现方式, 文档的head部分的元素,外部样式表 -使用 元素,指向外部css文件,

在本教程中,我们逐个介绍所有这些不同类型的样式表。

备注: 内联样式的优先级最高,而外部样式表的优先级最低,这意味着,如果在两个段落中都指定了样式 嵌入 和 外部 样式表,嵌入样式表中的规则将覆盖外部样式表。

内联样式

内联样式用于通过将CSS规则直接放入开始标记中来将唯一样式规则应用于元素,可以使用 style 属性属性。

style属性包括一系列css属性和值对,每 property: value pair以分号(; )分隔,就像你将写入嵌入或外部样式表一样,但是它需要全部在一行里,换句话说,在分号后,没有换行符。

下面的示例演示如何设置 和 文本部分:

例子


<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:18px;">This is a paragraph.</p>
<div style="color:green; font-size:18px;">This is some text.</div>

使用内联样式通常被认为是不好的做法,由于样式规则直接嵌入html标记内,这导致演示文稿与文档内容混合在一起,这使更新或维护网站变得非常困难。

要详细了解各种css属性,请查看 使用html文档的节 <style>标记可以定义任意数量 <style> 里面的元素<head>

以下例子演示了如何将样式规则嵌入网页中。

例子


<head>
 <style>
 body { background-color: YellowGreen; }
                h1 { color: blue; }
 p { color: red; }
 </style>
</head>

外部样式表

使用外部样式表是使样式应用于多张网页的理想方法。

外部样式表将所有样式规则保存在单独的文档中,你可以从网站上的HTML文档链接到该文档。外部样式表是最灵活的,因为使用外部样式表,可以通过更改一个文件,来更新整个网站的外观。

可以通过两种方法附加外部样式表 链接 和 导入:

链接外部样式表

外部样式表可以使用 标签。

<link> 标签在 部分,如下所示:

例子


<head>
 <link rel="stylesheet" href="css/style.css">
</head>

导入外部样式表

@import 规则是加载外部样式表的另一种方式, @import 语句指示浏览器加载外部样式表并使用它样式。

可以用两种方法使用它,最简单的方法是在 元素中 <style> 元素。

例子


<style>
 @import url("css/style.css");
 p {
 color: blue;
 font-size: 16px;
 }
</style>

同样,你可以使用 @import 在另一个样式表中导入样式表的规则。

例子


@import url("css/layout.css");
@import url("css/color.css");
body {
 color: blue;
 font-size: 14px;
}

备注: @import 规则必须出现在样式表的开头,样式表中定义的任何样式规则都将覆盖导入的样式表中的规则, @import 规则可能导致性能问题,通常应避免导入样式表。


style  样式  
相关文章