HTML CSS样式

本页内容
上一节: HTML_HSL_和_HSLA_颜色 下一节: HTML链接

CSS 代表层叠样式表。英文Cascading Style Sheets。

掌握CSS后可以通过CSS文件控制多个网页样式,减少代码重复减少维护成本,增加网页打开速度。

CSS = 样式和颜色

小白教程xiaobai.wang
颜色,  盒子

什么是 CSS?

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

使用 CSS

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

  • 内联- 通过使用HTML元素的style属性
  • 内部- 通过使用<head>中的<style>标签
  • 外部- 通过使用<link> 链接到外部 CSS 文件, 最常见的方式,推荐使用。

内联 CSS

  • 内联 CSS 用于将独特的样式应用于单个 HTML 元素。
  • 内联 CSS 使用style属性进行设置。

以下示例将元素的文本颜色设置<h1>为蓝色,将元素的文本颜色设置<p>为红色:

示例

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

<p style="color:red;">红色文本</p>

内部 CSS

  • 内部 CSS 用于定义单个 HTML 页面的样式。
  • 内部 CSS 定义在<head>的<style>元素内。

以下示例将所有<h1>元素(在该页面上)的文本颜色设置为蓝色,并将所有<p>元素的文本颜色设置为红色。此外,页面将显示为“粉蓝色”背景色:

<!DOCTYPE html>

标题

文本

上一节: HTML_HSL_和_HSLA_颜色 下一节: HTML链接
此页面最后编辑于2022年8月4日 (星期四) 11:38。