标题取自《css禅意花园》一书,还记得当年读此书时的情景,真的是内容和书名一样的优秀,就以此标题作为自己在该文的一种追求吧,尽管我的水平和见解都和Dave Shea相去甚远。该文算是对前两年写页面工作的总结吧,现在比较少关注css了,可能观点有狭隘的地方,同时文中也有一定的思考和理解,也许并不一定特别适合初学者阅读,本人时间有限,也没办法针对具体的知识点做深入的讲解或提供代码示例,所以在阅读过程中如果有不理解的地方,欢迎提问并互相学习交流。

  当UI设计师给了你一张psd图,在对它进行切图,实现成静态页面并在浏览器上完美展现,这个过程需要用到html和css。本文就从这个过程入手,讲讲相关知识点。

开发前期准备

1. 提取图片
  UI设计师往往只提供给前端人员一张完整的psd图,甚至对于无用的图层也不清除,这个时候前端就需要自己进行ps,提取所需的图片,并保存到项目图片库中。从我个人体会而言,我是建议前端自己ps的,理由是:
  - web页面需要根据业务和技术需求选取不同的图片文件格式,而多数设计师并无法完全理解
  目前主流的图片文件格式依然是jpg、gif、png,这三者的区别应用和这么做的目的可以查看拙文三种图像文件格式的选择
  - web页面需要考虑性能因素,对一些图片进行sprites贴图处理
  页面图片的请求数越多,加载就越慢,一些不规则和具有特定业务场景使用的图片可以通过利用sprites技术来减少图片请求数,进而提升性能。sprites图片的制作可以使用一些软件或在线生成,在线生成工具CSS Sprites Generator
  - 字体图标的选择
  应用字体图标的好处是能够通过css简单地控制图片的大小、颜色,如果是矢量图标,还可以避免跨平台页面制作导致的图片失真问题。缺点是市面上浏览器对字体图标文件的格式支持不统一,得生成不同格式的文件来进行兼容性处理。推荐一下由阿里巴巴UX部门推出的矢量图标管理网站Iconfont.cn,该网站有丰富的矢量图标可以收藏,并可以在平台上建立项目,实现项目图标应用协作管理。具体应用可以参见该站点的文档帮助。
  - img or background?
    · 从业务角度来说,业务类型的图片适用img标签,而装饰类型的图片适用background定位
    · 从seo角度看,需要提升搜索关键字效果的应该使用img标签,反之可得
2. 兼容浏览器版本的决策
  不同的产品有不同的目标客户群,不同的目标客户群决定项目开发需要注重的浏览器版本兼容。兼容性问题是因为浏览器内核不一致导致,而根本原因是因为在早期,没有统一的标准和规范让浏览器厂商来遵循。在编写代码开始前,应该向产品经理确认该项目需要兼容的最低浏览器版本,这里更多的是指IE浏览器。浏览器版本决定我们可以选择哪些css选择器,应用哪几种布局方式,规避哪些常见的兼容性问题等等。
3. 响应式开发
  由于智能手机的普及以及网络越来越发达,目前移动端的开发愈发的重要。是针对不同的平台分别定制不同的代码,还是一套代码适应多种平台(即常说的响应式开发)?也是需要团队考虑的方向。响应式开发在设计层面来说,需要考虑UI展示的不同,终端设备交互的差异,在技术层面来说,就是媒体查询+液态图片+流式布局的综合应用。

HTML

  Html的设计初衷是让用户能在浏览器上更好的地浏览文字,所以会有h1~h6标签用来区别不同标题级别、ul和ol来定义列表种类、p用来表示段落。不同的标签会有不同的默认样式,后者会让页面在浏览器上展示出层次感,便于阅读。

  Html的标签各有所用,所以开发者在编写html代码的时候,也应该从这一方面入手,让标签做正确的事情,个人认为这也就是语义化提出的初衷。一个html页面,可以从下面几个方面实现语义化:
  - 让标签做它该做的事情
  - 尽可能少的代码嵌套
  一部分开发者写的代码结构嵌套很深,有的时候并不是没有认识到弊端,而是不得已而为之。原因就是对css应用得不够熟练。比如一行文字前面加个小图标这样的场景,实现方式有很多种:
  · 给文字设置padding-left,用背景图定位的方式
  · 给文字标签添加:before伪元素选择器,存放图标,定位之
  · 增加一个空标签来设置图片样式
  显然,最后一种方式是种反模式,不建议使用。
  - 去除冗余的标签属性
  在保证前面两个原则的情况下,通常我们只需要对一个业务模块的最外层标签定义一个钩子(id或者class等等),然后结合css强大的选择器,就可以避免需要给每个标签添加识别属性,进而书写css的尴尬
  - 添加有意义的属性
  有时候给一些特定标签添加属性能够让页面更加友好,并有利于seo。比如给img标签添加alt属性、给a标签添加title属性等。
  - 校验
  查看一个网页结构是否合理,一个好的办法就是把样式表去除,然后在浏览器上查看,理论而言可读性好的页面,结构就是合理的

