为网页添加样式

术语解释

‘’‘css

h1{

color:red;

background-color:lightblue;

text-align: center;

}

‘’’

CSS规则 = 选择器 + 声明块

选择器

选择器：选中元素

ID选择器：选中的是对应ID值的元素元素选择器类选择器

声明块

出现在大括号中

声明块中包含很多声明（属性）

CSS书写位置

内部样式表

书写在style样式中内联样式表，元素样式表

直接书写在元素的style属性中外部样式表[推荐]

将样式书写到独立的CSS文件中

1). 外部样式可以解决多页面样式重复的问题

2). 有利于浏览器缓存，从而提高页面响应速度

3). 有利于代码分离（HTTM和CSS），更容易阅读和维护

常用样式声明

color

元素内部的文字颜色

预设值：定义好的单词

三原色，色值：光学三原色(红，绿，蓝),每个颜色可以使用0-255之间的数字来表达，色值。

‘’’

rgb表示法

rgb(0,255,0)

hex(16进制表示法)：

#红蓝绿

‘’’

宝蓝色：#008c8c

淘宝红：#ff4400,简写#f40

黑色：#ffffff,简写#fff

白色：#000000,简写#000

红色：#f00

绿色：#0f0

蓝色：#00f

紫色：#f0f

青色：#0ff

黄色：#ff0

灰色：#ccc

background-color

元素背景颜色

font-size

元素内部文字的尺寸大小

1). px : 像素，简单的理解为文字的高度占多少个像素

2). em ：相对单位,相对于父元素的字体大小

每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html）,则使用基准字号。

user agent,UA,用户代理（浏览器）

font-weight

文字粗细程度，可以取值数字，可以取值为预设值

strong默认加粗

font-family

文字类型

必须用户计算机中存在的字体才会有效

使用多个字体，以匹配不同环境

sans-serif,非衬线字体

font-style

字体样式，通常用它设置斜体

i元素、em元素,默认样式，是倾斜字体；实际使用中，通常用它表示一个图标（icon）

text-decoration

文本修饰，给文本加线

a元素 可以利用这个样式去掉下划线

del元素：错误的内容

s元素: 过期的内容

text-indent

表示首行文本缩进

line-height

每行文本的高度，该值越大，每行文本的距离越大。

设置行高为容器的高度，可以让单行文本垂直居中

行高可以设置为纯数字，表示相对于当前元素的字体大小

width

宽度

height

高度

letter-spacing

文字间隙

text-align

元素内部文字的水平排列方式

选择器

选择器：帮助你精准的选中想要的元素

简单选择器

ID选择器

元素选择器

类选择器

通配符选择器

*，选中所有元素

属性选择器

根据属性名和属性值选中元素

伪类选择器

选中某些元素的某种状态

hover：鼠标悬停状态

active：激活状态，鼠标按下状态

link：超链接未访问时的状态

visited：超链接访问过后的状态

爱恨法则：love hate

伪元素选择器

before::

after::

选择器的组合

并且后代元素———— 空格子元素———— >相邻元素———— +后面出现的所有兄弟元素———— ~

选择器的并列

多个选择器，用逗号分隔

(语法糖)

层叠（权重计算）

声明冲突：同一个样式，多次应用到同一个元素

层叠：解决声明冲突的过程，浏览器自动处理

1. 比较重要性

重要性从高到低：

作者样式表：开发者书写的样式

作者样式中的！import样式作者样式表中的普通样式浏览器中的默认样式

2. 比较特殊性

看选择器

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个4位数（x x x x）(256进制)

千位：如果是内联样式，记1，否则记0百位：等于将选择器中所有id选择器的数量十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量个位：等于选择器中所有元素选择器、伪元素选择器的数量

3. 比较源次序

代码中书写靠后的胜出

应用

重置样式表

书写一些作者样式，覆盖浏览器的默认样式

重置样式表 -> 浏览器的默认样式

常见的重置样式表：normalize.css、reset.css、meyer.css

爱恨法则

link > visited > hover > active

继承

子元素继承父元素的某些CSS属性

通常，跟文字内容相关的属性都能被继承

属性值的计算过程

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件：该元素的所有CSS属性必须有值

一个元素，从所有属性都没有值，到所有属性都有值，这个计算过程，叫做属性值计算过程

