狠狠撸

IndiOffice4.6技能培训
——CSS基础

2011-02-14 | sanmaozhao.com

> 你是否使用过CSS？
> 你对CSS的理解？

sanmaozhao.com

什么是CSS？

> Cascading Style Sheets/层叠样式表
> 用于为结构化文档（HTML/XML）添加样式
> 最新版本为CSS2.1/CSS3正开发中

sanmaozhao.com

用CSS能做些什么？

> 修改字体
> 设置颜色、背景
> 复杂布局
> 用户交互

http://knb.im/css3/
（当然画图不是CSS的主要功能）

sanmaozhao.com

为什么要学CSS？

> 旧的前端开发模式已经过时
> Web 1.0：HTML/CSS混乱嵌套、表格布局
> Web 2.0：内容/表现分离、CSS布局

> 4.6版引入新的前端开发模式
> 定制开发需要掌握CSS技能

> 后续版本引入xPages开发，CSS更加重要

sanmaozhao.com

CSS好学么？

> CSS有些晦涩/抽象
> 不过还好可以参考的资料很多
> 本课程也会帮助大家快速入门
> 深入/系统的内容还需要大家多下功夫

sanmaozhao.com

议程

> 背景知识
> CSS基础概念
> 基本CSS视觉模型
> 颜色和背景
> 文本属性
> 浮动和定位
> 其他知识/技巧

sanmaozhao.com

4.6版新的前端开发模式

> Web标准的遵从
> 便于支持多浏览器
> 利用先进的技术（CSS3圆角、阴影等）

> 内容与表现的分离
> 优化代码结构
> 明确前后台分工
> 利于重构
> 为换肤功能打好基础

sanmaozhao.com

顿别尘辞：
快速切换布局

sanmaozhao.com

Web页的三层结构

> 以内容为中心
> 通过CSS改变展现效果
Javascript 行为
> 使用JS添加用户交互
CSS 展现

HTML
内容（结构+数据）

sanmaozhao.com

内容、展现、行为分离

> 语义化的HTML
> 不使用展现类的标签：font、center等

> 外联CSS/JS文件，不在HTML中内嵌
> 利于前后台的分工
> 利于页面的重构

sanmaozhao.com

渐进增强

通过CSS增加展现效果
HTML描述内容

通过JS增加交互、滑动条控件

sanmaozhao.com

浏览器模式

> 所有浏览器都有两类模式
> 怪癖模式（Quirks Mode）
> 为了兼容老旧的网页，去模拟早期浏览器（如 IE5.5）的非
标准实现
> 标准模式（Standards Mode）
> 尽可能的按照标准去执行

> 通过 DOCTYPE 控制
> 4.6新增页面均使用标准模式

sanmaozhao.com

顿别尘辞：
怪异模式和标准模式

sanmaozhao.com

将CSS引入HTML

> 不要使用行内样式
<p style="color: red">

> 不要使用内嵌样式
<style type="text/css">
p { color: red; }
</style>

> 推荐使用外联样式
<head>
<link rel="stylesheet" href="name.css"
type="text/css"/>
</head>
sanmaozhao.com

CSS代码结构

> 选择器决定样式所应用到的元素
> 属性决定修改何种样式
> 值将属性修改为何值
选择器声明块

声明声明

H1 { color: red; background: yellow; }

属性值属性值
sanmaozhao.com

基础CSS选择器

> 元素选择器 h1 {color: red;}
> 通配选择器 * {color: red;}
> 类选择器 .warning {color: red;}
> ID选择器 #main-nav {color: red;}

sanmaozhao.com

属性选择器

> 简单属性选择 img[alt]
> 精确匹配 input[type="text"]
> 列表值匹配 img[title~="Figure"]
> 子串匹配
> 以某值开头 a[href^="http://"]
> 以某值结尾 span[class$="cloud"]
> 包含某值 a[href*="smartdot.com"]

sanmaozhao.com

通过文档结构选择

> 后代选择器 h1 em
> 子元素 h1>em
> 相邻兄弟 h1+p

sanmaozhao.com

伪类选择器

> 超链接 :link
> 访问过的超链接 :visited
> 拥有焦点的元素 :focus
> 鼠标指针停留的元素 :hover
> 被用户激活的元素 :active
> 作为父元素
第一个子元素的元素 :first-child

sanmaozhao.com

组合多种选择器

> p.warning
> a[href][title]
> .content .warning
> .warning.urgent
> .content li:first-child
> ul ol em

sanmaozhao.com

选择器分组

> 通过逗号将选择器分组

h1 {color: black;}
h2 {color: gray;} h1, h3 {color: black;}
h3 {color: black;} h2, h4 {color: gray;}
h4 {color: gray;}

sanmaozhao.com

