获课地址：666it.top/13611/
如果说HTML是网页的骨架，那么CSS就是网页的“时尚设计师”，它负责给骨架穿上漂亮的外衣，让网页从“能用”变得“好看”。CSS全称层叠样式表（Cascading Style Sheets），通过一系列样式规则控制HTML元素的视觉呈现，包括颜色、字体、大小、间距、布局、动画等。对于零基础学习者来说，CSS的入门核心是理解“样式规则怎么写”“如何选中要美化的元素”以及“常用样式属性有哪些”。
CSS样式规则由“选择器”和“声明块”组成。选择器用于指定要应用样式的HTML元素，比如p选择器表示所有段落，h1选择器表示所有一级标题；声明块包含在花括号{}中，内部由一条或多条声明组成，每条声明是“属性: 值;”的形式，比如color: red;表示文字颜色为红色，font-size: 16px;表示字体大小为16像素。例如，p { color: red; font-size: 16px; }这条规则，会让所有段落的文字变成红色，大小为16像素。这就是CSS的基本语法，简单直观，就像给元素下达“穿红色衣服、鞋子16码”的指令。
CSS的引入方式有三种，分别是内联样式、内部样式表和外部样式表。内联样式是直接在HTML标签的style属性中写CSS，比如<p style="color: red;">红色段落</p>，这种方式优先级最高，但不利于复用和维护，适合临时调试；内部样式表是将CSS代码写在HTML文档的<head>标签内的<style>标签中，比如<style> p { color: red; } </style>，这种方式可以让当前页面的所有对应元素应用样式，但无法跨页面复用；外部样式表是最推荐的方式，将CSS代码单独写在.css文件中（比如style.css），然后在HTML的<head>中通过<link rel="stylesheet" href="style.css">引入，这种方式可以实现样式和结构分离，便于维护和复用，多个页面可以共享同一个样式文件。
选择器是CSS的核心，它决定了样式“给谁用”。基础选择器包括元素选择器（如p、h1）、类选择器（.classname，通过HTML的class属性指定，比如<p class="highlight">，CSS用.highlight选中）和ID选择器（#idname，通过HTML的id属性指定，比如<p id="intro">，CSS用#intro选中）。类选择器可以复用，多个元素可以同一个类名；ID选择器是唯一的，一个页面中只能有一个元素使用某个ID。组合选择器可以更精准地选中元素，比如后代选择器（div p表示选中div内部的所有p）、子选择器（div > p表示选中div的直接子元素p）、并集选择器（h1, h2表示同时选中h1和h2）等。
常用CSS属性可以分为几大类：文本属性控制文字外观，比如color（颜色）、font-size（字体大小）、font-family（字体，如"Microsoft YaHei"表示微软雅黑）、text-align（对齐方式，如center居中）、line-height（行高，影响文本垂直间距）；背景属性控制元素背景，比如background-color（背景颜色）、background-image（背景图片，通过url("图片路径")指定）、background-size（背景图片大小，如cover覆盖整个元素）；盒模型属性控制元素尺寸和间距，这是CSS布局的基础，每个HTML元素都可以看作一个盒子，包括content（内容）、padding（内边距，内容与边框的距离）、border（边框）、margin（外边距，元素与其他元素的距离），通过width和height设置内容区域大小，padding: 10px;设置四个方向内边距为10像素，border: 1px solid black;设置1像素黑色实线边框，margin: 20px;设置四个方向外边距为20像素；布局属性控制元素排列方式，比如display（显示模式，block表示块级元素独占一行，inline表示行内元素不独占一行，inline-block表示行内块级元素既不独占一行又能设置宽高）、float（浮动，让元素脱离文档流向左或向右排列，传统布局方式，现代布局多用Flexbox或Grid）、position（定位，static默认定位，relative相对定位（相对于自身原位置偏移），absolute绝对定位（相对于最近的有定位的父元素偏移），fixed固定定位（相对于浏览器窗口固定））。
学习CSS时，建议从简单的样式开始，比如先给段落设置颜色、字体大小，再尝试调整盒模型的边距和边框，然后练习布局。可以打开浏览器的开发者工具（F12），实时修改样式查看效果，这是调试CSS的利器。记住，CSS的核心是“层叠”和“继承”，层叠意味着多个样式规则作用于同一元素时，优先级高的规则生效（一般内联样式 > ID选择器 > 类选择器 > 元素选择器）；继承意味着子元素会继承父元素的某些样式（比如文字颜色、字体大小）。掌握了CSS的基础语法和常用属性，你就能给网页骨架穿上漂亮的外衣，让页面从“白纸黑字”变得“色彩斑斓”。
