CSS (Cascading Style Sheets)

CSS 是什么

层叠样式表 (Cascading Style Sheets).

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

基本语法规范

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

选择器决定针对谁修改 ( 找谁 )

声明决定修改啥 . ( 干啥 )

声明的属性是键值对 . 使用 ; 区分键值对 , 使用 : 区分键和值

<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p>

注意 :

CSS 要写到 style 标签中 ( 后面还会介绍其他写法 )

style 标签可以放到页面任意位置 . 一般放到 head 标签内 .

CSS 使用 /* */ 作为注释 . ( 使用 ctrl + / 快速切换 )

引入方式

内部样式表

写在 style 标签中 . 嵌入到 html 内部 .

理论上来说 style 放到 html 的哪里都行 . 但是一般都是放到 head 标签中 .

优点 : 这样做能够让样式和页面结构分离 .

缺点 : 分离的还不够彻底 . 尤其是 css 内容多的时候

行内样式表

通过 style 属性 , 来指定某个标签的样式 .

只适合于写简单样式 . 只针对某个标签生效 .

缺点 : 不能写太复杂的样式 .

这种写法优先级较高 , 会覆盖其他的样式 .

外部样式

实际开发中最常用的方式 .

1. 创建一个 css 文件 .

2. 使用 link 标签引入 css

<link rel="stylesheet" href="[CSS文件路径]">

创建 demo.html

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>上帝为你关上一扇门, 然后就去睡觉了</div>
</body

创建 style.css

div {
color: red;
}

注意 : 不要忘记 link 标签调用 CSS, 否则不生效

优点 : 样式和结构彻底分离了 .

缺点 : 受到浏览器缓存影响 , 修改之后 不一定 立刻生效

语法基本形式

1.选择某个或者某些元素，来应用规则

2.指定具体的规则以及对应的值

代码风格

样式格式

1) 紧凑风格

p { color: red; font-size: 30px;}

2) 展开风格 ( 推荐 )

p {
color: red;
font-size: 30px;
}

样式大小写

虽然 CSS 不区分大小写 , 我们开发时统一使用小写字母

空格规范

冒号后面带空格

