CSS 基础教程：从入门到精通
CSS（层叠样式表）是用来控制网页外观的语言，它决定了网站的排版、颜色、字体、图像等元素的样式。学习 CSS 是网页设计和开发必不可少的技能，以下教程将带你从基础开始，深入了解 CSS 的各个方面。
一、选择器
选择器是 CSS 的核心，它决定了哪些 HTML 元素会被应用样式。
1.1 基本选择器
- 元素选择器： 选择所有匹配指定元素的标签，例如：
p { color: blue; }将所有段落文字颜色设置为蓝色。 - 类选择器： 选择所有带有特定 class 属性的元素，例如：
<p class="intro">...</p>可以用.intro { font-weight: bold; }将所有 class 为 intro 的段落设置为粗体。 - ID 选择器： 选择拥有唯一 ID 的元素，例如：
<h1 id="title">...</h1可以用#title { text-align: center; }将 ID 为 title 的标题居中。 - 通用选择器： 选择所有元素，例如：
* { margin: 0; }将所有元素的边距设置为 0。
1.2 组合选择器
- 后代选择器： 选择所有匹配特定元素的后代元素，例如：
div p { font-size: 16px; }将所有 div 元素内部的 p 元素字体大小设置为 16 像素。 - 子选择器： 选择所有匹配特定元素的直接子元素，例如：
div > p { font-size: 16px; }将所有 div 元素直接包含的 p 元素字体大小设置为 16 像素。 - 相邻兄弟选择器： 选择紧接在特定元素之后的兄弟元素，例如：
h2 + p { font-style: italic; }将所有紧接在 h2 元素之后的 p 元素设置为斜体。 - 通用兄弟选择器： 选择所有匹配特定元素之后的兄弟元素，例如：
h2 ~ p { font-style: italic; }将所有在 h2 元素之后的 p 元素设置为斜体。
1.3 属性选择器
- 属性选择器： 选择所有包含特定属性的元素，例如：
[title] { color: red; }将所有包含 title 属性的元素颜色设置为红色。 - 属性值选择器： 选择所有属性值为特定值的元素，例如：
[title="标题"] { color: red; }将所有 title 属性值为 “标题” 的元素颜色设置为红色。
二、布局
CSS 提供了多种布局方式，帮助你创建结构清晰、美观的用户界面。
2.1 块级元素和行内元素
- 块级元素： 独占一行，可以设置宽高，例如：
<h1>,<p>,<div>。 - 行内元素： 不独占一行，无法设置宽高，例如：
<strong>,<span>,<a>。
2.2 盒模型
每个 HTML 元素都被视为一个盒子，盒子模型由内容、内边距、边框和外边距组成。
- 内容： 元素本身的内容。
- 内边距： 内容与边框之间的区域。
- 边框： 元素周围的边框。
- 外边距： 元素与其他元素之间的区域。
2.3 常用布局方式
- 浮动布局： 利用浮动属性将元素向左或向右浮动，从而实现左右排列或环绕效果。
- 定位布局： 利用定位属性将元素固定在特定位置，例如：
position: static,position: relative,position: absolute,position: fixed。 - Flex 布局： 利用 flexbox 属性，可以轻松实现元素的排列、对齐、伸缩等功能。
- Grid 布局： 利用 grid 属性，可以将网页划分成行和列，实现更灵活的布局。
三、样式属性
CSS 提供了丰富的属性，用于控制网页元素的样式。
3.1 文本样式
- 字体属性：
font-family,font-size,font-weight,font-style,text-align,line-height等。 - 颜色属性：
color,background-color等。 - 文本装饰属性：
text-decoration,text-transform等。
3.2 视觉样式
- 边框属性：
border,border-width,border-color,border-style等。 - 阴影属性：
box-shadow,text-shadow等。 - 圆角属性：
border-radius等。 - 背景属性：
background-color,background-image,background-repeat,background-size等。
3.3 尺寸和定位
- 尺寸属性：
width,height,max-width,min-width,max-height,min-height等。 - 定位属性：
position,top,right,bottom,left,z-index等。 - 间距属性：
margin,padding等。
四、实例
1. 创建一个简单网页：
<!DOCTYPE html>
<html>
<head>
<title>CSS 教程</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
font-size: 2em;
text-align: center;
}
p {
font-size: 1.2em;
line-height: 1.5;
color: #666;
}
</style>
</head>
<body>
<h1>CSS 教程</h1>
<p>这是一个简单的 CSS 教程，演示了基础的选择器、布局和样式属性的使用。</p>
</body>
</html>
2. 使用 Flex 布局实现元素的左右排列：
<!DOCTYPE html>
<html>
<head>
<title>Flex 布局</title>
<style>
.container {
display: flex;
justify-content: space-between;
}
.item {
width: 45%;
padding: 20px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<h2>内容 1</h2>
<p>这是内容 1 的描述。</p>
</div>
<div class="item">
<h2>内容 2</h2>
<p>这是内容 2 的描述。</p>
</div>
</div>
</body>
</html>
3. 使用 Grid 布局实现图片网格：
<!DOCTYPE html>
<html>
<head>
<title>Grid 布局</title>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.image {
width: 100%;
height: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<div class="grid">
<img class="image" src="image1.jpg" alt="图片 1">
<img class="image" src="image2.jpg" alt="图片 2">
<img class="image" src="image3.jpg" alt="图片 3">
<img class="image" src="image4.jpg" alt="图片 4">
<img class="image" src="image5.jpg" alt="图片 5">
<img class="image" src="image6.jpg" alt="图片 6">
</div>
</body>
</html>
五、学习资源
- W3Schools： https://www.w3schools.com/css/
- Mozilla Developer Network： https://developer.mozilla.org/en-US/docs/Web/CSS
- CSS Tricks： https://css-tricks.com/
- FreeCodeCamp： https://www.freecodecamp.org/
六、总结
本文介绍了 CSS 的基础知识，包括选择器、布局和样式属性。希望能够帮助你入门 CSS，并开始创建具有视觉效果的网页。 记住，CSS 是一个强大的工具，需要不断练习和探索才能掌握。
