CSS（Cascading Style Sheets）即层叠样式表，是用于美化网页、控制网页布局和外观的语言。以下从基础概念、选择器、常用属性、样式表引入方式和示例代码等方面为你介绍如何用CSS进行网页设计。
基础概念
CSS通过选择器选中HTML元素，然后为这些元素应用样式规则，以改变元素的外观和布局。样式规则由选择器和声明块组成，声明块中包含一个或多个声明，每个声明由属性和值组成，中间用冒号分隔，声明之间用分号分隔。例如：
/* 选择所有的段落元素 */
p {
/* 设置段落文字颜色为红色 */
color: red;
/* 设置段落文字大小为16像素 */
font-size: 16px;
选择器
元素选择器：通过HTML元素的名称来选择元素，如 p 、 h1 、 div 等。
h2 {
color: blue;
类选择器：通过元素的 class 属性值来选择元素，类名前加 . 。
.highlight {
background-color: yellow;
对应的HTML代码：
这是一个高亮的段落。
ID选择器：通过元素的 id 属性值来选择元素，ID名前加 # 。ID在一个页面中应该是唯一的。
#main-content {
width: 80%;
对应的HTML代码：
这是主要内容区域。
属性选择器：根据元素的属性和属性值来选择元素。
input
type="text"
border: 1px solid gray;
组合选择器：可以将多个选择器组合使用，如后代选择器、子选择器、相邻兄弟选择器等。
/* 后代选择器：选择article元素内的所有p元素 */
article p {
line-height: 1.6;
/* 子选择器：选择nav元素的直接子元素li */
nav > li {
display: inline-block;
/* 相邻兄弟选择器：选择h2元素后相邻的p元素 */
h2 + p {
font-style: italic;
常用属性
文本属性
color ：设置文本颜色。
font-size ：设置字体大小。
font-family ：设置字体类型。
text-align ：设置文本对齐方式，如 left 、 right 、 center 等。
盒模型属性
width 和 height ：设置元素的宽度和高度。
padding ：设置元素内容与边框之间的间距。
border ：设置元素的边框，可分别设置边框的宽度、样式和颜色。
margin ：设置元素与其他元素之间的间距。
背景属性
background-color ：设置元素的背景颜色。
background-image ：设置元素的背景图像。
background-repeat ：设置背景图像的重复方式。
布局属性
display ：设置元素的显示方式，如 block 、 inline 、 inline-block 、 flex 、 grid 等。
float ：设置元素的浮动方式，如 left 、 right 。
position ：设置元素的定位方式，如 static 、 relative 、 absolute 、 fixed 、 sticky 。
样式表引入方式
内联样式：直接在HTML元素的 style 属性中添加样式。
这是一个使用内联样式的段落。
内部样式表：在HTML文档的
这是一个使用内部样式表的标题。
外部样式表：将CSS代码保存为一个独立的 .css 文件，然后在HTML文档的
这是一个使用外部样式表的段落。
示例代码
以下是一个结合HTML和CSS的完整示例，展示了如何使用CSS美化网页：
我的网页
文章标题1
这是文章的内容。这是文章的内容。这是文章的内容。