❮ 上一节

下一节 ❯

HTML CSS 样式表

CSS 代表级联样式表。

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

CSS = Styles and Colors

Manipulate Text

Colors,

Boxes

什么是 CSS?

层叠样式表（CSS）用于格式化网页的布局。

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

提示: 单词 cascading 意味着应用于父元素的样式也将应用于父元素中的所有子元素。

因此，如果您将正文文本的颜色设置为 "blue"，则正文中的所有标题、段落和其他文本元素也将获得相同的颜色（除非您指定其他颜色）！

使用 CSS

CSS 可以通过3种方式添加到 HTML 文档:

内联 - 通过在 HTML 元素中使用 style 属性

内部 - 使用 部分中的

这是一个标题

这是一个段落。

亲自试一试 »

外部 CSS

外部样式表用于定义许多 HTML 页面的样式。

要使用外部样式表，请在每个 HTML 页面的 部分中添加指向该样式表的链接:

实例

这是一个标题

这是一个段落。

亲自试一试 »

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

结果应该是 "styles.css" 文件:

"styles.css":

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

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

CSS 颜色、字体和大小

在这里，我们将演示一些常用的 CSS 属性。稍后您将进一步了解它们。

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

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

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

实例

使用 CSS color, font-family, font-size 属性:

这是一个标题

这是一个段落。

亲自试一试 »

CSS 边框

CSS border 属性定义 HTML 元素的边框。

提示: 可以为几乎所有 HTML 元素定义边框。

实例

使用 CSS 边框属性:

p { border: 2px

solid powderblue;}

亲自试一试 »

CSS 填充

CSS padding 属性定义文本和边框之间的填充（空格）。

实例

使用 CSS 边框和填充属性:

p { border: 2px

solid powderblue; padding: 30px;}

亲自试一试 »

CSS 边距

CSS margin 属性定义边框外的边距（空格）。

实例

使用 CSS 边框和边距属性:

p { border: 2px

solid powderblue; margin: 50px;

}

亲自试一试 »

链接到外部 CSS

外部样式表可以使用完整的 URL 或相对于当前网页的路径进行引用。

实例

此示例使用完整 URL 链接到样式表:

亲自试一试 »

实例

此示例链接到当前网站上 html 目录中的样式表:

亲自试一试 »

实例

此示例链接到与当前页面位于同一文件夹中的样式表:

亲自试一试 »

您可以在 HTML File Paths 一章中阅读有关文件路径的更多信息。

章节摘要

使用 HTML style 样式属性进行内联样式设置

使用 HTML

My Home Page

提交答案 »

开始练习

HTML 样式标签

标签

描述