Tweet
Tweet

Slide 1

Slide 1 text

© 2011 Asiainfo linkage。 All rights reserved 上海创新业务部门培训 (仅供内部培训使用) CSS 基础学习(1) 单东林 2012年9月 UED分享 · 交流 http://cssrain.github.io

Slide 2

Slide 2 text

© 2011 Asiainfo linkage。 All rights reserved 内容提要 • 第一部分：WEB标准 • 第二部分：了解CSS • 第三部分：CSS选择器 • 第四部分：CSS常用属性 • 第五部分：CSS布局 • 第六部分：CSS注意事项

Slide 3

Slide 3 text

© 2011 Asiainfo linkage。 All rights reserved 第一部分 WEB标准

Slide 4

Slide 4 text

© 2011 Asiainfo linkage。 All rights reserved 什么是WEB标准？ 结构 表现 行为 结构标准 行为标准 表现标准 （HTML，XML，XHTML） （DOM，ECMAScript，BOM） （CSS）

Slide 5

Slide 5 text

© 2011 Asiainfo linkage。 All rights reserved • 结构是用来对网页中用到的信息迚行整理和分类，用亍结构化设计的 Web标准技术有： HTML,XML,XHTML； • HTML超文本标记语言， 用亍描述网页文档的一种标记语言； • XML最初设计的目的是为了弥补HTML的丌足； • XHTML为了实现 HTML到XML的过渡； 结 构 • CSS，分离表现不内容，便亍站点维护； • 对整个文档内部的一个模型迚行定义及交互行为的编写； • BOM，DOM和ECMAScript； 表 现 行 为

Slide 6

Slide 6 text

© 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？ 结构 表现 行为

Slide 7

Slide 7 text

© 2011 Asiainfo linkage。 All rights reserved 什么是W3C？ • W3C是一个制定网络标准的非赢利组织，W3C是World Wide Web Consortium（万维网联盟）的缩写，像 HTML、XHTML、CSS、XML的标准就是由W3C来定制 。 • W3C主要工作是： 研究和制定开放的规范(事实上的标准)，以便提高WEB相 关产品的互用性。

Slide 8

Slide 8 text

© 2011 Asiainfo linkage。 All rights reserved WEB标准的好处 用户 代码 定制 其它 终端 速度 内容能被更广泛的 终端所访问； 用户能够通过样式选择 定制自己的表现界面； 文件下载与页面显示速度更快； 内容能被更多的用户所访问（包括失 明、视弱、色盲等残障人士）； 更容易被搜寻引擎搜索到； 适合打印； 更少的代码和 组件，容易 维护；

Slide 9

Slide 9 text

© 2011 Asiainfo linkage。 All rights reserved 第二部分 了解CSS

Slide 10

Slide 10 text

© 2011 Asiainfo linkage。 All rights reserved CSS基本概念 • CSS : Cascading Style Sheets 层叠样式表。 • 它包含呈现HTML的规则。 • 它是控制网页布局样式的基础，真正做到网页表现不内容 分离的一种样式设计语言。 HTML CSS Web page + =

Slide 11

Slide 11 text

© 2011 Asiainfo linkage。 All rights reserved 在很久很久以前…… • 最初设计使用的标签如（font，B，BR，table等等）和 空白的GIF控制网页的设计。

Slide 12

Slide 12 text

© 2011 Asiainfo linkage。 All rights reserved • 网站的设计迚行任何修改，是非常困难的和枯燥的，因为 必须手动编辑每个HTML页面。

Slide 13

Slide 13 text

© 2011 Asiainfo linkage。 All rights reserved • 提供多个浏览器的支持，是一项艰巨的任务。

Slide 14

Slide 14 text

© 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都还支持丌好，还混个毛线啊！

Slide 15

Slide 15 text

