css sprites、link与@import的区别、css3新特性

css sprites

CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。

优点

1. CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2. CSS Sprites能减少图片的字节；
3. CSS
   Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
4. CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

缺点

• 图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
• 图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
• 图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
• 可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

link与@import的区别

页面使用css的方式主要有3种：

• 标签行内引用（内联样式）
• 内部样式表
• 外部样式表，其中外部样式引用有link和import两种

link和import都可以对css样式进行外部引用，但它们还是有区别的。

link和@import区别

1.从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
。

css3新特性

一、css3的新选择器

• E:nth-child(n) 选择器匹配其父元素的第n个子元素，不论元素类型，n可以使数字，关键字，或公式

• E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素

• E:frist-child 相对于父级做参考，“所有”子元素的第一个子元素，并且“位置”要对应

• E:frist-of-type 相对于父级做参考，“特定类型”（E）的第一个子元素

• E:empty 选择没有子元素的每个E元素

• -E:target 选择当前活动的E元素

• ::selection 选择被用户选取的元素部分

• -属性选择器

  E[abc*="def"] 选择adc属性值中包含子串"def"的所有元素

二、文本

• text-shadow:2px 2px 8px #000;参数1为向右的偏移量，参数2为向左的偏移量，参数3为渐变的像素，参数4为渐变的颜色

• text-overflow：规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省略)

• text-wrap：规定文本换行的规则

• word-break规定非中日韩文本的换行规则

• word-wrap：对长的不可分割的单词进行分割并换行到下一行

• white-space：规定如何处理元素中的空白 white-space:nowrap 规定段落中的文本不进行换行

三、边框

• border-raduis 边框的圆角
• border-image 边框图片

.border-image {
    border-image-source:url(images/border.png);
    boder-image-slice:27;
    border-image-width:10px;
    border-iamge-repeat:round; (round平铺) 平铺效果不作用于四角，只适应与四边 

四、背景

• rgba
• backgrounnd-size:cover/contain，其中background-size：cover，会使“最大”边进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。background-size:contain，会使“最小”边进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片

五、渐变

• linear-gradient

background-image:linear-gradient(90deg,yellow 20%,green 80%)

• radial-gradient

background-iamge:radial-gradient(120px at center center,yellow,green)

六、多列布局

column-count

column-width

column-gap

column-rule

七、过渡

transition

transition-property:width //property为定义过渡的css属性列表，列表以逗号分隔

transition-duration:2s; //过渡持续的时间

transition-timing-function:ease;

transition-delay:5s //过渡延迟5s进行

八、动画、旋转

animation

transform ：translate（x,y) rotate(deg) scale(x,y)

translate

scale

rotate

skew（倾斜）

九、flex布局

十、@media媒体查询