选择器和 { 之间也有一个空格 .

选择器

选择器的功能

选中页面中指定的标签元素 .

要先选中元素 , 才能设置元素的属性 .

就好比 SC2, War3 这样的游戏 , 需要先选中单位 , 再指挥该单位行动 .

选择器的种类

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

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

标签选择器

eg： p{……} 文档中的所有p标签听我号令

a{……} 文档中的所有a标签听我号令

类选择器

eg：.some-class{……} 找到文档中，元素属性的class包含some-class的所有元素

id 选择器

eg： #some-value {……} 找到文档中，元素属性的id是some-value的元素听我号令

通配符选择器

eg：文档中的所有元素，听我号令

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

后代选择器

eg：#some-id p{……} 先找到#some-id，在它的所有子孙中，找到p标签

子选择器

eg： #some-id > p{……} 先找到#some-id，在它的所有孩子中，找到p标签

并集选择器

eg： p，h1{……} p和h1标签，听我号令

伪类选择器

a:link 选择未被访问过的链接

a:visited 选择已经被访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动链接 ( 鼠标按下了但是未弹起 )

常用元素属性

CSS 属性有很多 , 可以参考文档

https://www.w3school.com.cn/cssref/index.asp

不需要全都背下来 , 而是在使用中学习 .

字体属性

设置字体

body {

font-family : ' 微软雅黑 ' ;

font-family : 'Microsoft YaHei' ;

}

字体名称可以用中文, 但是不建议.
多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
如果字体名有空格, 使用引号包裹.
建议使用常见字体, 否则兼容性不好.

<style>

.font-family .one {

font-family : 'Microsoft YaHei' ;

}

.font-family .two {

font-family : ' 宋体 ' ;

}

</style>

<div class = "font-family" >

<div class = "one" >

这是微软雅黑

</div>

<div class = "two" >

这是宋体

</div>

</div>

大小

p {

font-size : 20px ;

}

不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
可以给 body 标签使用 font-size
要注意单位 px 不要忘记.
标题标签需要单独指定大小

注意: 实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮

<style>

.font-size .one {

font-size : 40px ;

}

.font-size .two {

font-size : 20px ;

}

</style>

<div class = "font-size" >

<div class = "one" >

大大大

</div>

<div class = "two" >

小小小

</div>

</div>

粗细

p {

font-weight : bold ;

font-weight : 700 ;

}

可以使用数字表示粗细.
700 == bold, 400 是不变粗, == normal
取值范围是 100 -> 900

<style>

.font-weight .one {

font-weight : 900 ;

}

.font-weight .two {

font-weight : 100 ;

}

</style>

<div class = "font-weight" >

<div class = "one" >

粗粗粗

</div>

<div class = "two" >

细细细

</div>

</div>

文字样式

/* 设置倾斜 */

font-style : italic ;

/* 取消倾斜 */

font-style : normal ;

文本属性

文本颜色

认识 RGB

我们的显示器是由很多很多的 " 像素 " 构成的 . 每个像素视为一个点 , 这个点就能反映出一个具体的颜色 .

我们使用 R (red), G (green), B (blue) 的方式表示颜色 ( 色光三原色 ). 三种颜色按照不同的比例搭配 , 就能

混合出各种五彩斑斓的效果 .

计算机中针对 R, G, B 三个分量 , 分别使用一个字节表示 (8 个比特位 , 表示的范围是 0-255, 十六进制表示

为 00-FF).

数值越大 , 表示该分量的颜色就越浓 . 255, 255, 255 就表示白色 ; 0, 0, 0 就表示黑色 .

设置文本颜色

color : red ;

color : #ff0000 ;

color : rgb ( 255 , 0 , 0 );

color 属性值的写法 :

预定义的颜色值(直接是单词)
[最常用] 十六进制形式
RGB 方式

注：十六进制形式表示颜色 , 如果两两相同 , 就可以用一个来表示 .

#ff00ff => #f0f

文本对齐

控制文字水平方向的对齐，不光能控制文本对齐 , 也能控制图片等元素居中或者靠右

text-align: [值];

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

文本装饰

text-decoration : [ 值 ];

常用取值 :

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

例如 B 站这里的导航链接, 就是使用这个属性去的掉的下划线. [可以 F12 观察]

文本缩进

控制段落的首行缩进 ( 其他行不影响 )

text-indent: [值];

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

行高

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

HTML 中展示文字涉及到这几个基准线 :

顶线
中线
基线 (相当于英语四线格的倒数第二条线)
底线

line-height: [值];

其实基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离

注意1: 行高 = 上边距 + 下边距 + 字体大小

注意2: 行高也可以取 normal 等值

注意3: 行高等与元素高度, 就可以实现文字居中对齐

背景属性

背景颜色

background-color: [指定颜色]

默认是 transparent (透明) 的. 可以通过设置颜色的方式修改.

<style>

body {

background-color : #f3f3f3 ;

}

.bgc .one {

background-color : red ;

}

.bgc .two {

background-color : #0f0 ;

}

.bgc .three {

/* 背景透明 */

background-color : transparent ;

}

</style>

<div class = "bgc" >

<div class = "one" > 红色背景 </div>

<div class = "two" > 绿色背景 </div>

<div class = "three" > 透明背景 </div>

</div>

背景图片

background-image : url ( ... );

比 image 更方便控制位置 ( 图片在盒子中的位置 )

注意 :

1. url 不要遗漏 .

2. url 可以是绝对路径 , 也可以是相对路径

3. url 上可以加引号 , 也可以不加

背景平铺

background-repeat: [平铺方式]

重要取值 :

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

默认是 repeat.

背景颜色和背景图片可以同时存在 . 背景图片在背景颜色的上方

背景位置

background-position: x y;

修改图片的位置 .

参数有三种风格 :

1. 方位名词 : (top, left, right, bottom)

2. 精确单位 : 坐标或者百分比 ( 以左上角为原点 )

3. 混合单位 : 同时包含方位名词和精确单位

注意

如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)
如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )
如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.
如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)