顿别尘辞：
CSS选择器

sanmaozhao.com

哪个规则生效？

HTML
> <h1 class=“warning”>警告文本</h1>

CSS:
> h1 {color: gray;}
> body h1 {color: green;}
> h1.warning {color: red;}

sanmaozhao.com

特殊性

> 特殊性的大小决定哪个规则生效
> 特殊性由选择器的组件决定
> 特殊性有四个级别
1. 行内样式
2. ID选择器
3. 类/伪类/属性选择器
4. 元素/伪元素选择器
> 特殊性相同时，后声明的生效

sanmaozhao.com

特殊性：样例
选择器特殊性
Style=“” 1, 0, 0, 0
#wrapped #content {} 0, 2, 0, 0
#content .date {} 0, 1, 1, 0
div#content {} 0, 1, 0, 1
#content {} 0, 1, 0, 0
p.comment .date {} 0, 0, 2, 1
p.comment {} 0, 0, 1, 1
div p {} 0, 0, 0, 2
p {} 0, 0, 0, 1
sanmaozhao.com

继承

> 后代元素可以继承祖先元素的样式
> 有些属性可以继承，有些则不可以
> 继承的：颜色/字体/列表样式…
> 不继承：布局属性/边框/背景…

如果边框也能继承…
sanmaozhao.com

特殊性与继承（Firebug查看li元素）

sanmaozhao.com

开发工具

> IE8开发工具
> 寻找样式来源
> 分析元素布局
> 临时测试样式
> 禁用缓存
> 调节窗口大小

> Firebug

sanmaozhao.com

顿别尘辞：
开发工具

sanmaozhao.com

颜色

> 命名颜色 red
> 十六进制RGB #FF0000
> 简写十六进制 #F00
> 函数式RGB rgb(255,0,0)
rgb(100%,0%,0%)

sanmaozhao.com

长度单位

> 相对长度单位
> px（像素）
> em（等同于font-size的大小）
> ex（小写 x 的高度，部分浏览器处理为em/2）

> 绝对长度单位
> in（英寸）
> cm（厘米）
> pt （点，72pt = 1in ）
> …
sanmaozhao.com

实践：
CSS基本概念

sanmaozhao.com

元素的分类

> 块级元素
> 元素的前后生成换行
> 盒模型为矩形
> 可以包含块级元素和行内元素
> p, h1-h6, div, ul, li

> 行内元素
> 元素的前后没有换行/多个行内元素可位于一行
> 只能包含行内元素
> strong, span, a
sanmaozhao.com

正常流下的行内/块元素

sanmaozhao.com

块级元素盒模型

外边距(margin): top right bottom left;
边框(border)
内边距(padding)
宽(width)

内容区
高(height)

sanmaozhao.com

块级元素盒模型

外边距(margin): top right bottom left;
边框(border)
内边距(padding)
宽(width)
背景区(background)
内容区
高(height)

sanmaozhao.com

块级元素格式化

> display属性的值为block
> 通过width/height指定宽高
> 只有外边距/宽/高可以为自动值
> 只有外边距可以为负值
> 内边距默认值为0
> 边框默认值为无

sanmaozhao.com

块级元素格式化
auto 负 auto auto 负
左外边距+左边框+左内边距+内容区宽度+右内边距+右边框+右外边距=包含块宽度

包含块
border
padding
自动外边距 width
Content Area
height

负外边距
border
padding
width
Content Area
自动宽度 height

border
padding
width
Content Area
height
固定宽度
sanmaozhao.com

行内元素格式化

> display属性的值为inline
> 不能通过width/height指定宽高
> 宽高由内容决定
> 不能设置垂直外边距
> 通过line-height调节行间距
> 通过vertical-align调整垂直对齐

sanmaozhao.com

行内格式化
行间距=行高-字体大小
行间距/2
内容区字体大小行高
基线 (font-size) (line-height)
行间距/2

行内框包含块

行框
基线

sanmaozhao.com

实践：
CSS视觉模型

sanmaozhao.com

颜色

> 前景色
> 通过color属性设置
> 影响边框属性（border-color未设置时）
> 影响表单元素（按钮/复选框等）

> 背景色
> 通过background-color设置

select {color: rgb(33%,33%,33%);}
sanmaozhao.com
input {color: gray;}

背景图像

> 指定图像地址 background-image
> url(bg23.gif)

> 关联 background-attachment
> scroll 随元素滚动（默认值）
> fixed 相对于浏览器视窗固定

sanmaozhao.com

背景图像

> 重复 background-repeat
> repeat 水平垂直都平铺（默认值）
> repeat-x 水平平铺
> repeat-y 垂直平铺
> no-repeat 不平铺，仅显示一次

repeat-y repeat-x
sanmaozhao.com

