CSS 是一种描述 HTML 文档样式的语言。
CSS 描述应该如何显示 HTML 元素。

CSS

组成

选择器、声明块（属性和值）

选择器

简单选择器（根据名称、id、类来选取元素）

组合器选择器（根据它们之间的特定关系来选取元素）
后代选择器 (空格)、子选择器 (>)、相邻兄弟选择器 (+)、通用兄弟选择器 (~)
伪类选择器（根据特定状态选取元素）
selector:pseudo-class {property: value;}
伪元素选择器（选取元素的一部分并设置其样式）
selector::pseudo-element {property: value;}
属性选择器（根据属性或属性值来选取元素）
CSS [attribute]

属性和值

颜色：color：RGB\HEX\HSL
背景：background
边框：border
外边距：margin
内边距：padding
高宽：height和width
轮廓：outline

文本：color、text-align、text-decoration、text-transform、text-indent、text-shadow
字体：font-family、font-style、font-size
图标：Font Awesome
链接：
a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

CSS使用

外部 CSS

内部 CSS

行内 CSS

This is a heading

注释

/ 这是css注释 /

CSS应用

响应式设计

网格布局

Flex布局

CSS动画

浏览器支持

CSS函数

CSS单位

绝对单位
相对单位

Less

给 CSS 加点料。

使用

在 Node.js 环境中使用 Less ：
npm install -g less
> lessc styles.less styles.css
在浏览器环境中使用 Less ：

新功能

变量（Variables）
混合（Mixins）
嵌套（Nesting）
运算（Operations）
转义（Escaping）
函数（Functions）
命名空间和访问符
映射（Maps）
作用域（Scope）
注释（Comments）
导入（Importing）

Sass

世界上最成熟、最稳定、最强大的专业级CSS扩展语言！
完全兼容 CSS3
在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
通过函数进行颜色值与属性值的运算
提供控制指令 (control directives)等高级功能
自定义输出格式

安装

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。
ruby -v
sass安装
gem install sass
gem install compass

编译sass

sass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。
这里推荐koala&codekit,它们是优秀的编译器，界面清晰简洁，操作起来也非常简单。鉴于koala是免费编译器。

快速入门

使用变量

嵌套CSS规则

导入Sass文件

静默注释

混合器

使用选择器继承来精简CSS