网页重构之 CSS 基础

5. 网页重构之CSS 基础 • CSS基础理论 • css概述 • css特点 • css语法 • css属性、属性值和单位 • CSS选择器 • CSS实战练习 • 推荐书目

6. 网页重构之CSS 基础 • CSS是cascading style sheets的简写，中文翻译为层叠样式表。 • CSS是一种高级的、弱类型的语言。 • CSS与html一样是标识语言。 • CSS基础理论---概述

7. 网页重构之CSS 基础 使用CSS的优势： • 1.实现网页样式和内容的分离； • 2.更好地控制页面布局； • 3.制作出体积更小、下载更快的网页； • 4.更快、更容易地维护及更新大量的网页； • 5.浏览器兼容性更好。 • CSS基础理论---概述

8. 网页重构之CSS 基础 • CSS基础理论---语法 • CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 selector {declaration1; declaration2; ... declarationN} • 每条声明由一个属性和一个值组成。 selector {property: value}

9. 网页重构之CSS 基础 下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值 • CSS基础理论---语法

10. 网页重构之CSS 基础 • 除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000,为了节约字节，我们可以使用 CSS 的缩写形式: • 还可以通过两种方法使用 RGB 值 • CSS基础理论---语法

11. 网页重构之CSS 基础 • 引号：如果值为若干单词，则要给值加引号 • 多重声明：如果要定义不止一个声明，则需要用分号将每个声明分开 • CSS基础理论---语法

12. 网页重构之CSS 基础 • 对选择器进行分组，这样，被分组的选择器就可以分享相同的声明 • 用逗号将需要分组的选择器分开 • CSS基础理论---高级语法

13. 网页重构之CSS 基础 • 继承： • 根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td,tr,thol, ul, li, dl, dt,和 dd）。 • CSS基础理论---高级语法

14. 网页重构之CSS 基础 • 派生选择器 • 派生选择器允许你根据文档的上下文关系来确定某个标签的样式 • CSS基础理论---高级语法 比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器： 请注意标记为 <strong> 的蓝色代码的上下文关系：

15. 网页重构之CSS 基础 • CSS基础理论---高级语法 • 类（class）选择符可以实现同一个标签在网页的不同位置显示不同的样式 • 类选择符必须以一个点（.）前缀开头，然后跟随一个自定义的类名 • 在标签的后面紧跟一个类，组成复合选择符，为类选择符指定标签范围: • 自定义类名只能使用字母、数字、下划线（_）和连字符（-），首字符只能是字母如：.content{font-size:14px;}。 p .f14{font-size:14px;} • 同一个类样式可在多个标签中被引用，同一个标签可以引用多个类样式。

16. 网页重构之CSS 基础 • CSS基础理论---高级语法 • ID选择符： id在web设计中一般指定标签在html文档中的唯一编号，同一个标签最多只能引用一个id选择符。 可以为id选择符指定标签范围，以提高其优先级，如： 与类选择符类似，ID选择符的命名以#开头 div #column{width:450px;height:300px;} #column{width:450px;}

17. 网页重构之CSS 基础 注意 : • CSS基础理论---高级语法 • 对于网页结构问题，一般建议使用id选择符来定义； • 对于重复出现的样式，可考虑使用类选择符来提炼； • 当id选择符和类选择符的样式发生冲突时，id选择符的样式优先于类选择符定义的样式。

18. 网页重构之CSS 基础 通配选择符 • CSS基础理论---高级语法 • 通配选择符是固定的，用星号（*）表示，如： *{margin:0;padding:0;} • 要注意的是，使用通配选择符会影响到页面中所有元素的显示效果

19. 网页重构之CSS 基础 复合选择器（符） • CSS基础理论---高级语法 • 子选择符： • 子选择符是指定父元素所包含的子元素的样式，用尖角号（>）表示，如： • 也可以使用id值或class值来定义子选择符。 div>span{font-size:16px;} • ie6及其以下版本浏览器不支持子选择符。

20. 网页重构之CSS 基础 相邻选择符 • CSS基础理论---高级语法 • 相邻选择符用来指定一个元素相邻的下一个元素的样式，用加号（+）表示，如： div+span{font-size:16px;} • 也可借助class值或id值进行控制。 • ie6及其以下版本浏览器不支持相邻选择符。

21. 网页重构之CSS 基础 包含选择符 • CSS基础理论---高级语法 • 包含选择符通过空格标识符来表示，用来定义被包含选择符的样式，如： div span{font-size:16px;} • 是比较常用的方法，兼容ie6。

22. 网页重构之CSS 基础 • CSS基础理论---高级语法 多层选择符嵌套 • 嵌套的层级没有明确限制，嵌套的方法利用空格实现，如： div p span{font-size:16px;}

23. 网页重构之CSS 基础 属性选择符 • CSS基础理论---高级语法 • 属性选择符利用网页标签包含的属性及其属性值来定义特定元素或一定范围元素的样式，一般是一个元素后面紧跟中括号，中括号内是属性或属性表达式，如： div[id="header"]{font-size:16px;} • ie6及其以下版本浏览器对属性选择符不支持。

24. 网页重构之CSS 基础 • CSS基础理论---高级语法 匹配属性名选择符 • 匹配属性名选择符，为包含指定属性名的所有该类型标签定义样式，如： div[id]{font-size:16px;} • 可以设置所有合法属性，可以同时设置多个属性名，多个匹配属性名之间分别用不同的中括号表示，如： div[id][class]{font-size:16px;}

25. 网页重构之CSS 基础 伪选择器 • CSS基础理论---高级语法 • 伪类和伪元素定义一些无法通过标签、ID或Class以及其他属性精确控制的特殊区域或特殊状态下的样式，如控制鼠标单击过程中超链接显示为不同的状态。 • 伪类和伪元素以英文冒号（:）为前缀来表示，如： a:hover{color:#ff0000;} • a元素也可为body、div、span等元素，但是只要超链接的四种伪类才被ie6及其以下版本浏览器兼容。

26. 网页重构之CSS 基础 • CSS基础理论---常用属性

27. 网页重构之CSS 基础 • CSS基础理论---常用属性

28. 网页重构之CSS 基础 • CSS基础理论---常用属性

29. 网页重构之CSS 基础 • CSS基础理论---常用属性

30. 网页重构之CSS 基础 • CSS基础理论---常用属性

31. 网页重构之CSS 基础 • CSS基础理论---常用属性

32. 网页重构之CSS 基础 • CSS基础理论---常用属性

33. 网页重构之CSS 基础 • CSS基础理论---常用属性

34. 网页重构之CSS 基础 • CSS实战练习 1）将中大、学院、工作室、分析化学网站CSS保存到本地，用写字板阅读。 2）汇总CSS中字体样式的基本代码。 3）查看中大、学院、工作室、分析化学网站源码，总结网页html代码的基本结构。

35. 网页重构之CSS 基础 • CSS相关教程 web标准化设计：常用的CSS命名规则 30个最常用css选择器解析(1) CSS里面pxempt单位区别 CSS 父级子级 CSS语言详解——读书笔记

36. 网页重构之CSS 基础 • CSS推荐书目 《CSS权威指南》 《CSS那些事儿》

37. 谢谢