一、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 标签及嵌套关系
- 找到元素的方式
- 查看嵌套方式
- 看看样式,暂时更改样式