背景尺寸

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

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

圆角矩形

通过 border-radius 使边框带圆角效果.

基本用法

border-radius: length;

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

生成圆形

让 border-radius 的值为正方形宽度的一半即可

div {

width : 200px ;

height : 200px ;

border : 2px solid green ;

border-radius : 100px ;

/* 或者用 50% 表示宽度的一半 */

border-radius : 50% ;

}

生成圆角矩形

让 border-radius 的值为矩形高度的一半即可

div {

width : 200px ;

height : 100px ;

border : 2px solid green ;

border-radius : 50px ;

}

展开写法

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

border-radius : 2em ;

Chrome 调试工具 -- 查看 CSS 属性

打开浏览器

有两种方式可以打开 Chrome 调试工具

直接按 F12 键
鼠标右键页面 => 检查元素

标签页含义

elements 查看标签结构
console 查看控制台
source 查看源码+断点调试
network 查看前后端交互过程
application 查看浏览器提供的一些扩展功能(本地存储等)
Performance, Memory, Security, Lighthouse 暂时不使用, 先不深究

elements 标签页使用

ctrl + 滚轮进行缩放, ctrl + 0 恢复原始大小.
使用左上角箭头选中元素
右侧可以查看当前元素的属性, 包括引入的类.

右侧可以修改选中元素的 css 属性. 例如颜色, 可以点击颜色图标, 弹出颜色选择器, 修改颜色. 例如
字体大小, 可以使用方向键来微调数值.
此处的修改不会影响代码, 刷新就还原了~
如果 CSS 样式写错了, 也会在这里有提示. (黄色感叹号)

元素的显示模式

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

块级元素
行内元素

块级元素

常见的元素

h1 - h6

p

div

ul

ol

li

...

特点:

独占一行
高度, 宽度, 内外边距, 行高都可以控制.
宽度默认是父级元素宽度的 100% (和父元素一样宽)
是一个容器(盒子), 里面可以放行内和块级元素.

注意:

文字类的元素内不能使用块级元素

p 标签主要用于存放文字 , 内部不能放块级元素 , 尤其是 div

行内元素/内联元素

常见的元素 :

a

strong

b

em

i

del

s

ins

u

span

...

特点 :

不独占一行, 一行可以显示多个
设置高度, 宽度, 行高无效
左右外边距有效(上下无效). 内边距有效.
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素, 不能放块级元素

注意 :

a 标签中不能再放 a 标签 ( 虽然 chrome 不报错 , 但是最好不要这么做 ).

a 标签里可以放块级元素 , 但是更建议先把 a 转换成块级元素 .

行内元素和块级元素的区别

块级元素独占一行, 行内元素不独占一行
块级元素可以设置宽高, 行内元素不能设置宽高.
块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置.

改变显示模式

使用 display 属性可以修改元素的显示模式 .

可以把 div 等变成行内元素 , 也可以把 a , span 等变成块级元素 .

display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素

盒模型

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

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

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

边框

基础属性

粗细 : border-width

样式 : border-style, 默认没边框 . solid 实线边框 dashed 虚线边框 dotted 点线边框

颜色 : border-color

<div> test </div>

div {

width : 500px ;

height : 250px ;

border-width : 10px ;

border-style : solid ;

border-color : green ;

}

支持简写, 没有顺序要求

border: 1px solid red;

可以改四个方向的任意边框.

border-top/bottom/left/right

边框会撑大盒子

可以看到 , width, height 是 500*250, 而最终整个盒子大小是 520 * 270. 边框 10 个像素相当于扩大了大小

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

