- 浏览: 50991 次
- 性别:
- 来自: 大连
最新评论
-
zhangshoukai:
任何问题都应该从两个角度看,lz是个心态比较积极的人,希望大家 ...
[RIA]HTML5怎么就成了RIA“杀手”? -
xiangkun:
brightACE 写道在嵌入SWF的html里面加入如下的功 ...
[Flex]Flex编程注意之自动获取焦点、监听全局键盘事件 -
f1120:
2012就世界末日了,还想到2022
[RIA]HTML5怎么就成了RIA“杀手”? -
TonyLian:
2022年??
[RIA]HTML5怎么就成了RIA“杀手”? -
namespace:
关于网页里获得焦点,真是帮了大忙了。
[Flex]Flex编程注意之自动获取焦点、监听全局键盘事件
详细请看:http://s.k-zone.cn/less1
我是一个Flex开发人员,因此就无法避免与HTML、Javascript、CSS打交道。
如果使用HTML + Javascript的话,我一般采用JQuery的方式,毕竟对于像我这样“半吊子”的Web开发者来说,JQuery是一个非常不错的选择。
但是对于CSS来说,就不是那么方便了,只能一点一点的写CSS。
无意中发现了一个比较有意思的应用:LESS。
那么什么是LESS呢?
简言之:使用编程的方法是来写CSS。
举例说明:
CSS方式:
#header { color: #4D926F; }
h2 { color: #4D926F; }
LESS方式:
@brand_color: #4D926F;
#header { color: @brand_color; }
h2 { color: @brand_color; }
是不是很简单?那么LESS如何使用和安装?
使用LESS需要有ruby的环境的支持!关于如何安装ruby,就不是本篇文章的内容了,具体大家可以G一下:)
当安装完ruby后,则需要安装lessc,地址:http://s.k-zone.cn/lessdown
编译方式: $lessc style.less style.css
LESS具有如下几种语法,我大致翻译一下,原文在:http://s.k-zone.cn/less
变量 (variables)
对不同地方同一个值进行变量描述,然后统一定义并且在需要的地方赋值。
CSS写法:
#header { color: #4D926F; }
h2 { color: #4D926F; }
LESS写法:
#header { color: @brand_color; }
h2 { color: @brand_color; }
引用(mixins)
在一个类中可以引用另一个类的名称做为该类的属性。(在这点上与variables有些相似,只不过variables定义的变量,而mixins定义的属性集合)
嵌套规则(nested rules)
将相同的内容放到一起,这样避免CSS块过长,不易阅读。
表达式(operations)
使用上述四种就可以大大简化你的CSS开发了。是不是很简单呢?
评论
只要你熟悉了css,那些问题都不是问题。
发表评论
-
Flash Player 10.1 and AIR 2.0 消息汇总
2009-11-18 09:03 1223详细请看:http://www.k-zone.cn/zblog ... -
Kenshin走进哈工程
2009-11-18 09:00 1044详细请看:http://www.k-zone.cn/zblog ... -
Adobe Flex
2009-11-10 08:21 1140详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flash Builder Beta 2 and Flash Catalyst Public Beta 2 download
2009-10-09 10:48 1108详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flash Builder Beta 2 serial number(sn)
2009-10-09 10:47 1315详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Adobe BrowserLabe
2009-09-03 08:07 1127详细请看:http://www.k-zone.cn/zblog ... -
[Flex]构建基于Flex技术的Blog程序(一)
2009-09-01 08:08 2074详细请看:http://www.k-zone.cn/zbl ... -
[Flex]Flex SDK 4(Gumbo)浅析ASDoc - ASDoc MXML应用篇
2009-08-06 14:18 1476详细请看:http://s.k-zone.cn/asdoc3上 ... -
http://www.k-zone.cn/zblog/post/silvergreen.html
2009-07-31 15:31 1071详细请看:这是完全基于Flex SDK 4(Gumbo)基础上 ... -
[Flex]Flex SDK 4(Gumbo)浅析ASDoc - ASDoc Tags参数篇
2009-07-30 17:32 1268详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)浅析ASDoc - Flash Builder 4配置篇
2009-07-29 10:07 1110详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)自定义皮肤 - SilverGreen(Spark和Halo)预览版
2009-07-27 08:04 975详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)自定义皮肤 - SilverGreen(Spark和Halo)预览版
2009-07-27 08:02 1153详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)浅析SDK 4默认的Spark样式与Halo样式
2009-07-19 10:10 940详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)改善的Layout和Scroller(二)
2009-07-16 13:07 1110详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)改善的Layout和Scroller(一)
2009-07-15 18:12 1393详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin(二)
2009-07-06 09:39 781详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flash Builder 4 编辑器配色方案 - 黑色系
2009-07-02 20:36 1820详细请看:http://www.k-zone.cn/zblog ... -
[Flex]Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin(一)
2009-06-30 09:38 811在Flex SDK 4(Gumbo)新增加了一个包:spark ... -
[RIA]HTML5怎么就成了RIA“杀手”?
2009-06-25 13:27 2150详细请看:http://www.k-zone.cn/zbl ...
相关推荐
在本综合案例中,我们将探讨如何使用弹性布局(Flexbox)和LESS预处理器来构建响应式的现代网页。弹性布局是CSS3中的一项重要技术,它为网页元素的布局提供了强大的灵活性,尤其在处理多设备、多屏幕尺寸的场景下...
CSS(Cascading Style Sheets)是一种用于描述网页及应用程序用户界面呈现方式的样式表语言。Zeal是一款强大的离线文档浏览器,它为开发者提供了快速查阅各种编程语言和框架文档的便利。在这个“CSS-Zeal官方文档”...
- 盒模型布局(display: block/inline-block/flex/grid):更现代的布局方式,Flexbox用于一维布局,Grid则适用于二维布局。 6. **CSS响应式设计** - 媒体查询(media queries):允许内容根据设备的视口大小变化...
1. **CSS基本概念**:包括CSS的定义、作用,以及如何通过内联、内部和外部样式表来应用CSS。 2. **选择器**:如ID选择器 (#id)、类选择器 (.class)、元素选择器 (element)、属性选择器、伪类和伪元素等,它们是CSS...
《CSS案例(CHM)》是一本专注于CSS编程实践的资源集合,软件大小为4.77MB,以rar格式压缩。这个压缩包包含了数百个CSS的实例,旨在帮助Web页面设计师进行参考和学习,解决他们在实际工作中遇到的各种样式布局问题。这...
- 可以通过CSS的`display`和`flex`属性来控制布局。 **Document(文档)** - HTML和CSS共同构成的网页文件。 - 可以通过CSS来增强文档的可读性和美观性。 **Father(父元素)** - DOM树中某元素的直接上级元素。 -...
4. **选择器层次**:使用`>`、`+`、`~`等操作符来指定元素之间的关系。 **五、CSS3新特性** 1. **过渡(Transitions)**:平滑地改变一个或多个属性的值。 2. **动画(Animations)**:通过关键帧定义更复杂的动效...
* CSS 布局是指使用 CSS 来实现网页的布局,常见的 CSS 布局方式包括: + 盒模型布局 + flex 布局 + grid 布局 + float 布局 六、CSS 定位 * CSS 定位是指使用 CSS 来实现元素的定位,常见的 CSS 定位方式包括...
最后,CSS预处理器如Sass和Less,可以提升编写和维护大型样式表的效率,它们允许变量、嵌套规则、混合和函数等编程概念,使得CSS代码更加模块化和可维护。 总的来说,“网页设计之css样式表手册”应该是一本全面的...
【标题】:“十分漂亮的纯CSS透明...总的来说,这个“十分漂亮的纯CSS透明展开菜单打包”是一个实用的网页设计资源,它结合了美观与功能,可以帮助开发者快速构建出吸引人的交互式菜单,而且无需复杂的JavaScript编程。
8. **CSS预处理器**:如Sass或Less,它们允许更高级的组织和复用代码。 通过这个项目,你将有机会实战这些HTML和CSS知识点,并提升自己的网页设计能力。无论是创建静态网站,还是为复杂的前端框架打下基础,这个...
首先,我们要明白CSS API并不是一个传统的编程接口,而是指通过JavaScript对CSS进行操作的各种方法。这些方法主要来自于CSSOM(CSS Object Model),允许我们在运行时动态修改样式,实现更复杂的交互和动画效果。 1...
此外,还可以使用CSS预处理器如Sass或Less来组织代码,提高可维护性和复用性。例如,你可以创建一个包含通用样式和特定状态样式的mixin。 总的来说,创建超酷的CSS分页效果并不复杂,关键在于理解HTML结构和CSS的...
例如,我们可以使用`color`属性设置文本颜色,`font-size`调整字体大小,`background-color`设定背景色,以及使用`display`属性来处理元素的布局模式,如`block`、`inline`或`flex`。 【响应式设计】 随着移动设备...
11. **CSS预处理器(Preprocessors)**:如Sass和Less,它们扩展了CSS的功能,引入变量、嵌套规则、混合(mixins)等编程特性,使CSS编写更高效且易于维护。 12. **Flexbox**:弹性盒布局模型,用于创建灵活的、...
`media queries`允许根据设备特性(如屏幕尺寸、分辨率)来应用不同的CSS样式。手册会介绍如何创建自适应的布局,确保网页在不同设备上都能良好显示。 五、CSS3新特性 1. 颜色和背景:渐变(gradient)、阴影(shadow...
此外,作者还可能深入讲解CSS预处理器(如SASS、LESS)的使用,它们可以增加CSS的可读性、可维护性以及扩展性。利用预处理器,开发者可以使用更高级的编程功能(比如变量、混合、函数等)来编写更为复杂和模块化的...
Sass、Less和Stylus等CSS预处理器允许使用变量、嵌套规则、函数等编程特性,提升CSS的可维护性和复用性。 八、CSS优化与性能 优化CSS包括减少选择器复杂度、避免使用@import、合并CSS文件、使用Sprite图等,以提高...
1. Sass/LESS:CSS预处理器,引入变量、嵌套、混合等编程特性,提高代码复用性和可维护性。 2. PostCSS:CSS后处理器,通过插件扩展CSS功能,支持未来的CSS语法,转换为浏览器可识别的样式。 通过本教程的学习,你...
3. **布局技术**:CSS提供了多种布局方式,如流体布局、网格布局(`display: grid`)、Flexbox(弹性盒子布局,`display: flex`)和CSS Grid。 4. **响应式设计**:利用媒体查询(`@media`规则)来根据设备的视口大小...