阅读(3539)

CSS 包含

最后一次修改 2017年08月04日

内联样式

内联样式是使用style属性添加到元素的样式。

<!DOCTYPE HTML>
<html>
<body>
   <a href="http://www.html.cn"  
      style="background-color:grey; color:white"> 
      Visit the   website
   </a>
   <p>This is a test.</p>
   <a href="http://html.org">Visit the htmlwebsite</a>
</body>
</html>

嵌入式样式

您可以使用样式元素定义嵌入样式。

此示例中的选择器是a,它指示浏览器将样式应用于文档中的每个元素。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a {
    background-color:grey;
    color:white
}
</style>
</head>
    <body>
        <a href="http://www.html.cn">Visit the website</a>
        <p>This is a test.</p>
        <a href="http://html.org">Visit the htmlwebsite</a>
    </body>
</html>

点击查看演示

例子

您可以在单个样式元素中定义多个样式。

以下代码显示了具有两种样式的样式元素。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a  {
    background-color:grey;
    color:white
}
span  {
    border: thin  black solid;
    padding:  10px;
}
</style>
</head>
<body>
<a href="http://www.html.cn">Visit the website</a>
<p>I  like <span>apples</span> and  oranges.</p>
<a href="http://html.org">Visit the   htmlwebsite</a>
</body>
</html>

外部样式表


您可以创建具有.css文件扩展名的单独的样式表文件,并在每个HTML页面中定义相同的样式集。

以下代码显示了文件styles.css的内容。


a  {
    background-color:grey;
    color:white
}
span  {
    border: thin  black solid;
    padding:  10px;
}


您不需要在样式表中使用样式元素。您只需使用选择器,然后是您需要的每个样式的声明。

然后,您可以使用link元素将样式带入您的文档。


<!DOCTYPE HTML>
<html>
<head>
   <link rel="stylesheet"  type="text/css"  href="styles.css"></link>
</head>
<body>
    <a href="http://www.html.cn">Visit the  website</a>
    <p>I  like <span>apples</span> and  oranges.</p>
    <a href="http://html.org">Visit the   htmlwebsite</a>
</body>
</html>


您可以链接到所需的任何样式表。

与样式元素一样,如果使用相同的选择器定义两个样式,则导入样式表的顺序很重要。

最后加载的那个将是应用的那个。



从另一个样式表导入

您可以使用 @import 语句将样式从一个样式表导入到另一个样式表。

以下代码链接到包含导入的样式表

@import "styles.css";
span  {
    border: medium black dashed;
    padding:  10px;
}

您可以根据需要导入任意数量的样式表,每个样式表使用一个 @import 语句。

@import 语句必须出现在样式表的顶部,在定义任何新样式之前。

以下代码链接到包含导入的样式表:

<!DOCTYPE HTML>
<html>
    <head>
       <link rel="stylesheet"  type="text/css"  href="combined.css"/>
    </head>
    <body>
        <a href="http://www.html.cn">Visit the  website</a>
        <p>I  like <span>apples</span> and  oranges.</p>
        <a href="http://html.org">Visit the   htmlwebsite</a>
    </body>
</html>