05.CSS前言

CSS前言

1.CSS产生背景

• 从 HTML 被发明开始，样式就以各种形式存在，最初的 HTML 只包含很少的显示属性
• 随着 HTML 的成长，为了满足页面设计者的要求，HTML 添加了很多显示功能，例如文本格式化标签
• 但是随着这些功能的增加，HTML 变的越来越杂乱，而且 HTML 页面也越来越臃肿

2.CSS介绍

CSS 的全称为：层叠样式表 ( Cascading Style Sheets )

CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等

3.CSS发展过程

4.CSS的编写位置

总览

1. 行内样式
2. 内部样式
3. 外部样式

行内样式

介绍

写在标签的 style 属性中，（又称：内联样式）

语法

<h1 style="color:red;font-size:60px;">欢迎来到尚硅谷学习</h1>

注意

• style 属性的值不能随便写，写要符合 CSS 语法规范，是 k:v; 的形式
• 行内样式表，只能控制当前标签的样式，对其他标签无效

存在的问题

书写繁琐、样式不能复用、并且没有体现出：结构与样式分离 的思想，不推荐大量使用，只有对当前元素添加简单样式时，才偶尔使用

内部样式

介绍

写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在

语法

<style>
    h1 {
        color: red;
        font-size: 40px;
    }
</style>

注意点

存在的问题

• 并没有实现：结构与样式完全分离
• 多个 HTML 页面无法复用样式

外部样式

介绍

写在单独的 .css 文件中，随后在 HTML 文件中引入使用

语法

<link rel="stylesheet" href="./xxx.css">

注意点

• 标签要写在 标签中

总结

CSS编写位置的优先级

5.CSS语法规范

组成

CSS 语法规范由两部分构成：

1. 选择器：找到要添加样式的元素
2. 声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为： 属性名: 属性值

图示

注意

1. 最后一个声明后的分号理论上能省略，但最好还是写上
2. 选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好还是写上

注释的写法

/* 给h1元素添加样式 */

6.CSS代码风格

总览

1. 展开风格：开发时推荐，便于维护和调试
2. 紧凑风格：项目上线时推荐，可减小文件体积

展开风格

h1 {
    color: red;
    font-size: 40px;
}

紧凑风格

h1{color:red;font-size:40px;}

备注

项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文
件体积，节约网络流量，同时也能让用户打开网页时速度更快

比如 webpack 这类的工具

7.长度单位

总览

1. px：像素
2. em：相对元素 font-size 的倍数
3. rem：相对根字体大小，html标签就是根
4. %：相对父元素计算
5. 注意：CSS 中设置长度，必须加单位，否则样式无效

像素

介绍

像素是 CSS 的长度单位，也就是 px，当然不只有 px

我们的电脑屏幕是，是由一个一个“小点”组成的，每个“小点”，就是一个像素（px）

规律

像素点越小，呈现的内容就越清晰、越细腻

8.元素的显示模式

块元素

• 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的
• 默认宽度：撑满父元素
• 默认高度：由内容撑开
• 可以通过 CSS 设置宽高

行内元素

• 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列
• 默认宽度：由内容撑开
• 默认高度：由内容撑开
• 无法通过 CSS 设置宽高

行内块元素

• 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列
• 默认宽度：撑满父元素
• 默认高度：由内容撑开
• 可以通过 CSS 设置宽高

注意

元素早期只分为：行内元素、块级元素，区分条件也只有一条：“是否独占一行”，如果按照这种
分类方式，行内块元素应该算作行内元素

常见的块元素

常见的行内元素

常见的行内块元素

修改元素的显示模式

通过 CSS 中的 display 属性可以修改元素的默认显示模式，常用值如下：

9.CSS三大特性

层叠性

介绍

如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）

什么是样式冲突

元素的同一个样式名，被设置了不同的值，这就是冲突

继承性

介绍

元素会自动拥有其父元素、或其祖先元素上所设置的某些样式

能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的

规则

优先继承离得近的

注意

不是所有属性都能继承，具体参考 MDN 网站

CSS优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式