CSS 让网页动起来：美化与布局的终极指南
CSS 让网页动起来：美化与布局的终极指南
🏠大家好，我是Yui_，目标成为全栈工程师~💬 🍑如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀 🚀如有不懂，可以随时向我提问，我会全力讲解~ 🔥如果感觉博主的文章还不错的话，希望大家关注、点赞、收藏三连支持一下博主哦~！ 🔥你们的支持是我创作的动力！ 🧸我相信现在的努力的艰辛，都是为以后的美好最好的见证！ 🧸人的心态决定姿态！ 💬欢迎讨论：如有疑问或见解，欢迎在评论区留言互动。 👍点赞、收藏与分享：如觉得这篇文章对您有帮助，请点赞、收藏并分享！ 🚀分享给更多人：欢迎分享给更多对编程感兴趣的朋友，一起学习！
1.什么是CSS
CSS（Cascading Style Sheets，层叠样式表）是用于控制网页样式和布局的语言。它可以让开发者轻松地设计网页的外观，从而提升用户体验和视觉吸引力。 如果以拍照来举例，HTML就是一张未经处理的额原相片，而CSS就是PS，可以美化HTML设计的框架。 那么CSS的具体核心作用就明晰了。
2. CSS的核心作用
- 美化网页
- 通过设置字体、颜色、边框等样式，使网页更美观。
- 例如：可以让一个按钮从普通的矩阵变成具有渐变色和圆角的精美设计。
2.控制布局
- 定义元素如何排列在页面上，如居中，网格布局，弹性布局等。
- 例如：可以轻松实现响应式布局，让网页在手机和电脑上都能完美显示。
3.分离内容与样式
- HTML 专注于内容和结构，CSS 专注于样式和外观。两者分离使代码更 理解完什么是CSS和CSS的核心作用，那么改该怎么使用CSS呢？也就是说CSS的语法是什么？
3. CSS的基本语法
选择器{
属性:值;
}CSS通过选择器选择HTML元素，并为这些元素应用样式规则。
- 选择器：指定设置样式的HTML元素。
- 属性：定义要修改的样式，如颜色、字体大小。
- 值：属性的具体设置。 了解完以上的内容，就可以开始CSS代码的编写了
4. CSS的简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
h1{
color: blue;
}
</style>
<h1>我是一个标题</h1>
</body>
</html>
可以看到我是一个标题变成了蓝色，这就是CSS的作用。可以看到，笔者在这段代码中将CSS代码写在style标签中，除此之外，CSS还有两种使用方式，也就是说CSS有三种使用方式。
4.1 CSS的3种使用方式
- 内部样式
将样式写在HTML的
<style>内，也就是前文写的那样，适用于单个页面的样式。
<style>
h1{
color: blue;
}
</style>- 行内样式
样式直接写在HTML元素的
style属性中，适合简单的样式设置。
<h1 style="color:blue;">我是一个标题</h1>- 外部样式表
将样式写在独立的
.css文件中，通过<link>标签引入，适用于多页面共享样式。
h1{
color:blue;
}在html文件中添加以下内容
<link rel="stylesheet"> href="路径">具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css02.css">
</head>
<body>
<h1>我是一个标题</h1>
</body>
</html>3种方法的优缺点
- 内部样式表 优点：可以使得样式和页面分离。 缺点：分离的不够彻底，尤其是css内容多的时候。
- 行内样式表 优点：优先级高。 缺点：不能写的太复杂，优先较高，会覆盖其他样式。
- 外部样式 优点：样式和结构彻底分离。 缺点：受到浏览器影响，修改后不一定立即生效。 读者可能会发现，如果每次都以标签名作为作为选择器。那么它的作用范围是不是太大了，在实际的操作中，往往有大量的相同标签存在，为此接下来，笔者会讲解选择器。
5. 选择器的种类
选择器的功能：选择页面中指定的标签元素。
5.1 基础选择器
基础选择器是由单个选择器构成的。 其中基础选择器又可以分为：
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
5.1.1 标签选择器
优点：快速把同一类型的标签都选择出来。 缺点：不能做到差异化选择。
<style>
p{
color: pink;
}
div{
color: white;
}
</style>
<p>关注永雏塔菲喵~<p>
<p>关注永雏塔菲喵~<p>
<p>关注永雏塔菲喵~<p>
<div>关注星瞳送溜溜梅~</div>
<div>关注星瞳送溜溜梅~</div>
<div>关注星瞳送溜溜梅~</div>5.1.2 类选择器
特点：
- 差异化表达不同的标签。
<style>
.white{
color: white;
}
</style>
<div class="white">关注星瞳送溜溜梅~</div>
<div class="white">关注星瞳送溜溜梅~</div>
<div class="white">关注星瞳送溜溜梅~</div>关于语法：
- 使用类选择器，需要在类名前加上
. - 下方的标签，需要添加类属性。
- 一个类可以被多个标签使用，一个标签也可以使用多个类（多个类名使用空格分割）
- 不要使用纯数字、中文、标签名来命名类。
5.1.3 id选择器
使用上和类选择器相同
<style>
#blue{
color: blue;
}
</style>
<div id="blue">
你好
</div>特点：
- CSS中使用
#开头来表达id选择器。 - id选择器的值和html标签中的id相同。
- id是唯一得的，不能被多个标签使用 加粗的字体是和类选择器最大的区别。 如果要比喻的话，类就是人的姓名可以重复，id就是身份证不能重复。
5.1.4 通配符选择器
使用*，选取所有的标签。
*{
color:red;
}页面的所有内容都会变为红色
了解完基础选择器后，笔者用一个表格来总结一下基础选择器
基础选择器 | 作用 | 特点 |
|---|---|---|
标签选择器 | 选择所有相同标签 | 不能做到差异 |
类选择器 | 选择所有相同类 | 可以差异化选择 |
id选择器 | 选择一个id | 同一个id在html中只能出现一次 |
通配符选择器 | 选择所有标签 | 全选，比较特殊 |
5.2 复合选择器
复合选择器也分为几类，分别为：
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
5.2.1 后代选择器
后代选择器又名包含选择器，作用是选择父元素中的某个子元素。 语法：
元素1 元素2{
样式声明;
}元素1是父集，元素2是子级。 演示：
<style>
ul li{
color: pink;
}
</style>
<ul>
<li>你好</li>
<li>谢谢</li>
<li>小笼包</li>
<li>再见</li>
</ul>其实后代选择器，不仅可以选择子代还可以选择孙代。
<style>
ol li a{
color: aqua;
}
</style>
<ol>
<li>
<a href="https://blog.csdn.net/2303_79015671?spm=1000.2115.3001.5343">主页链接</a>
</li>
</ol>除此之外，还可以和基础选择器搭配使用
<style>
.aqua li #xixi{
color: aqua;
}
</style>
<ol class="aqua">
<li>
<a id="xixi" href="https://blog.csdn.net/2303_79015671?spm=1000.2115.3001.5343">主页链接</a>
</li>
</ol>5.2.2 子选择器
后代选择的子集，只能选择子标签。 语法：
元素1>元素2{
样式声明;
}只能选亲儿子 因为子选择器拥有更加严格的限制，以下代码伪例：
<style>
ul a{
color: pink;
}
</style>
<ul>
<li>
前面忘了
</li>
<a href="https://blog.csdn.net/2303_79015671?spm=1000.2115.3001.5343">中间忘了</a>
<li>
<a href="https://blog.csdn.net/2303_79015671?spm=1000.2115.3001.5343">后面忘了</a>
</li>
</ul>上述代码使用的后代选择器，最后的两行列表都标选择了。
<style>
ul>a{
color: pink;
}
</style>
<ul>
<li>
前面忘了
</li>
<a href="https://blog.csdn.net/2303_79015671?spm=1000.2115.3001.5343">中间忘了</a>
<li>
<a href="https://blog.csdn.net/2303_79015671?spm=1000.2115.3001.5343">后面忘了</a>
</li>
</ul>使用子选择器的话，就只选择到了中间列表。 注意，子选择器也可以和基础选择器搭配
5.2.3 并集选择器
用于选择多组标签 语法:
元素1,
元素2{
样式声明;
}- 用逗号分割。
- 可以搭配基础选择器。
- 写法上建议一个元素占一行，如上。
<style>
h1,
div{
color: red;
}
</style>
<h1>漫画推荐</h1>
<div>
<span>浪客行</span>
</div>
<div>
<span>剑风传奇</span>
</div>
<div>
<span>冰海战记</span>
</div>5.2.4 伪类选择器
伪类选择器可以分为两种：
- 链接伪类选择器
- force伪类选择器
- 链接伪类选择器
a：link 选择未被访问的链接。 a：visited 选择已经被访问的链接。 a：hover 选择鼠标悬停的链接。 a：active 选择活动链接（鼠标按下了却未弹起）
<style>
a:link{
color: white;
text-decoration: none;
/*去除下划线*/
}
a:visited{
/* 显示为粉色 */
color: pink;
}
a:hover{
/* 当鼠标停在链接上方时变为绿色 */
color:green;
}
a:active{
/* 鼠标点击时变为蓝色 */
color: blue;
}
</style>
<a href="https://blog.csdn.net/2303_79015671?spm=1000.2115.3001.5343">我是一个链接哦~~~</a>注意：
- 浏览器的a标签都有默认样式，一遍实际开发需要单独定制样式。
- 实际开发主要给链接做一个样式，然后给hover做一个样式即可，link、visited、active用的不多。
- 使用伪类链接选择器时，选哟安装LVHA顺序书写，也就是
link、visited、hover,active的顺序。
- force伪类选择器 作用：选取获取焦点的input表单元素。
<style>
#haha>input:focus{
color: green;
}
</style>
<div id="haha">
<input type="text"><br/>
<input type="text">
</div>当选中文本框时，数据会变为绿色
了解完复合选择器后，笔者用一个表格来总结一下复合选择器
复合选择器 | 作用 | 注意事项 |
|---|---|---|
后代选择器 | 选择后代元素 | 可以是孙子元素 |
子选择器 | 选择子元素 | 只能选亲儿子 |
并集选择器 | 选择多组标签 | 做到代码重用 |
链接伪类选择器 | 选择不同状态的链接 | 注意顺序 |
focuse伪类选择器 | 选择被选中的元素 | 无 |
6. 总结
CSS 是前端开发中的关键技术，它通过定义样式和布局，让网页从单调的内容堆叠变为精美的用户界面。无论是颜色、字体，还是布局和动画，CSS 提供了无穷的可能性，让开发者可以充分发挥创造力。学习 CSS 不仅是掌握语法，更是理解设计的艺术。在实际开发中，通过灵活运用选择器、盒模型、响应式设计等核心概念，你可以轻松实现兼具美观与实用的网页。未来，随着 CSS 新特性的不断发展，它将继续为网页设计注入更多活力。掌握 CSS，是你走向前端开发世界的重要一步！ 此外关于CSS常用元素属性会在以后的文章中更新，如果你已经迫不及待了可以去CSS参考手册中学习你想要实现的属性。
腾讯云开发者
