CSS 高效开发实战

Posted on Edited on In

《CSS高效开发实战 CSS3 LESS SASS Bootstrap Foundation》

第 1 章 CSS3 与现代 Web 标准

未来 Web 标准的发展

Web技术逐渐摆脱了对Adob的依赖：Flash被抛弃，大量使用图片的情况也一去不复返；转而使用HTML5和CSS3的新增功能替代。
随着个人电脑性能的提高一些逻辑可以放到客户端执行，减轻了服务器的压力的同时也提高了用户体验。
移动互联网迅猛发展，Web开发也必须顺应这一潮流。

什么是 CSS3

CSS3是CSS2.1的扩展，CSS3被划分为几个模块，每个模块都有自己独立的创作者和时间表，使得整个CSS3规范的发布不需要停下来等待某个难缠的小条目。
CSS3的扩展主要有两个方面：
一方面将很多以前需要图片和Flash的效果转换为了浏览器自身的图形渲染
一方面支持更多的选择器，让我们可以更轻松的定义样式

CSS3 的特性

圆角 border-radio
阴影 box-shadow、text-shadow
渐变 gradients
变换 transform
动画 （需要使用@keyframes）
媒介查询

检测浏览器是否支持 CSS3

Less

第 2 章 温故知新—HTML、CSS 基础

W3C 标准、HTML 语言和 CSS

Web 标准的制定过程：

  1. 提交提案
  2. Notes
  3. 成立工作组
  4. 工作草案
  5. 候选推荐
  6. Proposed Recommendations
  7. Recommendation

不可不知的盒子模型

margin、border、padding、element

跨浏览的 CSS

条件注释的控制符

项目 范例 说明
! [!if IE] NOT运算符
lt [if lt IE 5.5] 小于运算符
lte [if lte IE 6] 小于等于运算符
gt [if gt IE 6] 大于运算符
gte [if gte IE 6] 大于等于运算符
() [if(lte IE 6)] 用于子表达式，以配合布尔运算符
& [if(lte IE 9)&(gt IE 6)] AND运算符
l [if(gt IE 6)l(!IE)] OR运算符

理解浏览器的属性前缀

前缀 浏览器
-webkit- webkit 核心浏览器包括 Chrome、Safari等
-moz- 火狐浏览器
-ms- IE 浏览器
-o- Opera 浏览器

样式中有使用属性前缀的情况时，把标准属性放到最后书写

揭开浮动布局的秘密

清除浮动的两种方法：

  1. 在需要的地方添加定义了clearn:both的空标签
  2. 对父元素使用:after伪类

看穿 CSS 的定位技术

相对定位：static、relative、
绝对定位：absolute（相对于上一个不为static的父元素）、fixed（相对于浏览器窗口）

第 3 章 使用 CSS 选择器让样式表更健壮

基础选择器

element、.class、#id、*、>、 、+、[attr]、,、select1select2

伪类选择器

:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child、:first-of-type、:last-of-type、:only-child、:only-of-type、:root、:empty、:target、:enabled、:disenabled、:checked、:not(s)

第 4 章 设计更炫目的字体

添加和使用自定义字体

1
2
3
4
@font-face {
    font-family: customFont;
    src: url('customFont.ttf');
}

使用反射让文字倒映

1
box-reflect: <方向><间距><渐变效果>

字体阴影—光晕、浮雕、投影效果

1
text-shadow: <水平阴影的位置><垂直阴影的位置>[模糊的距离][阴影的颜色]

字体描边

1
text-stroke: <描边宽度><描边颜色>

字体分栏

1
2
3
column-count: <分列数量>
column-gap: <槽宽度>
column-rule: <槽样式>

处理文字溢出和破字

1
text-overflower: ...

第 5 章 背景和颜色

设定背景图片的大小

1
2
background-size: contain;   //缩放
background-size: cover;     //裁切

利用图层叠加实现多背景

1
2
background-image: url(1.png) 10px 10px no-repeat,
                  url(2.png) 20px 20px no-repeat;

使用图片背景的 origin 和 clip 属性

用于指定背景图片的起始位置

1
2
background-origin: border-box;
background-clip: padding-box;

颜色模式

RGB、RGBA、HSLA

透明颜色

1
opacity: 0.1;

语法糖

渐变

线性渐变、放射渐变

1
2
3
4
background: linear-gradient(left, red, blue);
background: linear-gradient(45deg, red, blue, green);

background: radial-gradient(bottom left, red 5%, blue 25%, green 30%);

第 6 章 更个性的边框

圆角边框

1
2
border-radius: 2px;
border-radius: 2%;

边框阴影

