CSS详解

语法规范

引入方式

选择器

字体

文本

背景

圆角矩形

元素显示模式

盒模型

chrome调试工具

弹性布局

CSS

层叠样式表(Cascading Style Sheets)

CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离

html 决定页面结构
css控制页面的展示效果

语法规范

选择器+{一条/N条声明}

选择器决定针对谁修改(找谁)
声明决定修改啥.(干啥)
声明的属性是键值对.使用;区分键值对,使用:区分键和值

只使用 html 时，创建一个 hello world：

原生页面效果为：

使用 CSS语句修饰后(一般将 style 放在 head 标签中)：

效果为：

上述 CSS 的代码中，p 就是选择器，color和font-size就是声明

引入方式

内部样式表

将css嵌套到html页面中(通过style标签嵌套)

优点: 这样做能够让样式和页面结构分离
缺点: 分离的还不够彻底，尤其是 css 内容多的时候

所以内部样式表在实际开发中不常见

行内样式表

上述就是行内样式表，此时你好的效果就变为：

行内样式表优先级比内部样式表优先级高，如果发生冲突，以行内样式表为准，例如：

此时 hello world 的效果为：

外部引入

外部引入是实际开发中最常用的方式，能够将 css 和 html 完全的隔离，也就是将样式和页面结构分离

创建一个 css 文件
使用 link 标签引入 css

创建一个 CSS 文件，内容如下：

html 文件中引入 CSS：

此时前端页面就会变为：

选择器

下面所说的内容只是 CSS2 标准中支持的选择器，在 CSS3 中还做出了一些补充

1. 基础选择器: 单个选择器构成的

标签选择器
类选择器
id 选择器
通配符选择器

2. 复合选择器: 把多种基础选择器综合运用起来

后代选择器
子选择器
并集选择器
伪类选择器

复合选择器就是将之前学习的基础选择器进行组合

标签选择器

标签选择器非常简单，我们上述所举的例子都是使用的标签选择器

下面的 p 就使用的是标签选择器

类选择器

特点:

差异化表示不同的标签
可以让多个标签的都使用同一个标签

HTML 中写下面的代码

想要做到吃饭、睡觉、玩游戏这三个p标签的颜色不一样，首先给这三个p标签分别起一个类名，并关联 css 文件：

在 css 文件中就可以指定同一个标签不同类名的颜色了：

如果玩游戏的类名是两个：play 和 game：

此时在 css 文件中分别对 play 和 game 都设置了样式：

此时 play 和 game 设置的样式会叠加：

id选择器

id选择器和类选择器类似

CSS 中使用 # 开头表示 id 选择器
id 选择器的值和 html 中某个元素的 id 值相同
html 的元素 id 不必带 #
id 是唯一的，不能被多个标签使用 (是和类选择器最大的区别)

给前端开发和后端开发都给一个Id值，并链接上 css 文件：

在 css 文件中，使用 # 开头，后面是选择的 id：

效果为：

通配符选择器

通配符选择器用来针对一个页面中的所有元素设置样式

在实际应用开发中，通配符选择器主要是用来对浏览器默认的样式进行消除，主要用来消除边距

原始界面是：

使用通配符选择器：

此时效果为：

后代选择器

后代选择器又叫包含选择器，选择某个父元素中的某个子元素

元素1 元素2{样式声明}

元素1 和元素2 要使用空格分割
元素1 是父级，元素2 是子级，只选元素2，不影响元素1

有三个无序列表和三个有序列表：

想让下面的有序列表变成红色

首先肯定不能使用内部样式表，因为这样会将有序列表和无序列表都改为红色：

可以将下面的有序列表加上类名，再使用类选择器改为红色，这个可以做到：

但是这种代码如果非常多，使用类选择器就不是一个复合需求的选择了

所以这里引入后代选择器，指明父元素和子元素即可：

或是给有序列表起一个类名，使用类名访问该有序列表的元素也可以：

伪类选择器

伪类选择器是用来定义元素状态的

例如在某一个页面上，原本一个图标是白色，鼠标放上去就变为红色了，这样的效果就可以通过伪类选择器来实现

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未起)

不使用伪类选择器时，a 标签是默认蓝色的：

效果为：

