返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

CSS-包含

时间:2020-04-25 14:33来源:电脑教程学习网 www.etwiki.cn 编辑:小山哥

有四种将样式与HTML文档相关联的方法。最常用的方法是内联CSS和外部CSS。

嵌入式CSS-<style>元素

您可以使用<style>元素将CSS规则放入HTML文档中。该标签位于<head> ... </ head>标签内。使用此语法定义的规则将应用于文档中所有可用的元素。这是通用语法-

现场演示
现场演示
<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>
   </head>   
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

它将产生以下结果-

属性

与<style>元素关联的属性是-

属性 描述
类型 文字/ css 将样式表语言指定为内容类型(MIME类型)。这是必填属性。
媒体

屏幕

tty

电视

投影

手持式

打印

盲文

听觉的

所有

指定将在其上显示文档的设备。默认值为all这是一个可选属性。

内联CSS- 样式属性

您可以使用任何HTML元素的样式属性来定义样式规则。这些规则将仅应用于该元素。这是通用语法-

<element style = "...style rules....">

属性

属性 描述
样式 样式规则 style属性的值是用分号(;)分隔的样式声明的组合。

以下是基于上述语法的内联CSS的示例-

现场演示
<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

它将产生以下结果-

外部CSS-<link>元素

<link>元素可用于在HTML文档中包括外部样式表文件。

外部样式表是一个扩展名为.css的单独的文本文件您可以在此文本文件中定义所有样式规则,然后可以使用<link>元素将此文件包含在任何HTML文档中。

这是包括外部CSS文件的通用语法-

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

属性

与<style>元素关联的属性是-

属性 描述
类型 文字CSS 将样式表语言指定为内容类型(MIME类型)。此属性是必需的。
href 网址 指定具有样式规则的样式表文件。此属性是必需的。
媒体

屏幕

tty

电视

投影

手持式

打印

盲文

听觉的

所有

指定将在其上显示文档的设备。默认值为all这是可选属性。

考虑一个名称为mystyle.css的简单样式表文件,该文件具有以下规则-

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

现在,您可以在任何HTML文档中包括以下文件mystyle.css,如下所示:

<head>
   <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

导入的CSS-@import规则

@import用于导入外部样式表,其方式类似于<link>元素。这是@import规则的通用语法。

<head>
   <@import "URL";
</head>

URL是具有样式规则的样式表文件的URL。您也可以使用其他语法-

<head>
   <@import url("URL");
</head>

以下示例显示了如何将样式表文件导入HTML文档-

<head>
   @import "mystyle.css";
</head>

CSS规则覆写

我们讨论了在HTML文档中包含样式表规则的四种方法。这是覆盖所有样式表规则的规则。

  • 任何内联样式表都具有最高优先级。因此,它将覆盖<style> ... </ style>标记中定义的任何规则或任何外部样式表文件中定义的规则。

  • 在<style> ... </ style>标记中定义的任何规则都将覆盖在任何外部样式表文件中定义的规则。

  • 外部样式表文件中定义的任何规则都具有最低优先级,并且仅当以上两个规则不适用时,才应用此文件中定义的规则。

处理旧的浏览器

仍然有许多不支持CSS的旧浏览器。因此,在HTML文档中编写嵌入式CSS时,应格外小心。以下代码段显示了如何使用注释标签对较旧的浏览器隐藏CSS-

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

CSS注释

很多时候,您可能需要在样式表块中添加其他注释。因此,在样式表中注释任何部分都非常容易。您可以简单地将注释放在/ * .....这是样式表中的注释..... * /。

您可以使用/ * .... * /来注释多行块,就像在C和C ++编程语言中那样。

现场演示
<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         /* This is a multi-line comment */
      </style>
   </head>

   <body>
      <p>Hello World!</p>
   </body>
</html>

它将产生以下结果-

 上一页  打印页面

------分隔线----------------------------
标签(Tag):
------分隔线----------------------------
推荐内容
猜你感兴趣