CSS认识
1.CSS是什么：
HTML是骨架 CSS是外观
CSS(Cascading Style Sheets的缩写) 层叠样式表 样式 布局 美化网页
2.CSS在HTML页面中的引入方式：
(1)行内样式：直接通过标签的属性style 键值对方式 键：值； 多组间空格隔开
<!--在标签内部再嵌套一个内嵌标签来设置样式-->
<h1>这是一个<span style="color: red;">行内样式表</span>的css</h1>(2)内部样式：在<head>标签的style标签里 通过选择器去标识body中的元素
<!--内部定义的style样式-->
<style type="text/css">
h1 {
color: blue;
}
</style>(3)外部样式：需要引入独立的CSS文件 后缀名为.css 在head标签中 通过link标签引入到html中
<!--关联外部的css样式文件-->
<link type="text/css" rel="stylesheet" href="test.css" /> 内部样式 不需要style属性去写 而是需要style标签 写在head标签里面
行内样式是指名点姓把样式给哪个标签 而内部样式和标签分开了 要通过选择器知道内部的样式是设置给谁的
3.样式规则：
选择器 { 键名1:键值1; 键名2:键值2; 键名3:键值3;}
-
选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式
-
属性和属性值之间以“键值对”的形式出现
-
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
-
属性和属性值之间用英文“：”连接
-
多个键值对之间使用英文“；”区分
4.三种样式表的对比总结：
| 样式表样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现结构与样式相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
3种样式表的优先级：
- 行内样式表 > 内部样式表 = 外部样式表 权重相等时遵循就近原则
- 当内部样式表和外部样式表同时存在时，采用 就近原则 来使用样式
CSS字体属性
1、font-size字体大小:
关键字：small large larger smaller x-small x-large ...
像素值：px（chrome浏览器字体大小默认16px）
| 相对长度单位 | 说明 |
|---|---|
| em | 相对于当前对象内文本的字体尺寸，如未设置则相当于浏览器默认字体尺寸，eg:1em=16px |
| px | 像素（Pixel） 相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的 |
| 绝对长度单位 | 说明 |
| in | 英寸（Inch） |
| cm | 厘米（Centimeter） |
| mm | 毫米（Millimeter） |
| pt | 点（Point） 1/72英寸 1in=72pt=96px |
| 关系 | 1in = 2.54cm = 25.4 mm = 72pt = 96px = 6em（windows） |
2、font-weight字体粗细：
数字：100-900取值范围 100-300 细 400-500 较正常 >=500 加粗
可用值：normal 正常 bold bolder 加粗 lighter 变细 400=normal 700=bold
3、font-family字体类型：
-
如果是中文 需要加上英文状态下的引号 '' ""
-
如果是英文 单个单词的英文 不需要加引号
-
如果是英文 由多个单词组成的一个字体需要加上引号
-
既有中文又有英文 需将英文字体写在前面 中文字体写在所有英文字体之后
兼容：设置多种字体 从左到右依次解析直到浏览器支持 全不支持则浏览器默认字体
4、font-style字体风格：
normal正常 italic oblique 倾斜
*italic和oblique区别：有些字体有斜体Italic属性 用Italic; 没有斜体Italic属性 用Oblique.
可理解成Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜
5、font 综合（简写）设置：
选择器 {
font: font-style font-weight font-size/line-height font-family;
}注意：使用font属性时 必须按照上面语法格式中的顺序书写 不能更换顺序 各个属性以空格隔开 其中不需要的属性可以省略（取默认值）但必须保留font-size、font-family属性 否则font属性将不起作用
6、color字体颜色：
表示方法：
-
颜色的英文名字： white black pink blue
-
十六进制： 取值 0-f 0-9 a-f，一个颜色两位表示，一共六位 颜色值前加# #000000黑 #ffffff白
-
RGB： 一共三个取值 取值范围0-255/0-100% rgb(200,89,9)
-
hsl： 色相（H）颜色名称 取值： (0 ~360) 0 / 360红色 120绿色 240蓝色
饱和度（S）色彩的纯度 越高色彩越纯 低则逐渐变灰 取值： 0-100%
亮度（L）增加亮度 黑到白 越高越白 越低越黑 取 值：0-100%
CSS文本属性：
1、text-align：用于指定元素文本的水平对齐方式 取值：left right center justify（两端对齐文本）
<style type="text/css">
h1 {
text-align: left; /*左对齐*/
text-align: center; /*居中对齐*/
text-align: right; /*右对齐*/
}
p {
text-align: justify; /*分散对齐，主要针对英文段落中出现空格时，由于两边对齐，空格的大小会有变化*/
}
</style>
2、 text-decoration：用于对文本添加修饰
none：(默认) 无修饰 underline：下划线 overline：上划线 line-through：删除线
<style type="text/css">
h1 {
text-decoration: none; /* 默认，定义标准的文本，没有任何修饰*/
text-decoration: overline; /*定义在文本上方的一条线 */
text-decoration: line-through; /*定义穿过文本的一条线 */
text-decoration: underline; /*定义在文本下方的一条线 */
text-decoration: blink; /*文字闪烁，只在火狐中支持 */
}
</style>3、text-transform：用于转换文本（英文）的大小写
none：默认
capitalize：文本中每个单词以大写字母开头
uppercase：所有单词字母都大写
lowercase：所有单词字母都小写
<style type="text/css">
h1 {text-transform:uppercase;}
h2 {text-transform:lowercase;}
h3 {text-transform:capitalize;}
</style>4、text-indent： 首行文本缩进两字符 取值：像素值 百分比
<style>
p {
text-indent:50px;
}
</style>注意：负值是允许的。如果值是负数，将第一行左缩进。
首行缩进2字符使用 2em em：相当于当前元素的font-size的属性值
5、text-shadow：用于设置文本的阴影效果
text-shadow: h-shadow v-shadow blur color;h-shadow：（必需）水平阴影的位置 允许负值 horizontal， X轴往右是正值
v-shadow：（必需）垂直阴影的位置 允许负值 vertical，Y轴向下是正值
blur：（可选） 模糊的距离
color：（可选） 阴影的颜色
6、direction：决定了HTML文字渲染方向
ltr：文本方向从左到右 left to right（默认）
rtl：文本方向从右到左 right to left
<!-- 简单的右对齐,其实这是direction的默认效果,文字不会倒着写 -->
<div style="direction:rtl;">div</div>7、letter-spacing：增加或减少字符间的空白（字符间距） 可负值
主要用于汉字 如果用于英文段落 增加/减少字母之间的空白
<style>
h1 {
letter-spacing:2px;
letter-spacing:-3px;
}
</style>8、word-spacing：增加或减少单词间的空白 可负值
主要用于英文 如果作用于中文，挨在一起的中文会被识别为一个单词
<style>
p {
word-spacing:30px;
}
</style>9、line-height： 用于设置文字行与文字行之间的距离
数字：此数字会与当前的字体尺寸相乘来设置行间距。
length：设置固定的行间距 px em 。
%：基于当前字体尺寸的百分比行间距。
<style>
span {
line-height: 2;
line-height: 20px;
line-height: 100%;
}
</style>注意：一般情况下，行距比字号大7 8像素即可
tips：在一行的盒子内 设定行高等于盒子的高度 文字垂直居中显示 只适用于单行文本
10、 word-break：可以让浏览器实现在任意位置的换行
normal 使用浏览器默认的换行规则
break-all 一个单词不管能否显示完整 只要遇到边界就拆分换行 用于英文 用于CJK则同normal
keep-all 所有单词一律不拆分换行 用于中日韩(CJK) 用于英文则同normal(除非一个单词非常长)
CSS注释：
/* 需要注释的内容 */
快捷键 ctrl + / 或者 ctrl + shift + /
基础选择器：(公有属性 style id class)
1、标签选择器：用HTML标签名作为选择器 按标签名分类 为页面中某一类标签做统一的CSS样式
标签名{属性1：属性值1; 属性2：属性值2; ...}2、id选择器：具有唯一性 只能设置一个值 且不能与其他相同
需要写id属性 style标签中用“#”进行标识对应标签的id属性值
#id名{属性1：属性值1; 属性2：属性值2; ...}
<标签名 id="id值1"></标签名>3、class选择器：class属性标识类
需要写class属性 style标签中用“.”进行标识对应标签的class属性值
.类名{属性1：属性值1; 属性2：属性值2; ...}
<标签名 class="类名1 类名2"></标签名>id与class区别: 1. id属性只能有一个id值 class属性可以有多个class值 2. id属性值不能使用别人已使用的 class可以使用的
4、多类选择器：class一个标签可以拥有多个class值 可以使用其他标签已有的class值
<style>
.fs {
font-size: 20px;
}
.red {
color: red;
}
.fw {
font-weight: bold;
}
</style>
<!--在class属性中使用多个类名，表示同时满足多个样式 -->
<div class="fs red fw">西游记</div> 5、通配符选择器：用“*”号表示 它是所有选择器中作用范围最广的，能匹配页面中所有的元素
* {属性1：属性值1; 属性2：属性值2; ...}
* {
margin: 0; /*定义外边距*/
padding: 0; /*定义内边距*/
}6、链接伪类选择器：主要针对于a标签 四个 顺序不能颠倒
a:link /*未访问的链接*/
a:visited /*已访问的链接 只能修改颜色 */
a:hover /*鼠标移动到链接上*/
a:active /*选定的链接*/注意：
a:hover 必须在 a:link 和 a:visited 之后。
a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果。
visited只能修改颜色，在未访问状态下设置了背景颜色的条件下 可以设置背景颜色 其他不能做改变
7、结构（位置）伪类选择器（CSS3新增）：
(1)结构上
- :first-child 选中所有元素的第一个子元素 如果这个子元素是标签则匹配成功
- :last-child 选中所有元素的最后一个子元素 如果这个子元素是标签则匹配成功注意：IE8不支持X:last-child。
-
:nth-child(n) 选取某个元素的一个或者多个特定的子元素。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式<2n-1>（n从0开始，当表达式的值小于等于0时，将不选择任何子元素）
-
:nth-last-child(n) 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始获取。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式（n从0开始）。
(2)类型上
-
:first-of-type 选择特定元素的第一个子元素
-
:last-of-type 选择特定元素的最后一个子元素
-
:nth-of-type(n) 只计算父元素中指定的某种类型的子元素
-
:nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取
区别： span:first-child 选中父元素中第一个子元素且为span span:first-of-type 选中父元素中第一个span元素 即使span不是父元素的第一个元素也能被选中 即选中父元素中第一个子元素为 冒号 前边的元素 E:nth-child：对父元素里面所有孩子排序选择(序号是固定的)，先找到第n个孩子，然后看看是否与E匹配 E:nth-of-type：对元素里面指定子元素进行排序，先去匹配，然后再找第n个孩子
(3) :only-child 匹配没有任何兄弟元素的元素
span为某个元素唯一的子元素 则唯一子元素span选中
span:only-child {
background-color: red;
}(4) :only-of-type 匹配所有元素 这个元素没有其他相同类型的兄弟元素
p某个元素中唯一的span元素 则唯的span子选中
p:only-of-type {background-color: red;}(5) :empty 选择的元素里面没有任何的内容或子节点
当前span元素没有任何子元素包括文本、空格、换行符等，若其有一个子元素 但被注释了，也不能匹配成功注释 也是一个标签 叫 注释标签
span:only-of-type {background-color: red;}(6) :root 匹配文档的根节点 html
8、目标伪类选择器： :target选择器 选取页面中的某个target元素
目标元素：这个元素的id被当做超链接的锚点#标识了
先找页面的所有目标元素 并且这个目标元素是X标签则匹配成功 X:target{ 样式 }
h1:target{ color:red }
<a href="#1">锚点1</a>
<a href="#2">锚点2</a>
<h1 id="1">锚点1</h1>
<h1 id="2">锚点2</h1>复合选择器：
（1）交集选择器：既..又..的意思 既要求标签名是X 又要求标签的属性值包含的
由两个选择器构成 第一个为标签选择器 第二个为class/id/伪类选择器 两个选择器之间不能有空格
<style type="text/css">
p.test1 {
background-color:pink;
}
p#test2 {
background-color:green;
}
.test1#test2 {
background-color:red;
}
</style>（2）兄弟选择器：
兄弟选择器是CSS3.0新增的一个选择器 语法格式： A~B 或者 A+B
-
‘+’选择器则表示某元素之后紧挨着的同级的兄弟元素 是单个的
-
‘~’选择器则表示某元素之后所有同级的指定元素，强调所有的
<style type="text/css">
div+p {color: red; }
div~p { color: red; }
</style>（3）并集(群组)选择器：多个选择器通过逗号连接而成 选中的元素{}之间的样式一样
<style type="text/css">
div, .one, p, #id {color:red;}
</style>（4）后代(包含)选择器：用来选择元素或元素组的后代
当标签发生嵌套时 内层标签就成为外层标签的后代
外层标签写在前 中间用空格分隔 能选择任何包含在内的标签
<style type="text/css">
div p {
color: red;
}
.div1 p {
color: green;
}
#div2 p{
color: blue;
}
</style>（5）子元素选择器：只能通过父元素选择子元素 父标签写在前 子级标签写在后 中间用“>”连接
<style type="text/css">
.nav li { /*后代选择器*/
color: blue;
}
.nav > li { /*子元素选择器*/
color: red;
}
</style>
/*子级元素选择器会覆盖后代选择器，但是只覆盖了一级菜单（.nav的儿子）*/6、属性选择器：选取标签带有某些特殊属性的选择器
| 选择器 | 含义 |
|---|---|
| [attr] | 存在attr属性即可 |
| [attr=val] | 属性值完全等于val |
| [attr*=val] | 属性值里包含val字符并且在“任意”位置 |
| [attr^=val] | 属性值里包含val字符并且在“开始”位置 |
| [attr$=val] | 属性值里包含val字符并且在“结束”位置 |
[name] {
color: red;
}
/*选中页面上存在name属性的所有元素*/
[name="text"] {
color: red;
}
/*选中页面上name属性值等于text的所有元素*/
[name*="text"] {
color: red;
}
/*选中页面上name属性值包含text字符并在任意位置的所有元素*/
[name^="text"] {
color: red;
}
/*选中页面上name属性值包含text字符并在开头位置的所有元素*/
[name$="text"] {
color: red;
}
/*选中页面上name属性值包含text字符并在末尾位置的所有元素*/
/*form表单中input运用较多*/7、伪元素选择器(CSS3)： 块级的文本
-
E::first-letter 选中块级文本的第一个单词或字
p::first-letter { color: red; font-size: 50px; } -
E::first-line 块级文本的第一行
p::first-line { color: green; } -
E::selection 可改变选中文本的样式
p::selection { color: blue; } -
E::before和E::after 在E元素内部的开始位置和结束位置创建一个元素 该元素为行内元素且必须结合content属性使用
<div>今年</div>
div::before {
content: "我";
}
div::after {
content: "18岁";
}
<!-- 显示结果是： 我今年18岁 -->注意：before与after表示在盒子内部的前端和后端插入内容
“.”一个点是类选择器 “：”一个冒号是伪类选择器 “::”两个冒号是伪元素选择器8
CSS三大特性：
1、CSS层叠性
如果一个css属性通过两个选择器设置到同一个元素上 那么一个属性会将另一个层叠掉
覆盖：css权重（优先级） 就近原则
先看权重 （css书写权重 选择器）权重高的覆盖权重低的
权重一样 看就近原则 后来者居上
2、CSS优先级
（1）优先级判断
1、如果使用的是同类型的选择器，那么谁写在后面就听谁的——就近原则
2、如果使用的是不同类型的选择器，那么会按照选择器的优先级来层叠
!important> 行内>内部=外部选择器(id>类>标签>通配符)>继承>浏览器默认属性
注：i em h1 a等会修饰字体
（2）!important
用于提升选择器中某个属性的优先级, 可以将被指定属性的优先级提升为最高
1、!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
2、!important必须写在属性值得分号前面 空格和css属性值隔开
3、!important前面的感叹号不能省略
4、!important 优先级最高，但也会被权重高的important所覆盖
（3）复合选择器权重计算
比较权重计算 四个数 从左到右依次比较：
若相等 就比较下一项 若直接已经比出大小 大的那个权重更高
权重计算规则
（1）内联样式，如: style=””，权值为1，0，0，0
（2）ID选择器，如：#content，权值为0，1，0，0
（3）类，伪类和属性选择器，如.content E:link E[attr]，权值为0，0，1，0
（4）元素选择器和伪元素选择器，如div p ::before，权值为0，0，0，1
（5）通配符、子选择器、兄弟选择器等的。如*、>、+,权值为0，0，0，0
（6）继承的样式没有权值。!important的权重最高
建议：
避免使用
!important;利用id增加选择器权重;
减少选择器的个数 选择器的嵌套层级应不大于3级 位置靠后的限定条件应尽可能精确;
3、CSS继承性
作用：子元素可以继承父元素的CSS样式 继承最近的父级
特殊性：
-
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。
-
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 。
-
a标签的颜色和下划线的设置不能继承，必须对a标签本身进行设置。
-
h标签的字体大小/加粗效果不能修改，必须对h标签本身进行修改。(字体放大两倍)
标签显示模式：
1、块级元素（block）
独自占据一整行或多整行，可以对其设置高度、宽度、对齐等属性，常用于网页布局和网页结构的搭建。
常见块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<form <li>等
<div>标签是最典型的块元素 div非常符合布局 所以通常叫CSS+div布局块级元素的特点：
-
换行 宽度、高度、外边距以及内边距都可以控制
-
宽度默认是容器的100% 高度是内容撑开的
-
可以嵌套内联元素和其他块元素 文字类的块级标签(p,h1~h6,dt)内部不能嵌套块级标签
2、行内元素（inline）
不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素：<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>等
其中<span>标签是最典型的行内元素行内元素的特点：
-
和相邻行内元素在一行上 不换行
-
宽、高无效 但水平方向的padding和margin可以设置 ，垂直方向padding有效 但是margin不可以。
-
默认宽度就是它本身内容撑开的宽度。
-
行内元素只能容纳文本或其他行内元素（a特殊）。
3、行内块元素（inline-block）
在行内元素中有几个特殊的标签——<img/><input/>,可以对它们设置宽高和对齐
有些资料可能会把它们称为行内块元素，但它们是行内元素
无行内块级的标签 但是有行内块级的显示模式（置换display而来）
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是之间会有空白间隙。
- 默认宽度就是它本身内容的宽度。
- 宽高、内外边距都可以控制。
注意：浏览器解析时，img解析出来的display为inline 但它的表现形式是inline-block 这是一个特殊的标签，展现效果不是由 CSS 来控制的。是一种外部对象，它们外观的渲染，是独立于 CSS 的。 简单来说，它的内容不受当前文档的样式的影响。CSS 可以影响元素的位置，但不会影响到元素自身的内容。
4、标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块：display:inline-block;
<style type="text/css">
div {
display: inline; /*块级元素转为行内元素，宽高会失效*/
display: block; /*行内元素转为块级元素，可以设置宽高*/
display: inline-block; /*行内元素转为行内块元素，可以设置宽高，在一行内显示*/
display: inline-block; /*块级元素转为行内块元素，可以设置宽高，在一行内显示*/
}
</style>CSS背景：
1、背景颜色：background-color
background-color: red;
background-color: transparent; /* 透明 */2、背景图片：background-image
background-image: url('图片路径'); /*设置图片显示*/3、背景平铺：background-repeat
background-repeat:repeat; /*背景图像将向垂直和水平方向重复 | 默认值*/
background-repeat: repeat-x; /*只有在水平方向会重复背景图像*/
background-repeat: repeat-y; /*只有在垂直方向会重复背景图像*/
background-repeat: no-repeat; /*不会重复*/4、背景位置：background-position
第一个值水平方向(关键字:left center right) 值增大时 背景图片向右移动 减小往左移动
第二个值垂直方向(关键字:top center bottom)值增大时 背景图片向下移动 减小往上移动
关键字：两个方向都为关键字的话 值的顺序可以改变 只设置一个值 另一个值默认 center
固定值：方向固定 水平 垂直
百分比：方向固定 水平 垂直
(容器的宽度-图片的宽度)x百分比 = 图片最左边到容器左边的距离
(容器的高度-图片的高度)x百分比 = 图片最上边到容器上边的距离
混合写：方向固定 水平 垂直
5、背景附着：background-attachment
background-attachment:scroll;/*相对于元素本身固定 默认值*/
background-attachment:fixed; /*相对于视口固定 不会随着元素的内容滚动*/6、背景简写：background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(' ') repeat-y scroll 50% 0;
/*空格隔开 不要的可以直接省略*/7、背景颜色透明（CSS3）：
background: rgba(0, 0, 0, 0.5); /*半透明*/alpha的取值范围在0~1之间
同样可以给文字和边框透明，都是使用rgba的格式来写
color: rgba(255, 0, 0, 0.3);
border: 1px solid rgba(255, 0, 0, 0.5);8、背景缩放（CSS3）：通过background-size设置背景图片的尺寸
（1）设置固定缩放：px
background-size: 500px 300px;（2）设置百分比：（参照盒子的宽高）
background-size: 100% 80%;px&%特点：只设置一个值时 设置的值为横向展示的宽度 纵向会按原图宽高等比缩放
（3）设置等比例缩放： cover & contain会自动调整缩放比例
cover 特点：会充满整个盒子 但是图片不一定能够显示完整
保证图片始终填充满背景区域 如有溢出部分则会被隐藏
background-size: contain;contain特点：图片一定能显示完整，但是可能就不能充满盒子
只要图片的一边填满了盒子 就止步 不会在继续填充
background-size: cover;tips：如果盒子和图片都是正方形，那么contain和cover表现形式一样
插入图片和背景图片的区别:
-
插入图片在更改图片大小时使用属性 width 和 height ，更改图片位置使用 margin 或 padding 盒模型。
-
背景图片在更改图片大小时使用 background-size 属性，更改图片位置时使用background-position属性。
-
一般情况下背景图片适合做一些小图标使用，产品展示之类的就用插入图片
9、背景颜色渐变
（1）线性渐变（Linear Gradients）： 向下/向上/向左/向右/对角方向
/*从上到下的线性渐变*/
background: linear-gradient(red, blue);
/*从左到右的线性渐变*/
background: linear-gradient(to left, red, green);
/*从右到左的线性渐变*/
background: linear-gradient(to right, red, yellow, blue, green);
/*对角方向的线性渐变*/
background: linear-gradient(to bottom right, red, blue);（2）径向渐变（Radial Gradients）: 由它们的中心定义
/*颜色结点均匀分布的径向渐变*/
background: radial-gradient(red, green, blue);
/*颜色结点不均匀分布的径向渐变*/
background: radial-gradient(red 5%, green 10%, blue 50%);
/*形状为圆形的径向渐变*/
background: radial-gradient(circle, red, green, blue);10、多背景（CSS）：不同的背景图像用逗号隔开 且图像彼此堆叠
其中的第一幅图像最靠近观看者 越近越靠前 前面的会堆叠在后面的上面
11、凹凸文字 空心文字：
<div class="to">我是凸起的文字</div>
<div class="ao">我是凹下的文字</div>
/* 左上阴影为白色，右下阴影为黑色 */
.to {
text-shadow: -1px -1px 1px white, 1px 1px 1px #000;
}
/* 左上阴影为黑色，右下阴影为白色 */
.ao {
text-shadow: -1px -1px 1px #000, 1px 1px 1px white;
}
/* 背景色和文字颜色一样，并且这种颜色需要和阴影的颜色形成色差 看得出视差效果 */<p>我是空心的文字</p>
p {
font-size: 50px;
-webkit-text-fill-color: white; /*伪空心元素，与背景色有关 需与背景色一样*/
-webkit-text-stroke-color: blue;
-webkit-text-stroke-width: 2px;
}12、精灵图： 页面上会用到很多小图标，把这些小图标放在一张大图片上显示，需要用到的时候通过背景的位置来展示每一个小图标，目的在于性能优化
用法：查到目标图标大小，设置宽高，通过position调整位置，找到目标图标
3005
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
