Microsoft Word - HTML5+CSS3+JavaScript网页设计案例开发第3章.doc

Size: px

Start display at page:

Download "Microsoft Word - HTML5+CSS3+JavaScript网页设计案例开发第3章.doc"

窃鄂
5 years ago
Views:

1 第 3 章 3.1 CSS 背景及特点 CSS 指层叠样式表 (Cascading Style Sheets), 它是继 HTML 语言之后诞生的前端样式语言起初,HTML 因为控制的样式字体等前端文字样式过于繁琐复杂, 从而造成它的可维护性极低为了解决这个问题,CSS 诞生了 CSS 背景 HTML 标签原本是用于定义文档内容起初, 通过使用 <h1> <p> <table> 这样的标签,HTML 表达了这是标题这是段落这是表格之类的信息同时文档布局是由浏览器来完成, 而不使用任何的格式化标签由于两种主要的浏览器 (Netscape 和 Internet Explorer) 不断地将新的 HTML 标签和属性 ( 比如字体标签和颜色属性 ) 添加到 HTML 规范中, 使得创建文档内容可以清晰地独立于文档表现层的站点变得越来越困难为了解决这个问题, 万维网联盟 (W3C), 这个非营利的标准化联盟, 肩负起了 HTML 标准化的使命, 并在 HTML 4.0 之外创造出样式 (style) 目前所有的主流浏览器均支持层叠样式表 CSS 特点 CSS 是优化 HTML 显示, 让文档内容清晰地独立于文档表现层的重要技术 : CSS 定义如何显示 HTML 元素 ; CSS 通常存储在样式表中 ; 把 CSS 添加到 HTML 4.0 中, 是为了解决内容与表现分离的问题 ; 外部 CSS 可以极大提高工作效率 ; 外部 CSS 通常存储在 CSS 文件中 ; 多个 CSS 定义可层叠为一层 CSS 开发环境 CSS 可以和 HTML 使用完全一样的开发环境