下面我们实现这个需求：

默认展示黑色
当鼠标悬停到上面的时候，此时展示红色
当鼠标按下去但是鼠标没有弹起来此时展示绿色

实现如下：

伪类选择器不仅仅可以用于 a 标签，也可以用于普通按钮

字体

设置字体

font-family

设置字体时可以使用中文，也可以使用英文，推荐英文

下面是示例：

设置完后的效果为：

设置前的效果为：

字体大小

font-size

在 style 中增加代码：

效果为：

字体颜色

color

有三种方式设置：

color：red;
color：#ff0000;
color：rgb(255, 0, 0);

第一种比较常见，下面详细说明后两种设置方式

第二种：通过十六进制，把三原色(红色、绿色、蓝色)参与像素点进行表示，这个数字越大，颜色越深
六个十六进制位，每两位表示一种三原色

第三种：其实和第二种是一样的，十进制的255用十六进制表示是 ff

示例如下：

效果为：

字体粗细

font-weight

属性值：

normal：默认值，定义标准的字符
bold：定义粗体字符.
bolder：定义更粗的字符.
lighter：定义更细的字符
100 - 900：定义由粗剑细的字符，400 等同于 normal，而 700等同于bold

不设置字体粗细时的效果为：

设置为 lighter 更细的字体：

效果为：

下面设置为 bolder 更粗的字体：

效果为：

字体样式

font-style

属性值：

normal：默认值，浏览器显示一个标准的字体样式
italic：浏览器会显示一个斜体的字体样式
oblique：浏览器会显示一个倾斜的字体样式

设置为 italic 斜体的字体样式：

效果为：

文本

文本对齐

text-align

属性值：

center: 居中对齐
left: 左对齐
right: 右对齐

下面示例演示：

效果为：

文本缩进

text-indent

单位可以使用 px 或者 em
使用 em 作为单位更好，1 个 em 就是当前元素的文字大小
缩进可以是负的，表示往左缩进(会导致文字就冒出去了)

文本可以输入 lorem，用于生成一长串的文字：

效果为：

文本装饰

text-decoration

常用取值：

underline 下划线.[常用]
none 啥都没有, 可以给 a标签去掉下划线
overline 上划线.[不常用]
line-through 删除线[不常用]

下面演示上划线、中划线、下划线：

效果为：

这里的文本装饰，一般用于帮助 a 标签去掉下划线：

想要去掉 a 标签的下划线，设置为 none 即可：

效果为：

行高

line-height

行高指的是上下文本行之间的基线距离

对文本设置行高 20px：

效果为：

如果设置为 200px，就会变为：

背景

背景颜色

background-color

给整个 body 加上背景色：

效果为：

背景图片

background-image: url(...)

代码改为：

此时我们插入的 URL 背景图就是给 div 加上了，并不是给整个背景加上的：

背景平铺

background-repeat: [平铺方式]

平铺方式：

repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺

换一个小点的图片，设置为不平铺：

效果为：

设置为 repeat-x: 水平平铺，效果为：

设置为 repeat-y: 垂直平铺，效果为：

背景位置

background-position: x y;

除了可以按照上面的方式设置，还可以：

方位名词: (top, left, right, bottom)
精确单位: 坐标或者百分比(以左上角为原点)
混合单位: 同时包含方位名词和精确单位

使用方位名词：

效果为：

使用混合单位：

此时水平方向有一定的像素举例，垂直方向居中：

背景尺寸

background-size: length | percentage | cover | contain;

上述四个属性的解释：

可以填具体的数值: 如 40px 60px 表示宽度为 40px，高度为 60px
也可以填百分比: 按照父元素的尺寸设置
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

设置宽度为 700px，高度为 300px：

效果为：

cover的效果：

contain的效果：

圆角矩形

border-radius: length;

length 是内切圆的半径，数值越大，弧线越强烈

首先设置一个基础的矩形：

效果为：

下面加上 border-radius 属性：

效果为：

生成圆形

设置宽度和高度相等的正方形，并将 border-radius 设置为宽度和高度的一半或设置为 50%：
下面两种效果是一样的

此时正方形就会变为圆形：

展开写法

border-radius 是一个复合写法，实际上可以针对四个角分别设置

