CSS 基础

CSS 基础

本章将介绍 CSS 的基本用法。

CSS 的三种使用方式

CSS 可以通过三种方式添加到 HTML 中：

1. 内联样式

使用 style 属性直接在 HTML 元素上定义样式：

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

2. 内部样式表

在 HTML 文档的 <head> 部分使用 <style> 元素定义：

<head>
  <style>
    body {
      background-color: lightgrey;
    }
    h1 {
      color: blue;
    }
  </style>
</head>

3. 外部样式表

使用外部 CSS 文件，通过 <link> 元素链接：

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

CSS 颜色

CSS 颜色可以使用以下方式指定：

• 颜色名称：red, blue, green
• 十六进制值：#ff0000, #00ff00
• RGB 值：rgb(255, 0, 0)
• RGBA 值：rgba(255, 0, 0, 0.5)
• HSL 值：hsl(0, 100%, 50%)

h1 {
  color: #ff6347;
}

p {
  color: rgb(60, 60, 60);
}

CSS 背景

CSS 背景属性用于定义元素的背景效果：

body {
  background-color: lightblue;
  background-image: url("background.png");
  background-repeat: no-repeat;
  background-position: center;
}