化学多媒体软件设计 HTML+CSS 基础（入门）

化学多媒体软件设计HTML+CSS基础（入门） 厚朴前端设计组郭娟 2013.10.16

目录 7. CSS组成 1. HTML概述 2. HTML文档 8.CSS继承性与层叠性 3. HTML组成 9.CSS优先级 10.CSS Reset 4. CSS概述 5. HTML与CSS的关系 11.常用HTML标签 12.常用CSS属性 6. 结构与表现分离

1. HTML概述

HTML，Hyper Text Mark-up Language（超文本标记语言）；为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言； HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。（以上内容只需大致了解以帮助后续学习，无需记忆哦）

HTML版本 • 超文本标记语言（第一版）——1993年6月（并非标准）； • HTML 2.0——1995年11月发布，2000年6月被宣布已经过时； • HTML 3.2——1997年1月14日，W3C推荐标准；

HTML版本 • HTML 4.0——1997年12月18日，W3C推荐标准； • HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准； • HTML 5 的第一份正式草案已于2008年1月22日公布，目前仍处于完善中,随着移动互联网的快速发展，HTML5将会是未来的主流。　　目前所使用的大多是HTML4.01。　　（版本信息大致了解即可，各版本详情可咨询度娘或谷歌。）

2. HTML文档

文档类型 • STRICT（严格类型） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

文档类型 • TRANSITIONAL（过渡类型） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 　一般推荐使用过渡型（transitional）标准。以“厚朴工作室”网站为例，浏览网页时产看源代码，就可以看到其HTML文档类型声明，采用的是过渡类型声明。

文档类型 • FRAMESET（框架类型） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 　文档类型声明是一个网页的必需元素，如果没有文档类型声明，会导致浏览器无法按照正确的标准解析网页。（记住我们使用的是过渡型标准。）

文档结构 • DOCTYPE • Head • Body

如以下实例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head>  <body></body>  </html>

3. HTML组成

标签 • HTML 文档和 HTML 元素是通过 HTML 标签进行标记的； • HTML 标签由开始标签和结束标签组成； • 开始标签是被括号包围的元素名； • 结束标签是被括号包围的斜杠和元素名；

标签 • 既有开始标签，又有结束标签的，称为双标签，大多数标签为双标签； • 某些 HTML 元素没有结束标签，称为单标签，比如 <br />。 • ＨTML标签对大小写不敏感，如<body>等同于<BODY>，但万维网联盟（W3C）在 HTML 4 中推荐使用小写。以“厚朴工作室”网站为例。

元素 • HTML 元素指的是从开始标签到结束标签的所有代码；如“<p>这是P元素</p>”，其中<p>为开始标签，</p>为结束标签，元素内容为：这是P元素； • 某些 HTML 元素具有空内容；

元素 • 空元素在开始标签中进行关闭（以开始标签的结束而结束），<br />为最常见的空元素； • 大多数 HTML 元素可拥有属性。

元素 • 行内元素行内元素是指该元素标记的内容不会对现在的结构造成影响，属于应用样式，辅助应用样式表等作用；常见行内元素有：span、strong、a、em、img、input、label等；

元素 • 块级元素块级元素为一个块状，单独占据一行，相当于在一个该元素前后各加一个换行；常见块级元素有：div、h1～h6、ol、ul、li、table、form、dl、dd、dt······

元素行内元素与块状元素最大的区别就在于块状元素会单独占据一行，而行内元素不会单独占据一行。为了更直观，可以实例为参考。以下是在DW中编辑的HTML标签，链入的是内部样式表。 • 元素然后在浏览器中预览效果是这样的。显然，块状元素发生了折行，而行内元素却只成一行。

4. CSS概述

CSS 指层叠样式表 (Cascading Style Sheets) • 样式定义如何显示 HTML 元素 • 样式通常存储在样式表中

使用CSS的优势： • 1.实现网页样式和内容的分离； • 2.更好地控制页面布局； • 3.制作出体积更小、下载更快的网页； • 4.更快、便于维护及更新大量的网页； • 5.浏览器兼容性更好。

5. HTML与CSS的关系

“栋梁与砖瓦” 在网页中，HTML定义其结构，就像房屋的栋梁；CSS则定义HTML中各结构元素的样式，就像房屋的砖瓦，起装饰作用。

如何在HTML中链入CSS？ • 方法一：链入外部样式表　样式表保存为一个样式表文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内。注意：其中被链接的CSS文档位置要准确。　当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。

如何在HTML中链入CSS？ <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>在HTML中链入外部样式表</title> <link href=“skin.css" rel="stylesheet" type="text/css" /> </head>

