《Web前端开发修炼之道》-读书笔记CSS部分

如何组织CSS-分层

应用 css 的能力分两部分:一部分是css的API,重点是如何用css控制页面内元素的样式;另一部分是css框架,重点是如何对 css 进行组织。如何组织 css 可以有多种角度,例如按功能划分,或者按区块划分。这里讲一下 base.css + common.css + page.css 的组织方法。将网站内的所有样式,按照职能分成三大类:base、common、page,这三者是层叠结构。

1、base 层-精简通用

位于三者的最底层,提供 css reset 功能和粒度最小的通用类——原子类。这一层会被所有页面引用,是页面样式所需依赖的最底层,不同风格的网站可以使用同一个 base 层,所以,应具有高度可移植性,力求精简和通用。该层相对稳定,基本不需要维护,可以简单地放在一个文件里,如 base.css。

css reset 即一开始就将浏览器的默认样式全部去掉,就是通过重新定义标签的样式,“覆盖”掉浏览器提供的默认样式。可以将常用的标签显式地罗列出来,避免使用“*”,如来自于 YUI 的部分 css reset 的代码:

/*CSS reset*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}

table{border-collapse:collapse;border-spacing:0;}

fieldset,img{border:0;}

address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}

ol,ul{list-style:none;}

caption,th{text-align:left;}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

q:before,q:after{content:”;}

abbr,acronym{border:0;}

通用原子类是一系列常用的基本类,包括:文字、定位、长度和边距,由于其原子性,除少数特殊类,大部分都只包含一句 css,如:.f12{font-size:12px;},由于其通用性,在保证命名有语义前提下,命名应尽量简短,如 paddingtop20 可以写成 pt20。通用原子类里有几个类较特殊,特别说明一下:

1).fl 类和.fr 类:除了设置 float:left 和 float:right 之外,还应设置 display:inline,可以解决 IE6 的双外边距 Bug。

   .fl{float:left;display:inline;}

   .fr{float:right;display:inline;}

2).bc 类:为使块级元素居中,还要设定宽度,可以把它和 .w100 等类同时使用,如:

   .bc{margin-left:auto;margin-right:auto;}

   .w100{width:100;}

3).clearfix 类:用于在父容器直接清除子元素浮动。

4).zoom 类:设置样式是 zoom:1,它是 IE 的专有属性,用以触发 hasLayout。

如果你想学习web前端可以来这个群,首先是291,中间是851,最后是189,里面可以学习和交流,也有资料可以下载。

2、common 层-组件级,模块化,重用

位于中间,提供组件级的 css 类。可以将页面内的元素拆分成一小块功能和样式相对独立的小“模块”,将大量重复地“模块”视为一个组件,放在 common 层里(“模块化”可以从样式和行为两个层面来考虑,与 common 层相关的是样式的模块化)。common 层相当于 MVC 模式中的 M(Model,模型),需尽可能将内部实现封装。 
(web前端学习交流群:291851189禁止闲聊,非喜勿进!)

common 层是网站级的,不同的网站有不同的 common 层,同一个网站只有一个 common 层,可以放在一个文件里,也可按功能划分放在多个文件里。在团队合作中,common 层最好由一个人负责,统一管理。

3、page 层 
网站中非高度重用的模块,可以放在 page 层里。page 层位于最高层,提供页面级的样式。如果网站规模不过于庞大,可以将所有 page 层放在一个文件里,根据页面配上注释,分块书写,便于维护。page 层 css 文件应越简越好,能用 base 层和 common 层的 css 解决的,尽量不要用到 page 层。

避免滥用子标签

低权重原则。

能用组合,不用继承。

驼峰命名用于区别不同单词,划线用于表明从属关系。

CSS sprite

  1. 技术是针对作为背景的图片,对与html文档设置的图片,不能合并到CSS Sprite大图,否则图片会影响页面可读性。
  2. 对于横向和纵向都平铺的图片,也不能使用CSS sprite;如果是横向平铺的,只能将所有横向平铺的图合并成一张大图,只能竖直排列,不能水平排列;如果是纵向平铺的,只能将所有纵向平铺的图合并成一张大图,只能水平排列,不能竖直排列。
  3. CSS sprite的图片定位可以使用bg2css小工具快速定位background-positon坐标,有利于提高开发速度。
  4. 好处是减少HTTP请求数减轻服务器压力,缺点是降低开发效率、增加维护难度。CSS Sprite大图中每个图片的维护改动都要谨慎,防止影响周围的图片。

网站是否使用CSS Sprite技术,主要取决于网站流量。

流量大的网站好处明显:减少HTTP请求数量,减轻服务器压力;(电商,微博,轻博,社区)

流量不大的网站代价很大:降低开发效率,增大维护难度(后台管理系统一般不适合使用)

CSS hack

1.IE条件注释法

该方法安全性、兼容行好,也是微软推荐的hack方法,但是不利于开发维护,需要维护多份css文件。比如涉及到针对不同版本IE的css。

<!--[if IE]><![endif]-->         只在IE下有效

<!--[if IE 6]><![endif]-->      只在IE6有效

<!--[if gt IE 6]><![endif]-->  只在IE6以上版本有效

注意:结合lte(小于等于)、lt(小于)、gte(大于等于)、gt(大于)、!(非)关键字使用。

2.选择符前缀法


“*html” 前缀只对IE6生效  "*+html"前缀只对IE7生效

.test{width:80px;}        /*IE 6 7 8*/

