Css基础5. 为什么要学CSS?
> 旧的前端开发模式已经过时
> Web 1.0:HTML/CSS混乱嵌套、表格布局
> Web 2.0:内容/表现分离、CSS布局
> 4.6版引入新的前端开发模式
> 定制开发需要掌握CSS技能
> 后续版本引入xPages开发,CSS更加重要
sanmaozhao.com
9. 4.6版新的前端开发模式
> Web标准的遵从
> 便于支持多浏览器
> 利用先进的技术(CSS3圆角、阴影等)
> 内容与表现的分离
> 优化代码结构
> 明确前后台分工
> 利于重构
> 为换肤功能打好基础
sanmaozhao.com
10. Demo:
快速切换布局
sanmaozhao.com
12. 内容、展现、行为分离
> 语义化的HTML
> 不使用展现类的标签:font、center等
> 外联CSS/JS文件,不在HTML中内嵌
> 利于前后台的分工
> 利于页面的重构
sanmaozhao.com
13. 渐进增强
通过CSS增加展现效果
HTML描述内容
通过JS增加交互、滑动条控件
sanmaozhao.com
14. 浏览器模式
> 所有浏览器都有两类模式
> 怪癖模式(Quirks Mode)
> 为了兼容老旧的网页,去模拟早期浏览器(如 IE5.5)的非
标准实现
> 标准模式(Standards Mode)
> 尽可能的按照标准去执行
> 通过 DOCTYPE 控制
> 4.6新增页面均使用标准模式
sanmaozhao.com
15. Demo:
怪异模式和标准模式
sanmaozhao.com
17. 将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
19. 基础CSS选择器
> 元素选择器 h1 {color: red;}
> 通配选择器 * {color: red;}
> 类选择器 .warning {color: red;}
> ID选择器 #main-nav {color: red;}
sanmaozhao.com
20. 属性选择器
> 简单属性选择 img[alt]
> 精确匹配 input[type="text"]
> 列表值匹配 img[title~="Figure"]
> 子串匹配
> 以某值开头 a[href^="http://"]
> 以某值结尾 span[class$="cloud"]
> 包含某值 a[href*="smartdot.com"]
sanmaozhao.com
22. 伪类选择器
> 超链接 :link
> 访问过的超链接 :visited
> 拥有焦点的元素 :focus
> 鼠标指针停留的元素 :hover
> 被用户激活的元素 :active
> 作为父元素
第一个子元素的元素 :first-child
sanmaozhao.com
24. 选择器分组
> 通过逗号将选择器分组
h1 {color: black;}
h2 {color: gray;} h1, h3 {color: black;}
h3 {color: black;} h2, h4 {color: gray;}
h4 {color: gray;}
sanmaozhao.com
25. Demo:
CSS选择器
sanmaozhao.com
28. 特殊性:样例
选择器 特殊性
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
31. 开发工具
> IE8开发工具
> 寻找样式来源
> 分析元素布局
> 临时测试样式
> 禁用缓存
> 调节窗口大小
> Firebug
sanmaozhao.com
32. Demo:
开发工具
sanmaozhao.com
33. 颜色
> 命名颜色 red
> 十六进制RGB #FF0000
> 简写十六进制 #F00
> 函数式RGB rgb(255,0,0)
rgb(100%,0%,0%)
sanmaozhao.com
34. 长度单位
> 相对长度单位
> px(像素)
> em(等同于font-size的大小)
> ex(小写 x 的高度,部分浏览器处理为em/2)
> 绝对长度单位
> in(英寸)
> cm(厘米)
> pt (点,72pt = 1in )
> …
sanmaozhao.com
35. 实践:
CSS基本概念
sanmaozhao.com
37. 元素的分类
> 块级元素
> 元素的前后生成换行
> 盒模型为矩形
> 可以包含块级元素和行内元素
> p, h1-h6, div, ul, li
> 行内元素
> 元素的前后没有换行/多个行内元素可位于一行
> 只能包含行内元素
> strong, span, a
sanmaozhao.com
39. 块级元素盒模型
外边距(margin): top right bottom left;
边框(border)
内边距(padding)
宽(width)
内容区
高(height)
sanmaozhao.com
40. 块级元素盒模型
外边距(margin): top right bottom left;
边框(border)
内边距(padding)
宽(width)
背景区(background)
内容区
高(height)
sanmaozhao.com
42. 块级元素格式化
auto 负 auto auto 负
左外边距+左边框+左内边距+内容区宽度+右内边距+右边框+右外边距=包含块宽度
包含块
border
padding
自动外边距 width
Content Area
height
负外边距
border
padding
width
Content Area
自动宽度 height
border
padding
width
Content Area
height
固定宽度
sanmaozhao.com
44. 行内格式化
行间距=行高-字体大小
行间距/2
内容区 字体大小 行高
基线 (font-size) (line-height)
行间距/2
行内框 包含块
行框
基线
sanmaozhao.com
45. 实践:
CSS视觉模型
sanmaozhao.com
47. 颜色
> 前景色
> 通过color属性设置
> 影响边框属性(border-color未设置时)
> 影响表单元素(按钮/复选框等)
> 背景色
> 通过background-color设置
select {color: rgb(33%,33%,33%);}
sanmaozhao.com
input {color: gray;}
49. 背景图像
> 重复 background-repeat
> repeat 水平垂直都平铺(默认值)
> repeat-x 水平平铺
> repeat-y 垂直平铺
> no-repeat 不平铺,仅显示一次
repeat-y repeat-x
sanmaozhao.com
50. 背景图像
> 定位 background-position
> 相对于内边距边界
> 0% 0% 左上角(默认值)
> center 水平垂直皆居中
> right top 右上角
> 33% 66% 水平方向1/3,垂直方向2/3处
> 20px 20px 从左上角向右/向下各偏移20像素
> -30px 50% 水平从左边界向左30像素/垂直居中
sanmaozhao.com
54. 字体
> 系列 font-family
> tahoma,arial,宋体
> 大小 font-size
> 9pt 9点(绝对长度)
> 12px 12像素(相对长度)
> 加粗 font-weight
> normal 不加粗(默认值)
> bold 加粗
sanmaozhao.com
55. 字体
> 风格变形 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
59. 文本属性
> 空白处理 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
60. 实践:
颜色、背景和文本样式
sanmaozhao.com
71. 相对定位
position: relative; left: -5px; top: -
10px;
sanmaozhao.com
73. 绝对定位
Position: absolute; left: 0; top: 0;
sanmaozhao.com
75. 固定定位
block1 block2
position:fixed;
right:0;
top:0;
block3
block4
sanmaozhao.com
76. 实践:
浮动和定位
sanmaozhao.com
78. 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
80. 4.6框架解析
sitemenu.css
menu.css
viewStyle.css
xtree.css
subtree.css
sanmaozhao.com
81. 参考资料
> 常用浏览器兼容技巧总结
> 跨浏览器兼容性问题列表
> W3Schools References
> SitePoint Reference
> QuicksMode Compatibility Master Table
> CSS Compatibility & Internet Explorer
> The Official Dojo Documentation
> IE7 Bug Table
sanmaozhao.com
84. 实践:
综合实践
sanmaozhao.com