CSS

  随着web的发展,简单的html已经不能满足人们的审美需求,于是css应势而出,css的机制就是通过link或style方式,告知浏览器,浏览器解析css规则,并和相对应的标签元素进行绑定,找到相对应的标签就靠seletor。

1. 选择器
  Selector一直在增加,查找功能越来越强大,为的就是适应越来越丰富的web应用开发,相信随着时间的推移,还会有更多的选择器出现。从基础选择器到伪类和属性选择器,合理地进行选择才能写出优雅的代码,这是基本功,得多写多练。
2. 继承和层叠
  Css的另一机制。继承实现了样式的共用,常见的如color、font属性,最终目的是保证开发的合理性,想想如果需要为每个标签都写一遍字体定义是一件多么可怕的事情。我认为层叠的机制是依赖于继承的,如果没有继承,也就不需要层叠存在了。css通过选择器的优先级来告知浏览器怎么样应用样式,确定优先级有一个计分原则specificity,除了计分原则,还有很多特殊性需要知道,比如important、多个相同选择器的声明、样式表的种类以及它们的优先级关系等等。层叠的本质是为了解决样式复用问题,一个可复用的样式(可以理解为基础样式)的选择器如果越多,那么层叠覆盖的选择器就越复杂,所以在写css的时候,减少选择器嵌套是个不错的准则,特别是在出现了像sass和less这样的预编译工具,很容易就写出了多层选择器,影响了浏览器的解析速度。
3. Reset样式
  正如前面html说的,html有许多标签默认就有样式,比如a、p、ul等,不同的浏览器在赋予这些标签样式的时候,并不统一,这就会造成初始化页面展示不一致,还有情况如列表标签ul、ol,默认样式太过单一,往往满足不了业务需求,所以这就需要在一开始的时候就对默认样式进行重置。不是所有的样式都需要重置,一个站点,往往只需要对一些常用的标签且有默认样式的进行重置,像bootstrap那样大而全的UI库,因为得兼顾许多应用的场景,所以会列出许多需要重置的标签,但是一般的站点确实是不需要的,精简是css应该追求的一个方向。
4. Box Model
  Css布局依赖于两个方面,元素和定位。不管是行内元素或块元素,在页面上的展示都是一个个矩形框,因此就有了框模型的概念。框模型是css的基础,在应用过程中,得注意行内元素的垂直margin无法生效,而同一个bfc内的块级元素的margin会发生折叠现象,框的内容宽度在没有width的情况下的取值原理。如果可以的话,了解IE低版本混杂模式下盒子的展示方式,以及box-sizing的用法就可以了
5. BFC的原理
  对css的布局有比较深入研究的朋友们或许能理解,BFC就是css各种布局属性综合应用的大杂烩。它提出的目的就是在于总结一套规则,告诉大家当碰到使用相关属性的情况下,元素会有怎样的表现,以及元素和兄弟元素或父元素,或兄弟元素的子元素乃至层级之间优先级关系等等。这些相关属性可以从清除浮动的方式中去获取:
  - overflow属性除了visible的取值
  - display属性line-block, table-caption等
  - float属性非none值
  - position属性absolute和fixed值
  当元素有了上面属性之一,就会形成一个独立的容器。
6. CSS和CSS3
  Css3提供了许多可供实际场景应用的属性,但是我始终觉得它更像是武侠里说的只是武功应用的法门,如果要让武学有个质的飞越,还是得把css一些很基础的东西学扎实,比如我前面5点所写的,但是不限于。
