如何使用层叠样式表 (CSS)？
什么是CSS？
CSS（层叠样式表）是一种样式表语言，用于设计和布局网页，例如更改内容的字体、颜色、大小和间距，将其拆分为多个列，以及添加动画和其他装饰元素。
层叠样式表由规则组成。CSS规则由一个或多个选择器以及括号内以分号分隔的声明列表组成。
例子：
p {color: teal;}
p被称为选择器
大括号之间的信息{ }称为声明
color是财产
teal是值
使用CSS
CSS 允许您自定义一个或多个网页的外观。您可以快速有效地定位单个页面上的一个、多个或所有给定项目，甚至是网站的所有页面。
CSS 可以通过 3 种方式添加到 HTML 文档中：
内联– 通过在 HTML 元素内使用 style 属性
内部– 通过使用该部分中的元素
外部– 通过使用元素链接到外部 CSS 文件
内联CSS
第一种是使用内联样式，我们直接将 style 属性应用于各个元素。
元素的文本颜色
为蓝色，
以下示例中元素的文本颜色为红色：
<h1 style=“color:blue;”>A Blue Heading</h1>
<p style=“color:red;”>A red paragraph.</p>
内部CSS
内部 CSS 是在HTML 页面部分的元素内定义的。下面的示例将该
页面上所有元素的文本颜色更改为蓝色。
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
外部CSS
许多 HTML 页面依赖外部样式表来建立其外观。
在每个 HTML 页面的部分添加外部样式表的链接以使用它：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
任何文本编辑器都可用于创建外部样式表。该文件必须以 .css 扩展名保存，并且不得包含任何 HTML 代码。
文件的显示方式如下"styles.css"：
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
外部样式表是在网站上使用 CSS 的最有效方法（通过专用 CSS 文件更容易跟踪和实现网站的样式），而内部样式表和内联样式则可以根据具体情况使用当需要修改个人风格时的基础。
扫一扫
976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
