| |
Cascading Style Sheets 层叠样式表(CSS)用于格式化网页的布局。 使用CSS,您可以控制颜色、字体、文本大小、元素之间的间距、元素的定位和布局方式、要使用的背景图像或背景颜色、针对不同设备和屏幕大小的不同显示方式等等
CSS可以通过三种方式添加到HTML文档中:
内联 - 通过使用HTML元素内的样式属性
内部 - 通过在<head>
部分中使用<style>
元素
外部 - 通过使用<link>
元素链接到外部CSS文件
添加CSS的最常见方法是将样式保留在外部CSS文件中。但是,在本教程中,我们将使用内联和内部样式,因为这更容易演示,并且更容易让您自己尝试。
内联CSS用于将独特的样式应用于单个HTML元素。
内联CSS使用HTML元素的样式属性。
以下示例将<h1>
元素的文本颜色设置为蓝色,<p>
元素的文本颜色为红色:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
外部样式表用于定义许多HTML页面的样式。
要使用外部样式表,请在每个HTML页面的<head>
部分中添加链接:
<!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>
外部样式表可以写在任何文本编辑器中。该文件不得包含任何HTML代码,并且必须使用.CSS扩展名保存。
这是”styles.css”文件的代码:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS控制通用HTML样式
148 🖺前端 ↦ HTML __ 82 字