HTML 样式 - CSS

❮ 上一页 下一页 ❯

CSS 代表层叠样式表。

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

CSS = 样式和颜色

操纵文本

颜色， 框

什么是 CSS？

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

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

提示： “层叠” 一词意味着应用于父元素的样式也将应用于父元素内的所有子元素。因此，如果您将正文文本的颜色设置为“蓝色”，那么正文内的所有标题、段落和其他文本元素也将获得相同的颜色（除非您另有指定）！

使用 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 border 属性：

p { border: 2px solid powderblue;}

自己尝试 »

CSS 填充

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

示例

使用 CSS border 和 padding 属性

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

自己尝试 »

CSS 边距

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

示例

使用 CSS border 和 margin 属性

p { border: 2px solid powderblue; margin: 50px;

}

自己尝试 »

链接到外部 CSS

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

示例

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

自己尝试 »

示例

此示例链接到位于当前网站 html 文件夹中的样式表：

自己尝试 »

示例

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

自己尝试 »

您可以在 HTML 文件路径 一章中了解更多关于文件路径的信息。

章节总结

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

使用 HTML