CSS快速入门

系统管理员 2024-02-21 03:08 28阅读 0赞

**目录**

1.概论

2.选择器

3.引入方式

4.颜色

5.边距

5.1.布局框架

5.2.外边距

5.3.外边距

6.字体

7.按钮

8.超链接

--------------------

## 1.概论 ##

CSS（层叠样式表）是一种用于描述网页上元素如何呈现的样式语言。它可以控制网页的布局、字体、颜色、间距、边框等外观属性，使得网页的呈现更加美观和易读。CSS 与 HTML（超文本标记语言）结合使用，用于美化和排版网页。

**CSS的基本语法：**

CSS 规则由两个主要的部分组成：选择器和声明块。选择器选中作用的元素，声明块中以Key-Value的方式声明元素的样式。

![acf40200b285450583f6a0ff3958d23b.png][]

## 2.选择器 ##

CSS样式是总用于HTML元素上的，既然如此，那么在使用CSS的时候就需要选中要对其进行作用的HTML元素是什么？完成这个功能的是选择器。

CSS支持很多很多种选择器，常用的有如下几种选择器：

1.  元素选择器
2.  类选择器
3.  ID选择器
4.  属性选择器
5.  后代选择器
6.  子元素选择器
7.  伪类选择器
8.  伪元素选择器
9.  组合选择器

1.元素选择器

选择所有特定类型的 HTML 元素。

div {
        /* 样式规则 */
    }

2.类选择器

选择带有特定类名的元素。

.my-class {
        /* 样式规则 */
    }

3.ID选择器

选择带有特定ID的元素。

#my-id {
        /* 样式规则 */
    }

4.属性选择器

选择带有特定属性的元素。

input[type="text"] {
        /* 样式规则 */
    }

5.后代选择器

选择某个元素的后代元素。

div p {
        /* 选择 div 元素内的所有 p 元素 */
    }

6.子元素选择器

选择某个元素的直接子元素。

ul > li {
        /* 选择 ul 元素的直接子元素 li */
    }

7.伪类选择器

选择元素的特殊状态，例如鼠标悬停、访问过的链接等。

a:hover {
        /* 鼠标悬停在链接上时的样式 */
    }

8.伪元素选择器

选择元素的特殊部分，例如元素的第一个字母、最后一个行等。

p::first-line {
        /* 选择 p 元素的第一行 */
    }

9.组合选择器

组合不同的选择器，以选择更特定的元素。

并集选择器：

选择多个选择器匹配的所有元素。

h1, h2, h3 {
        /* 应用于 h1、h2、h3 元素 */
    }

交集选择器：

选择同时满足多个选择器的元素。

div.my-class {
        /* 选择 class 为 my-class 的 div 元素 */
    }

## 3.引入方式 ##

1.  外部样式表
2.  内联样式表
3.  内联样式表

1.外部样式表

外部样式表是将样式定义放在一个独立的 `.css` 文件中，并在 HTML 文件中通过 `<link>` 标签引入。这是一种将样式与内容分离的常用方法。外部样式表适用于需要在多个页面上使用相同样式的情况，它提供了一种更好的维护性和可重用性。

**styles.css (外部样式表文件)**

body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    }
    
    h1 {
        color: blue;
    }

**index.html (HTML 文件)**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">
        <title>External Stylesheet Example</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
    </html>

2.内部样式表

内部样式表将样式定义放在 HTML 文件的 `<style>` 标签内，通常位于 `<head>` 标签内部。内部样式表适用于单个页面的样式定义，它将样式与特定页面相关联。

