承德市外贸网站建设,怎样学网站建设,seo搜索优化公司,诸暨市建设局网站如何组织CSS-分层 应用 css 的能力分两部分#xff1a;一部分是css的API#xff0c;重点是如何用css控制页面内元素的样式#xff1b;另一部分是css框架#xff0c;重点是如何对 css 进行组织。如何组织 css 可以有多种角度#xff0c;例如按功能划分#xff0c;或者按区… 如何组织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 类除了设置 floatleft 和 floatright 之外还应设置 displayinline可以解决 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。
2、common 层-组件级模块化重用
位于中间提供组件级的 css 类。可以将页面内的元素拆分成一小块功能和样式相对独立的小“模块”将大量重复地“模块”视为一个组件放在 common 层里“模块化”可以从样式和行为两个层面来考虑与 common 层相关的是样式的模块化。common 层相当于 MVC 模式中的 MModel模型需尽可能将内部实现封装。 web前端学习交流群328058344 禁止闲聊非喜勿进
common 层是网站级的不同的网站有不同的 common 层同一个网站只有一个 common 层可以放在一个文件里也可按功能划分放在多个文件里。在团队合作中common 层最好由一个人负责统一管理。
3、page 层 网站中非高度重用的模块可以放在 page 层里。page 层位于最高层提供页面级的样式。如果网站规模不过于庞大可以将所有 page 层放在一个文件里根据页面配上注释分块书写便于维护。page 层 css 文件应越简越好能用 base 层和 common 层的 css 解决的尽量不要用到 page 层。 避免滥用子标签 低权重原则。
能用组合不用继承。
驼峰命名用于区别不同单词划线用于表明从属关系。 CSS sprite 技术是针对作为背景的图片对与html文档设置的图片不能合并到CSS Sprite大图否则图片会影响页面可读性。 对于横向和纵向都平铺的图片也不能使用CSS sprite如果是横向平铺的只能将所有横向平铺的图合并成一张大图只能竖直排列不能水平排列如果是纵向平铺的只能将所有纵向平铺的图合并成一张大图只能水平排列不能竖直排列。 CSS sprite的图片定位可以使用bg2css小工具快速定位background-positon坐标有利于提高开发速度。 好处是减少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*/ 缺点不能保证IE910不识别*html,* html有向后兼容风险。
3.样式属性前缀法 如“_”只在IE6下生效“*”在IE6和IE7下生效。同样有向后兼容隐患。.test{width:80px;*width:70px;_width:60px;}可用于内联样式div stylewidth: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前端学习交流群328058344 禁止闲聊非喜勿进 让IE6、IE7支持display:inline-block 利用hasLayout可以再不支持displayinline-blcok的IE6和IE7下模拟出displayinline-block的效果实现IE6、IE7、IE8 和Firefox都兼容的displayinline-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 propertyValuedisplay 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 或 blocklayout 不会消失。代码如下
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。
