HTML CSS 样式表 |
您所在的位置:网站首页 › 样式应用到正文 › HTML CSS 样式表 |
❮ 上一节
下一节 ❯
HTML CSS 样式表
CSS 代表级联样式表。 CSS 可节省大量的工作。可以同时控制多个网页的布局。 CSS = Styles and Colors Manipulate Text Colors, Boxes 什么是 CSS?层叠样式表(CSS)用于格式化网页的布局。 使用 CSS,您可以控制颜色、字体、文本大小、元素之间的间距、元素的位置和布局、要使用的背景图像或背景颜色、不同设备的不同显示和屏幕大小等等! 提示: 单词 cascading 意味着应用于父元素的样式也将应用于父元素中的所有子元素。 因此,如果您将正文文本的颜色设置为 "blue",则正文中的所有标题、段落和其他文本元素也将获得相同的颜色(除非您指定其他颜色)! 使用 CSSCSS 可以通过3种方式添加到 HTML 文档: 内联 - 通过在 HTML 元素中使用 style 属性 内部 - 使用 部分中的 元素 外部 - 通过使用 元素链接到外部 CSS 文件添加 CSS 最常见的方法是将样式保存在外部 CSS 文件中。但是,在本教程中,我们将使用内联样式和内部样式,因为这更易于演示,也更便于您自己尝试。 内联 CSS内联 CSS 用于将唯一样式应用于单个HTML元素。 内联 CSS 使用 HTML 元素的 style 属性。 以下示例将 元素的文本颜色设置为 blue, 元素的文本颜色设置为 red: 实例 一个蓝色标题一个红色的段落。 亲自试一试 » 内部 CSS内部 CSS用于定义单个 HTML 页面的样式。 内部 CSS是在 HTML 页面的部分中元素中定义的。 下面的示例将所有元素(在该页上)的文本颜色设置为 blue,将所有 元素的文本颜色设置为 red。此外,页面将以 powderblue 背景色显示: 实例 body {background-color: powderblue;}h1 {color: blue;}p {color: red;}这是一个标题 这是一个段落。 亲自试一试 » 外部 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 属性: h1 { color: blue; font-family: verdana; font-size: 300%;}p { color: red; font-family: courier; font-size: 160%;}这是一个标题 这是一个段落。 亲自试一试 » 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 元素定义内部CSS 使用 HTML 元素引用外部CSS文件 使用 HTML 元素来存 和元素 使用 CSS color 文本颜色的属性 使用 CSS font-family 文本字体的属性 使用 CSS font-size 文本大小的属性 使用 CSS border 边框属性 使用 CSS padding 内边框的属性 使用 CSS margin 外边框的属性提示: 了解更多有关CSS的信息 CSS 教程。 HTML 实验 HTML 样式标签 标签 描述 定义HTML文档的样式信息 定义文档和外部资源之间的链接有关所有可用HTML标记的完整列表,请访问 HTML 标签参考手册。 ❮ 上一节 下一节 ❯ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |