本文介绍了CSS的起源，以及它如何解决HTML页面样式混乱的问题。CSS是用于修饰网页样式的层叠样式表，包括内联样式、内部样式和外部样式的使用方法。内联样式直接在HTML标签中定义，简洁但不利于维护；内部样式在<head>标签中，复用性高但局限于当前页面；外部样式通过link标签引入，适用于多个页面共享。文章还强调了使用CSS的优点，如样式复用和便于维护，并提到了控制台调试代码的重要性。
一、css 的概述
1.早期的 web 网页
在 20 世纪 90 年代的，html 迅猛发展，不同的浏览器根据自身的结构支持不同的样式。到现在位置，不同的浏览器 html 标签在不同的浏览器中展现的基本样式也不尽相同。
随着功能增加，html 就变得越来越混乱。只依靠标签的堆叠，东西越多页面展示越乱。这时候用于装饰网页样式的 css 就诞生了。
1997 年，w3c 颁布了 css1.0 版本，随即微软和网景公司的浏览器均能支持 CSS1.0。
2.css 的概念
层叠样式表 (Cascading Style Sheets，三个单词字头缩写为 CSS），他是专门用于修饰页面样式的。
比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画等等。
- html:超文本标记语言，网页的结构搭建，页面布局
- css:层叠样式表,网页的修饰，样式的渲染
- javascript:解释型的编程语言，用于与页面的交互
3.CSS 与 HTML 属性使用原则
- html 文件书写样式的缺点：
- html 代码变得杂乱
- 样式只用于修饰该标签，复用性很差
- 样式需要更改的时候不利于维护
- 使用 css 书写样式的优点（w3c 建议我们尽量使用 css 的方式取代 html 属性）
- 样式复用性高
- 方便维护
- 使用 ui 框架更加便捷美观
4.css 的语法规范
(1)内联样式
内联样式也可以叫行内样式，就是在 html 文件中的 html 标签中，使用 style 属性的样式值来完成元素的样式渲染。
| <span style="样式声明"></span> |
- 样式声明：
- 由样式属性和值组成；
- 属性和值之间用冒号连接；
- 多个样式声明用分号分隔。
- 特点：
- 写在标签里面，缺点是影响阅读，看着乱
- 不利于修改，复用性差。
- 优点:
- 指定当前标签，更加直接
| <h1>没有加任何样式，只有标签自己的样式</h1> <h1 style="color: red;">加入字体颜色样式</h1> <h1 style="color: red;font-size: 40px;">加入字体颜色和字体大小样式</h1> <h1 style="background-color: blue;font-size: 40px;"> 加入背景颜色和字体大小样式 </h1> |
(2)内部样式
在网页的头部`<head>`标签中增加一对`<style></style>`标签，在`<style>`标签记中定义该网页的所有样式。
| <head> <meta charset="UTF-8" /> <title>Document</title> <style> 选择器 {样式列表} </style> </head> |
- 样式规则：
- 由选择器和样式声明的列表组成
- 就是把很多声明好的样式匹配给页面中的元素
- 特点：
- 需要选择器查找到元素,嵌入到 html 文件中，会影响 html 文件的大小
- 只能在当前页面使用
- 优先级低于内联样式
- 多用于测试和学习，不建议用在项目中
- 易错点（关于`<style></style>`标签的位置，会有几种情况出现）
- 写在 head 标签的哪个位置？应该在 body 标签中
- `<style></style>`标签放错位置
- 直接开始写样式，根本不管在哪个标签里，想写哪就写哪
- 专注于写样式，连结构标签都写在 style 标签中
(3)外部样式
外部样式的书写方法
| <head> <link rel="stylesheet" href="wai.css" /> </head> |
- 单独创建 css 文件，在 html 的 head 标签中 link 标签引入 css 文件。
- href 叫做超文本引用，它的属性值是需要引用 css 文件的路径。
- rel 属性指引入文件于当前 html 的关系，必写属性。
- 样式规则：与内部样式相同，由选择器和样式声明的列表组成，把很多声明好的样式匹配给页面中的元素
- 特点：
- 所有页面都可以使用
- 项目中最重要的样式使用方式
- 一般情况下级别低于内部样式，但如果外部样式在内部样式下方引用，则优先级可能高于内部样式
5.控制台调试代码
- 打开控制台的方法（部分 windows 的打开方式是 f12 或者鼠标右键-检查）
- 查看百度的控制台
- 通过控制台拿到很多素材
- 控制台的 elements 展示的就是 html 标签及嵌套关系
- 找到元素的方式
- 查看嵌套方式
- 看看样式，暂时更改样式
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