*html .test{width:70px;}  /*IE6*/

*+html .test{width:60px;} /*IE7*/

缺点:不能保证IE9,10不识别*html,*+html,有向后兼容风险。

3.样式属性前缀法:


如“_”只在IE6下生效,“*”在IE6和IE7下生效。同样有向后兼容隐患。

.test{width:80px;*width:70px;_width:60px;}

可用于内联样式:<div style="width:80px;*width:70px;_width:60px;"></div>

由于IE条件注释法不利于开发维护,实际中常用的hack方法常常是后两者。

display:inline-block 和 hasLayout

块级元素、行内元素

块级元素会独占一行,默认宽度自动填满其父元素宽度,可以设置width、height、margin、padding属性;

行内元素一行排满才会换行,宽度随元素内容多少变化,设置width、height属性无效,只有水平方向的margin、padding边距有效果。

常见的块级元素有div、p、table、fieldset、form、ul、ol、dl、h1~h6、hr、pre、address、blockquote、center、dir、menu、noframes、noscript。

常见内联元素有input span strong em a abbr acronym br img select textarea等等。

可以通过修改display属性值转行块元素和行内元素。

display的值除了block和inline,还有其他值,例如list-item、teble-cell等,但因为IE6和IE7浏览器支持的display类型很少,所以为兼容IE,真正能用的display类型只有block、inline和none三种。

IE6、IE7支持但不完全支持display:inline-block属性,但IE8+和FF等标准浏览器支持。

display:inline-block,行内的块级元素,它拥有块级元素的特点,可以设置长宽,可以设置margin和padding值,但它却不是独占一行,它的宽度并不占满父元素,而是和行内元素一样,可以和其他行内元素排在同一里。它集块级元素和行内元素的特点于一身,是个非常有用的display类型(web前端学习交流群:291851189禁止闲聊,非喜勿进!)

让IE6、IE7支持display:inline-block

利用hasLayout可以再不支持display:inline-blcok的IE6和IE7下模拟出display:inline-block的效果,实现IE6、IE7、IE8+和Firefox都兼容的display:inline-block的应用。但是也有一些问题需要特别注意:

  • 在IE6、IE7中不识别display:inline-block属性,但使用inline-block属性在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。
  • 在IE5.5中开始支持 inline-block 。你可以使用 inline-block 使对象获得布局而无需指定确切的高( height )和宽( width )。
  • IE6/IE7的inline-block属性只对原生默认的内联元素(span, a, em……)有效,对于块级元素(div,p,ul……)无效。 In IE 6 and 7 inline-block works only on elements that have a natural display: inline.IE doesn’t apply the value inline-block for the CSS display property on HTML elements that default to block level.
  • 两个结论: 1、IE6/7不识别inline-block,只是触发了layout,表现跟inline-block块元素表现一样。2、IE6/7不完全支持inline-block,只对内联元素有效。
  • 看官方的说法,确证对inline-block的认识。The following table shows Cascading Style Sheets (CSS) properties and corresponding values that, if set, cause an element to have layout. 
    下表列出一些CSS属性及其值,以下属性一旦设置,将触发元素的layout:
