仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 735|回复: 6
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:静态的款式表lesscss:复杂进修lesscss语法

[复制链接]
变相怪杰 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 22:53:59 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
搜索引擎更加友好。相对与传统的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:28 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
老尸 该用户已被删除
板凳
发表于 2015-2-3 12:49:36 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
若天明 该用户已被删除
地板
发表于 2015-2-9 03:21:04 | 只看该作者
可以使用 CSS 检查工具进行设计。
简单生活 该用户已被删除
5#
发表于 2015-2-26 20:28:28 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
再见西城 该用户已被删除
6#
发表于 2015-3-8 17:45:36 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
小魔女 该用户已被删除
7#
发表于 2015-3-16 11:33:43 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 08:27

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表