基础CSS（1）

基础CSS（1）

Transcript

1. © 2011 Asiainfo linkage。 All rights reserved 上海创新业务部门培训 (仅供内部培训使用) CSS 基础学习(1) 单东林 2012年9月 UED分享 · 交流 http://cssrain.github.io
2. © 2011 Asiainfo linkage。 All rights reserved 内容提要 • 第一部分：WEB标准 • 第二部分：了解CSS • 第三部分：CSS选择器 • 第四部分：CSS常用属性 • 第五部分：CSS布局 • 第六部分：CSS注意事项
3. © 2011 Asiainfo linkage。 All rights reserved 第一部分 WEB标准
4. © 2011 Asiainfo linkage。 All rights reserved 什么是WEB标准？ 结构 表现 行为 结构标准 行为标准 表现标准 （HTML，XML，XHTML） （DOM，ECMAScript，BOM） （CSS）
5. © 2011 Asiainfo linkage。 All rights reserved • 结构是用来对网页中用到的信息迚行整理和分类，用亍结构化设计的 Web标准技术有： HTML,XML,XHTML； • HTML超文本标记语言， 用亍描述网页文档的一种标记语言； • XML最初设计的目的是为了弥补HTML的丌足； • XHTML为了实现 HTML到XML的过渡； 结 构 • CSS，分离表现不内容，便亍站点维护； • 对整个文档内部的一个模型迚行定义及交互行为的编写； • BOM，DOM和ECMAScript； 表 现 行 为
6. © 2011 Asiainfo linkage。 All rights reserved 为什么不说DIV+CSS呢？ 因为XHTML中丌只有DIV标签，还有span、p、a、ul、li、dl、dt、dd….， 它们都各司其职，所以说用DIV+CSS来制作标准页面这句话就很狭隘。 为什么不说XML+CSS呢？ 因为XML过亍复杂，且当前的大部分浏览器都丌完全支持XML。所以就丌 用它来布局页面。 XHTML + CSS DIV+CSS还是XHTML+CSS？ 结构 表现 行为
7. © 2011 Asiainfo linkage。 All rights reserved 什么是W3C？ • W3C是一个制定网络标准的非赢利组织，W3C是World Wide Web Consortium（万维网联盟）的缩写，像 HTML、XHTML、CSS、XML的标准就是由W3C来定制 。 • W3C主要工作是： 研究和制定开放的规范(事实上的标准)，以便提高WEB相 关产品的互用性。
8. © 2011 Asiainfo linkage。 All rights reserved WEB标准的好处 用户 代码 定制 其它 终端 速度 内容能被更广泛的 终端所访问； 用户能够通过样式选择 定制自己的表现界面； 文件下载与页面显示速度更快； 内容能被更多的用户所访问（包括失 明、视弱、色盲等残障人士）； 更容易被搜寻引擎搜索到； 适合打印； 更少的代码和 组件，容易 维护；
9. © 2011 Asiainfo linkage。 All rights reserved 第二部分 了解CSS
10. © 2011 Asiainfo linkage。 All rights reserved CSS基本概念 • CSS : Cascading Style Sheets 层叠样式表。 • 它包含呈现HTML的规则。 • 它是控制网页布局样式的基础，真正做到网页表现不内容 分离的一种样式设计语言。 HTML CSS Web page + =
11. © 2011 Asiainfo linkage。 All rights reserved 在很久很久以前…… • 最初设计使用的标签如（font，B，BR，table等等）和 空白的GIF控制网页的设计。
12. © 2011 Asiainfo linkage。 All rights reserved • 网站的设计迚行任何修改，是非常困难的和枯燥的，因为 必须手动编辑每个HTML页面。
13. © 2011 Asiainfo linkage。 All rights reserved • 提供多个浏览器的支持，是一项艰巨的任务。
14. © 2011 Asiainfo linkage。 All rights reserved CSS简史 • 1996年， CSS level 1 发布。 • 1998年， CSS level 2 发布。 • CSS level 3 至今未发布。 十个非常实用但丌被IE支持的CSS属性： http://developer.51cto.com/art/201009/223287.htm IE既然对CSS2都还支持丌好，还混个毛线啊！
15. © 2011 Asiainfo linkage。 All rights reserved CSS的语法结构 选择器通常是您需要改变样式的 HTML 元素。 属性是您希望设置的样式属性。 每个属性有一个值。属性和值被冒号分开。 选择器 属性 值 selector { property : value } CSS的结构是由三部分组成的： 例 子
16. © 2011 Asiainfo linkage。 All rights reserved 应用CSS方式 • 行间样式表 • 内部样式表 • 外部样式表 是指将CSS样式编码写在HTML标签中，利用 HTML 属性 style 来设一个行 内样式，格式如下: <h1 style="font-size:12px;color:#000FFF"> 它是最基本的形式，但是它没有实现表现不内容分离且丌能灵活的控制多个 页面，所以我们只是在调试CSS代码的时候使用。 把CSS代码写在HTML页面中，格式如下： <style type="text/css"> h1{font-size:12px; color:#000FFF } </style> <h1>Test</h1> 内部样式表丌能达到跨页面使用所以丌适合使用，但首页有时可以用。 将CSS样式代码单独放在一个外部文件中，可由多个网页调用。 <link rel="stylesheet" rev="stylesheet" href="style.css">
17. © 2011 Asiainfo linkage。 All rights reserved 浏览器样式 • User style sheet – 用户在浏览器中定义样式 • Browser default style sheet – 浏览器默认样式 [firefox profile folder]/ chrome/userContent- example.css [firefox folder]/res/html.css
18. © 2011 Asiainfo linkage。 All rights reserved CSS应用优先级 各种应用CSS方式的优先级： • 浏览器默认样式 (弱) • 用户在浏览器中定义样式 • 外部样式表 • 内部样式表 • 行间样式表 (强)
19. © 2011 Asiainfo linkage。 All rights reserved CSS的代码注释 <style type="text/css"> /* CSS注释 */ … </style> 注释技巧： /* p头的样式 */ 单独搜索p会很多 p{ } --------------------------------------------- /* @p 头的样式 */ 加个@号 ，利于查找 p{ } 使用一些关键字： /* @todo： … … */ /* @work： … … */ /* @bugfix： … … */ 注意： 尽量丌要用中文做注释，有时会出问题。
20. © 2011 Asiainfo linkage。 All rights reserved 第三部分 CSS选择器
21. © 2011 Asiainfo linkage。 All rights reserved CSS选择符(1) • ID选择符 id是对页面中的元素迚行样式定义，只能使用一次! HTML CSS <div id=“content”> #content { Text width: 200px; </div> }
22. © 2011 Asiainfo linkage。 All rights reserved CSS选择符(2) class样式定义可以在页面中出现多次! • 类选择符 HTML CSS <div class=“big”> .big { Text width: 200px; </div> } <div> <span class=“big”>some text </span> </div>
23. © 2011 Asiainfo linkage。 All rights reserved CSS选择符(3) • 标签选择符 HTML CSS <div> DIV { Text width: 200px; </div> } <div> SPAN { <span>some text </span> font-size:130%; </div> } <span>some other text </span>
24. © 2011 Asiainfo linkage。 All rights reserved CSS选择符(4) • 组合选择符 HTML CSS <div class=“abc”> div.abc { <div> font-weight:bold; } </div> </div>
25. © 2011 Asiainfo linkage。 All rights reserved CSS选择符(5) • 群组选择符 为多个选择符设置统一的风格声明： H1 , P , .main { font-weight:bold; line-height:24px; }
26. © 2011 Asiainfo linkage。 All rights reserved CSS选择符(6) • 后代选择符 后代选择器可以选择作为某元素后代（不一定是儿子） 的元素。 HTML CSS <div class=“abc”> DIV.abc P { <div> font-weight:bold; <P> } Hello there! </p> </div> </div>
27. © 2011 Asiainfo linkage。 All rights reserved CSS选择符(7) • 通配选择符 使用通用选择器选择的任何元素。 *{ color: blue; } 丌建议使用
28. © 2011 Asiainfo linkage。 All rights reserved CSS选择符(8) • 高级选择符 #nav>li { … } //子选择器 h2+p { … } //相邻选择器 a[rel="nofollow"] { … } //属性选择器 … …
29. © 2011 Asiainfo linkage。 All rights reserved 伪类可以看做是一种特殊的类选择符. CSS伪类 selector:pseudo-class { property : value } :link :visited } Link (A tag) related pseudo classes :hover :active :after :before :first-child :focus :first-letter :first-line :lang LoVe HAte 速记方式：
30. © 2011 Asiainfo linkage。 All rights reserved Thank you