2022年8月4日 (四) 11:53的版本

CSS 代表层叠样式表。英文Cascading Style Sheets。

掌握CSS后可以通过CSS文件控制多个网页样式，减少代码重复减少维护成本，增加网页打开速度。

CSS = 样式和颜色

小白教程xiaobai.wang

颜色，盒子

什么是 CSS？

使用 CSS，可以控制颜色、字体、文本大小、元素之间的间距、元素的位置和布局方式、要使用的背景图像或背景颜色、不同设备和屏幕尺寸的不同显示等等。

使用 CSS

CSS 可以通过 3 种方式添加到 HTML 中：

内联- 通过使用HTML元素的style属性
内部- 通过使用<head>中的<style>标签
外部- 通过使用<link> 链接到外部 CSS 文件，最常见的方式，推荐使用。

内联 CSS

内联 CSS 用于将独特的样式应用于单个 HTML 元素。
内联 CSS 使用style属性进行设置。

以下示例将元素的文本颜色设置<h1>为蓝色，将元素的文本颜色设置<p>为红色：

示例

<h1 style="color:blue;">蓝色标题</h1>

<p style="color:red;">红色文本</p>

内部 CSS

内部 CSS 用于定义单个 HTML 页面的样式。
内部 CSS 定义在<head>的<style>元素内。

以下示例将所有<h1>元素（在该页面上）的文本颜色设置为蓝色，并将所有<p>元素的文本颜色设置为红色。此外，页面将显示为“粉蓝色”背景色：

示例

<!DOCTYPE html>
<html>
<head>
<style>

body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>标题</h1>
<p>文本</p>

</body>
</html>

外部 CSS 文件

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。外部CSS文件通过link进行添加。

示例

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

<h1>标题</h1>
<p>段落</p>

</body>
</html>

外部样式表可以用任何文本编辑器编写。该文件不得包含任何 HTML 代码，并且必须以 .css 扩展名保存。

style.css

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

提示：使用外部样式表，可以通过更改一个文件来更改整个网站的外观！

CSS 例子

CSS color 属性定义要使用的文本颜色。
CSS font-family 属性定义要使用的字体。
CSS font-size 属性定义要使用的文本大小。
CSS border 属性定义 HTML 元素周围的边框。
CSS padding 属性定义文本和边框之间的填充。
CSS margin 属性定义了边框外的边距。

示例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
  border: 2px solid powderblue;
  padding: 30px;
  margin: 50px;
  background:#ccc;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

“HTML CSS样式”的版本间差异