背景图像

> 定位 background-position
> 相对于内边距边界
> 0% 0% 左上角（默认值）
> center 水平垂直皆居中
> right top 右上角
> 33% 66% 水平方向1/3，垂直方向2/3处
> 20px 20px 从左上角向右/向下各偏移20像素
> -30px 50% 水平从左边界向左30像素/垂直居中

sanmaozhao.com

背景图像定位样例

sanmaozhao.com

背景属性简写

> 所有背景属性可以汇总到background属性

background: white url(bg.gif) top left repeat-y fixed;
background: white url(bg.gif);

sanmaozhao.com

字体

> 系列 font-family
> tahoma,arial,宋体

> 大小 font-size
> 9pt 9点（绝对长度）
> 12px 12像素（相对长度）

> 加粗 font-weight
> normal 不加粗（默认值）
> bold 加粗

sanmaozhao.com

字体

> 风格变形 font-style
> normal 非斜体（默认值）
> italic 斜体
> 行高 line-height
> 1.5 行高为字体大小的1.5倍
> 所有字体属性可以简写到font属性
font: italic bold 12px/1.5 tahoma,arial,宋体;
font: 12px tahoma,arial,宋体;

sanmaozhao.com

文本属性

> 缩进 text-indent

> 垂直对齐 vertical-align

sanmaozhao.com

文本属性

> 水平对齐 text-align

sanmaozhao.com

文本属性

> 文本装饰 text-decoration

sanmaozhao.com

文本属性

> 空白处理 white-space
<p>This paragraph has a great many s p a c e s within its textual
content, but their collapse will not prevent line
wrapping or<br>line breaking.</p> 源代码

white-space: normal;

white-space: pre;

white-space: nowrap;
sanmaozhao.com

实践：
颜色、背景和文本样式

sanmaozhao.com

浮动（float）

> 浮动元素会从文档流中抽离
> 其他内容会环绕浮动元素
> 浮动块级元素会自动缩小/不占满包含块宽度
> 要使内容不环绕浮动元素，需要进行清除

sanmaozhao.com

浮动：样例

sanmaozhao.com

浮动的应用：内容环绕

sanmaozhao.com

浮动的应用：分栏布局

sanmaozhao.com

浮动的清除

sanmaozhao.com

定位（position）

> 正常定位（static）
> 相对定位（relative）
> 绝对定位（absolute）
> 固定定位（fixed）

sanmaozhao.com

相对定位

> 将元素框偏移指定的距离
> 元素保持未定位时的形状
> 元素原本所占的空间保留

sanmaozhao.com

相对定位

position: relative; left: -5px; top: -
10px;

sanmaozhao.com

绝对定位

> 元素框从文档流删除
> 相对于其包含块定位
> 包含块是最近的、position值不等于static的祖先元
素
> 如果没有符合条件的祖先元素，则为浏览器窗口

sanmaozhao.com

绝对定位
Position: absolute; left: 0; top: 0;

sanmaozhao.com

固定定位

> 类似于决定定位
> 但其包含块是浏览器窗口

sanmaozhao.com

固定定位

block1 block2
position:fixed;
right:0;
top:0;

block3

block4

sanmaozhao.com

实践：
浮动和定位

sanmaozhao.com

CSS Hack

> 针对特殊浏览器或版本
> 优先考虑IE的条件注释
> 会影响代码可维护性
> 请谨慎使用
.warning{
padding:10px;
padding:9px9; /*all ie */
padding:8px0; /* ie8-9 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */
}
完整列表请参考http://sofish.de/1331
sanmaozhao.com

CSS规范

> CSS样式指南

sanmaozhao.com

4.6框架解析
sitemenu.css

menu.css

viewStyle.css

xtree.css
subtree.css

sanmaozhao.com

参考资料

> 常用浏览器兼容技巧总结
> 跨浏览器兼容性问题列表
> W3Schools References
> SitePoint Reference
> QuicksMode Compatibility Master Table
> CSS Compatibility & Internet Explorer
> The Official Dojo Documentation
> IE7 Bug Table
sanmaozhao.com

推荐书籍

精通CSS：高级Web标准解决方案（第2版） CSS权威指南（第三版）
sanmaozhao.com

引用文献

> http://www.slideshare.net/lifesinger/progres
sive-enhancement-6355326
> http://css-tricks.com/all-about-floats/
> http://www.slideshare.net/iamtin/css-
essential-presentation
> http://sofish.de/1331

sanmaozhao.com

实践：
综合实践

sanmaozhao.com

> 演讲完毕，谢谢！

sanmaozhao.com

狠狠撸

颁蝉蝉基础

More Related Content

Viewers also liked (8)

Similar to 颁蝉蝉基础 (20)

颁蝉蝉基础