**index.html (HTML 文件)**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Internal Stylesheet Example</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                background-color: #f0f0f0;
            }
    
            h1 {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
    </html>

3.内联样式表

内联样式表将样式直接应用于 HTML 元素的 `style` 属性上。内联样式适用于单个元素的样式定义，它将样式与特定元素相关联。

**index.html (HTML 文件)**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Inline Styles Example</title>
    </head>
    <body>
        <h1 style="color: blue; font-family: Arial, sans-serif;">Hello, World!</h1>
    </body>
    </html>

## 4.颜色 ##

在 CSS 中，颜色可以用各种方式表示，包括命名颜色、十六进制颜色、RGB 颜色、RGBA 颜色、HSL 颜色和 HSLA 颜色。

**1. 命名颜色（Named Colors）:**

CSS 定义了一些预定义的颜色名称，比如 "red"、"blue"、"green" 等，可以直接使用这些名称来表示颜色。

div {
        color: red;
        background-color: yellow;
    }

**2. 十六进制颜色（Hexadecimal Colors）:**

颜色可以用六位十六进制数表示，其中前两位表示红色分量，中间两位表示绿色分量，后两位表示蓝色分量。

div {
        color: #FF0000; /* 红色 */
        background-color: #00FF00; /* 绿色 */
    }

**3. RGB 颜色（RGB Colors）:**

颜色可以用 RGB 值表示，每个颜色通道的值范围是 0 到 255。

div {
        color: rgb(255, 0, 0); /* 红色 */
        background-color: rgb(0, 255, 0); /* 绿色 */
    }

4. **RGBA 颜色（RGBA Colors）:**

RGBA 颜色是 RGB 颜色的扩展，其中 A 表示透明度（Alpha），范围是 0（完全透明）到 1（完全不透明）。

div {
        color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
        background-color: rgba(0, 255, 0, 0.8); /* 半透明绿色 */
    }

5. **HSL 颜色（HSL Colors）:**

HSL 表示颜色的方法，H 表示色相（0 到 360），S 表示饱和度（0% 到 100%），L 表示亮度（0% 到 100%）。

div {
        color: hsl(0, 100%, 50%); /* 红色 */
        background-color: hsl(120, 100%, 50%); /* 绿色 */
    }

**6. HSLA 颜色（HSLA Colors）:**

HSLA 颜色是 HSL 颜色的扩展，A 表示透明度（Alpha），范围是 0（完全透明）到 1（完全不透明）。

div {
        color: hsla(0, 100%, 50%, 0.7); /* 半透明红色 */
        background-color: hsla(120, 100%, 50%, 0.5); /* 半透明绿色 */
    }

## 5.边距 ##

### 5.1.布局框架 ###

在 CSS 中，每个 HTML 元素都可以被看作是一个矩形的"盒子"，这个盒子由内容区域（Content）、内边距（Padding）、边框（Border）和外边距（Margin）组成。这些部分共同构成了元素的布局框架。

![dfdda5d551864448960ff4a1cf1caf4e.png][]

多个盒子放在一起只会有一份外边距，这个现象称为“外边距重叠”。

![c63882f5ad534469a4bb7fcd4db3b73e.png][]

### 5.2.外边距 ###

外边距的指定有两种方法，一种是一个一个的指定，一种是一行指定完。

![ec01d9ab051a4e49aa604b34e594ed68.png][]

### 5.3.外边距 ###

内边距的使用和外边距一模一样。

## 6.字体 ##

CSS 字体属性用于定义文本的外观和样式。你可以通过设置字体族、字体大小、字体样式、字体粗细、字体变体、字体拉伸和字体修饰等属性来自定义文本的外观。这些属性可以独立设置，也可以一起组合使用，以创建特定风格和排版的文本。例如，你可以定义一个段落的字体如下：

p {
        font-family: Arial, sans-serif; /* 字体族，首选 Arial，备选 sans-serif */
        font-size: 16px; /* 字体大小为 16 像素 */
        font-style: italic; /* 字体样式为斜体 */
        font-weight: bold; /* 字体粗细为粗体 */
        font-variant: small-caps; /* 字体变体为小型大写字母 */
        font-stretch: expanded; /* 字体拉伸为扩展 */
        text-decoration: underline; /* 文本修饰为下划线 */
    }

在上述例子中，段落文本将使用 Arial 字体（如果可用），字体大小为 16 像素，样式为斜体，粗细为粗体，变体为小型大写字母，拉伸为扩展，并且有下划线修饰。

## 7.按钮 ##

button:原生样式。

hover：鼠标放上后的样式。

active：鼠标点击后的样式。

![e00e2c48f47e4ee8adc4f6570f8d343c.png][]

## 8.超链接 ##

text-decoration：下划线

hover：鼠标放上去后的样式

visited：访问后的颜色（点击过）。

![c4284c0eb564412aaccd056d412fffa4.png][]

[acf40200b285450583f6a0ff3958d23b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/58eb8156cbc143858721dd061b1d25e7.png
[dfdda5d551864448960ff4a1cf1caf4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/b41ce4d4d91b4680ac0889b4993e21e3.png
[c63882f5ad534469a4bb7fcd4db3b73e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/afa326daf11b41a58752700b65e4748a.png
[ec01d9ab051a4e49aa604b34e594ed68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/1a1488a9b57f4f7b809fde7ff1bb46a7.png
[e00e2c48f47e4ee8adc4f6570f8d343c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/2573eaba3cd34c97a5d528ea4673b6e3.png
[c4284c0eb564412aaccd056d412fffa4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/2cf73d89aa334c80b456338d4dbc5078.png