Css努力进阶的第六天

拓展：前端开发尽可能的降低对服务器的请求。

1，css精灵

将项目中的所有小图放到一张大图上面，减少页面对服务器的请求。

1.1精灵图的使用步骤

创建一个盒子，设置盒子尺寸与小图尺寸相同；（一般精灵图都用行内标签，span;b;为了设置宽高，需要调整块i)

将精灵图设置为盒子的背景图；

修改背景图的位置。 (核心重点：定位背景标签background-position:0 0;)

2，背景图的缩放（background-size）

background-size：宽度 高度；（ 数字+px；百分比；contain包含；cover覆盖）

数值+px，当

百分比：

contain：包含（将图片等比例缩放，当宽或者高有一边与盒子尺寸相同时停止缩放，可能导致图片覆盖不全，有留白）

cover：覆盖（将图片等比缩放，当宽和高全部与盒子尺寸相同时停止缩放，可能导致图片超出盒子显示不全）

1.3背景图片缩放的复合属性

background：color image repeat position/size；

3，盒子阴影（box-shadow）

属性值：（box-shadow:h-shadow v-shadow blur spread color inset;)
对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 }

h-shadow：必须，水平偏移值，允许负值。数值+px

v-shadow：必须，垂直偏移值，允许负值。数值+px

blur：可选，模糊度 。 数值+px

spread：可选，阴影扩大 。 数值+px

color：可选，颜色

inset：可选，阴影改为内部阴影(默认值是外部阴影，写outset会报错)

4，过渡（transition）

4.1定义：transition:all/具体的属性 数字+s（秒）；

all:过渡所有的属性

width：过渡具体对应的属性

4.2写法：过渡给谁就给谁定义transtion。（opacity：0；渐变透明）

<style>
  .box {
    
    width: 400px;
    height: 400px;
    background-color: aqua;
    transition:all 数字+s；
    
  }
  .box:hover {
    widght：600px；
    background-color：skybule；
    opacity：0；（透明度） 
  }
</style>
......
<div class="box">
  
</div>

5，搜索引擎优化（SEO）

5.1作用：让浏览器搜索排名靠前。

5.2提升SEO排名的常见方法：

1.竞价排名

2，将网页制作成html后缀

3，标签语义化（在合适的地方使用合适的标签）

5.3 SEO的三大标签：

1，title：网页的标题标签

2.description：网页的描述标签

3，keywords：网页的关键标签

6,ICO图标（标题上显示的图片）

Favicon放在文件夹根目录，

用link：favicon来引入favicon.ico文件