1. CSS简介
CSS（Cascading Style Sheets）层叠样式表，是一种用来表现HTML或XML文档的样式表语言。通过CSS，我们可以对网页中的元素进行精确的控制，包括布局、字体、颜色、背景等。学习CSS是成为一名优秀前端开发者的必经之路。
2. CSS入门
2.1 CSS是什么
CSS是一种样式表语言，用于描述HTML文档的样式。它可以帮助我们实现网页的美观和用户体验。
2.2 CSS引入方式
行内式：通过元素开始标签的style属性引入。
<input type="button" value="按钮" style="display: block; width: 60px; height: 40px; background-color: rgb(140, 235, 100); color: white; border: 3px solid green; font-size: 22px; font-family: '隶书'; line-height: 30px; border-radius: 5px;" />
缺点：HTML代码和CSS样式代码交织在一起，增加阅读难度和维护成本；CSS样式代码仅对当前元素有效，代码重复量高。
内部式：在HTML文档的<head>标签中添加<style>标签。
<style>
p {
color: brown;
font-size: 100px;
}
</style>
外部式：通过<link>标签引入外部CSS文件。
<link rel="stylesheet" href="./my.css">
3. CSS选择器
3.1 标签选择器
选中所有同名标签设置相同的样式。
p {
color: brown;
font-size: 100px;
}
3.2 类选择器
差异化设置标签的显示结果。
.red {
color: brown;
}
3.3 ID选择器
一般要配合JavaScript使用，一般不用于CSS设置。
#idName {
color: brown;
}
3.4 通配符选择器
查找页面所有标签，设置相同样式。
* {
color: blue;
}
4. CSS浮动
浮动可以让元素在水平方向上自由移动，直到遇到另一个浮动元素或父元素。
.left {
float: left;
width: 100px;
}
.right {
float: right;
width: 100px;
}
5. CSS定位
定位可以控制元素的位置，包括绝对定位、相对定位、固定定位等。
.absolute {
position: absolute;
top: 50px;
left: 50px;
}
6. CSS盒子模型
盒子模型是CSS中用于描述元素尺寸和边距的模型。
.box {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
7. 字体样式
使用CSS的font-family属性可以控制文本的字体类型。
.font-style {
font-family: Arial, sans-serif;
}
8. 总结
学习CSS是一个循序渐进的过程，通过不断实践和总结，我们可以掌握网页美学的秘密技巧。希望这篇文章能帮助你入门CSS，开启你的前端之旅。