本规范概述
制定本规范的目的在于使我们的CSS代码更加易于维护和重用,从而提升效率执行本规范时建议的流程 建议使用D(esign)C(oding)D(ebug)V(alidate)R(oundup),即DCDVR的流程。首先需要规划样式并分为共有样式和页面个性化样式,然后才开始编码,编码的同时进行Debug,Validate和代码片断的总结,而不是在所有模板都完成后才进行这三个步骤。
一、关于样式库构建规范
详见:http://aliceui.com/alice-css-guide/
二、selector 命名规范:
命名除 .fn- / .ui- / .sl- 外,可自定义命名。请慎用 selected current disabled first last success error
一般情况下,如果命名比较通用,比如 current,请限定在相应的上下文环境中。比如其父节点ID为#parent 等比较通用的命名,建议写成 #parent .current{},而非 .current{},即使是为了重用,也应该注意。只有在非常明确不会影响到其他组件工作,并且其他人不会写这种命名的情况下,才让它变成全局通用的。
作为JS接口的class或者ID,必须是以 J- 前缀开头的。除 JS 接口命名外,其他命名一律使用小写字母
三、注释:
组件注释:
/**
* @name: 组件名
* @overview: 组件介绍
* @require: 依赖的样式
* @author: 小鱼(sofish@163.com)
*/
块状或行内元素,都请使用 /* comment */ 注释,注释文字前后端保持各有一个空格
为了您的体验着想,一目了解的代码,就不要注释了,比如 “display:none; /* 让元素看不见 */” 工作还有很多啊,同学,请为了自己的体力着想。
四、CSS文件
文件编码必须使用utf-8(无BOM)
文件一律通过 link 链入 (NOT @import)
当只是单个页面使用时,才写在 <head> 的 <style> 中
五、Hack 规则
一般情况下,不要使用 IE 条件注释: <!–[if IE]><![endif]–>
通用 Hack
.all-IE{property:value\9;}
:root .IE-9{property:value\0/;}
.gte-IE-8{property:value\0;}
.lte-IE-7{*property:value;}
.IE-7{+property:value;}
.IE-6{_property:value;}
.not-IE{property//:value;}
@-moz-document url-prefix() { .firefox{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:value;} }
@media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit{property:value;} }
当然,强烈建议你使用更优雅的hack方式。那就是避免hack。或者在书写上,做点小trick。比如:
.selector .child{property:value;} /* for ie-6 */
.selector > .child{property:value;} /* except ie-6 */
关于Hack: 在firefox写完,IE有问题?还是其他浏览器也出现了。你知道IE Hack 能解决。我想,你也可能知道,用其他方法也能绕过。建议少用Hack。
六、书写规范:
1. 以如下写法为例:
第一种方式:(强烈推荐)
/* 区域模块-1 */
.tech, .ued{
background:#f60 url(alipay.com/orange.png) no-repeat 0 0;
}
/* 区域模块-2 */
.tech{
width:950px;
margin:0 auto;
}
.tech .wd{
width:620px;
float:left;
}
第二种方式:(如果让其他人看,请先格式化)
/* 区域模块-3 */
.ued{width:100%;padding:30px 50px;}
.ued .visual{display:inline-block;font:700 normal 12px/1.5 arial;}
2. 非常重要,需要你注意的点:
区域模块间用空行分隔
多个选择器写一起时,逗号(,)后紧跟一个空格
避免行内样式,即使是JS,也应该尽量使用class/ID来决定显示,而非行内样式
避免使用低效选择器(所以,别滥用class;当然,不滥用ID我相信你是知道的)详见:http://code.google.com/speed/page-speed/docs/rendering.html
尽量使用缩写,比如 font:700 normal 12px/1.5 arial; 一般不要写成
font-style:normal;
font-size:12px;
line-height:1.5;
font-family:arail;
通常需要使用缩写规则的:
padding: toprightbottomleft;
padding: top-bottomright+left;
padding: topleft-rightbottom;
padding: top-right-bottom-left;
如:padding:1px 2px3px4px;
margin: 同上
如使用像`red`这样的颜色名,采用小写;16进制写法使用大写;写3位,还是6位,自便:
color: red; color;#FFF; color:#ABCABC
background: colorimageUrlrepeatattachmentposition;
如:background:#ddd url(alipay-wd.png) no-repeatscroll10px20px;
border: sizestylecolor;
如: border:1px solid#ddd;
font: weightvariantstylesize/lineHeightfamily;
如 font:700 small-capsitalic12px/1.5 "Courier New"; font-weight统一用 500代替 normal, 用 700代替 bold;
list-style: typepositionimage;
如:list-style: squareinsideurl(alipay-wd.png);不过,通常我们要使用的是 list-style:none;
CSS3 书写规范:浏览器私有写法在前,标准写法在后
-moz-box-shadow: 1px2px3px#ddd;
-webkit-box-shadow: 1px2px3px#ddd;
box-shadow: 1px2px3px#ddd;
1.书写顺序
不强制书写顺序。但我们应该养成良好的习惯,让看代码的人更易理解。易读对于团队协作来说是非常重要的:1. 框架为先,细节次之比如写一个浮动容器的样式,我们应该先让这个容器的框架被渲染出来,让大家看到基本的网站框架。然后再再去渲染容器里面的内容。最终呈现给用户. 通常像 color font padding 之类的,写在后面。
.selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;}
2. 有因才有果
比如想使用”图片替换文字“技术,通常要使用的text-indent。如果我们使用标签的是 span:<span class="thepic">这个文字将被图片替换</span>我们应该是先将 span 变成”块级元素“(使用 display:block,虽然他永远不是块级元素),再将文字 indent。而不是先 indent 再变成块级的:
.thepic{display:block;text-indent:-9999em;}
又如我们,如果想让一个 span 使用 margin, 那么我们应该这样写:span{display:block;margin-bottom:10px;} 而非 span{margin-bottom:10px;display:block;}。因为没有 display 之前,行内元素是没有 margin 的。
七、IE私有特性
1. expression
记住一句话:无论什么时候,都不要使用它。用 Javascript 吧。更优雅,更灵活。
2. filter
应该尽量避免使用 AlphaImageLoader
可以适当在投影/发光/渐变/去色方面上使用
3. IE bug
常见BUG,详见:http://sofish.de/1400
八、如何规划你的 CSS 文件结构
1.一定要有全局设置
全局设置可以避免重复书写同样的东西。比如3人在一个项目中,假设项目中涉及到的链接有 10 种颜色,如果有全局重设,我们就可以统一设置颜色。如果没有,我们可能每个都会为自己所负责部分的链接定义相应的颜色。这样一来就导致多处定义,且定义不统一。以后维护需要到各个地方都改。这是很麻烦的事。另外就是css文件也会因此变大。所以,在写之前,大家应该先分析视觉稿,统一全局设置。
/* global reset */
body{padding:0;margin:0;font.....}
a{color:#07f;}
a:hover{color:#555;}
需要注意的是,一般情况下,不要直接给标签写样式。而应该使用 class。像下面这种写法,并不是很合适:
h1{font-size:30px}
h2{font-size:20px}
h3{font-size:10px;}
如果有另外一个 h2 也要使用 10px 的,而其他的都仍使用 20px 的,那可就不好办了。所以,推荐用这种方法:
/* global classes */
.text-size30{font-size:30px;}
.text-size20{font-size:20px;}
.text-size10{font-size:10px;}
<h2 class="text-size20">… <h2 class="text-size10">…
2.一定要模块化
有两点需要注意的,一是,注意代码重用的模块化;一是,注意 HTML 结构的模块化,而不是分块。
我们是这样重用的:
<div id="module-1" class="module">
<h3>TITLE</h3>
<p class="module-item">
some text
</p>
</div>
<div id="module-2" class="module">
< h3>TITLE</h3>
<p class="module-item">
some text
</p>
</div>
/* module, reuse style in module scrope*/
.module{}
.module-status{}
.module-item{}
.module-status .module-1-item{}
/* customize */
#module-1 .module-item{}
#module-2 .module-item{}
HTML 的模块化:我们应该这样写(他们的视觉是一体的,代码也应该是一体的):
<div id="module-1" class="module">
<h3>TITLE</h3>
<p class="module-item">
some text
</p>
</div> <!-- #module .module -->
而不是这样写:
<h3>TITLE</h3>
<!-- 第一块 -->
<div id="module-1" class="module>
<p class="module-item">
some text
</p>
</div> <!-- 第二块 -->
九、值得注意的事
1.Background Color:
一般我们都会写: background:url(path/to/image) no-repeat 0 0;
当元素背景是深色的时候,比如#000,我们通常会选择一种比较浅的颜色来做为文本的颜色,比如#fff,为了避免网速缓慢导致CSS已经 加载,而图片仍未加载完成或图片服务器挂掉时文本不可见,请尽量使用加上CSS定义的背景颜色,如:background:#e8edef url(path/to/image) no-repeat 0 0;
2. has Layout
别用轻易使用hack,IE下很多兼容性问题都是 has Layout 引起的。试着给元素加上:
display: inline-blockheight: (除 auto外任何值)
width: (除 auto外任何值)
float: (left或 right)
position: absolutewriting-mode: tb-rlzoom: (除 normal外任意值)
3. 代码测试:
一般情况下,我们需要测试通过的是电脑端的A-Grade浏览器:
Win XP Win 7 Mac 10.6.† iOS 3.† iOS 4.† Android 2.2.†
Safari 5.† A-grade
Chrome † (latest stable) A-grade
Firefox 4.† A-grade (upon GA release) A-grade (upon GA release)
Firefox 3.6.† A-grade A-grade A-grade
IE 9.0 A-grade (upon GA release)
IE 8.0 A-grade A-grade
IE 7.0 A-grade
IE 6.0 A-grade
Safari for iOS A-grade A-grade
WebKit for Android OS A-gradea
更多关于这个列表的资料,请看:http://developer.yahoo.com/yui/articles/gbs/
制定本规范的目的在于使我们的CSS代码更加易于维护和重用,从而提升效率执行本规范时建议的流程 建议使用D(esign)C(oding)D(ebug)V(alidate)R(oundup),即DCDVR的流程。首先需要规划样式并分为共有样式和页面个性化样式,然后才开始编码,编码的同时进行Debug,Validate和代码片断的总结,而不是在所有模板都完成后才进行这三个步骤。
一、关于样式库构建规范
详见:http://aliceui.com/alice-css-guide/
二、selector 命名规范:
命名除 .fn- / .ui- / .sl- 外,可自定义命名。请慎用 selected current disabled first last success error
一般情况下,如果命名比较通用,比如 current,请限定在相应的上下文环境中。比如其父节点ID为#parent 等比较通用的命名,建议写成 #parent .current{},而非 .current{},即使是为了重用,也应该注意。只有在非常明确不会影响到其他组件工作,并且其他人不会写这种命名的情况下,才让它变成全局通用的。
作为JS接口的class或者ID,必须是以 J- 前缀开头的。除 JS 接口命名外,其他命名一律使用小写字母
三、注释:
组件注释:
/**
* @name: 组件名
* @overview: 组件介绍
* @require: 依赖的样式
* @author: 小鱼(sofish@163.com)
*/
块状或行内元素,都请使用 /* comment */ 注释,注释文字前后端保持各有一个空格
为了您的体验着想,一目了解的代码,就不要注释了,比如 “display:none; /* 让元素看不见 */” 工作还有很多啊,同学,请为了自己的体力着想。
四、CSS文件
文件编码必须使用utf-8(无BOM)
文件一律通过 link 链入 (NOT @import)
当只是单个页面使用时,才写在 <head> 的 <style> 中
五、Hack 规则
一般情况下,不要使用 IE 条件注释: <!–[if IE]><![endif]–>
通用 Hack
.all-IE{property:value\9;}
:root .IE-9{property:value\0/;}
.gte-IE-8{property:value\0;}
.lte-IE-7{*property:value;}
.IE-7{+property:value;}
.IE-6{_property:value;}
.not-IE{property//:value;}
@-moz-document url-prefix() { .firefox{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:value;} }
@media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit{property:value;} }
当然,强烈建议你使用更优雅的hack方式。那就是避免hack。或者在书写上,做点小trick。比如:
.selector .child{property:value;} /* for ie-6 */
.selector > .child{property:value;} /* except ie-6 */
关于Hack: 在firefox写完,IE有问题?还是其他浏览器也出现了。你知道IE Hack 能解决。我想,你也可能知道,用其他方法也能绕过。建议少用Hack。
六、书写规范:
1. 以如下写法为例:
第一种方式:(强烈推荐)
/* 区域模块-1 */
.tech, .ued{
background:#f60 url(alipay.com/orange.png) no-repeat 0 0;
}
/* 区域模块-2 */
.tech{
width:950px;
margin:0 auto;
}
.tech .wd{
width:620px;
float:left;
}
第二种方式:(如果让其他人看,请先格式化)
/* 区域模块-3 */
.ued{width:100%;padding:30px 50px;}
.ued .visual{display:inline-block;font:700 normal 12px/1.5 arial;}
2. 非常重要,需要你注意的点:
区域模块间用空行分隔
多个选择器写一起时,逗号(,)后紧跟一个空格
避免行内样式,即使是JS,也应该尽量使用class/ID来决定显示,而非行内样式
避免使用低效选择器(所以,别滥用class;当然,不滥用ID我相信你是知道的)详见:http://code.google.com/speed/page-speed/docs/rendering.html
尽量使用缩写,比如 font:700 normal 12px/1.5 arial; 一般不要写成
font-style:normal;
font-size:12px;
line-height:1.5;
font-family:arail;
通常需要使用缩写规则的:
padding: toprightbottomleft;
padding: top-bottomright+left;
padding: topleft-rightbottom;
padding: top-right-bottom-left;
如:padding:1px 2px3px4px;
margin: 同上
如使用像`red`这样的颜色名,采用小写;16进制写法使用大写;写3位,还是6位,自便:
color: red; color;#FFF; color:#ABCABC
background: colorimageUrlrepeatattachmentposition;
如:background:#ddd url(alipay-wd.png) no-repeatscroll10px20px;
border: sizestylecolor;
如: border:1px solid#ddd;
font: weightvariantstylesize/lineHeightfamily;
如 font:700 small-capsitalic12px/1.5 "Courier New"; font-weight统一用 500代替 normal, 用 700代替 bold;
list-style: typepositionimage;
如:list-style: squareinsideurl(alipay-wd.png);不过,通常我们要使用的是 list-style:none;
CSS3 书写规范:浏览器私有写法在前,标准写法在后
-moz-box-shadow: 1px2px3px#ddd;
-webkit-box-shadow: 1px2px3px#ddd;
box-shadow: 1px2px3px#ddd;
1.书写顺序
不强制书写顺序。但我们应该养成良好的习惯,让看代码的人更易理解。易读对于团队协作来说是非常重要的:1. 框架为先,细节次之比如写一个浮动容器的样式,我们应该先让这个容器的框架被渲染出来,让大家看到基本的网站框架。然后再再去渲染容器里面的内容。最终呈现给用户. 通常像 color font padding 之类的,写在后面。
.selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;}
2. 有因才有果
比如想使用”图片替换文字“技术,通常要使用的text-indent。如果我们使用标签的是 span:<span class="thepic">这个文字将被图片替换</span>我们应该是先将 span 变成”块级元素“(使用 display:block,虽然他永远不是块级元素),再将文字 indent。而不是先 indent 再变成块级的:
.thepic{display:block;text-indent:-9999em;}
又如我们,如果想让一个 span 使用 margin, 那么我们应该这样写:span{display:block;margin-bottom:10px;} 而非 span{margin-bottom:10px;display:block;}。因为没有 display 之前,行内元素是没有 margin 的。
七、IE私有特性
1. expression
记住一句话:无论什么时候,都不要使用它。用 Javascript 吧。更优雅,更灵活。
2. filter
应该尽量避免使用 AlphaImageLoader
可以适当在投影/发光/渐变/去色方面上使用
3. IE bug
常见BUG,详见:http://sofish.de/1400
八、如何规划你的 CSS 文件结构
1.一定要有全局设置
全局设置可以避免重复书写同样的东西。比如3人在一个项目中,假设项目中涉及到的链接有 10 种颜色,如果有全局重设,我们就可以统一设置颜色。如果没有,我们可能每个都会为自己所负责部分的链接定义相应的颜色。这样一来就导致多处定义,且定义不统一。以后维护需要到各个地方都改。这是很麻烦的事。另外就是css文件也会因此变大。所以,在写之前,大家应该先分析视觉稿,统一全局设置。
/* global reset */
body{padding:0;margin:0;font.....}
a{color:#07f;}
a:hover{color:#555;}
需要注意的是,一般情况下,不要直接给标签写样式。而应该使用 class。像下面这种写法,并不是很合适:
h1{font-size:30px}
h2{font-size:20px}
h3{font-size:10px;}
如果有另外一个 h2 也要使用 10px 的,而其他的都仍使用 20px 的,那可就不好办了。所以,推荐用这种方法:
/* global classes */
.text-size30{font-size:30px;}
.text-size20{font-size:20px;}
.text-size10{font-size:10px;}
<h2 class="text-size20">… <h2 class="text-size10">…
2.一定要模块化
有两点需要注意的,一是,注意代码重用的模块化;一是,注意 HTML 结构的模块化,而不是分块。
我们是这样重用的:
<div id="module-1" class="module">
<h3>TITLE</h3>
<p class="module-item">
some text
</p>
</div>
<div id="module-2" class="module">
< h3>TITLE</h3>
<p class="module-item">
some text
</p>
</div>
/* module, reuse style in module scrope*/
.module{}
.module-status{}
.module-item{}
.module-status .module-1-item{}
/* customize */
#module-1 .module-item{}
#module-2 .module-item{}
HTML 的模块化:我们应该这样写(他们的视觉是一体的,代码也应该是一体的):
<div id="module-1" class="module">
<h3>TITLE</h3>
<p class="module-item">
some text
</p>
</div> <!-- #module .module -->
而不是这样写:
<h3>TITLE</h3>
<!-- 第一块 -->
<div id="module-1" class="module>
<p class="module-item">
some text
</p>
</div> <!-- 第二块 -->
九、值得注意的事
1.Background Color:
一般我们都会写: background:url(path/to/image) no-repeat 0 0;
当元素背景是深色的时候,比如#000,我们通常会选择一种比较浅的颜色来做为文本的颜色,比如#fff,为了避免网速缓慢导致CSS已经 加载,而图片仍未加载完成或图片服务器挂掉时文本不可见,请尽量使用加上CSS定义的背景颜色,如:background:#e8edef url(path/to/image) no-repeat 0 0;
2. has Layout
别用轻易使用hack,IE下很多兼容性问题都是 has Layout 引起的。试着给元素加上:
display: inline-blockheight: (除 auto外任何值)
width: (除 auto外任何值)
float: (left或 right)
position: absolutewriting-mode: tb-rlzoom: (除 normal外任意值)
3. 代码测试:
一般情况下,我们需要测试通过的是电脑端的A-Grade浏览器:
Win XP Win 7 Mac 10.6.† iOS 3.† iOS 4.† Android 2.2.†
Safari 5.† A-grade
Chrome † (latest stable) A-grade
Firefox 4.† A-grade (upon GA release) A-grade (upon GA release)
Firefox 3.6.† A-grade A-grade A-grade
IE 9.0 A-grade (upon GA release)
IE 8.0 A-grade A-grade
IE 7.0 A-grade
IE 6.0 A-grade
Safari for iOS A-grade A-grade
WebKit for Android OS A-gradea
更多关于这个列表的资料,请看:http://developer.yahoo.com/yui/articles/gbs/
发表评论
-
大小不固定的图片和多行文字的垂直水平居中
2013-01-23 11:28 593http://www.zhangxinxu.com/study ... -
css样式
2012-11-03 12:24 397<html> <head> &l ... -
<转>CSS HACK经典收藏
2012-06-03 20:24 5751.区别不同浏览器,CSS hack写法: 区别IE与FF: ... -
<转>CSS大美集
2012-06-03 19:36 620一、当文字与图片在一行,需要将文字与图片底对齐,需要这样写: ... -
盒子边界及定位属性
2012-05-26 18:28 601一、盒子边界 1、大部分html元素的盒子属性(padding ... -
浮动后父级高度显示设置
2012-05-26 18:10 528<html> <head> &l ... -
margin负值设置理解
2012-05-26 18:07 987<html> <head> ... -
公用共样式
2012-05-23 15:40 644使用@import url();导入公用样式时“;“必须加上, ...
相关推荐
48<br>4.2.1 开始编写文档:XML声明和根元素... 48<br>4.2.2 联赛(League)、(分部)Division和(球队)Team数据的XML化... 49<br>4.2.3 球员数据的XML化... 52<br>4.2.4 球员统计数据的XML化... 53<br>4.2.5 将...
125<br>5.4.8 CSS还是XSL. 129<br>5.5 本章小结... 130<br>第6章 结构完整的XML文档... 131<br>6.1 XML文档的组成... 131<br>6.2 置标和字符数据... 132<br>6.2.1 注释... 132<br>6.2.2 实体引用... 134<br>6.2.3 ...
<p>css</p> </body> CSS基础选择器编写 ID选择器:规定用#来定义(名字自定义) 针对某一个特定的标签来使用,只能使用一次。css中的ID选择器以”#”来定义。 <style type="text/css"> #mytitle { b
<style type="text/css"></style> 使用内部样式表,进一步将表现和结构分离,可以同时为多个元素设置样式,方便后期的维护 3.外部样式表 将样式表编写到外部的CSS文件中,然后通过link标签将外部文件引入 ...
标记在使用时,用尖括号 "<>",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法:<标记>内容</标记> Demo : 1、创建 p 标记 --<p>...</p> 2、创建 div 标记 -- <div></div> 3、创建 ...
看上面的"结构树",其中<myfile>是父元素,<title>,<author>是它的子元素,而<myfile>又是<filelist>的子元素。象<title>这样没有包含任何子元素的最后一级元素我们也称之为"页元素"。 4.Parser(解析软件) Parser...
CSS核心基础--CSS样式规则 CSS样式 如果希望网页美观、大方,并且升级轻松、维护方便,就需要使用CSS,实现结构与表现的分离。 CSS样式 在HTML编写过程中我们除了应用基本的标签元素还会使用css样式来丰富界面使之有...
在编写CSS代码的时候,我们会出现多个样式规则作用于用一个元素的情况,例如 复制代码代码如下:header> <nav class=”nav-main” id=”navigation”>Here background</nav></header>header nav { background-color: ...
编写 CSS 样式时,我习惯遵守这些规则: class 名称以连字符(-)连接,除了下文提到的 BEM 命名法; 缩进 4 空格; 声明拆分成多行; 声明以相关性顺序排列,而非字母顺序; 有前缀的声明适当缩进,从而对齐...
前端文档描述CSS命名规则前端文档描述CSS命名规则前端文档描述CSS命名规则
编写CSS使得表格显示下面的样式。 font-size:25px; color:red; font-size:30px; background-color:blue; 2 id选择器,可以为标有特定id值的HTML元素指定样式规则。 id选择器 定义id选择器的语法格式 使用id选择器...
<iron> <iron>组件提供了使用(也称为flexbox)的简单方法。 请注意,这是一个旧元素,它是在所有现代浏览器都具有非前缀的flex样式之前编写的。 因此,如今,您实际上不再需要使用此元素,并且可以直接在代码中...
编写优秀 CSS 代码的 8 个策略 这篇文章的目的不在于规则手册,而在于你正在编写CSS时的指南。希望能帮助大家找到自己的流程,而这篇文章的目标是让你的CSS一致,简单,易于使用。
编写HTML代码的第一条规则是用标签将文本括起来。... 在开始标记<>和结束标记之间插入文本时,请务必将</> ...DOCTYPE html> ... 链接到CSS文件: <link rel =“ stylesheet” href =“ ... 创建段落: <p> </ p> HTM
Postcss-relaxed-unit是用于单位转换的postcss插件,使用自定义单位可以更轻松地编写CSS。 您可以定义一个规则来确定自定义单位和目标单位之间的映射关系,并且可以使用一些运算符来计算目标值(例如add , sub , ...
LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性,如变量、继承、运算、嵌套等,更方便CSS的编写和维护。 先看下段less代码片段,感受...
在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <link rel="stylesheet" href="URL../.css"> 3.CSS样式特征 1.继承性 必须是父子(有层叠嵌套的关系)结构 大部分的css效果是可以 2.优先级 1...
LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器...
然后是摸块布局设计,页面总体布局设计、链接页面的CSS的文件、要遵 循设计页面的通用规则,设计#heard对象部分由网页的logo部分和导航区构成,在 是设计#content对象部分,content分为三列,第一行由分为头片新闻区...