仓酷云

标题: 来讲讲：静态的款式表lesscss:复杂进修lesscss语法 [打印本页]

作者: 变相怪杰 时间: 2015-1-15 22:53
标题: 来讲讲：静态的款式表lesscss:复杂进修lesscss语法
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
破洛洛文章简介：lesscss是静态的款式表言语，他让css增添变量，组合，函数，运算等语法。这个项目标网站在国际会见不到，人人都懂的。

lesscss是静态的款式表言语，他让css增添变量，组合，函数，运算等语法。这个项目标网站在国际会见不到，人人都懂的。
lesscss利用办法有两种：
1.页面增加一个less.js的文件，css利用style.less文件后缀来编写，不外必要有服务器的情况撑持
<linkrel="stylesheet/less"type="text/css"href="styles.less">
<scriptsrc="less.js"type="text/javascript"></script>
2.在服务器端利用node.js来编译，node.js利用less的办法以下：
先利用npm保证理器来安装
$npminstallless
然后就能够利用命令行来编译紧缩less代码了
$lesscstyles.less>styles.css
上面是一些lesscss的语法：
利用变量
//LESS
@color:#4D926F;
#header{
color:@color;
}
h2{
color:@color;
}
/*CompiledCSS*/
#header{
color:#4D926F;
}
h2{
color:#4D926F;
}
2.组合
//LESS
.rounded-corners(@radius:5px){
border-radius:@radius;
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
}
#header{
.rounded-corners;
}
#footer{
.rounded-corners(10px);
}
/*CompiledCSS*/
#header{
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#footer{
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
3.选择器

//LESS

#header{
h1{
font-size:26px;
font-weight:bold;
}
p{font-size:12px;
a{text-decoration:none;
&:hover{border-width:1px}
}
}
}

/*CompiledCSS*/

#headerh1{
font-size:26px;
font-weight:bold;
}
#headerp{
font-size:12px;
}
#headerpa{
text-decoration:none;
}
#headerpa:hover{
border-width:1px;
}
4.变量预算

//LESS

@the-border:1px;
@base-color:#111;
@red:#842210;

#header{
color:@base-color*3;
border-left:@the-border;
border-right:@the-border*2;
}
#footer{
color:@base-color+#003300;
border-color:desaturate(@red,10%);
}

/*CompiledCSS*/

#header{
color:#333;
border-left:1px;
border-right:2px;
}
#footer{
color:#114411;
border-color:#7d2717;
}
5.import内部css
@import"lib.less";
@import"lib";
通用援用了lesscss，我们就能够将css写得模块化，有更好的浏览性。
起首能够经由过程import讲网站的款式分红n个模块，当页面必要哪一个模块就援用哪一个。还能够将css3那些新增的功效界说成类库，因为有函数的功效，那些圆角，暗影之类款式只必要界说一次就能够了。讲页面必要利用到的次要文本，边框，背景致界说成变量给后续款式利用，到时网站作风必要改动，色彩也很好的修正。
我团体以为先阶段lesscss的不敷有：
1.css3的款式不克不及主动补全其他扫瞄器的hack。
2.利用nodejs在window体系下的撑持不敷，不外比来方才不久公布了一个nodejswindow版，这方面估量在不久的未来会改良
3.编纂器，ide对lesscss语法缩进撑持不敷友爱。
</p>
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。

作者: 海妖 时间: 2015-1-17 19:44
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 老尸 时间: 2015-2-3 12:49
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 若天明 时间: 2015-2-9 03:21
可以使用 CSS 检查工具进行设计。

作者: 简单生活 时间: 2015-2-26 20:28
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 再见西城 时间: 2015-3-8 17:45
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 小魔女 时间: 2015-3-16 11:33
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

欢迎光临仓酷云 (http://ckuyun.com/)