CSS 高效开发实战

《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

优秀的国产框架

0%