2 HTML5+CSS3+JavaScript 网页设计案例开发 3.2 CSS 快速入门 CSS 基本语法 CSS 规则是由两个主要的部分构成 : 选择器, 以及一条或多条声明 selector {declaration1; declaration2; ; declarationn 选择器通常是需要改变样式的 HTML 元素每条声明由一个属性和一个值组成属性 (property) 是希望设置的样式属性 (style attribute) 每个属性有一个值属性和值被冒号分开 selector {property: value 本书中像素以 px 表示下面这行代码的作用是将 h1 元素内的文字颜色定义为红色, 同时将字体大小设置为 14px 在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值 h1 {color:red; font-size:14px; 上面这段 CSS 代码的结构如图 3-1 所示图 3-1 CSS 代码的结构值的不同写法和单位除了英文单词 red, 我们还可以使用十六进制的颜色值 #ff0000: p { color: #ff0000; 为了节约字节, 我们可以使用 CSS 的缩写形式 : p { color: #f00; 我们还可以通过两种方法使用 RGB 值 : p { color: rgb(255,0,0); p { color: rgb(100%,0%,0%); 请注意, 当使用 RGB 百分比时, 即使当值为 0 时也要写百分比符号, 但是在其他的情况下就不需要这么做了比如说, 当尺寸为 0 像素时,0 之后不需要使用 px 单位,

3 因为 0 就是 0, 无论单位是什么如果值为若干单词, 则要给值加引号 p {font-family: "sans serif"; 多重声明如果要定义不止一个声明, 则需要用分号将每个声明分开下面的例子展示了如何定义一个红色文字的居中段落最后一条规则是不需要加分号的, 因为分号在英语中是一个分隔符号, 不是结束符号然而, 大多数有经验的设计师会在每条声明的末尾都加上分号这么做的好处是, 当从现有的规则中增减声明时, 会尽可能地减少出错的可能性就像这样 : p {text-align:center; color:red; 你应该在每行只描述一个属性, 这样可以增强样式定义的可读性, 就像这样 : p { text-align: center; color: black; font-family: arial; 空格和大小写大多数样式表包含不止一条规则, 而大多数规则包含不止一个声明多重声明和空格的使用使得样式表更容易被编辑 body { color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; 是否包含空格不会影响 CSS 在浏览器的工作效果, 同样, 与 XHTML 不同,CSS 对大小写不敏感不过存在一个例外 : 如果涉及与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的如何插入样式表当读到一个样式表时, 浏览器会根据它来格式化 HTML 文档插入样式表的方法有三种, 最后会说明三种 CSS 的优先级关系 1. 外部样式表当样式需要应用于很多页面时, 外部样式表将是理想的选择在使用外部样式表的情况下, 你可以通过改变一个文件来改变整个站点的外观每个页面使用 <link> 标签链接 17 第 3 章

4 HTML5+CSS3+JavaScript 网页设计案例开发到样式表 <link> 标签在 ( 文档的 ) 头部, 如代码 3-1 所示代码 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 浏览器会从文件 mystyle.css 中读到样式声明, 并根据它来格式文档外部样式表可以在任何文本编辑器中进行编辑文件不能包含任何的 HTML 标签样式表应该以.css 扩展名进行保存下面是一个样式表文件的例子 hr {color: sienna; p {margin-left: 20px; body {background-image: url("images/back40.gif"); 不要在属性值与单位之间留有空格否则, 如果你使用 margin-left: 20 px 而不是 margin-left: 20px, 则可能会无法正常显示 2. 内部样式表当单个文档需要特殊的样式时, 就应该使用内部样式表你可以使用 <style> 标签在文档头部定义内部样式表, 就像如下代码这样 : <head> <style type="text/css"> hr {color: sienna; p {margin-left: 20px; body {background-image: url("images/back40.gif"); </style> </head> 3. 内联样式如果要将表现和内容混杂在一起, 则内联样式会损失掉样式表的许多优势请慎用这种方法, 例如当样式仅需要在一个元素上应用一次时要使用内联样式, 你需要在相关的标签内使用样式 (style) 属性 style 属性可以包含任何 CSS 属性本例展示的是如何改变段落的颜色和左外边距 <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 4. 多重样式如果某些属性在不同的样式表中被同样的选择器定义, 那么属性值将从更具体的样式表中被继承过来例如, 外部样式表拥有针对 h3 选择器的三个属性 h3 { color: red;

5 text-align: left; font-size: 8pt; 而内部样式表拥有针对 h3 选择器的两个属性 h3 { text-align: right; font-size: 20pt; 假如拥有内部样式表的这个页面同时又与外部样式表链接, 那么 h3 得到的样式是 : color: red; text-align: right; font-size: 20pt; 即颜色属性将被继承于外部样式表, 而文字排列 (text-alignment) 和字体尺寸 (font-size) 会被内部样式表中的规则取代思考题 1. 请简述 CSS 规则主要是由哪两个部分构成的 2. 简要说明 CSS 的三种样式的特点及其使用方式 19 第 3 章

互動網頁技術系列課程 HTML與CSS網站基礎設計 [12pt]

互動網頁技術系列課程 HTML與CSS網站基礎設計 [12pt] HTML CSS / 2011 HTML CSS 1/ 47 1 2 HTML 3 4 HTML 5 5 : CSS 6 CSS 7 HTML CSS 2/ 47 HTML CSS 3/ 47 ( BOM) UTF-8 Notepad++ (Winodws), Fraise/Smultron (Mac), VIM ( ) HTML CSS 4/ 47 UTF-8? UTF-8 (unicode),

Microsoft Word - HTML5+CSS3+JavaScript网页设计案例开发 第3章.doc

Microsoft Word - HTML5+CSS3+JavaScript网页设计案例开发第3章.doc