基于Web标准的网页设计与制作3-2.ppt

《基于Web标准的网页设计》 唐四薪 编著 清华大学出版社 配套网站： 第四章 CSS 概述 唐四薪 CSS 概述 CSS是Cascading Styles Sheets的缩写，中文译名为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 HTML和CSS的关系就是“内容”和“形式”的关系，由HTML组织网页的结构和内容，而通过CSS来决定页面的表现形式 为什么需要CSS 由于html的主要功能是描述网页的结构，所以控制网页外观和表现的能力很差， 1 无法精确到像素级调整文字大小，行间距等， 2 不能对多个网页元素进行统一的样式设置，只能一个一个元素的设置。 学习CSS可实现对网页的外观和排版进行更灵活的控制，使网页更美观 CSS禅意花园（网站，书名） html只能对元素一个一个的设置样式 body h2font color=#FF0000 face=黑体CSS标记1/font/h2 pCSS标记的正文内容1/p h2font color=#FF0000 face=黑体CSS标记2/font/h2 pCSS标记的正文内容2/p h2font color=#FF0000 face=黑体CSS标记3/font/h2 pCSS标记的正文内容3/p h2font color=#FF0000 face=黑体CSS标记4/font/h2 pCSS标记的正文内容4/p /body 产生的问题：代码冗余 如果要修改元素的样式，也要一个个的改，修改工作量大 使用CSS后 h2{ font-family:黑体; color:red; } h2CSS标记1/h2 pCSS标记的正文内容1/p h2CSS标记2/h2 pCSS标记的正文内容2/p h2CSS标记3/font/h2 pCSS标记的正文内容3/p h2CSS标记4/font/h2 pCSS标记的正文内容4/p html的弱点 而且有很多表现用html是根本无法修改的 最典型的是： 行距 以象素级修改字体大小 为文字设置背景色，边框等 CSS的语法 CSS样式表由一系列样式规则组成，浏览器将这些规则应用到相应的元素上，下面是一条样式规则。 h1{ color: red; font-size: 25px; } CSS样式规则的组成－选择器 一条CSS样式规则由选择器(selector)和声明(declarations)组成。 选择器是为了选中网页中某些元素的，选择器可以是一个标记名，表示将网页中该标记的所有元素都选中，也就是定义了CSS规则的作用对象。选择器也可以是一个自定义的类名，表示将自定义的一类元素全部选中，为了对这一类元素进行标识，必须在这一类的每个元素的标记里添加一个html属性class＝类名；选择器还可以是一个自定义的id名，表示选中网页中某一个唯一的元素，同样，该元素也必须在标记中添加一个html属性id＝id名让CSS来识别。 CSS的声明 而声明则用于定义元素样式。在上面的示例中，h1 是选择器，介于花括号{ }之间的所有内容都是声明，声明又可以分为属性和值，属性和值用冒号隔开。（注意CSS的属性和值的写法与html属性的区别）。属性和值可以设置多个，从而实现对同一标记声明多种样式风格。如果要设置多个属性和值，则每条声明之间要用分号隔开； CSS属性值的写法 如果属性的某个值不是一个单词，则值要用引号引起来： p {font-family: sans serif}； 如果一个属性有多个值，则每个值之间要用空格隔开：a {margin:6px 4px 3px}； 要为某个属性设置多个候选值，则每个值之间用逗号隔开：p {font-family: Times New Roman, Times, serif}； 在HTML中引入CSS的方法 在HTML中引入CSS的方法 HTML和CSS是两种作用不同的语言，它们同时对一个网页产生作用，因此必须通过一些方法，将CSS与HTML挂接在一起，才能正常工作。 在HTML中，引入CSS的方法有行内式、内嵌式、导入式和链接式4种 行内式 html标记都有一个通用的style属性，行内式就是在该属性内添加CSS属性和值，如： td style=color: #FF0000; text-decoration: underline width=88% 有时我们需要做测试或对个别元素设置CSS属性时，可以使用这种方式，这种方式由于CSS属性就在标记内，其作用对象就是标记内的元素。所以不需要指定CSS的选择器，只需要书写CSS属性和值。但它没有体现出CSS统一设置许多元素样式的优势。 嵌入式 嵌入式将页面中各种元素的CSS样式设置集中写在style和/