关注我们

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>元素关联的属性是-

属性	值	说明
type	text/css	将样式表语言指定为内容类型(MIME类型)。这是必填属性。
media	screen tty tv projection handheld print braille aural all	指定将在其上显示文档的设备，默认值为all，这是一个可选属性。

属性

值

说明

type

text/css

将样式表语言指定为内容类型(MIME类型)。这是必填属性。

media

screen

tty

projection

handheld

braille

aural

all

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

嵌入Style属性

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

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

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

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

复制代码

<html>
   <head>
   </head>

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

它将产生以下输出-

嵌入Link标签

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

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

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

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

属性	值	说明
type	text css	将样式表语言指定为内容类型(MIME类型)。此属性是必需的。
href	URL	指定具有样式规则的样式表文件。此属性是必需的。
media	screen tty tv projection handheld print braille aural all	指定将在其上显示文档的设备。默认值为全部。这是可选属性。

属性

值

说明

type

text css

将样式表语言指定为内容类型(MIME类型)。此属性是必需的。

href

URL

指定具有样式规则的样式表文件。此属性是必需的。

media

screen

tty

projection

handheld

braille

aural

all

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

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

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

现在，您可以将该文件 mystyle.css 包含在任何HTML文档中，如下所示-

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

导入外部样式

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

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

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

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

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

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

CSS 优先级

标签属性样式优先级最高。
其次是<style> ... </style>标签中定义的模式。
最后是外部<link>加载的css样式文件。

处理旧浏览器

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

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

CSS注释

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

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

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-inclusion.html

来源：LearnFk无涯教程网

复制代码

<!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>

它将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

白话法律42讲 -〔周甲徳〕

重学前端 -〔程劭非（winter）〕

OpenResty从入门到实战 -〔温铭〕

Kafka核心技术与实战 -〔胡夕〕

Elasticsearch核心技术与实战 -〔阮一鸣〕

WebAssembly入门课 -〔于航〕

分布式金融架构课 -〔任杰〕

快手 · 移动端音视频开发实战 -〔展晓凯〕

现代C++20实战高手课 -〔卢誉声〕

好记忆不如烂笔头。留下您的足迹吧 :)