border-radius:2em;
等价于
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

border-radius:10px 20px 30px 40px;
等价于(从左上到左下按照顺时针排列)
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;

下面使用展开写法设置四个角的弧度：

效果为：

元素显示模式

在 CSS 中，HTML 的标签的显示模式有很多，此处只重点介绍两个

块级元素
行内元素

在实际应用开发中，通常情况下，是把行内元素转换为块级元素，也就是把不能单独占据一行的元素，转换成能够单独占据一行的元素

常见的块级元素：

h1 - h6
div
ul
ol

常见的行内元素：

a
span

下面创建两个 a 标签：

这两个 a 标签都没有独自占据一行：

通过下面的代码，就可以让这两个 a 标签独自占据一行：

效果为：

盒模型

每一个 HTML 元素就相当于是一个矩形的 "盒子

这个盒子由这几个部分构成：

边框 border
内容 content
内边距 padding
外边距 margin

边框 border

基础属性

粗细: border-width
样式: border-style,默认没边框. solid 实线边框 dashed 虛线边框 dotted 点线边框
颜色: border-color

效果为：

在浏览器中通过 F12 观察，发现变为了 220×120，而不是我们设置的 200×100：

出现上述情况的原因就是，边框把我们的盒子撑大了

通过 box-sizing 属性可以修改浏览器的行为，使边框不再撑大盒子

* 为通配符选择器

* {box-sizing: border-box;
}

加上 box-sizing 属性：

此时就与我们设置的一样大了：

内边距 padding

padding 设置内容和边框之间的距离

默认内容是顶着边框来放置的，用 padding 来控制这个距离，可以给四个方向都加上边距

padding-top
padding-bottom
padding-left
padding-right

创建一个宽度为 200px，高度为 100px 的 div：

此时这个文字是顶着 div 展示的：

我们期望，能够将上下左右都做一部分留白：

效果如下，绿色部分即为留白：

padding复合写法

可以把多个方向的 padding 合并到一起 [四种情况都很常见]

padding:5px; 表示四个方向都是 5px
padding:5px 10px; 表示上下内边距 5px，左右内边距为 10px
padding:5px 10px 20px; 表示上边距5px，左右内边距为10px，下内边距为 20px
padding:5px 10px 20px 30px; 表示上5px，右10px，下20px，左30px(顺时针)

所以也就可以简化为：

外边距 margin

外边距是控制盒子和盒子之间的距离的

可以给四个方向都加上边距

margin-top
margin-bottom
emargin-left
margin-right

先创建3个 div，在 style 标签中设置：

此时三个 div 混在一起了，原因就是外边距没有设置的话默认就是0：

所以下面通过 margin 加上外边距：

此时三个 div 就分隔开了：

同样的，margin 也是有复合写法的，和 padding 是一样的，这里就不一一列举了

块级元素水平居中

默认设置的是在左侧的，如果想让块级元素水平居中，只需要设置：

注意：只是块级元素水平居中，文字并没有水平居中

如果想让文字水平居中，需要加上下面的代码：

chrome调试工具

打开网页，点击 F12 即可打开开发者工具

Elements：是当前页面的 HTML 文件
Console：通常使用 Console 调试 JavaScript 代码，如果 JavaScript 中打印一些日志，就会显示在这里面
Network：是前后端接口交互

弹性布局

弹性布局是前端为了实现页面的一些布局效果，所采用的技术手段，是需要加到子标签的父级元素上

在 div 中创建3个 span，并分别给 div 和 span 设置高度、宽度和颜色：

此时的效果为：

但是通过 F12 调试工具发现，这个 span 和我们设置的高度、宽度不一样：

原因是：span是行内元素，所以它的高度、宽度会根据元素的内容进行改变，如果想让 span 变为我们上面设置的高度、宽度，我们只需要给 span 直接的父元素 div 加上：

display:flex

此时，span就不再是行内元素了

此时每一个标签的大小，都变为我们所设置的大小了：

常用属性

justify-content：设置主轴上的子元素排列方式
justify-content：start，居左展示
justify-content：center，居中展示
justify-content：end，居右展示
justify-content：space-between，均匀排布
align-items：设置侧轴上的元素排列方式

将 justify-content 设置为 center：