CSS propertyValue

display        inline-block

height        any value

float           left or right

position      absolute

width          any value

-ms-writing-modetb-rl

zoom          any value
  • 延伸问题:IE下块元素如何实现 display:inline-block 的效果? 
    有两种方法:

1、先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,让块元素呈递为内联对象(两个display 要先后放在两个 CSS 声明中才有效果,这是 IE 的一个经典 bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失)。代码如下:

div {display:inline-block;}

div {display:inline;}

说明:在IE下,display: inline-block只是触发了元素的layout。比如将display: inline-block给到div上,只能保证这个div拥有块元素的特征(可以设置宽度,高度等),但是还是行布局(产生换行)。接下来要设置display: inline,更改这个div的布局为内联布局(不产生换行)。

2、直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(可使用zoom:1 等)。代码如下:

div {display:inline; zoom:1;}

hasLayout

hasLayout设计的初衷是用于辅助块级元素的盒子模型的,它是用于块级元素的。如果用于行内元素,会引发一些特殊效果。(结合上面红色字体理解)

设置宽高属性width、height值都可以触发hasLayout,但是有时候带来副作用,现在常用zoom:1;来触发,极少数非常复杂的css设置情况zoom无效的时候,需要借助更为强大的“position:relative”来触发hasLayout。

haslayout 
是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)。

时间: 2024-10-30 03:02:23

《Web前端开发修炼之道》-读书笔记CSS部分的相关文章

《Web前端工程师修炼之道(原书第4版)》——移动专用网站

移动专用网站 自适应网站的替代方案,是建立一个完全独立的网站.一个单独的网址来为移动设备提供服务.移动网站的网址常用的前缀是m.或mobile.对于某些类型的网站,如果你知道手机用户和台式电脑用户具有不同的行为模式,建立移动专用网站是最好的解决办法.在移动专用网站上,最常用的功能需要在第一个屏幕上突出显示,而台式电脑网站上的一些额外功能(如促销)就被移除了.(这也会使你思考这些额外功能究竟为台式电脑网站提供了什么样的价值.) 图3-4对比了2012年中期Walgreen公司主网站和移动网站.你可

《Web前端工程师修炼之道(原书第4版)》——Web设计师是做什么的

Web设计师是做什么的 多年来,术语"Web设计"已经成为包罗万象.包含许多不同的学科的一个学科,包括用户体验设计.文档标记和编程等.本节介绍最基本的一些东西. 如果你正在设计自己的一个小网站,你会需要多个头衔.当然你可能没有注意到.想一下,日复一日的家居生活,需要你既是兼职厨师.清洁工.会计师.外交家.园丁,还得是建筑工人,但对你来说,都只是你的生活而已.同样,作为一个Web设计师,你需要是一名兼职平面设计师.作家.HTML作者和信息架构师,但对你来说,它都只是 "网页制作

《Web前端工程师修炼之道(原书第4版)》——我需要购买些什么

