样式表的使用

最新推荐文章于 2024-05-01 22:59:38 发布

小李同学需要努力

最新推荐文章于 2024-05-01 22:59:38 发布

阅读量663

点赞数

分类专栏： WEB 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_45325885/article/details/121131400

版权

WEB 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS样式表的使用

样式表的使用具体有三种方式插入：

外部样式表
内部样式表
行内样式表

外部样式表

通常推荐使用此方法来引用样式表，只需修改一个文件即可达到控制html文件的结构。

通过使用外部样式表的方式来控制网页的格式，在html文件下引用的话必须在标签内使用标签来引用。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
</body>
</html>

内部样式表

内部样式表是直接在html文件的中使用

此方式在于html文件与css文件是直接放在一个html文件中的。如果是多个html文件使用同一个css文件的话，推荐使用外部样式表。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
</body>
</html>

行内样式表

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

层叠顺序

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

行内样式（在 HTML 元素中）
外部和内部样式表（在 head 部分）
浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

小李同学需要努力

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
样式表的使用

样式表的使用样式表的使用具体有三种方式插入：外部样式表内部样式表行内样式表外部样式表通常推荐使用此方法来引用样式表，只需修改一个文件即可达到控制html文件的结构。通过使用外部样式表的方式来控制网页的格式，在html文件下引用的话必须在标签内使用标签来引用。<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="mystyle.css">&lt
复制链接

扫一扫

专栏目录