选择器的使用语法与场景以及背景图片大小、文字盒子阴影、过度效果的使用方法

链接伪类选择器（场景：常用于选中超链接的不同状态）

选择器语法： a:link { }     选中a链接 未访问过 的状态

a:visited { }  选中a链接 访问之后 的状态

a:hover { }    选中a链接 鼠标悬停 的状态

a:active { }   选中a链接 鼠标按下 的状态

注意点： 1.如果需要同时实现以上四种伪类状态效果，需要按照LVHA顺序书写

 2.其中：hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态；

焦点伪类选择器（场景：用于选中元素获取焦点时的状态，常用于表单控件）

选择器语法： input:focus {  }

效果：表单控件获取焦点时默认会显示外部轮廓线

属性选择器（场景：通过元素上的HTML属性来选择元素，常用于选择input标签）

选择器语法： E[attr]        选择具有 attr 属性的 E 元素

 E[attr=”val”]    选择具有 attr 属性并且属性值等于 val 的 E 元素

精灵图介绍（场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图）

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度。

使用步骤：1.创建一个盒子

  2.通过PxCook量取图片大小，将小图片的宽高设置给盒子

  3.将精灵图设置为盒子的背景图片

  4.通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

背景图片大小（作用：设置背景图片的大小）

语法：background-size：宽度 高度；

取值：数字+px（简单方便，常用）百分比（相当于盒子的大小） contain（等比缩放，不超过盒子）cover

Background连写：background：color image repeat position/size；

文字阴影（作用：给文字添加阴影效果） text-shadow: 15px 15px 5px #ccc;

属性：text-shadow 取值：h-shadow（水平偏移量）v-shadow（垂直偏移量）blur（模糊度）color

拓展：阴影可以叠加设置，每组阴影取值之间以逗号隔开；     

盒子阴影（作用：给盒子添加阴影效果）box-shadow: 5px 5px 5px greenyellow;

属性名：box-shadow

取值： h-shadow（水平）v-shadow（垂直）blur（模糊度）spread（阴影扩大）color inset（内部阴影）

过渡（作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验）

属性名：transition

常见取值：  过渡的属性    all：所有能过渡的属性都过渡、具体属性名如：width：只有width有过渡

过渡的时长    数字+s(秒)

注意点：1.过渡需要：默认状态和hover状态样式不同，才能有过渡效果

2.transition属性给需要过渡的元素本身加

3.transition属性设置在不同状态中，效果不同

①给默认状态设置，鼠标移入移出都有过渡效果

②给hover状态设置，鼠标移入有默认效果，移出没有过渡效果

SEO（Search Engine Optimization）：搜索引擎优化（作用：让网站在搜索引擎上的排名靠前）

提升SEO的常见方法：1.竞价排名 2.将网页制作成html后缀 3.标签语义化（在合适的地方使用标签）

SEO三大标签：title（网页标题标签）description（网页描述标签）keywords（网页关键字标签）

Ico图标设置（场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标）

常见代码：<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">