当前位置: 网站建设 > 网页设计 > 建站经验 >

快速生成CSS--LESS学习总结

时间:2013-03-02 04:03来源:未知 作者:admin 点击:

标签:快速生成CSS--LESS学习总结 CS(18)快速(9)生成(1)总结(38)上边(2)CSS--LESS(1)学习(19)就是(19)
上边就是css3的多少个后果类, 快速定位页面中复杂 CSS BUG ,比方调用圆角办法,直接写#div{.round;}就会生成默认圆角5px的效果,要生成10px的呢,就写成#div{, 必知的css属性知识 .round(10px);}是不是很方便呢?对于颜色跟长度单位,还可以进行+ - * /四则运算,可以实现快捷变更长度色彩。定义宽度@width:2px;@width *3;就表现6px,颜色类似运算。如果想定义字符串如:@str:'www.x.com';当然官方还有高等利用介绍,不外个别写cs
快速生成CSS--LESS学习总结》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302341932013.htm

 上边就是css3的多少个后果类,快速定位页面中复杂 CSS BUG,比方调用圆角办法,直接写#div{.round;}就会生成默认圆角5px的效果,要生成10px的呢,就写成#div{,必知的css属性知识.round(10px);}是不是很方便呢?对于颜色跟长度单位,还可以进行+ - * /四则运算,可以实现快捷变更长度色彩。定义宽度@width:2px;@width *3;就表现6px,颜色类似运算。如果想定义字符串如:@str:'www.x.com';当然官方还有高等利用介绍,不外个别写css用的很少,这里重要是常用的,就是用来方便写css,我这里这是列举了css3的几种方法,由于css3为了兼容多种浏览器,往往css代码特别多,这是一个简化css代码的好方式,css2里面有些也可以本人定义,咱们还可以写一个页面,专门用来定制自己需要的类的效果。

Tag:总结   学习   生成   疾速    

    使用LESS不需要什么基本,特别是编程职员,使用起来更是得心应手。在使用之前,懂得一下留神处所,解释单行用//就可以了,多行用/*   正文*/,和PHP是一样的,变量用@作为开始,这里的变量实在和常量一样,只能定义一次,当前不能修正的。导入外部css或less文件用@import '文件名.css' ,这里提醒一下,less的文件用less作为扩大名的。如果你的页面中想引入less可以同css一样的引入方法,个人不倡议这么做,固然有人说less也很快,我提议是写好less而后生成css更好。

? /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){     border-radius:@radius;     -webkit-border-radius: @radius;     -moz-border-radius: @radius; } /* 盒子阴影 @right_left 右边阴影为正数 左边负数 @bottom_top 下边阴影为正数 上边负数 @box 阴影大小 @box_color 暗影颜色 */ .boxshadow(@right_left:5px,@bottom_top:5px,@box:5px,@box_color:#b6ebf7){  ,必知的CSS7个知识点;   box-shadow:@arguments;    -moz-box-shadow:@arguments;    -webkit-box-shadow:@arguments; } /* 文字阴影,可以指定多组阴影 @right_left1 右边阴影为正数 左边负数 @bottom_top1 下边阴影为正数 上边负数 @text 阴影大小 @text_color 阴影颜色 */ .textshadow(@right_left1:5px,@bottom_top1:5px,@text:5px,@tetx_color:#b6ebf7){     text-shadow:@arguments; } /* 透明度 或渐变 1为不透明 0透明 css3 rgba(110, 142, 185, .4)!important;前三个是颜色值 后一个是透明值 用来兼容所有浏览器 */ .rgba(@rgba_a:.4,@rgb_b:40){     filter: alpha(opacity=@rgb_b);      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{rgb_b})";      opacity:@rgb_a;     } /* 列布局 @c1 列数 @c2 列宽 @c3 列间距 @c4 边框样式 */ .column(@c1:3,@c2:310px,@c3:10px,@c4:1px solid #ccc){     column-count:@c1;     column-width:@c2;     column-gap:@c3;     column-rule:@c4;     -webkit-column-count:@c1;     -webkit-column-width:@c2;     -webkit-column-gap:@c3;     -webkit-column-rule:@c4;     -moz-column-count:@c1;     -moz-column-width:@c2;     -moz-column-gap:@c3;     -moz-column-rule:@c4; } /* 画轮廓 就是内部框 @outline 款式 @outline1 间距 负数在内部 */ .outline(@outline:1px solid #699,@outline1:-10px){     outline:@outline;     outline-offset:@outline1; } /*背景渐变 @start 渐变开端颜色 @end 停止颜色 */ ,微妙的圆角参数 纯CSS圆角Tab.bg(@start:#00ffff,@end:#9fffff){     background:-webkit-gradient(linear,0 0, 0 100%,from(@start),to(@end));     background:-moz-linear-gradient(top,@start,@end);     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@start,endColorstr=@end,grandientType=0); } /* 旋转角度 IE不支持 滤镜支撑0,1,2,3 */ .rotate(@ro:30deg){         transform: rotate(@ro);       -webkit-transform: rotate(@ro);       -moz-transform: rotate(@ro);       -o-transform: rotate(@ro);       filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } /* 过度动画  id是css属性 2s适度时间 0s是开始时间 ease-in进入 */ .tran(@t:id 2s ease-out 0s){     transition:@t;     -moz-transition:@t;     -o-transition:@t;   ,很酷的CSS发光按钮实现方法;  -webkit-transition:@t; } --> [网站建设之]倏地生成CSS--LESS学习总结

对做一个站,css写起来真的很费时光,不是有多灾,而是要在多种阅读器兼容,特殊是像我这种用editplus作为工具的人,写css快不到哪里去,偶然在博客园看到有人先容LESS,去看了一下,真的很不错,用来生成css很方便,我说的不是用在名目中,而是用来生成css很快,平凡写一些css相似函数吧,用的时候只须要调用生成,很快就能够写好类,十分便利,这个年代,时间,还有比这更可贵的吗?

页面中只要要这样就可以了

<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>

第一行是你的less代码,第二行是用来解析less的,假如你也想像我一样天生css来应用,到

    好了,less就说这么多,其实记住一个,就是用@定义变量,然后像写函数写css,就可以使用了,下载less:

    下面先来分享我定义的css3常用代码的less函数


(责任编辑:网站建设)
快速生成CSS--LESS学习总结相关文章
上一篇:快速定位页面中复杂 CSS BUG 下一篇:怎么修改别人的页面或模板
回到顶部