如何在HTML中链入CSS？ • 方法二：内部样式表　可以在 head 部分通过 <style> 标签定义内部样式表。　　当单个文件需要特别样式时，就可以使用内部样式表。

如何在HTML中链入CSS？ <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>在HTML中链入内部样式表</title> ＜styletype=“text/css”> p{fone-size:14px;} </style> ＜</head>

如何在HTML中链入CSS？ • 方法三：导入外部样式表（不常用）　指在内部样式表的<style>里导入一个外部样式表，导入时用@import: <head> <title>在HTML中导入外部样式表</title><style type=”text/css”></style></head>

如何在HTML中链入CSS？ • 方法四：内嵌样式（不推荐使用）　内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例： <p style=“color: red;”>　这是一个段落</p>

6. 结构与表现分离

什么叫结构与表现分离？ • 表现和结构分离的基本思想是确保HTML中只定义结构，不在ＨTML中穿插CSS样式，所有样式都定义到分离的CSS文件中去。 • 要实现结构与表现分离，则在HTML中链入CSS时，应选择外部样式表。

为什么要使结构与表现分离？ • 便于代码修改及维护。比如当需要将某元素的字体大小更改为14px时，只需要在CSS文档中修改即可。而如果使用内嵌样式或内部样式表，则需要逐个打开HTML文件，将每个HTML文件中涉及到该元素的字体大小样式都修改一遍，这就增加了很多不必要的工作。

7. CSS组成

CSS规则主要由选择器以及一条或多条声明组成：CSS规则主要由选择器以及一条或多条声明组成： selector {declaration1; declaration2; ... declarationN } • 每条声明又由一个属性和一个值组成： selector {property: value}

选择器 • 元素选择器选择器为某个元素；实例：p{font-size:14px;},选择器为p元素。

选择器 • 类选择器将class属性指定为一个适当的值使类选择器与元素相关联；类名前加点号，区分大小写；实例： HTML：<p class=“test”>类选择器</p> CSS：.test{font-size:14px;}

选择器 • ID选择器与类选择器相似，但引用的是ID属性中的值； ID名前加#，区分大小写；实例： HTML：<p id=“test”>类选择器</p> CSS：#test{font-size:14px;}

选择器 • 类选择器与ID选择器： • 同一个类样式可在多个标签中被引用，同一个标签可以引用多个类样式。同一个标签最多只能引用一个ID选择符。 • 类选择器与ID选择器都可指定标签范围，以提高其优先级：p.a{font-size:14px;}　ｐ#a{font-size:14px;} • 对于网页结构问题，一般建议使用id选择符来定义；

选择器 • 类选择器与ID选择器： • 对于重复出现的样式，可考虑使用类选择符来提炼； • 当id选择符和类选择符的样式发生冲突时，id选择符的样式优先于类选择符定义的样式。

选择器 • 伪选择器 • 伪类和伪元素定义一些无法通过标签、ID或Class以及其他属性精确控制的特殊区域或特殊状态下的样式，如控制鼠标单击过程中超链接显示为不同的状态。 • 伪类和伪元素以英文冒号（:）为前缀来表示，如：a:hover{color:red;}

选择器 • 伪选择器 • a元素也可为body、div、span等元素,如p:hover{color:red;} • IE6及其以下版本不支持子代选择器、相邻选择器、属性选择器以及除链接以外的其它伪类选择器；

选择器 • 属性选择器 • 选择属性值，如*[title]{font-weight:bold;}，这会使所有包含title信息的元素的字体加粗显示； • 可根据具体属性值选择、根据部分属性值选择以及根据特定属性值选择。

选择器 • 后代选择器 • 可指定任意后代元素； • 指定子元素；h1>strong{color:red;}; • 指定相邻兄弟元素；h1+strong{color:red;} • 通配选择器　以*表示，可与任何元素匹配；　如*{color:red;}将使所有元素字体显示为红色。

选择器 • 通配选择器　以*表示，可与任何元素匹配；　如*{color:red;}将使所有元素字体显示为红色。

选择器 • 包含选择符 • 包含选择符通过空格标识符来表示，用来定义被包含选择符的样式，如：div span{font-size:16px;} • 常用，兼容ie6。 • 多层选择符嵌套 • 嵌套的层级没有明确限制，嵌套的方法利用空格实现，如：div p span{font-size:16px;}

8. CSS继承性、层叠性

继承性 • 在HTML文档树中，祖先指任意相连但在文档树相对上方的元素，后代指任意相连但在文档相对下方的元素；父辈指相连并直接在该元素上方的元素，孩子指相连并直接在该元素上方的元素；

化学多媒体软件设计 HTML+CSS 基础（入门）