HTML 简明教程 ( HTML5 标准 ) - 样式 ( css )

CSS 是 Cascading Style Sheets 缩写，中文名联样式表，CSS 首先在 HTML4 中用于更好地呈现 HTML 元素

CSS 可以同时控制多个 HTML 元素的表示，它还可以控制页面的布局

如何使用 CSS

CSS 可以通过以下方式添加到 HTML 中

内联 - 使用 HTML 标签的 style 属性
内部 - 在 <head> 标签中使用 <style> 属性
外部 - 使用 <link> 标签链接外部样式

内联的 CSS

每个 HTML 元素都有一个样式属性 style，我们可以直接在 style 中定义 CSS 样式，但它仅对该元素有效

例如下面的代码，我们在 <p> 标记标签中添加一个内联 CSS 来更改其默认字体颜色和边距

<p style="color:blue;margin:20px 0;">这是一个段落</p>

我们还可以使用 background-color 属性定义标签的背景颜色

<body style="background-color:yellow;">
  <h2 style="background-color:red;">这是一个标题</h2>
  <p style="background-color:green;">这是一个段落</p>
</body>

可以使用 font-family、color 和 font-size 属性定义字体样式

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落</p>

text-align 属性指定文本的水平和垂直对齐方式

<h1 style="text-align:center;">水平居中文本</h1>
<p>这是一个段落</p>

内部的 CSS

我们可以使用 <style> 元素在 <head> 部分中定义页面样式

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部 CSS

当需要将样式应用于许多页面时，外部 CSS 将是理想的选择

使用外部 CSS，可以通过更改一个文件来更改整个站点的外观

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>这是标题</h1>
<p>这是一个段落</p>
</body>
</html>

一个外部的 css 文件可以由任何文本编辑器编写，该文件的内容不能包含任何 HTML 元素，并且该文件必须保存为 .css 文件

以下是 style.css 文件的内容

body {
    background-color: powderblue;
}

h1 {
    color: blue;
}

p {
    color: red;
}

属性 id

要为一个特殊的标记标签定义特定样式，请为该元素添加 id 属性

<p id="p01">我是不同的</p>

然后就可以为具有特定 id 的元素定义样式

#p01 {
    color: blue;
}

属性 class

如果要为特殊类型的元素定义样式，请为该元素添加一个 class 属性

<p class="error">我是不同的</p>

然后就可以为具有特定 class 的元素定义样式

p.error {
    color: red;
}