【2024】前端学习笔记9-内部样式表-外部导入样式表-类选择器 ...

盛世宏图 · 2024-9-23 18:09:43

内部样式表

内部样式表是将 CSS 样式规则写在 HTML 文档内部。通过<style>标签在 HTML 文件的<head>部门定义样式。
简单示例：

<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font - size: 16px;
}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>

复制代码

其中<head>部门的<style>就是一个内部样式表，<p>是选择器，这个真是规则针对<html>中全部的<p>元素做出规范，在此例中是设置颜色为赤色，字体巨细为16px。
对于小项目而言定制方便，易于修改和维护；缺点是缺乏代码复用性，倒霉于大型项目。
需要留意行内样式表优先级高于内部样式表。
外部导入样式表

外部样式表是将 CSS 样式规则写在一个独立的.css 文件中，然后通过 HTML 文件引入这个.css 文件来应用样式。在 HTML 文件中，使用<link>标签来导入外部样式表。
示例：
我的项目中有一个css目次，其中有一个test.css文件，其中定义着以下内容：

p {
color: blue;
font-size: 20px;
}

复制代码

然后在html中引用此css文件

<head>
<link rel = "stylesheet" href = "css/test.css">
</head>
<body>
<p>这是一个段落。</p>

复制代码

展示效果：

link标签的rel属性值为stylesheet，表现这是一个样式表链接；href属性指定外部样式表的路径。
留意：link的位置决定哪个见效，如果在style后面则是link见效，在前面则是style见效。
类选择器：class

类选择器是 CSS 中一种常用的选择器，用于选择具有特定类名（class）的 HTML 元素。类名是开发职员在 HTML 元素的class属性中自定义定义的标识。
在 CSS 中，类选择器以一个点（.）开头，后面跟着类名。
示例：
一个test.css文件中定义两个元素，分别为intro和background。

.intro {
color: blue;
font-size: 20px;
}
.background {
width: 300px; height: 200px;
background-color: royalblue;
padding: 20px;
margin: 20px;
border-radius: 10px;
}

复制代码

然后在html中引用

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "css/test.css">
</head>
<body>
<p class="intro">这是一个段落。</p>
<div class="background"></div>
</body>
</html>

复制代码

展示效果：

使用类选择器的优势：

类选择器可以在多个不同的 HTML 元素上使用
通过类选择器可以方便地对元素进行样式分组

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

【2024】前端学习笔记9-内部样式表-外部导入样式表-类选择器 ...

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块