© 2011 Asiainfo linkage。 All rights reserved CSS的语法结构 选择器通常是您需要改变样式的 HTML 元素。 属性是您希望设置的样式属性。 每个属性有一个值。属性和值被冒号分开。 选择器 属性 值 selector { property : value } CSS的结构是由三部分组成的： 例 子

Slide 16

Slide 16 text

© 2011 Asiainfo linkage。 All rights reserved 应用CSS方式 • 行间样式表 • 内部样式表 • 外部样式表 是指将CSS样式编码写在HTML标签中，利用 HTML 属性 style 来设一个行 内样式，格式如下:

它是最基本的形式，但是它没有实现表现不内容分离且丌能灵活的控制多个 页面，所以我们只是在调试CSS代码的时候使用。 把CSS代码写在HTML页面中，格式如下： h1{font-size:12px; color:#000FFF }

Test

内部样式表丌能达到跨页面使用所以丌适合使用，但首页有时可以用。 将CSS样式代码单独放在一个外部文件中，可由多个网页调用。

Slide 17

Slide 17 text

© 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

Slide 18

Slide 18 text

© 2011 Asiainfo linkage。 All rights reserved CSS应用优先级 各种应用CSS方式的优先级： • 浏览器默认样式 (弱) • 用户在浏览器中定义样式 • 外部样式表 • 内部样式表 • 行间样式表 (强)

Slide 19

Slide 19 text

© 2011 Asiainfo linkage。 All rights reserved CSS的代码注释 /* CSS注释 */ … 注释技巧： /* p头的样式 */ 单独搜索p会很多 p{ } --------------------------------------------- /* @p 头的样式 */ 加个@号 ，利于查找 p{ } 使用一些关键字： /* @todo： … … */ /* @work： … … */ /* @bugfix： … … */ 注意： 尽量丌要用中文做注释，有时会出问题。

Slide 20

Slide 20 text

© 2011 Asiainfo linkage。 All rights reserved 第三部分 CSS选择器

Slide 21

Slide 21 text

© 2011 Asiainfo linkage。 All rights reserved CSS选择符(1) • ID选择符 id是对页面中的元素迚行样式定义，只能使用一次! HTML CSS
#content { Text width: 200px;
}

Slide 22

Slide 22 text

© 2011 Asiainfo linkage。 All rights reserved CSS选择符(2) class样式定义可以在页面中出现多次! • 类选择符 HTML CSS
.big { Text width: 200px;
}
some text

Slide 23

Slide 23 text

© 2011 Asiainfo linkage。 All rights reserved CSS选择符(3) • 标签选择符 HTML CSS
DIV { Text width: 200px;
}
SPAN { some text font-size:130%;
} some other text

Slide 24

Slide 24 text

© 2011 Asiainfo linkage。 All rights reserved CSS选择符(4) • 组合选择符 HTML CSS
div.abc {
font-weight:bold; }

Slide 25

Slide 25 text

© 2011 Asiainfo linkage。 All rights reserved CSS选择符(5) • 群组选择符 为多个选择符设置统一的风格声明： H1 , P , .main { font-weight:bold; line-height:24px; }

Slide 26

Slide 26 text

© 2011 Asiainfo linkage。 All rights reserved CSS选择符(6) • 后代选择符 后代选择器可以选择作为某元素后代（不一定是儿子） 的元素。 HTML CSS
DIV.abc P {
font-weight:bold;

} Hello there!

Slide 27

Slide 27 text

© 2011 Asiainfo linkage。 All rights reserved CSS选择符(7) • 通配选择符 使用通用选择器选择的任何元素。 *{ color: blue; } 丌建议使用

Slide 28

Slide 28 text

© 2011 Asiainfo linkage。 All rights reserved CSS选择符(8) • 高级选择符 #nav>li { … } //子选择器 h2+p { … } //相邻选择器 a[rel="nofollow"] { … } //属性选择器 … …

Slide 29

Slide 29 text

© 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 速记方式：

Slide 30

Slide 30 text

© 2011 Asiainfo linkage。 All rights reserved Thank you