---
title: "IT课程 CSS基础 019_HelloCSS"
date: 2024-01-26T22:00:00.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "hello css", "css基础"]
categories: ["学习", "CSS基础"]
canonical: https://www.zhaojian.net/it-course-css-019/
author: 赵健
---
### 什么是 CSS ？
CSS（Cascading Style Sheets，层叠样式表）和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。**CSS 是一门样式表语言**，用于为 HTML 元素添加样式，描述 HTML 文档外观，控制 HTML 文档元素的颜色、大小、字体、布局等。
CSS 是 Web 开发的重要组成部分，它可以帮助您创建美观、易于使用的 Web 页面。
##### CSS 的基本结构
CSS 样式由选择器和属性组成。选择器用于选择要应用样式的 HTML 元素。属性用于指定样式的值。
示例：
```css
p {
color: red;
}
```
效果：
##### 结构解析：
> [!小结]
> - 选择器（Selector）
> HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 `` 元素）。要给不同元素添加样式，只需要更改选择器。
>
> - 声明（Declaration）
> 一个单独的规则，如 color: red; 用来指定添加样式元素的属性。CSS声明总是以分号 ; 结束，声明总被大括号 {} 括起来:
>
> - 属性（Properties）
> 改变 HTML 元素样式的途径（本例中 color 就是 `
` 元素的属性）。CSS 中，由编写人员决定修改哪个属性以改变规则。
>
> - 属性的值（Property value）
> 在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。
>
***
### 如何引用 CSS ？
##### 内联引用：
将 CSS 代码直接写在 HTML 标签中，使用 `style` 属性。
内联引用是将样式代码直接写在HTML标签中，是一种简单快捷的方法。内联引用的优点是方便快捷，适用于少量样式。但是，内联引用也存在以下缺点：
- 不利于样式复用，难以维护。
- HTML文件混乱，不符合分离原则。
- 不利于浏览器缓存，影响性能。
示例：
```html
这是一个红色的字体
```
效果：
##### 内部引用：
将 CSS 代码写在 `