首先在认识CSS3之前我们要先了解什么是css？
一、css
专业话语：CSS (Cascading Style Sheets) 是一种用来描述 HTML 文档外观的语言。它允许开发者独立于内容本身来控制网页的样式，包括字体、颜色、布局等等。CSS 提供了一种方式，让我们能够轻松地更改网站的整体设计，而不必逐个编辑 HTML 文件
为什么要学css？
往下看、这是没有任何css的标签元素写出的例子
会发现很丑 举例：
a超链接颜色下划线、 倾斜 、图片大小控制不住 还有就是列表标签的黑点等等一些
随着我们的科技发展 我们的网页 不再是像举例的这种丑简陋
这里例子：这是小米商城的网站 各种各样的样式 字体图标等等的一些布局(非常的nice)
备注:(如有侵犯此网站请告知谢谢)
从事 Web 开发的人必须学会css
学会css的好处
当你学会了css之后你可以：
1、改善用户体验
- 美观的界面：CSS 能够帮助你创建吸引人的用户界面，使得网站看起来更加专业和现代。
- 良好的导航结构：通过 CSS 控制页面布局，可以使网站易于浏览和导航
2、提高工作效率
- 重用样式：CSS 允许你在整个网站中重用样式，这大大节省了时间并保持一致性。
- 快速原型制作：利用 CSS 框架（如 Bootstrap）可以迅速搭建起网站的基本框架
3、增强网站的可访问性：
- 语义化的标记：CSS 分离了内容和样式，使得搜索引擎更容易抓取你的内容，同时也便于辅助技术（如屏幕阅读器）解析。
- 响应式设计：CSS Media Queries 可以根据用户的设备和窗口大小调整布局，确保不同设备上的良好体验
4、促进团队协作：
- 统一风格指南：CSS 可以帮助建立一套风格指南，保证团队成员遵循一致的设计标准。
- 前后端分离：CSS 使得前端工程师专注于 UI/UX，而后端工程师关注业务逻辑，分工明确
5、拓展职业发展机会：
- 市场需求大：Web 开发是一个需求旺盛的领域，掌握 CSS 可以为你打开更多的就业门路。
- 技能迁移性强：CSS 技能不仅限于 Web 开发，还可以应用于移动应用开发等领域
总之，CSS 是 Web 开发不可或缺的技术之一，无论你是想成为一名专业的前端工程师，还是仅仅为了美化个人博客，学习 CSS 都会让你受益匪浅。此外，随着新技术的不断发展，如 CSS Grid 和 Flexbox，掌握 CSS 更加重要，因为它们正在成为现代 Web 设计的标准实践
大白话提示:当你学会css之后呢你所看到的网站所有你搜索的网站你都能通过自己的双手用用html标签+css样式写出来 你可以理解为 没有css就是没有衣服 有css之后你可以穿新衣服不同的新衣服
正所谓人靠衣服马靠鞍嘛
之前的文章中有讲解html的标签感兴趣的去看看
好了说了这么多来教小白们如何去写css吧
首先
在我们的头部title标签下面/后面回车 输入 style标签
什么是style？
<style> 标签主要用来在 HTML 文档内部编写 CSS 样式,它允许你直接在 HTML 文件中定义样式规则
像这样
<!DOCTYPE html> <html> <head> <style> h1 { color: green; } </style> </head> <body> <h1>这是我的标题</h1> <p>这是正文内容。</p> </body> </html>
这样我们的<h1>标签就有颜色了噢
如何去理解？
这段 CSS 代码定义了一个样式规则，该规则会作用于 HTML 文档中的所有 <h1> 标签
解释：
h1 { ... } 表示这是一个针对 <h1> 标签的选择器。任何符合此条件的元素都将受到接下来的样式规则的影响
color: red; 设置了文本的颜色。在这里，我们将 <h1> 标签内的文本颜色设置为红色
所以，总结起来，这段 CSS 代码的作用是：将所有 <h1> 标签内的文本颜色改为红色。这意味着，只要 HTML 文档中有 <h1> 标签，不论有多少个，它们的内容都会显示为红色
以上实例是针对h1标签的 如果你想操控其他的也行只需要更改标签即可
前面是属性 : 后面是属性值 这里选中的是 width宽度100px即为像素 height为高度100px
这里温馨补充一下style
style标签的几种使用方式
我们写代码的时候肯定不会单单就选中几个标签代码量多的话会导致我们的样式很多臃肿复杂乱..等等一下哪怎么办呢？
第一种 在我们的头部使用
第二种 这种是我们的的内嵌写法在所选标签内使用
第三种 （推荐） 外链link
我们可以新建文件 .css为后缀这样我们就有了一个单独专门写样式的文件了
下一步：我们需要返回文档使用link标签导入 根据地址导入即可
外链的好处：
1、代码重用：外部 CSS 文件可以被多个 HTML 页面引用，从而避免了在每个页面中重复相同的 CSS 代码。这对于保持代码的一致性和减少冗余非常重要
2、缓存机制：浏览器会对已加载过的外部资源进行缓存。这意味着如果用户已经访问过某个页面并加载了相关的 CSS 文件，再次访问同一站点的其他页面时，浏览器可以直接从缓存中获取这些资源，加快页面加载速度
3、维护便利：由于 CSS 代码集中在一个或几个文件中，更新和维护变得更加容易。只需修改一次外部 CSS 文件，就能立即反映到所有引用该文件的页面上
4、SEO 优化：搜索引擎爬虫在索引页面时，会优先加载 HTML 内容。使用外部 CSS 文件可以让 HTML 结构更清晰，有利于 SEO
5、组织结构：外部 CSS 文件有助于更好地组织和管理样式代码，特别是当项目变得庞大时。可以通过将相关样式归类到不同的文件中，进一步细化和整理代码库
6、调试友好：在开发过程中，使用外部 CSS 文件可以更方便地进行调试和测试，因为你可以直接在 CSS 文件中修改样式，而无需每次都在 HTML 文件中查找和修改内联样式
总结:使用 <link> 标签链接外部 CSS 文件是一种最佳实践，它不仅可以提高代码质量和可维护性，还能带来性能上的优势
ok到这里大家应该能稍微知道css了吧？
二、认识CSS3
什么是css3呢？
CSS3 其实是 CSS 技术的最新版本，它引入了许多新功能和改进，旨在增强 Web 设计的能力和灵活性
其实css就是css的升级的一个版本
1、新增选择器：CSS3 引入了大量的新选择器，如属性选择器、伪类和伪元素选择器等，提供了更强大的选择能力
2、圆角和阴影：CSS3 支持无须使用图像即可生成圆角（border-radius）、盒阴影（box-shadow）和文字阴影（text-shadow），简化了设计流程
3、多列布局：CSS3 多列模块允许将内容分成多个垂直列显示，类似于报纸版面
4、渐变和透明度：CSS3 渐变（gradients）允许创建平滑的色彩过渡，而透明度（opacity）则可用于调整元素的透明程度
5、动画和转换：CSS3 引入了动画（animations）和转换（transformations），允许元素动态改变尺寸、旋转、倾斜等，增强了交互体验
6、弹性盒子模型（Flexbox）：CSS3 Flexbox 提供了一个高效的布局模式，可以灵活地分配空间给项目，即使项目的数量发生变化也能很好地适应
7、网格布局：CSS Grid 是 CSS3 的一部分，提供了一种全新的二维布局系统，可以创建复杂且响应式的网格布局
8、媒体查询：CSS3 媒体查询允许根据不同设备屏幕宽度、分辨率等因素应用不同的样式，促进了响应式设计的发展
9、字体下载：CSS3 字体下载（@font-face）规则允许设计师指定自定义字体，提高了网页排版的自由度
10、数据绑定：CSS3 数据绑定（data-* attributes）允许在 HTML 元素上存储额外的数据，方便 CSS 查询和操作
总的来说，CSS3 相较于之前的版本，在功能丰富性、易用性和性能方面都有显著提升，极大地扩展了 Web 开发者的表现力和创造力。虽然css3提供了很多新的属性但是还是有些浏览器不是很兼容的。需要做一些处理。
学好css之后你会受益匪浅的
ok今天的文档就这些希望给大家提供一些了解 加油年轻人!
温馨语言：如有需要/问题私信留言，看到即回
