HTML和样式表

CSS 是 Cascading Style Sheets的缩写，即级联样式表的意思。

CSS描述HTML元素将显示在屏幕上，纸上，或在其他媒体。

CSS可以节省大量的工作。它可以同时控制多个网页的布局。

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

Inline（内联） - 在HTML元素中使用样式属性
Internal（内部） - 在 <head> 部分使用<style>元素
External（外部） - 使用外部CSS文件

添加CSS的最常见的方式, 是保存样式在单独的CSS文件中.

然而，在这里，我们将使用内联和内部样式，因为这是更容易阅读, 和更容易为你自己测试.

提示：你可以学习更多关于CSS在我们的CSS教程。

Inline（内联）

Inline（内联）CSS 应用一种样式到一个HTML元素上.

内联CSS使用HTML元素的样式属性。

这个实例设置元素的文本颜色为蓝色，例如：

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

让我试试

Internal（内部） CSS

Internal（内部） CSS 用于定义一个HTML页面风格.

Internal（内部）CSS 在 <head> 部分使用<style>元素来定义，例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <style>
    body {background-color: powderblue;}
    h1   {color: blue;}
    p    {color: red;}
  </style>
</head>
<body>

  <h1>编程字典</h1>
  <p>超级编程字典，高效编程利器！</p>

</body>
</html>

让我试试

External（外部） CSS

外部样式表是用来定义许多HTML页面风格。

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

使用外部样式表，在HTML页面的<head>部分给它添加一个链接，例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <link rel="stylesheet" href="tryhtml_css_external.css">
</head>
<body>

  <h1>编程字典</h1>
  <p>超级编程字典，高效编程利器！</p>

</body>
</html>

让我试试

外部样式表可以使用任何文本编辑器编写。文件不能包含任何HTML代码，必须保存为一个.css为扩展名的文件。

css样式如下：

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

CSS 字体

CSS color 属性定义要使用的文本颜色.

CSS font-family 属性定义要使用的字体.

CSS font-size 属性定义要使用的文本大小，例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <style>
    h1 {
      color: blue;
      font-family: verdana;
      font-size: 300%;
    }
    p  {
      color: red;
      font-family: courier;
      font-size: 160%;
    }
  </style>
</head>
<body>

  <h1>编程字典</h1>
  <p>超级编程字典，高效编程利器！</p>

</body>
</html>

让我试试

CSS 边框

CSS 边框属性定义一个HTML元素的边框，例如：

p {
    border: 1px solid powderblue;
}

让我试试

CSS 内边距(Padding)

The CSS 内边距属性定义文本和边框之间的填充（空格），例如：

p {
    border: 1px solid powderblue;
    padding: 30px;
}

让我试试

CSS Margin（外边距）

CSS margin（外边距）性定义边界外的边距（空间），例如：

p {
    border: 1px solid powderblue;
    margin: 50px;
}

让我试试

id 属性

若要为特定元素定义特定样式，请向该元素添加id属性，例如：

<p id="p01">我就是我...</p>

然后为具有特定id的元素定义样式，例如：

#p01 {
    color: blue;
}

让我试试

注意: 一个元素的ID在一个页面中应该是唯一的，所以id选择器用来选择一个唯一的元素!

class 属性

要为特殊类型的元素定义样式，请向元素添加类属性，例如：

<p class="error">我就是我...</p>

然后为特定类定义元素的样式，例如：

p.error {
    color: red;
}

让我试试

外部样式引用

外部样式表可以引用完整的URL或与当前网页相对应的路径.

此示例使用完整的URL链接到样式表，例如：

<link rel="stylesheet" href="http://www.CodingDict.com/html/styles.css">

这个例子的链接样式表位于HTML文件夹在当前网站：

<link rel="stylesheet" href="/html/styles.css">

此示例链接到位于当前页相同文件夹中的样式表：

<link rel="stylesheet" href="styles.css">

本章小结

使用HTML行内样式属性
使用 HTML <style> 元素定义内部样式表
使用 HTML <link> 元素引用一个外部CSS文件
使用 HTML <head> 元素去存储<style> 和 <link> 元素
使用CSS color 属性设置文本颜色
使用CSS font-family 属性设置文本字体
使用CSS font-size 属性设置文本大小
使用CSS border 属性设置边框
使用CSS padding 属性设置内边距
使用CSS margin 属性设置外边距