3.1 CSS样式表

超级小狗

于 2024-03-17 22:11:36 发布

阅读量453

点赞数 7

分类专栏： HTML5网页前端设计文章标签： css 前端

本文链接：https://blog.csdn.net/zeyeqianli/article/details/136791134

版权

13 篇文章 1 订阅

订阅专栏

内联样式表又称为行内样式表，通过使用style属性为各种HTML元素标签添加样式，其作用范围只在指定的HTML元素内部。

基本语法格式如下：

<元素名 style="属性名称:属性值">

如果有多个属性需要同时添加，可用分号隔开，显示如下：

<元素名 style="属性名称1:属性值1; 属性名称2:属性值2; ... 属性名称N:属性值N">

例如，为某个标题标签<h1>设置样式：

<h1 style=”color:blue; background-color:yellow”>标题一</h1>

该声明表示设置当前<h1>和</h1>标签之间的文本字体颜色为蓝色，背景色为黄色。

下表列出了部分常用CSS属性和参考值。

内部样式表通常位于<head>和</head>标签内部，通过使用<style>和</style>标签标记各类样式规则，其作用范围为当前整个文档。

语法格式如下：

<style>
   选择器{属性名称1:属性值1; 属性名称2:属性值2; ... 属性名称N:属性值N }
</style>

这里的选择器可用于指定样式的元素标签，例如body、p、h1-h6等均可。

例如：

 h1{color:red }

该语句可以作用于整个文档，因此文档中所有的h1标题都将变为红色字体。

注：在HTML4.01版本中会看到将<style>首标签写成<style type=”text/css”>的形式，在HTML5中已简化为<style>。

如果属性内容较多，也可以分行写：

<style>
    选择器{
       属性名称1:属性值1; 
       属性名称2:属性值2;
        ... 
       属性名称N:属性值N
    }
</style>

其中最后一个属性值后面是否添加分号为可选内容。一般来说属性之间的分号用于间隔不同的属性声明，因此最后一个属性值无需添加分号。但是为了方便后续添加新的属性，也可以为最后一个属性值添加分号，这种做法不影响CSS样式表的正常使用。

外部样式表为独立的CSS文件，其后缀名为.css或.CSS，在网页文档的首部<head>和</head>标签之间使用<link>标签对其进行引用即可作用于当前整个文档。

在HTML5中，对于独立CSS文件的引用语法格式如下：

<link rel="stylesheet" href="样式文件URL">

例如，引用本地css文件夹中的test.css文件：

<link rel="stylesheet" href="css/test.css">

外部CSS文件中的内容无需使用<style></style>标签进行标记，其格式和内部样式表<style>标签内部的内容格式完全一样。

内联样式表、内部样式表和外部样式表可以在同一个网页文档中被引用，它们会被层叠在一起形成一个统一的虚拟样式表。如果其中有样式条件冲突，CSS会选择优先级别高的样式条件渲染在网页上。

三种样式表的优先级别排序如表所示。

关注

专栏目录