CSS高级技巧:CSS Sprites

CSS高级技巧:CSS Sprites的相关文章

• 
  CSS高级技巧:网页布局

  标签：Web开发

  上一篇 CSS教程 文章：CSS高级技巧:文字环绕图片 布局 CSS至关重要的作用, CSS的设计初衷. CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现化语言来描述. 简而言之, 就是CSS不需要表现性标签! CSS布局技术依赖于三个基本概念: 定位, 浮动, margin操纵. 布局技术之间没有本质的区别, 相同一种布局让100个前端开发工程师来做...[ 查看全文 ]

  咕咕跳舞

  51
• 
  CSS高级技巧:阴影效果

  标签：Web开发

  上一篇 CSS教程 文章：CSS高级技巧:网页布局 CSS阴影效果 (Drop Shadows) 一点阴影可以给平板的设计增加纵深的感觉, 很多时候我们都是直接用PhotoShop直接制作带阴影的图片以供使用, 这里介绍的是一种不需要修改图片, 而只需要用CSS完成的技巧. 原理: 给img /标签增加一个容器, 给容器设置一个大的阴影背景图像, 然后把img /利用负值外补丁进行偏移, 使阴影落在图像外侧以达到效果.    &nb...[ 查看全文 ]

  桐桐儿妈咪

  21
• 
  CSS高级技巧:文字环绕图片

  标签：Web开发

  上一篇 CSS教程 文章：CSS高级技巧:滑动门 文字环绕图片(SandBags) 在印刷业中, 常用的文字图片混搭的排版法被延伸到了Web视觉设计中, 如何来完成呢？ 这里说的并不是简单的文字包围图片, 不过原理很类似, 同样是通过float属性来完成效果的. 先看一看效果图: 这应该不是简单的图片float能完成的了吧？ 不过实现的原理还是不是很推荐, 因为有相当多的额外标签, 整份文档看起来并不是非常语义化. 说...[ 查看全文 ]

  世雄prince

  61
