4.1CSS基础.ppt

Web标准网页设计与PHP 唐四薪 编著 清华大学出版社 第4章 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是根本无法修改的 最典型的是： 行距 以象素级设置字体大小 为文字添加背景色，边框等 4.1.1 CSS的语法 CSS样式表由一系列样式规则组成，浏览器将这些规则应用到相应的元素上，下面是一条样式规则。 h1{ color: red; font-size: 25px; } CSS样式规则的组成－选择器 一条CSS样式规则由选择器(selector)和声明(declarations)组成。 选择器是为了选中网页中某些元素的，选择器可以是一个标记名，表示将网页中该标记的所有元素都选中 CSS的声明 声明用于定义元素样式。介于花括号{ }之间的所有内容都是声明，声明又可以分为属性和值，属性和值用冒号隔开。 注意CSS属性和值的写法与html属性的区别 属性和值可以设置多个，如果要设置多个属性和值，则每条声明之间要用“ ; ”隔开； CSS属性值写法的注意事项 如果属性的某个值不是一个单词，则值要用引号引起来： p {font-family: sans serif}； 如果一个属性有多个值，则每个值之间要用空格隔开：a {margin:6px 4px 3px}； 要为某个属性设置多个候选值，则每个值之间用逗号隔开：p {font-family: Times New Roman, Times, serif}； 4.1.2在HTML中引入CSS的方法 在HTML中引入CSS的方法 HTML和CSS是两种作用不同的语言，它们同时对一个网页产生作用，必须通过一些方法，将CSS与HTML挂接在一起，才能正常工作。 在HTML中，引入CSS的方法有 行内式 嵌入式 导入式 链接式 行内式 html标记都有一个通用的style属性，行内式就是在该属性内添加CSS属性和值，如： td style=color: #FF9999; text-decoration: underline width=88% 特点： 对个别元素设置CSS属性时，可使用该方式 不需要指定CSS的选择器，只需要书写CSS属性和值 没有体现出CSS统一设置许多元素样式的优势 嵌入式 嵌入式将页面中各种元素的CSS样式集中写在style和/style之间，style标记是专用于引入嵌入式CSS的一个html标记，它只能放置在文档头部，即html文档的head和/head之间。 style type=text/css h1{ color: red; font-size: 25px; } /style 对于单一的网页，这种方式很方便。 但是对于包含很多页面的网站，如果每个页面都以嵌入式的方式设置各自的样式，不仅麻烦，冗余代码多，而且网站每个页面的风格不好统一。 链接式和导入式 链接式是在网页文档头部通过link标记引入外部CS