内边距

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

基础写法

默认内容是顶着边框来放置的 . 用 padding 来控制这个距离

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

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

<div>

test

</div>

div {

height : 200px ;

width : 300px ;

}

加上 padding 之后

div {

height : 200px ;

width : 300px ;

padding-top : 5px ;

padding-left : 10px ;

}

此时可以看到带有了一个绿色的内边距 .

注意:

整个盒子的大小从原来的 300 * 200 => 310 * 205. 说明内边距也会影响到盒子大小(撑大盒子).
使用 box-sizing: border-box 属性也可以使内边距不再撑大盒子. (和上面 border 类似)

复合写法

可以把多个方向的 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-top
margin-bottom
margin-left
margin-right

复合写法

规则同 padding

margin: 10px; // 四个方向都设置

margin: 10px 20px; // 上下为 10, 左右 20

margin: 10px 20px 30px; // 上 10, 左右 20, 下 30

margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

块级元素水平居中

前提 :

指定宽度(如果不指定宽度, 默认和父元素一致)
把水平 margin 设为 auto

margin-left : auto ; margin-right : auto ;

margin : auto ;

margin : 0 auto ;

去除浏览器默认样式

浏览器会给元素加上一些默认的样式 , 尤其是内外边距 . 不同浏览器的默认样式存在差别 .

为了保证代码在不同的浏览器上都能按照统一的样式显示 , 往往我们会去除浏览器默认样式 .

使用通配符选择器即可完成这件事情 .

* {

marign : 0 ;

padding : 0 ;

}

弹性布局

创建一个 div, 内部包含三个 span

<div>

<span> 1 </span>

<span> 2 </span>

<span> 3 </span>

</div>

<style>

div {

width : 100% ;

height : 150px ;

background-color : red ;

}

div > span {

background-color : green ;

width : 100px ;

}

</style>

此时看到的效果为

当我们给 div 加上 display:flex 之后, 效果为

此时看到 , span 有了高度 , 不再是 " 行内元素了 "

再给 div 加上 justify - content: space - around ; 此时效果为

此时可以看到这些 span 已经能够水平隔开了 .

把 justify - content: space - around ; 改为 justify - content: flex - end ; 可以看到此时三个元素在

右侧显示了

flex 布局基本概念

flex 是 flexible box 的缩写 . 意思为 " 弹性盒子 ".

任何一个 html 元素 , 都可以指定为 display:flex 完成弹性布局 .

flex 布局的本质是给父盒子添加 display:flex 属性 , 来控制子盒子的位置和排列方式 .

基础概念:

被设置为 display:flex 属性的元素, 称为 flex container
它的所有子元素立刻称为了该容器的成员, 称为 flex item
flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

常用属性

justify-content

设置主轴上的子元素排列方式 .

使用之前一定要确定好主轴是哪个方向

属性取值

未指定 justify-content 时 , 默认按照从左到右的方向布局

设置 justify-content: flex-end , 此时元素都排列到右侧了.

设置 jutify-content: center , 此时元素居中排列

设置 justify - content: space - around ;

平分了剩余空间

设置 justify - content: space - between ;

先两边元素贴近边缘 , 再平分剩余空间 .

align-items

设置侧轴上的元素排列方式

在上面的代码中 , 我们是让元素按照主轴的方向排列 , 同理我们也可以指定元素按照侧轴方向排列

取值和 justify-content 差不多

eg：可以使用 align-items 实现垂直居中

<div>

<span> 1 </span>

<span> 2 </span>

<span> 3 </span>

</div>

<style>

div {

width : 500px ;

height : 500px ;

background-color : green ;

display : flex ;

justify-content : space-around ;

align-items : center ;

}

div span {

width : 150px ;

height : 100px ;

background-color : red ;

}

</style>

注意 :

align-items 只能针对单行元素来实现 . 如果有多行元素 , 就需要使用 item-contents