• 
  CSS 高级语法

  标签：Web开发

  选择器的分组 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h2,h3,h5,h6 {   color: green;   }继承及其问题 根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则： body {      font-family: Verda...[ 查看全文 ]

  想懂就问我

  11
• 
  CSS Sprites技术以及图片优化

  标签：Web开发

  关于CSS Sprites技术的优化我们能做到多少，能减多少的请求数量。这并且不是单方面能做到的，一切取决于XHTML、CSS、CSS Sprites图片之间的配合。现时为止没有绝对优化的做法，这也是我在项目中经常衡量CSS Sprites图片与XHTML关系，如:《一张背景实现自适应九宫格》，以下总结了图片切割术与图象优化的一些方法。 图片优化 对于非动画的GIF更建议使用PNG8因为它同样能做到一样的效果，而且能...[ 查看全文 ]

  越过达不到

  31
• 
  CSS Sprites简介以及优缺点

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  通常被意译为CSS图像拼合或CSS贴图定位。CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得较为成熟，阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律，但在很多情况下，它有着一定的优势，最重要的是它可以减轻服务器的负载，提高网页加载速度。随着Web设计向着精致、巧妙的方向发展，设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单...[ 查看全文 ]

  qq448766078

  31
• 
  CSS的高级语法

  标签：Web开发

  选择器的分组 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h2,h3,h5,h6 {   color: green;   }继承及其问题 根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则： body {      font-family: Verda...[ 查看全文 ]

  yangjiezhe

  11
• 
  CSS教程：征服高级CSS选择器

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。但是尽管事实上，我们每个人也都意识到了它是有用的，CSS 选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。 避免让这些瘟疫在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于...[ 查看全文 ]

  追风少年198610

  281
• 
  如何使用CSS Sprites优化你的网站

  标签：Web开发

  使用CSS Sprites是在你尽可能地使用其他的优化策略后最后的一招。它将你的所有图片放在一张图中，即你的一张CSS Sprites由10张图片组成，那将避免9次HTTP请求，这减少的9次请求时延，正是加速的加载时间。这也有问题，跟每个HTTP请求的服务器开销一样，需由Apache的子进程管理，占用20MB的内存。你最好帮你的服务器进程减少HTTP请求：卸载媒体到Web前端Amazon S3，诸如此类。 下面是两个CSS Sprites...[ 查看全文 ]

  双刀烤鸭

  11
• 
  HTML高级技巧：详解CSS的优先权

  标签：Web开发

  优先权问题其实就是一个冲突解决的问题，当同一个元素(或内容)被CSS选择符选中时，就要按照优先权取舍不同的CSS规则，这其中涉及到的问题其实很多。 首先就是CSS规则的specificity(特殊性)，CSS2.1有一套关于specificity的计算方式，用一个四位的数字串(CSS2是三位)来表示，最终specificity越高的规则越特殊，在优先级判定时也就越有优势。关于specificity的具体计算在各种情况下的数字加成有如下一...[ 查看全文 ]

  love认证账号

  41
• 
  CSS技巧:段正淳的css笔记

  标签：Web开发

  淘宝首页上的一个小技巧。 类目之间的横竖线 从很久很久以前开始，类目间的竖线无非都只有三种。 背景图 在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。 缺点：最后一个还是要用class来隐藏掉背景。 符号 在每个a标签之间用”|”符号来填充。 缺点：html文件变大，文件维护变得很麻烦，而且在html中毫无意义。 a标签右侧的boder。 同背景图一样，只不过使用border-right来代替。缺...[ 查看全文 ]

  老绵羊20130801

  21
• 
  CSS Sprites图片切割术与图片优化

  标签：Web开发

  关于CSS Sprites技术的优化我们能做到多少，能减多少的请求数量。这并且不是单方面能做到的，一切取决于XHTML、CSS、CSS Sprites图片之间的配合。现时为止没有绝对优化的做法，这也是我在项目中经常衡量CSS Sprites图片与XHTML关系，如:《一张背景实现自适应九宫格》，以下总结了图片切割术与图象优化的一些方法。 图片优化 对于非动画的GIF更建议使用PNG8因为它同样能做到一样的效果，而且能...[ 查看全文 ]

  单身帅哥找朋友

  51
• 
  CSS教程:CSS兼容的技巧

  标签：Web开发

  让你的样式完美兼容各大浏览器，这个方案主要是用来解决Safari的，Opear是在测试的时候顺带试了一下，结果发现竟然也行，所以顺便也解决了。 .e {/*FF OP*/ background-color: #FF0000 } html* .e{/*Sa IE7 OP*/ background-color:#FF00FF } *+html .e{ background-color:#000000;/*OP*/ *background-color:#0000FF;/*IE7*/ } * html .e{/*IE6*/ background-color:#00FFFF } 经FF2、OP9.21、...[ 查看全文 ]

  魒行者

  61
• 
  CSS顶级技巧

  标签：Web开发

  在一行内声明CSS 对比下面两个： h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;} h2 {    font-size:18px;    border:1px solid blue;    color:#000;    background-color:#FFF;    } 第二种看起来的确格式化，但是不会在阅读上有任何帮助。写在一行内可以让你更快的找到需要的部分。 以前我也是写成类似...[ 查看全文 ]

  水灵儿妞妞

  01
• 
  CSS小技巧

  标签：Web开发

  经常有朋友问：如何使有超级连接的文字不出现下划线，如何使鼠标移动到超连上产生变色的效果？其实这些通过传统的方法是办不到的。而使用CSS的控制却可以非常轻松地作到，而且，页面的代码也不会臃肿。 ★★先看看超连没有下划线的例子： 例子1： 这个连接可以去页面底部，但是没有下划线。 是如何作到这一点的呢？在head和/head之间加上如下的CSS语法控制： style type="text/css" !-- ...[ 查看全文 ]

  lovewjz

  11
• 
  CSS技巧：清理无用的CSS样式

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  Dust-Me selectors Dust-Me是一个很有用也很好用的Firefox插件，它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。 支持本地和远程样式文件，包括使用link标签、?xml-stylesheet?处理指令、@import语句等方式引入的样式文件；(但是不支持页面中的style块和内联样式)支持IE条件注释中引入的样式文件；可以检查一个页面，也可以检查整个网站；支持CSS1选择器、大部分CSS2和CSS3选择器...[ 查看全文 ]

  shellstonelei

  41
• 
  CSS 缩写技巧

  标签：Html CSS布局 Div+CSS XHTML

      Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。       为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每...[ 查看全文 ]

  玩玩而已处女座

  01
• 
  css技巧:经典常用CSS使用技巧几则

  标签：Web开发

  使用 line-height 垂直居中 line-height:24px; 使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。 清除容器浮动 #main { overflow:hidden; } 期前也提到过这样的问题，更多信息可以看这里。 不让链接折行 a { white-space:nowrap; } 上面的设定就能避免...[ 查看全文 ]

  霸王鹰P

  21
• 
  CSS高级文字排版的实例代码

  标签：Web开发

  css 文字排版一向困扰做页面前台工作者，这里汇总了大部分文字的实现效果大家可以举一反三的去运用。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" / titleCSS Typography - Examples for CSS and ...[ 查看全文 ]

  丑女野山核桃仁

  211
• 
  CSS常用技巧汇总

  标签：Web开发

  ul 标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。 同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。 一个兼容性调整(IE和Mozilla)的笨办法： 初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能...[ 查看全文 ]

  秋雨随风5

  21