确定声明值：参考样式表中没有冲突的声明，作为CSS属性值层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值继承：对仍然没有值的属性，若可以继承，则继承父元素的值使用默认值

特殊的两个CSS取值： inherit：手动（强制）继承，将父元素的值取出应用到该元素initial：初始值，将该属性设置为默认值

盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

盒子类型：

行盒，display等于inline的元素块盒，display等于block的元素

行盒在页面中不换行，块盒独占一行

display默认值为inline

浏览器默认样式表设置的块盒：容器元素、h1~h6、p

常见的行盒：span、a、img、video、audio

盒子的组成部分

无论是行盒还是块盒，都由下面几个部分组成，从内到外分别是：

内容 content

width、height,设置的盒子内容的宽高

内容部分通常叫做整个盒子的内容盒 content-box

填充 padding

盒子边框到盒子内容的距离

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

padding：简写

padding: 顺时针 上、右、下、左

填充区+内容区 =填充盒 padding-box

边框 border

边框 = 边框样式 + 边框宽度 + 边框颜色

边框样式：border-style

边框宽度：border-width

边框颜色：border-color

边框+填充区+内容区 =边框盒子 border-box

外边距 margin

边框到其他盒子的距离

margin-top、margin-right、margin-bottom、margin-left

速写属性margin:上、右、下、左

盒模型应用

改变宽高范围

默认情况下，width 和 height 设置的是内容盒宽高。

页面重构师：将psd文件（设计稿）制作为静态页面

衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒

精确计算CSS3: box-sizing

改变背景覆盖范围

默认情况下，背景覆盖边框盒

可以通过background-clip进行修改

溢出处理

overflow,控制内容溢出边框盒后的处理方式

断词规则

word-break,会影响文字在什么位置被截断换行

normal：普通。CJK(中日韩)字符（文字位置截断），非CJK字符（单词位置截断）

break-all：截断所有。所有字符在文字位置截断

keep-all：保持所有。所有字符在单词位置截断

空白处理(单行文本)

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

行盒的盒模型

常见的行盒：包含具体内容的元素

span、strong、em、i、img、video、audio

显著特点

盒子沿着内容延伸

行盒不能设置宽高

调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。

内边距（填充区）

水平方向有效，垂直方向不会实际占据空间。

边框

水平方向有效，垂直方向不会实际占据空间。

外边距

水平方向有效，垂直方向不会实际占据空间。

行块盒

display: inline-block 的盒子

不独占一行盒模型中所有尺寸都有效

空白折叠

空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间

可替换元素 和 非可替换元素

大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素

少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素

可替换元素：img、video、audio

绝大部分可替换元素均为行盒

可替换元素类似于行块盒，盒模型中所有尺寸都有效。

常规流

盒模型：规定单个盒子的规则

视觉格式化模型（布局规则）：页面中的多个盒子排列规则

视觉化格式化模型，大体上将页面中盒子排列分为三种方式：

常规流浮动定位

常规流布局

也被称为常规流、文档流、普通文档流、常规文档流

所有元素，默认情况下，都属于常规流布局

总体规则：块盒独占一行，行盒水平依次排列

包含块（containing block）: 每个盒子都由它的包含块，包含块决定了盒子的排列区域。

绝大部分情况下：盒子的包含块，为其父元素的内容盒

块盒

每个块盒的总宽度，必须刚好等于包含块的宽度

宽度的默认值是auto

magin的取值也可以是auto,默认值是0

auto: 将剩余空间吸收掉

width吸收能力强于margin

若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收

在常规流中 ，块盒在其包含块中居中，可以定宽、然后左右margin设置为auto。

每个块盒垂直方向上的auto值

height: auto，适应内容的高度

margin：auto，表示0

百分比取值

padding、宽高、margin可以取值为百分比

以上所有百分比相对于包含块的宽度

高度的百分比：

1）. 包含块的高度是否取决于子元素的高度，设置百分比无效

2）. 包含块的高度不取决于子元素的高度，百分比相对于父元素高度

上下外边距的合并

两个常规流块盒，上下外边距相邻，会进行合并

两个外边距取最大值。

浮动

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

常规流浮动定位

应用场景

文字环绕横向排列

浮动的基本特点

修改float属性值为：