1
box-shadow: <水平阴影的位置><垂直阴影的位置>[模糊距离][阴影尺寸][阴影颜色][将外阴影改为内阴影]

图片边框

通过 resize 属性来改变输入框的大小

1
2
3
tedtare {
    resize: none;
}

第 7 章 变换和动画

css 的变换类型

transform
rotate（旋转）、skew（扭曲）、scale（比例缩放）

使用 transition 制作交互动画

1
transition: [属性][过渡时间][过度函数][延迟时间]

使用 @keyframes 制作动画

@keyframes 必须配合 animation

可参考的 CSS 动画资源

第 8 章 媒介查询和响应式设计

媒介类型=各种浏览器终端

1
2
3
@media screen {

}

认识响应式网页设计

响应式设计原则：

  1. 小屏幕只显示高优先级内容
  2. 提供清晰和友好的手指操作链接
  3. 体验的一致性
  4. 考虑操作移动设备的习惯

媒介查询的基本语法

1
2
3
@media screen and (max-width: 600px) {

}

设备

portrait、landscape（横向和纵向）

1
2
3
@media screen and (orientation: portrait) {

}

第 9 章 更简便的布局—弹性盒子

认识弹性盒子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.father {
    display: box;
}

son1: {
    box-flex: 1;
}
son2: {
    box-flex: 3;
    //width: 500px;
}
son3: {
    box-flex: 1;
}

操作元素

控制元素的方向
box-orient: inline-axis;
box-orient: block-axis;

控制元素对齐
box-align: start; //start、end、center、baseline
box-pack: start; //start、end、center、justify

控制元素显示顺序
box-direction: reverse; //normal、reverse、inherit

第 10 章 CSS 常用工具

使用 Prefix free 处理 CSS3 跨浏览器兼容

应用 Normalize 统一不同浏览器下的样式

应用 Grunt 进行 CSS 压缩

第 11 章 流行的 CSS 布局设计

固定布局

使用960作为container的值可以为栅格提供更多的组合条件
栅格系统主要由：列、槽、外边距组成，一般将container分为 12/16/24 列
常用的栅格系统有960 Grid System

流式布局

流式布局不用考虑container的值，直接将其设置为100%进行计算。计算法则和固定栅格是一致的，通过结合最大/最小宽度可以避免流式布局在窗口宽度太窄或者太宽时出现错乱

响应式布局

主要使用媒介查询实现

第 12 章 Bootstrap 框架实战

认识 BootStrap

使用Less编写，由Twitter于2011年8月开源

Bootstrap 入门

Bootstrap 的栅格系统

.col-xs-
.col-sm-
.col-md-
.col-lg-

使用 Bootstrap 的基本样式

标题、全局设置、表格、表单、按钮、响应式工具、工具类

使用 Bootstrap 的组件

下拉菜单、按钮组、input控件组、导航、列表组、分页、标签与Badge、缩略图、面板、进度条

Bootstrap 中的 JavaScrip 特效

模态对话框、标签页切换、Tooltip、弹出框、提示信息、按钮、折叠、幻灯片

定制 Bootstrap

其他 Bootstrap 资源

Bootstrap 中文网、Bootswatch、Bootsnipp

第 13 章 Foundation 框架实战

认识 Foundation

使用 SASS 编写，移动优先，尺寸单位多使用 em、rem等相对单位。不兼容 IE8 及以下

Foundation 的安装和使用

使用 Foundation 栅格系统

.columns
.small-
.medium-
.large-

块网格

Foundation 基本样式

标题、列表、按钮、面板、缩略图、视频、可见性

导航系统

面包屑导航、侧栏导航、头部导航、子导航

Foundation 中的 JavaScript 特效

幻灯片、Clearing lightboxes、弹出层显示、长页面滚动效果、下拉按钮、侧向展开收起的头部导航、表单验证、提示信息、鼠标上移时的注释说明、页面第一次访问时出现的介绍窗口、手风琴展开收起效果、Tab 切换内容

定制 Foundation

第 14 章 LESS 和 SASS

CSS 的缺陷

无法定义变量、无法重复代码、计算问题、作用域和命名空间

LESS 其实更多

LESS介绍、LESS 使用基础、使用变量和操作符、使用 Mixin 混入、内嵌规则、运算

使用 SASS

SASS介绍、SASS安装和使用、使用变量、计算、使用@import导入、使用@extend继承、使用@mixin混入、使用@function定义函数、控制语句

使用 SASS 的扩展库 Compass

CSS3模块、Reset模块、Utilities模块

第 15 章 其他 CSS 框架简介

轻量级框架代表—Pure CSS

手机页面框架—Ratchet

优秀的国产框架