7. SASS
  用sass来写css体验还是不错的,用得好的话会有做css架构的感觉,这是因为它的功能决定的。比如它支持变量定义,嵌套,导入样式表,函数定义并可传参,样式组合重用以及简单地计算功能。如果用得不好,它的功能就发挥不出来,比如定义了变量,只引用了一次,其他地方还是像写css那样,另外像mixins和extend也要多考虑去定义使用,而嵌套,应该考虑合理的区间。

结语

  洋洋洒洒写了这么多字,花了不少时间,脑细胞死了不少。文中虽然没有举例说明,但是每一段文字的下笔我都是先在脑海中先想象了应用场景,靠着自己的语言阐述出来。希望这篇文章能给在前端界面开发有过一定经验的朋友带来一些思想上的交流,不足之处还望指教。

posted @ 2016-04-08 00:06 捌莱闲人 阅读(436) 评论(0) 推荐(0) 编辑
摘要: 一同事应聘TX,出了一道题,分别用1,2,3,5个标签实现红十字会图标,图标水平、垂直居中,短边50px,长边150px。如图: 其中用2,3,5个标签实现不难,略过。一个标签的我比较有兴趣,午休时间想了下,睡醒后就动手实现,代码如下: 1 div{ 2 ... 阅读全文
posted @ 2014-09-16 14:24 捌莱闲人 阅读(663) 评论(0) 推荐(0) 编辑
摘要: 网景和微软的浏览器之战早已淡去多年,最终以微软的IE浏览器胜出,特别是IE6的出现,一度成为世界浏览器的霸主,至今无人能敌。去年IE6荣获“终身成就奖”,真是实至名归。本文涉及的两个标签abbr和acronym,与这两家公司渊源颇深,让我们一起来通过它们去回顾那段风云岁月,更深入地去了解它们吧! 从用法上来说,abbr和acronym并没有多大区别,它们作为缩写标签在HTML4.0就已经被引入。abbr缩略的范围更为广泛,可以是短语、单词首字母、甚至中文,acronym当然也都可以用,但是更精确的用法应该是用来缩写单词首字母。它们在浏览器上的表现形式主要有两点: 文本下方有类似bord... 阅读全文
posted @ 2013-06-18 10:21 捌莱闲人 阅读(1135) 评论(0) 推荐(0) 编辑
摘要: 这篇文章就当进入移动web开发的宣誓稿吧,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这潭水愈发的深了!不多言,进入主题。 我将从下面几个方面探讨移动web前端开发:分辨率、屏幕、手机浏览器、设计理念、响应式web开发。分辨率手机分辨率比PC分辨率要庞杂得多,各种分辨率有木有?大小差距那么大有木有?这在一定程度上给页面制作带来了不小的麻烦。所以针对这样的因素,必须有充分的考虑。我从两个方面进行思考:1) 市场上主流手机生产商的产品分辨率。经过调研发现,目前主流的手机分辨率为:480*800像素、320*480像素,而1280*720像素(720P)会是接下来的趋势。这些都是很粗... 阅读全文
posted @ 2013-03-04 10:22 捌莱闲人 阅读(4822) 评论(8) 推荐(5) 编辑
摘要: 前言 在上一篇文章《我的css架构理念》中,承蒙园内的朋友们抬爱,竟然一路被推荐,让我这小小一枚前端攻城狮既意外又兴奋进而惶恐。惶恐的是资历实在有限,知识实在匮乏,相当害怕误人子弟。此真心话!但接下来我依然会坚持有时间就写写文章,既能总结,又能学到新知识,还能分享给诸位,我认为,分享---是件功德无量的事,互联网不就是因此而绚丽多彩嘛! 上篇文章的留言里有好多朋友是对我css架构就http请求的问题提出质疑,我本想回答的,但不知道从何说起。前端性能方面的知识我了解得并不深入,囫囵吞枣地看过一两本重构的书、喜欢查查资料,看看一些大牛写的文章,觉得人家那么做有道理了,就搬过来用,林林总总的... 阅读全文
posted @ 2013-01-13 08:22 捌莱闲人 阅读(2177) 评论(3) 推荐(6) 编辑
摘要: 前言做前端已有不短的时间了,在css这片领域越走越久、越走越远,回过头来看看,有很多技能知识掌握了就不会再忘了,比如无图片实现三角形、ie下如何实现半透明效果等等;但有些东西却需要在项目实战中不断地碰壁、总结,再碰壁、再总结,慢慢地去找到适合自己的方法,然后遵循这样的方法,去开发,以收到事半功倍的效果。本篇文章就属于后者,因为是站在整个css的大方向上,对于初学者或者项目实战经验不够多的同学,建议有看不懂的地方不必太介意,可以跳过,也可以留言提问。经验老道者也许也会些许吐槽,觉得跟您有出入,但是,我想说,css架构,因人而异、因项目大小而异,没有最优,只有适合!从语义化开始看《css禅意花园》 阅读全文
posted @ 2013-01-10 18:32 捌莱闲人 阅读(5338) 评论(35) 推荐(20) 编辑
摘要: 昨晚在看一道面试题,发现有一部分人对css样式的优先级不是特别清楚,加之之前自己也一直在总结这个知识点,今天就利用点时间把我所了解的写下来,大家共同进步... css样式的优先级是一个庞杂的知识点,我甚至觉得它的庞杂可以与“浮动”以及“框模型”相提并论。对于本文,我思考了许久,或许可以用这么一句顺口溜来总结,即“一载二位三重要四特殊”。下面具体展开: 一、“载” 这里的“载”,是载体,即样式表。对于开发人员来说,经常涉及到的只是“载”之一,除此之外,还有两个。它们是什么呢?具体如下: 1、用户端样式表:这是浏览器默认的样式表,在遵守其规则的情况下,才有了div的原始属性是“display:b. 阅读全文
posted @ 2012-01-18 14:11 捌莱闲人 阅读(1934) 评论(5) 推荐(2) 编辑
摘要: 一、哪三种格式? 分别为:gif、jpg、png。 二、优化图像文件为何重要? 对于访问量不高的网站而言,图像的优化也许并不会引起我们太大的关注,但是如果日访问量都在数以万计的网站,简单举例是100000,那么某张图片的大小减小3k,一个月下来就节省了9G的带宽,这不管对于同时访问该网站的用户,还是网站运营本身来说,都将减少更少的开销。 三、不得不提及的几个概念。 1、有损压缩与无损压缩 关于这两个概念,我在淘宝UED的blog上看到相关的文章,觉得很不错,链接进入图片格式与设计那点事儿。 2、色深 指某种图像格式包含的颜色的多少。用位表示,如8位色深表示256种颜色。 四、三种格式的简介 . 阅读全文
posted @ 2011-08-09 07:14 捌莱闲人 阅读(1772) 评论(1) 推荐(0) 编辑
摘要: css中让文本居中的属性很简单就可以实现,那就是设置text-align:center即可。而我这里所说的“元素”实际上是指容器,如果要有一个贴切点的标签,那应该可以用div来表示。 让元素水平居中,相信对于许多网页设计师而言都不会陌生。但是有的时候,自己就在想,为什么要让元素水平居中?是出于什么原因呢?都是一点自己的见解,蛮写下来... 首先,要让元素水平居中,就必须得了解css设计中固定布局和流式布局两者的概念。它们之间的直观区别就看是否给元素设置了宽度。下面是两段代码,用来简单地说明固定布局和流式布局的区别。 1、固定布局demo:<htmlxmlns="http://w 阅读全文
posted @ 2011-07-17 16:43 捌莱闲人 阅读(2193) 评论(7) 推荐(2) 编辑
摘要: 浮动具有包裹和破坏两个特性,正因为这样,它才可以用来布局,实现丰富多彩的网页。但也因为这样,使得页面经常出现错乱,于是有了清除浮动。 那么,清除浮动都有哪些方式呢?它们各自都有什么优缺点?我们该怎么选择以得到最适合我们的清除浮动样式呢?接下来我将谈谈自己在开发中总结的一点点经验。先写下一段代码,我将用他进行说明。/*css代码*/ <styletype="text/css"> .fl{float:left;}.fr{float:right;} .clear{clear:both;} .dib{display:inline-block;}.dt{display:t 阅读全文
posted @ 2011-07-04 17:20 捌莱闲人 阅读(2136) 评论(5) 推荐(4) 编辑
点击右上角即可分享
微信分享提示