left：左浮动，元素靠上靠左right：右浮动，元素靠上靠右

默认值为none

当一个元素浮动后，元素必定为块盒(更改display属性为block)浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

宽度为auto时，适应内容宽度高度为auto时，与常规流一致，适应内容的高度margin为auto时，为0边框、内边距、百分比设置与常规流一样

盒子排列

左浮动的盒子靠上靠左排列右浮动的盒子靠上靠右排列浮动盒子在包含块中排列时，会避开常规流块盒常规流块盒在排列时，无视浮动盒子行盒在排列时，会避开浮动盒子外边距合并不会发生

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字,该行盒叫做匿名行盒。

高度坍塌

高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子

解决: 清除浮动，涉及css属性，clear

默认值：noneleft: 清除左浮动，该元素必须出现在前面所有左浮动盒子的下方right: 清除右浮动，该元素必须出现在前面所有右浮动盒子的下方both：清除左右浮动，该元素必须出现在所有浮动盒子的下方

在最前面清除浮动，定义在后面：

.clearfix::after{

content: “”;

display: block;

clear: both;

}

定位

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

常规流浮动：float定位：position

涉及的css属性：position

position

默认值：static,静态定位（不定位）relative：相对定位absolute：绝对定位fixed：固定定位

一个元素，只要position的取值不是static，认为该元素是一个定位元素。

定位元素会脱离文档流（相对定位除外）

一个脱离了文档流的元素：

文档流中的元素摆放时，会忽略脱离了文档流的元素文档流中的元素计算自动高度时，会忽略脱离了文档流的元素

相对定位

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移

可以通过四个css属性对设置其位置：

leftrighttopbottom

盒子的偏移不会对其他盒子造成任何影响

绝对定位

宽高为auto，适应内容包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块.若找不到，则它的包含块为整个网页（初始化包容块）。

固定定位

其他情况跟绝对定位完全一样

包含块不同：固定为视口（浏览器的可视窗口）

定位下的居中

某个方向居中：

定宽（高）将左右（上下）距离设置为0将左右（上下）margin设置为auto

绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间

多个定位元素重叠时

堆叠上下文 （奥运五环）

设置z-index,通常情况下，该值越大，越靠近用户

只有定位元素设置z-index有效

z-index可以是负数，如果是负数，则遇到常规流、浮动元素，会被其覆盖

补充

绝对定位、固定定位元素一定是块盒绝对定位、固定定位元素一定不是浮动没有外边距合并

更多的选择器

更多伪类选择器

first-child

选择第一个子元素

first-of-type,选择子元素中第一个

last-child

选择最后一个子元素

last-of-type,选择子元素中最后一个

nth-child()

选中指定的第几个子元素

even: 关键字，等同于2n

odd: 关键字，等同于2n+1

nth-of-type()

选中指定的子元素中第几个某类型的元素

更多的伪元素选择器

first-letter

选中元素中的第一个字母(文字)

first-line

选中元素中第一行的文字

selection

选中被用户框选的文字

更多的样式

透明度

opacity，它设置的是整个元素的透明，它的取值是0 ~ 1

一般情况下不会用，会采用第二种通道

在颜色位置设置alpha通道(rgba)

鼠标

使用cursor设置

.cur .ico浏览器支持的格式居多

盒子隐藏

display: none，(显示)不生成盒子visibility: hidden,(可见度)生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。

背景图

和img元素的区别

img元素是属于HTML的概念

背景图属于css的概念

当图片属于网页内容时，必须使用img元素

当图片仅用于美化页面时，必须使用背景图

涉及的css属性

background-image

background-repeat

默认情况下，背景图会在横坐标和纵坐标中进行重复

background-size

预设值：contain、cover，类似于object-fit

X , Y轴坐标

百分比： 100%(宽度撑满) 100%(高度撑满，页面太高会压缩)

数值： 200px 300px

background-position

设置背景图的位置

预设值：left、right、top、bottom、center

数值或百分比

雪碧图(精灵图)（spirit）

background-attachment

通常用它控制背景图是否固定

fixed：与定位（position）的固定一样，是相对于视口的固定

背景图和背景颜色混用

背景图在视口缺少的部分，可以用背景颜色来填充

速写(简写)background

url() no-repeat center/100% fixed red

先写position，再/size