文章: 阅读:

Less 基础知识

Less（Leaner Style Sheets 的缩写）是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护和扩展、方便制作主题、扩充。Less 可以运行在 Node、浏览器和 Rhino 平台上。服务器端最容易的安装方式就是通过 npm。Less 可以通过 npm 在命令行上运行；在浏览器上作为脚本文件下载；或者集成在广大的第三方工具内。
CSSLess

阅读全文 >>

Sass 导入

Sass 可以帮助我们减少 CSS 重复的代码，节省开发时间。可以按照不同的属性来创建一些代码文件，如：变量定义的文件、颜色相关的文件、字体相关的文件等。类似 CSS，Sass 支持 @import 指令。@import 指令可以让我们导入其他文件等内容。CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但 Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。导入后我们就可以在主文件中使用导入文件等变量。包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。此外，也可以导入 CSS 文件。
CSSSass

阅读全文 >>

Sass 函数

Sass 定义了各种类型的函数，这些函数我们可以通过 CSS 语句直接调用。Sass 字符串相关函数，Sass 数字相关函数，Sass 列表(List)相关函数，Sass 映射(Map)相关函数，Sass 选择器相关函数，Sass Introspection 相关函数，Sass 颜色相关函数。
CSSSass

阅读全文 >>

Sass 继承

extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 extend 就显得很有用。extend 很好的体现了代码的复用。
CSSSass

阅读全文 >>

Sass 混合

mixin 指令允许定义一个可以在整个样式表中重复使用的样式。include 指令可以将混入（mixin）引入到文档中。混入 (mixin) 通过 mixin 指令来定义。include 指令可用于包含一混入。混入中也可以包含混入。混入可以接收参数。可以向混入传递变量。混入的参数也可以定义默认值。有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。
CSSSass

阅读全文 >>

Sass 嵌套

Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight，text-align, text-transform 和 text-overflow。在 Sass 中，我们可以使用嵌套属性来编写它们。
CSSSass

阅读全文 >>

Sass 变量

变量用于存储一些信息，它可以重复使用。Sass 变量可以存储以下信息，字符串、数字、颜色值、布尔值、列表、null 值。Sass 变量使用 `$` 符号。Sass 变量的作用域只能在当前的层级上有效果，如下所示 h1 的样式为它内部定义的 green，p 标签则是为 red。
CSSSass

阅读全文 >>

Sass 基础知识

Sass (英文全称 Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。Sass 是一个 CSS 预处理器。是 CSS 的扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。完全兼容所有版本的 CSS。Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。Sass 文件后缀为 .scss。
CSSSass

阅读全文 >>

CSS Animation 动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。要创建 CSS3 动画，需要了解 @keyframes 规则。@keyframes 规则是创建动画。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。指定至少这两个 CSS3 的动画属性绑定向一个选择器，规定动画的名称。规定动画的时长。必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是 0。
CSSCSS

阅读全文 >>

CSS 3D Transform 3D转换

CSS3 允许您使用 3D 转换来对元素进行格式化。可以使用 2D 或 3D 转换来转换元素。rotateX() 方法，围绕其在一个给定度数 X 轴旋转的元素。rotateY() 方法，围绕其在一个给定度数 Y 轴旋转的元素。Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法。
CSSCSS

阅读全文 >>

CSS 2D Transform 2D转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。转换的效果是让某个元素改变形状，大小和位置。可以使用 2D 或 3D 转换来转换元素。translate() 方法，根据左 (X 轴) 和顶部 (Y 轴) 位置给定的参数，从当前元素位置移动。translate 值（150px，100px）是从左边元素移动 150 个像素，并从顶部移动 100 像素。rotate() 方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。rotate 值（30deg）元素顺时针旋转 30 度。
CSSCSS

阅读全文 >>

CSS Transition 过渡

CSS3 中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用 Flash 动画或 JavaScript。CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容，指定要添加效果的 CSS 属性。指定效果的持续时间。
CSSCSS

阅读全文 >>

CSS Gradient 渐变

CSS3 渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。以前，必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3 定义了两种类型的渐变（gradients），线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向，径向渐变（Radial Gradients）- 由它们的中心定义。
CSSCSS

阅读全文 >>

CSS Appearance 用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。box-sizing 属性允许以确切的方式定义适应某个区域的具体内容。outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。CSS3 中，resize 属性指定一个元素是否应该由用户去调整大小。
CSSCSS

阅读全文 >>

CSS Layout 网页布局

网页布局有很多种方式，一般分为以下几个部分，头部区域、菜单导航区域、内容区域、底部区域。头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo。菜单导航条包含了一些链接，可以引导用户浏览其他页面。底部区域在网页的最下方，一般包含版权信息和联系方式等。
CSSCSS

阅读全文 >>