我需要购买些什么 毫无疑问,专业的Web设计师需要很多工具,包括硬件和软件.我的学生最常问的一个问题是:"我需要购买些什么呢?"我不能告诉你去买什么,但是我可以介绍一下这个行业的典型工具. 虽然在这里我列出的是最受欢迎的商业软件,但是它们同时都有免费软件和共享软件,你可以下载这些软件(试试看CNET的网站Download.com).稍做一些努力,不必花很多钱,你就可以完全创建一个网站. XML简介 如果你经常接触Web设计,你肯定听过XML(eXtensible Markup Lang

《Web前端工程师修炼之道(原书第4版)》——第3章 Web设计基本概念

第3章 Web设计基本概念 随着Web的成熟和设备访问数量的成倍增加,作为Web设计师和开发人员,我们的工作变得更加复杂.坦率地说,我无法在一本书中涵盖所有的内容.在本章接下来的部分,我将专注于介绍Web设计的基本部件:HTML元素.CSS样式.小试一下JavaScript和Web图像制作,这会为你的进一步发展奠定坚实的基础. 但在我们实质学习之前,我想介绍每一个Web设计师都需要知道的一些重要概念.我们将看到促进当代Web设计环境优化的一些思想和观念.本书后续的部分中,我会经常提到本章介绍的术

《Web前端工程师修炼之道(原书第4版)》——自我测验

自我测验 每章的最后都有一系列的问题,你可以通过回答这些问题来检查是否已经掌握了重要的信息.答案在附录A中. 1. 把下面这些Web专业人士和他们负责制作的产品匹配起来. A. 图像设计师 _ HTML 和 CSS文件 B. 产品部署者 _ PHP脚本 C. 用户体验设计师 _ Photoshop草图 D. Web程序员 _____故事板 2. W3C负责什么工作? 3. 把下面的Web技术和相应的工作匹配起来. A. HTML _____检查表单输入,以确保输入有效 B. CSS _____创

《Web前端工程师修炼之道(原书第4版)》——第1章我从哪里开始

第1章 我从哪里开始 Web的存在已经有20多年了,先后经历了令人兴奋的早期扩张.网络泡沫的破裂.创新的重生.有一件事情是肯定的,那就是网络作为沟通和商业的工具正在成为现实.而且不仅如此,网络也在影响着智能手机.平板电脑.电视等.懂得如何设计网页的程序员迎来了前所未有的机会. 通过教授Web设计课程和工作的经历,我可以满足所有对Web设计感兴趣的人的需求,无论这些人拥有什么样的背景.在此,请允许我介绍一下: "我有17年的印刷设计师从业经验,现在我所有的客户都需要Web设计服务." &

《Web前端工程师修炼之道(原书第4版)》——小结

小结为了总结Web是如何工作的,让我们追踪出现在屏幕上的每个网页所发生的事件(图2-5).① 你可以直接在浏览器上输入一个URL(如http://jenskitchensite.com),也可以单击页面上的某个链接来获取一个网页.URL包含获取互联网上目标Web服务器上的目标文件所需的一切信息.② 你的浏览器向以URL命名的服务器发送一个HTTP请求,以获取某个特定的文件.如果URL指定的是一个目录(而不是一个文件),就是在请求获取目录中的默认文件.③ 服务器寻找被请求的文件,并发送一个HTTP

《Web前端工程师修炼之道(原书第4版)》——内部网和外部网

内部网和外部网通常认为,一个网站可以被Web上的任何一个用户访问.然而,很多公司利用网站的信息分享和聚集能力在公司内部交流信息.这种特殊的网络称为内部网(intranet).这些网站的创建方式和功能与普通网站相似,只是这些网站被放在配有特殊安全设备(叫做防火墙)的电脑上,这种安全设备可以阻止外部用户访问.内部网有很多作用,例如,分享人力资源信息,或者提供访问数据库的权限.外部网(extranet)与内部网相似,不同之处是,外部网允许公司以外的用户访问.例如,一家制造公司可以为其用户提供一个密码,

《Web前端工程师修炼之道(原书第4版)》——关于浏览器

关于浏览器现在我们知道服务器完成服务的工作,但是另一半的工作由谁来完成呢?发送请求的软件叫做客户端(client).人们用桌面浏览器.手机浏览器和其他自助技术(如屏幕阅读器)作为客户端来获取Web上的文件和信息.服务器会把相应的文件返回给浏览器(在技术领域通常是指用户代理)来显示.请求和响应是通过我们之前提到过的HTTP协议来处理的.尽管我们谈过HTTP可以处理的"文件",它还可以用来传输图片.电影.音频文件.数据.脚本和其他通常构成网站或应用的Web资源.当我们想到浏览器时,通常的印