W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML 样式 - CSS



CSS = Styles and Colors

Manipulate Text
Colors,  Boxes


HTML与 CSS样式

CSS是层叠样式表(Cascading Style Sheets)

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

  • 内联样式 - 在HTML元素中使用 "style" 属性
  • 内部样式表 - 在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  • 外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件。在本站的HTML教程中我们使用了内联CSS样式来介绍实例,这是为了简化的例子,也使得你能更容易在线编辑代码并在线运行实例。

Note 你可以学习更多的CSS知识通过我们的 CSS 教程

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。

使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

以下实例是把 <h1> 元素的文本改成了蓝色:

Example

<h1 style="color:blue;">This is a Blue Heading</h1>
尝试一下 »

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。

你可以在<head> 部分通过 <style>标签定义内部样式表:

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1   {color:blue;}
p    {color:green;}
</style>
</head>
<body>

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

</body>
</html>
尝试一下 »

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。

使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

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

Example

<!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类型。

Here is how the "styles.css" looks:

body {
    background-color: lightgrey;
}

h1 {
    color: blue;
}

p {
    color:green;
}

CSS 字体

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

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

CSS font-size 属性定义要使用文本字体的大小。

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

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

</body>
</html>
尝试一下 »

CSS盒子模型

每个HTML元素周围有一个盒子,即使你看不到它。

CSS border 属性定义一个HTML元素可见边框:

Example

p {
    border: 1px solid black;
}
尝试一下 »

CSS padding 属性定义边框内的填充(空间):

Example

p {
    border: 1px solid black;
    padding: 10px;
}
尝试一下 »

CSS margin 属性定义边界外的边距(空间):

Example

p {
    border: 1px solid black;
    padding: 10px;
    margin: 30px;
}
尝试一下 »
Note 以上CSS实例使用PX像素定义尺寸。

id 属性

所有上述的例子使用CSS在HTML元素的一般风格。

要定义一个特殊元素的特殊样式,首先向元素添加id属性:

<p id="p01">I am different</p>

然后为具有特定id的元素定义样式:

Example

#p01 {
    color: blue;
}
尝试一下 »

class 属性

要为元素的特殊类型(类)定义样式,请向元素添加类属性:

<p class="error">I am different</p>

现在,您可以定义特定元素的不同样式类:

Example

p.error {
    color: red;
}
尝试一下 »
Note 使用 id 来处理 单个 元素。 使用 class 来处理 一组 元素。

HTML 样式标签

标签 描述
<style> 定义文本样式
<link> 定义资源引用地址