880 likes | 1.15k Views
化学多媒体软件设计 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 (超文本标记语言);
E N D
化学多媒体软件设计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. 结构与表现分离
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。 (版本信息大致了解即可,各版本详情可咨询度娘或谷歌。)
文档类型 • 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> <!-- 以上是head部分--> <body></body> <!-- 以上是body部分,是页面的主体部分--> </html>
标签 • HTML 文档和 HTML 元素是通过 HTML 标签进行标记的; • HTML 标签由开始标签和结束标签组成; • 开始标签是被括号包围的元素名; • 结束标签是被括号包围的斜杠和元素名;
标签 • 既有开始标签,又有结束标签的,称为双标签,大多数标签为双标签; • 某些 HTML 元素没有结束标签,称为单标签,比如 <br />。 • HTML标签对大小写不敏感,如<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标签,链入的是内部样式表。 • 元素 然后在浏览器中预览效果是这样的。 显然,块状元素发生了折行,而行内元素却只成一行。
CSS 指层叠样式表 (Cascading Style Sheets) • 样式定义如何显示 HTML 元素 • 样式通常存储在样式表中
使用CSS的优势: • 1.实现网页样式和内容的分离; • 2.更好地控制页面布局; • 3.制作出体积更小、下载更快的网页; • 4.更快、便于维护及更新大量的网页; • 5.浏览器兼容性更好。
“栋梁与砖瓦” 在网页中,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”><!--@import “mystyle.css”其他样式表的声明--></style></head>
如何在HTML中链入CSS? • 方法四:内嵌样式(不推荐使用) 内嵌样式是混合在HTML标记里使用的,用这种方法,可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值,如下例: <p style=“color: red;”> 这是一个段落</p>
什么叫结构与表现分离? • 表现和结构分离的基本思想是确保HTML中只定义结构,不在HTML中穿插CSS样式,所有样式都定义到分离的CSS文件中去。 • 要实现结构与表现分离,则在HTML中链入CSS时,应选择外部样式表。
为什么要使结构与表现分离? • 便于代码修改及维护。 比如当需要将某元素的字体大小更改为14px时,只需要在CSS文档中修改即可。而如果使用内嵌样式或内部样式表,则需要逐个打开HTML文件,将每个HTML文件中涉及到该元素的字体大小样式都修改一遍,这就增加了很多不必要的工作。
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;} p#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;}
继承性 • 在HTML文档树中,祖先指任意相连但在文档树相对上方的元素,后代指任意相连但在文档相对下方的元素;父辈指相连并直接在该元素上方的元素,孩子指相连并直接在该元素上方的元素;