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 标准的制定过程:
- 提交提案
- Notes
- 成立工作组
- 工作草案
- 候选推荐
- Proposed Recommendations
- 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 浏览器 |
样式中有使用属性前缀的情况时,把标准属性放到最后书写
揭开浮动布局的秘密
清除浮动的两种方法:
- 在需要的地方添加定义了
clearn:both
的空标签 - 对父元素使用
: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 | @font-face { |
使用反射让文字倒映
1 | box-reflect: <方向><间距><渐变效果> |
字体阴影—光晕、浮雕、投影效果
1 | text-shadow: <水平阴影的位置><垂直阴影的位置>[模糊的距离][阴影的颜色] |
字体描边
1 | text-stroke: <描边宽度><描边颜色> |
字体分栏
1 | column-count: <分列数量> |
处理文字溢出和破字
1 | text-overflower: ... |
第 5 章 背景和颜色
设定背景图片的大小
1 | background-size: contain; //缩放 |
利用图层叠加实现多背景
1 | background-image: url(1.png) 10px 10px no-repeat, |
使用图片背景的 origin 和 clip 属性
用于指定背景图片的起始位置
1 | background-origin: border-box; |
颜色模式
RGB、RGBA、HSLA
透明颜色
1 | opacity: 0.1; |
语法糖
渐变
线性渐变、放射渐变
1 | background: linear-gradient(left, red, blue); |
第 6 章 更个性的边框
圆角边框
1 | border-radius: 2px; |
边框阴影
1 | box-shadow: <水平阴影的位置><垂直阴影的位置>[模糊距离][阴影尺寸][阴影颜色][将外阴影改为内阴影] |
图片边框
通过 resize 属性来改变输入框的大小
1 | tedtare { |
第 7 章 变换和动画
css 的变换类型
transform
rotate(旋转)、skew(扭曲)、scale(比例缩放)
使用 transition 制作交互动画
1 | transition: [属性][过渡时间][过度函数][延迟时间] |
使用 @keyframes 制作动画
@keyframes 必须配合 animation
可参考的 CSS 动画资源
第 8 章 媒介查询和响应式设计
媒介类型=各种浏览器终端
1 | @media screen { |
认识响应式网页设计
响应式设计原则:
- 小屏幕只显示高优先级内容
- 提供清晰和友好的手指操作链接
- 体验的一致性
- 考虑操作移动设备的习惯
媒介查询的基本语法
1 | @media screen and (max-width: 600px) { |
设备
portrait、landscape(横向和纵向)
1 | @media screen and (orientation: portrait) { |
第 9 章 更简便的布局—弹性盒子
认识弹性盒子
1 | .father { |
操作元素
控制元素的方向
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模块