当前位置：首页 > news >正文

第1章：CSS简介 --[CSS零基础入门]

news 2024/12/14 0:35:27

1. 什么是CSS

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML（包括各种XML方言如SVG、XHTML等）文档表现的样式语言。CSS的主要目的是将网页的内容与它的表现形式分离，从而使得开发者能够更灵活地控制页面的布局和外观。

主要特点

分离内容与样式：
- CSS允许你将网页的内容（HTML）与样式（CSS）分开。这样做的好处是，你可以通过修改一个CSS文件来改变整个网站的外观，而不需要逐个修改每个HTML文件。
- 这种分离提高了代码的可维护性和可重用性。
层叠性：
- CSS的“层叠”特性意味着多个样式规则可以应用于同一个元素，最终的效果是由这些规则按优先级顺序叠加而成的。
- 优先级取决于选择器的特异性、!important声明以及样式的来源（如内联样式、内部样式表、外部样式表等）。
灵活性：
- CSS提供了丰富的选择器和属性，可以精确控制元素的各个方面，如字体、颜色、背景、边距、填充、布局等。
- 通过使用CSS预处理器（如Sass、Less、Stylus），你可以编写更复杂和模块化的样式代码。
响应式设计：
- CSS使得网页能够在不同设备和屏幕尺寸上自适应显示，通过媒体查询和视口单位，可以轻松实现响应式布局。
性能优化：
- 合理使用CSS可以减少页面加载时间，提高用户体验。例如，通过压缩CSS文件、使用CSS Sprites、避免使用过多的嵌套选择器等方法。

基本语法

CSS的基本语法由选择器和声明块组成。选择器用于指定要应用样式的HTML元素，声明块则包含具体的样式规则。

/* 选择器 */
selector {/* 声明块 */property: value;property: value;
}

选择器：指定要应用样式的HTML元素。例如，p 选择所有的 <p> 元素，.classname 选择所有带有 classname 类的元素，#idname 选择具有 idname ID 的元素。
声明块：包含一个或多个声明，每个声明由属性和值组成，中间用冒号分隔，以分号结束。

示例

/* 选择所有段落元素，并设置字体大小为16像素 */
p {font-size: 16px;
}/* 选择所有带有 "header" 类的元素，并设置背景颜色为蓝色 */
.header {background-color: blue;
}/* 选择具有 "main" ID 的元素，并设置宽度为80% */
#main {width: 80%;
}

应用方式

CSS可以通过以下几种方式应用到HTML文档中：

内联样式：
- 直接在HTML元素的 style 属性中定义样式。
```
<p style="color: red;">这是一个红色的段落。</p>
```
内部样式表：
- 在HTML文档的 <head> 部分使用 <style> 标签定义样式。
```
<head><style>p {
```