CSS的规则样式

最新推荐文章于 2025-12-19 11:59:32 发布

原创最新推荐文章于 2025-12-19 11:59:32 发布 · 151 阅读

CC 4.0 BY-SA版权

文章标签：

15 篇文章

订阅专栏

在CSS中为文档添加样式的4个方式：

2.使用内联样式：直接将样式定义到HTML元素中(写在标签里)。这种作用范围有限，只影响它所在的标签，而且总是覆盖嵌入样式和链接样式。

3. 使用内部样式：写在<style>标签中。作用范围仅限于当前页面，内部样式覆盖链接样式，但也会被内联样式覆盖。

4.链接样式：写在单独的CSS样式表中。链接样式的作用范围可以是整个网站。只要使用<link>标签把样式表链接到页面，相应页面就可以使用样式。

5. @import指令导入外部样式文件：和链接样式类似。引用@import指令在某些浏览器(IE)可能会出现“屏闪”。所以我们应该尽量的避免使用@import指令。而是尽量使用链接外部样式表。

完整的代码结构：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式表的基本使用方法</title>
<link href="./css/indexstyle.css" rel="stylesheet" type="text/css"/>
<!--rel是relationship的英文缩写
stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表-->
<style type="text/css">
@import url(css/indexstyle.css);
</style>
<style type="text/css">
h1 {
color:red;
}
</style>
</head>
<body>
<h1 style="color:green">this is a head</h1>
<h1></h1>
</body>
</html>