CSS入门指南：从零开始学习网页开发——（一）简介

 一、 什么是CSS？

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页的外观和布局的样式表语言。它通过定义网页元素的样式（如颜色、字体、边距等）来与 HTML 内容分离，提升了网页的可维护性和设计的灵活性。

CSS 的核心目的是增强网页的表现力。早期的网页仅使用 HTML 来进行内容的展示，但由于 HTML 只能描述内容的结构，页面设计和内容变得难以管理。于是，CSS 作为一种辅助技术应运而生，帮助开发者对网页的呈现进行更细致的控制。

简单来说，CSS就是用来美化 HTML , 让 HTML 更漂亮

二、CSS的发展历程

• 1994年：Håkon Wium Lie提出CSS概念

• 1996年：CSS1正式发布，支持字体、颜色等基础样式

• 1998年：CSS2引入定位、媒体类型等特性

• 2005年：CSS3开启模块化发展，新增动画、渐变等现代特性

• 2023年：CSS4持续演进，新增选择器Level 4等特性

如今，CSS 不仅用于桌面设备，还在响应式设计和移动端设计中发挥着重要作用。

三、CSS的编写位置

类型	示例	适用场景	优先级
内联样式		临时调试	最高
内部样式表		小型页面	中
外部样式表		中大型项目	低

 行内样式 > 内部样式 = 外部样式  ，优先级相同，后面的会覆盖前面的。

1. 内联样式（Inline CSS）： 通过在 HTML 元素的 style 属性中编写 CSS。存在书写繁琐、样式不能复用，不推荐大量使用，只有对当前元素添加简单样式时偶尔使用。

   欢迎使用 CSS

2. 内部样式表（Internal CSS）： 将 CSS 代码写在

3. 外部样式表（External CSS）： 将 CSS 代码写在单独的 .css 文件中，通过 标签引用该文件。这种方式有助于多个页面共享相同的样式，便于维护。

四、CSS语法规范

• CSS 语法规范由两部分构成： 选择器：找到要添加样式的元素。 声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为： 属性名: 属性 值;

• CSS 的基本语法结构是：

selector {
    property: value;
}

• Selector（选择器）：用于选择需要应用样式的 HTML 元素。
• Property（属性）：指定样式的类型，如 color, font-size, margin 等。
• Value（值）：定义属性的具体数值，如 red, 16px, 10px 等。
• CSS注释写法

/* 给h1元素添加样式 */
h1 {
/* 设置文字颜色为红色 */
color: red;
/* 设置文字大小为40px */
font-size: 40px
}

五、CSS代码风格

• 展开风格 —— 开发时推荐，便于维护和调试。

h1 {
    color: red;
    font-size: 10px;
}

• 紧凑风格 —— 项目上线时推荐，可减小文件体积。

h1{color:red;font-size:10px;}

项目上线时，最好采用【紧凑风格】，这样可以减小文件体积，节约网络流量，同时也能让用户打开网页时速度更快。

六、CSS最佳实践

1. 使用外部样式表：将CSS代码与HTML分离，便于维护和复用。

2. 合理命名选择器：使用有意义的类名和ID，避免使用过于简单的命名。

3. 遵循编码规范：保持代码整洁，使用一致的缩进和格式。

4. 利用开发者工具：使用浏览器的开发者工具调试和优化CSS代码。