css

文章简介:并不是说css-sprite技术不好,只是什么时候需要用,什么时候不需要用,不能够一概而论的跟风,看人家网易用了,你也用!

最开始的时候,图片都是一张一张单独存在,需要哪张,就发送http请求来调用,随着时间的推移,background-position的应用,又兴起了css-sprite这种技术,一时之间大家都在盲目跟风,认为不这样做就不够专业,或者技术不够好等。

css-sprite是把所有用于网页背景的图片,拼合在一张大图之内,然后通过背景图定位的方法,来控制显示自己需要的那张图。但是不是所有的图片都适用css-sprite,例如网页内的图片,或者是需要重复平铺的图片。并且,这种大图一旦合并以后,如果以后再要修改其中的某一个图片,就要牵一发而动全身,如果只是简单颜色改变,或许还稍微容易一些,但是如果大图内的某些元素的尺寸变化了,就需要重新进行合并了,并且可能会导致其他图片的位置发生变化,从而演变成调整一个图片,还要同时调整大图内的其余图片,并且要调整css的background-position的数值。

并不是说css-sprite技术不好,只是什么时候需要用,什么时候不需要用,不能够一概而论的跟风,看人家网易用了,你也用!

css-sprite适用的条件:
1.网站的开发已经完毕,包括功能,模块,交互,程序,都已经反复测试,就差发布;
2.网站已经趋于完美,不会再三天两头的改动,不能说今天上线了,明天觉得按钮太小了,要调整,后天觉得按钮太大了要调整;
3.你的网站流量很大,需要尽量减少http的请求次数;

css-sprite也并不是像看起来那么简单的,只是单一的把图片拼合在大图上那么简单,首先你应该考虑,那些图片是需要每个页面都要引入的,这些图片可以拼合到一张大图中,而那些只有个别页面才需要调用的图片,则不适合也加在大图里面,否则你的http请求次数的确是小了,但是某些图片其实在某些页面是不需要用到的,但是你放在一张大图里面,用户还是需要去加载,造成了网速的负担。

另外,对于一些小公司,做一个产品没有一个合理的构思甚至框架,想到哪里就让人去做,想一步做一步,做一步改一步,改完一步,再改一步,改来改去没有最终敲定的,这个时候如果一开始就使用css-sprite拼合图片,无疑给自己造成了巨大的困扰,增加了许多的工作量。所以最好是,等到产品已经完全敲定,测试没有问题,可以上线发布了,再去拼合图片。

时间: 2024-09-10 22:35:49

css的相关文章

值得学习的19个jQuery和CSS按钮教程

jQuery是继prototype之后又一个优秀的Javascrīpt框架,使用户能更方便地处理HTML documents.events.实现动画效果,并且方便地为网站提供AJAX交互.相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排 版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象盒模型的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言. 这里就将分享国外19个值得学习的jQuery和CSS按钮教程,希望能有所帮助. Awesome CSS

css页面布局vertical-align:middle;和float:

问题描述 css页面布局vertical-align:middle;和float: <div class="row"> <div class="cell regist regist_show"> <b:message key="validatecode" /> </div> <div class="cell regist" style="float:left;&q

CSS中的滑动门技术

css 原文作者:Douglas Bowman 原文出自:A List Apart 中文翻译:54player.com nobita 版权说明:本文中文翻译版权归译者54player.com nobita所有.需要转载发表的,请先与作者联系 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果.根据CSS2.0当前的规定,每一个背景图像都需要各自的HTML元素.在许多情况下,典型的标记已经为一般的接口组件提供了多种元素以供我们使用. 标

CSS选择符详解

核心提示:什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是. 一.类型选择符 什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是.如下: body {}div {}p {}span {} 二.群组选择符 对于XHMTL对象,可以对一组同时进行了相同的样式指派.使用逗号对选择符进行了分隔,这样书写的优点在于同样的样式只需要书写一次即可,减少代码量,改善CSS代码结构

input标签写CSS时需要注意的几点

飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是input标签的高度不能统一,Firefox和IE中的高度始终不能一致;二是在IE浏览器中属性为text的input标签中的输入文字不像标准浏览器中的那样垂直居中显示,而是靠输入框的左上角显示. 为了彻底解决搜索框的这些问题,我以GreenGaint主题搜索框的样式为准,重写了一遍代码并且以像素为单位测量了一下在没有任何样式表的情况下<input>标签在默认浏览器中的实际差别. 结果发现:i

css 样式 求教-求大神指教css样式前后对齐不上

问题描述 求大神指教css样式前后对齐不上 求大神,苦恼一上午了.增加了一个样式通知管理.老前后对其不上, </tr> 可惜c币不够.真心求教 Blockquote 解决方案 </tr>代码送上 解决方案二: 代码能看见吗 </tr> 解决方案三: 看不到代码..把左尖括号去掉后再发来看看 解决方案四: 我的建议是不要用标签属性来定义高宽等,容易受到干扰,改为样式试试 解决方案五: 只能看到一堆 红叉....... 解决方案六: 老兄,你的图--挂了-- 解决方案七:

CSS中Font的一些基本知识点归纳总结

1.什么是字体 字体是文字的外在形式,就是文字的风格,是文字的外衣.比如行书.楷书.草书,都是一种字体.同样一个字每个人写起来都会有差异,可以说每个人都有一套潜在的字体库.对于web页面来说,字体就是计算机上存储的一套文字显示方式.通过对文字进行一些特殊处理(比如末端加强)来提高不同环境中文字的可读性. 比如同样大小的文字,在不同字体下的可读性是不同的. 一般来讲,一款字库的诞生,要经过字体设计师的创意设计.字体制作人员一笔一划的制作.修改,技术开发人员对字符进行编码.添加程序指令.装库.开发安

CSS 平级和儿子级样式写法示例

 input:checked+ol:这个是讲当inoput 拥有了checked后它平级的OL拥有的样式. input:checked+ol>li:中的大于是指当inoput 拥有了checked后它平级的OL下面儿子辈的li的样式,孙子辈的不继承. Html代码    代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" />

[HTML/CSS]uploadify自定义按钮样式

概述 在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配.这时就需要对其样式进行修改.  样式文件是uploadify.css. 打开这个文件后,你会看见CSS设置的按钮样式.  1 .uploadify-button { 2 background-color: #505050; 3 background-image: linear-gradient(bottom, #505050 0%, #707070 100%); 4 backgroun

CSS样式----图文详解(二):css属性

主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 CSS的单位: html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样.CSS中的单位是必须要写的,因为它没有默认单位. 绝对单位:1 in=2.54cm=25.4mm=72pt=6pc. 各种单位的含义:in:英寸Inches (1 英寸 = 2.54 厘米)cm:厘