因为不是很清晰,于是我决定自己写一篇,即当复习。
什么是css?
css即是层叠样式表 (Cascading Style Sheets),用我的话来描述就是样式渲染
它不需要预编译,能直接被浏览器识别并解析。
横空出蓝的css3只是css的升级版本,写法一样,只是新增的些属性。
box-shadow(阴影效果)
border-colors(为边框设置多种颜色)
boder-image(图片边框)
text-shadow(文本阴影)
text-overflow(文本截断)
border-radius(圆角边框)
opacity(不透明度)
box-sizing(控制盒模型的组成模式):指定两个boxes接壤
resize(元素缩放):指定一个div元素,允许用户调整大小
outline(外边框)
background-origin(指定背景图片从哪里开始显示)
background-clip(指定背景图片从什么位置开始裁切)
background(为一个元素指定多个背景)
css或css3的写法示例
h1
{
color:orange
text-align:center
}
sass
Sass是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样可以正常使用Sass。只是必须先安装Ruby,然后再安装Sass。
//使用换行和缩进代表{}
h1
color:orange
text-align:center
// 也可以这样 与css写法一样
h1
{
color:orange
text-align:center
}
变量写法
$menuActiveBg: #eee //不严谨写法 可以不加分号
难道sass诞生只是为了写法不一样?NO,它的出现是因为有了css没有的运算 变量 作用域..,它比css更强大。
scss
它的功能比sass更多,但写法比css sass严谨。(我用这个scss是最多的)
h1
{
color:orange; //如果不加分号,这一块代码将无法识别
text-align:center;
}
scss变量
$menuActiveBg: #eee; //严格写法 必须有冒号和分号
less
不需要依赖于Ruby环境,就能直接安装使用。不过LESS安装分为两种:客户端和服务器端安装。
a:客户端 需要less.js脚本
b.服务端 常用的方式是利用node的包管理器(npm)安装LESS
写法基本同sass一样,但是区别是有的。可见
Sass/Scss 和 Less的区别 - 孤舟蓑翁 - 博客园
变量写法
@menuActiveBg: #eee;
等等 .....
stylus
编译器的安装同样最常见的是在node.js上面安装
它是集所有css scss sass less优点集一身的超级大英雄,我以后要多用它。
Stylus 特性
- 冒号可有可无
- 分号可有可无
- 逗号可有可无
- 括号可有可无
- 变量
- 插值(Interpolation)
- 混合(Mixin)
- 数学计算
- 强制类型转换
- 动态引入
- 条件表达式
- 迭代
- 嵌套选择器
- 父级引用
- Variable function calls
- 词法作用域
- 内置函数(超过 60 个)
- 语法内函数(In-language functions)
- 压缩可选
- 图像内联可选
- Stylus 可执行程序
- 健壮的错误报告
- 单行和多行注释
- CSS 字面量
- 字符转义
- TextMate 捆绑
- 以及更多!
除了写法上的不同外,后缀上的不同外,它们的编译器也是大不同的。
假如我的文章不够清晰,可移步见下面文章,写的也是很好。