Download presentation
Presentation is loading. Please wait.
1
化学多媒体软件设计 HTML+CSS基础（入门）
厚朴前端设计组 郭娟
2
目录 7. CSS组成 1. HTML概述 2. HTML文档 8.CSS继承性与层叠性 3. HTML组成 9.CSS优先级
10.CSS Reset 5. HTML与CSS的关系 11.常用HTML标签 6. 结构与表现分离 12.常用CSS属性
3
1. HTML概述
4
HTML，Hyper Text Mark-up Language（超文本标记语言）；
为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言； HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。 （以上内容只需大致了解以帮助后续学习，无需记忆哦）
5
HTML版本 超文本标记语言（第一版）——1993年6月（并非标准）；
HTML 3.2——1997年1月14日，W3C推荐标准；
6
HTML 4.0——1997年12月18日，W3C推荐标准； HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准； HTML 5 的第一份正式草案于2008年1月22日公布; 2014年10月29日，万维网联盟宣布，历经近8年的艰苦努力， HTML5标准规范终于制定完成。随着移动互联网的快速发展，HTML5将会是未来的主流。 目前所使用的大多是HTML4.01。 （版本信息大致了解即可，各版本详情可咨询度娘或谷歌。）
7
2. HTML文档
8
文档类型 STRICT（严格类型） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
9
文档类型 TRANSITIONAL（过渡类型）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 一般推荐使用过渡型（transitional）标准。 以“厚朴工作室”网站为例，浏览网页时产看源代码，就可以看到其HTML文档类型声明，采用的是过渡类型声明。
10
文档类型 FRAMESET（框架类型） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " 文档类型声明是一个网页的必需元素，如果没有文档类型声明，会导致浏览器无法按照正确的标准解析网页。 （记住我们使用的是过渡型标准。）
11
文档结构 DOCTYPE Head Body
12
<!-- 以上是前面介绍的文档类型声明 -->
如以下实例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <!-- 以上是前面介绍的文档类型声明 --> <html xmlns="
13
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <!-- 以上是head部分 --> <body></body> <!-- 以上是body部分,是页面的主体部分 --> </html>
14
3. HTML组成
15
标签 HTML 文档和 HTML 元素是通过 HTML 标签进行标记的； HTML 标签由开始标签和结束标签组成；
开始标签是被括号包围的元素名； 结束标签是被括号包围的斜杠和元素名；
16
标签 以“厚朴工作室”网站为例。 既有开始标签，又有结束标签的，称为双标签，大多数标签为双标签；
某些 HTML 元素没有结束标签，称为单标签，比如 <br />。 ＨTML标签对大小写不敏感，如<body>等同于<BODY>，但万维网联盟（W3C）在 HTML 4 中推荐使用小写。 以“厚朴工作室”网站为例。
17
元素 HTML 元素指的是从开始标签到结束标签的所有代码；
如“<p>这是P元素</p>”，其中<p>为开始标签，</p>为结束标签，元素内容为：这是P元素； 某些 HTML 元素具有空内容；
18
元素 空元素在开始标签中进行关闭（以开始标签的结束而结束），<br />为最常见的空元素； 大多数 HTML 元素可拥有属性。
19
元素 行内元素 行内元素是指该元素标记的内容不会对现在的结构造成影响，属于应用样式，辅助应用样式表等作用；
常见行内元素有：span、strong、a、em、img、input、label等；
20
元素 块级元素 块级元素为一个块状，单独占据一行，相当于在一个该元素前后各加一个换行；
常见块级元素有：div、h1～h6、ol、ul、li、table、form、dl、dd、dt······
21
元素 元素 行内元素与块状元素最大的区别就在于块状元素会单独占据一行，而行内元素不会单独占据一行。为了更直观，可以实例为参考。
以下是在DW中编辑的HTML标签，链入的是内部样式表。 元素 然后在浏览器中预览效果是这样的。 显然，块状元素发生了折行，而行内元素却只成一行。
22
4. CSS概述
23
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素 样式通常存储在样式表中
24
使用CSS的优势： 1.实现网页样式和内容的分离； 2.更好地控制页面布局； 3.制作出体积更小、下载更快的网页；
4.更快、便于维护及更新大量的网页； 5.浏览器兼容性更好。
25
5. HTML与CSS的关系
26
“栋梁与砖瓦” 在网页中，HTML定义其结构，就像房屋的栋梁；CSS则定义HTML中各结构元素的样式，就像房屋的砖瓦，起装饰作用。
27
如何在HTML中链入CSS？ 方法一：链入外部样式表
样式表保存为一个样式表文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内。 注意：其中被链接的CSS文档位置要准确。 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。
28
如何在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>
29
如何在HTML中链入CSS？ 方法二：内部样式表 可以在 head 部分通过 <style> 标签定义内部样式表。
当单个文件需要特别样式时，就可以使用内部样式表。
30
如何在HTML中链入CSS？ <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>在HTML中链入内部样式表</title> ＜style type=“text/css”> p{font-size:14px;} </style> ＜</head>
31
如何在HTML中链入CSS？ 方法三：导入外部样式表（不常用）
<head> <title>在HTML中导入外部样式表</title> <style type=”text/css”> “mystyle.css”其他样式表的声明--> </style> </head>
32
如何在HTML中链入CSS？ 方法四：内嵌样式（不推荐使用）
内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例： <p style=“color: red;”> 这是一个段落 </p>
33
6. 结构与表现分离
34
什么叫结构与表现分离？ 表现和结构分离的基本思想是确保HTML中只定义结构，不在ＨTML中穿插CSS样式，所有样式都定义到分离的CSS文件中去。 要实现结构与表现分离，则在HTML中链入CSS时，应选择外部样式表。
35
为什么要使结构与表现分离？ 便于代码修改及维护。
比如当需要将某元素的字体大小更改为14px时，只需要在CSS文档中修改即可。而如果使用内嵌样式或内部样式表，则需要逐个打开HTML文件，将每个HTML文件中涉及到该元素的字体大小样式都修改一遍，这就增加了很多不必要的工作。
36
7. CSS组成
37
CSS规则主要由选择器以及一条或多条声明组成：
selector {declaration1; declaration2; ... declarationN } 每条声明又由一个属性和一个值组成： selector {property: value}
38
选择器 元素选择器 选择器为某个元素； 实例：p{font-size:14px;},选择器为p元素。
39
选择器 类选择器 将class属性指定为一个适当的值使类选择器与元素相关联； 类名前加点号，区分大小写； 实例：
HTML：<p class=“test”>类选择器</p> CSS：.test{font-size:14px;}
40
选择器 ID选择器 与类选择器相似，但引用的是ID属性中的值； ID名前加#，区分大小写； 实例：
HTML：<p id=“test”>类选择器</p> CSS：#test{font-size:14px;}
41
选择器 类选择器与ID选择器： 同一个类样式可在多个标签中被引用，同一个标签可以引用多个类样式。同一个标签最多只能引用一个ID选择符。
类选择器与ID选择器都可指定标签范围，以提高其优先级：p.a{font-size:14px;} ｐ#a{font-size:14px;} 对于网页结构问题，一般建议使用id选择符来定义；
42
选择器 类选择器与ID选择器： 对于重复出现的样式，可考虑使用类选择符来提炼；
当id选择符和类选择符的样式发生冲突时，id选择符的样式优先于类选择符定义的样式。
43
选择器 伪选择器 伪类和伪元素定义一些无法通过标签、ID或Class以及其他属性精确控制的特殊区域或特殊状态下的样式，如控制鼠标单击过程中超链接显示为不同的状态。 伪类和伪元素以英文冒号（:）为前缀来表示，如：a:hover{color:red;}
44
选择器 伪选择器 a元素也可为body、div、span等元素,如p:hover{color:red;}
IE6及其以下版本不支持子代选择器、相邻选择器、属性选择器以及除链接以外的其它伪类选择器；
45
选择器 属性选择器 选择属性值，如*[title]{font-weight:bold;}，这会使所有包含title信息的元素的字体加粗显示；
可根据具体属性值选择、根据部分属性值选择以及根据特定属性值选择。
![选择器 属性选择器 选择属性值，如*[title]{font-weight:bold;}，这会使所有包含title信息的元素的字体加粗显示；](http://slidesplayer.com/slide/11617297/62/images/45/%E9%80%89%E6%8B%A9%E5%99%A8+%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8+%E9%80%89%E6%8B%A9%E5%B1%9E%E6%80%A7%E5%80%BC%EF%BC%8C%E5%A6%82%2A%5Btitle%5D%7Bfont-weight%3Abold%3B%7D%EF%BC%8C%E8%BF%99%E4%BC%9A%E4%BD%BF%E6%89%80%E6%9C%89%E5%8C%85%E5%90%ABtitle%E4%BF%A1%E6%81%AF%E7%9A%84%E5%85%83%E7%B4%A0%E7%9A%84%E5%AD%97%E4%BD%93%E5%8A%A0%E7%B2%97%E6%98%BE%E7%A4%BA%EF%BC%9B.jpg "可根据具体属性值选择、根据部分属性值选择以及根据特定属性值选择。")
46
选择器 后代选择器 可指定任意后代元素； 指定子元素；h1>strong{color:red;};
通配选择器 以*表示，可与任何元素匹配； 如*{color:red;}将使所有元素字体显示为红色。
47
选择器 通配选择器 以*表示，可与任何元素匹配； 如*{color:red;}将使所有元素字体显示为红色。
48
选择器 包含选择符 包含选择符通过空格标识符来表示，用来定义被包含选择符的样式，如：div span{font-size:16px;}
常用，兼容ie6。 多层选择符嵌套 嵌套的层级没有明确限制，嵌套的方法利用空格实现，如：div p span{font-size:16px;}
49
8. CSS继承性、层叠性
50
继承性 在HTML文档树中，祖先指任意相连但在文档树相对上方的元素，后代指任意相连但在文档相对下方的元素；父辈指相连并直接在该元素上方的元素，孩子指相连并直接在该元素上方的元素；
51
继承性 如下图文档树中，ul的后代元素为其下方所有元素，祖先元素为其上方所有元素，父辈为body元素，孩子为li。
52
继承性 CSS的继承性是指特定的CSS属性向下传递到子孙元素；
如”<p>CSS的<em>继承性</em></p>”中，若定义p元素颜色为红色,不对em元素字体颜色进行定义，由于继承性，p元素的CSS属性将向下传递至其子孙元素em，其字体颜色也将显示为红色； 可在DW中编辑HTML代码进行验证： 在浏览器中预览效果，可以看到em中的文字显示为红色。 CSS的继承性让开发者的工作更为轻松，但并非所有属性都可继承（这样会导致更糟糕的情形）；
53
继承性 常见的可继承的属性包括： 文本相关属性：font-family、font-size、fontstyle、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing 列表相关属性：list-style-image、list-style-position、list-style-type、list-style 颜色相关属性：color
54
继承性 以下类型属性不能继承： 边框属性 边界属性（margin系列） 补白属性（padding系列） 背景属性 定位属性 布局属性 元素宽、高属性
55
层叠性 CSS层叠性是指当多个选择器同时作用于同一元素，即多个元素的作用范围发生了重叠，CSS如何处理。
CSS的处理原则为，当多个选择器不发生冲突时，元素将应用所有选择器中定义的样式。当多个选择器发生冲突时，CSS的处理方式则涉及到CSS优先级的问题。
56
9. CSS优先级
57
css样式表优先级：原则上优先级从高到低排列是，作者定义的样式表>用户设置的样式>浏览器默认样式>html默认样式，但css2中，可使用!important命令来强制提高重要性，使其优先于任何规则。 css样式的优先级：优先级从高到低排列是： 行内样式>内样式表>外部样式表 可使用!important使某样式拥有最高优先级。
58
. 统计选择符中id选择符个数，然后乘以100 . 统计选择符中类选择符个数，然后乘以10 . 统计选择符中标签选择符个数，然后乘以1
对于常规选择符，它们的优先级加权值如下： 标签选择符：优先级加权值为1 . 伪元素或伪对象选择符：优先级加权值为1 . 类选择符：优先级加权值为10 . 属性选择符：优先级加权值为10 . id选择符：优先级加权值为100 . 其他选择符：优先级加权值为0 另外， . 被继承的值具有特殊性0 . 内联样式优先 . 就近原则，即排在最后的样式具有最大优先权 . 被定义!important命令的样式有最大优先权（!important需置于属性值与分号之间） 计算规则： . 统计选择符中id选择符个数，然后乘以100 . 统计选择符中类选择符个数，然后乘以10 . 统计选择符中标签选择符个数，然后乘以1 依此类推，然后把所有加权值数相加，即可得总加权值，加权值越大，优先级则越高。
59
10. CSS Reset
60
CSS Reset,即CSS重置。通过重新定义标签样式，将浏览器中的默认样式覆盖掉。
为什么要进行CSS Reset? HTML标签在浏览器中有默认样式，而各个浏览器的默认样式并不一致，所以需要通过重置，使各个浏览器产生同样的效果。 每个网站的CSS Reset都有所不同。 以下为“厚朴工作室”网站的CSS Reset截图：
61
11. 常用HTML标签
62
标签 描述 属性 html 定义html文档 xmln（可选） head 用于定义文档的头部，它是所有头部元素的容器。下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。 profile body 定义文档的主体；包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。
63
rel、href、type、target
标签 描述 常用属性 title 定义html文档。 script <script> 标签用于定义客户端脚本，比如 JavaScript； 既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。 type style <style> 标签用于为 HTML 文档定义样式信息； 在 style 中，可以规定在浏览器中如何呈现 HTML 文档。 link <link> 标签定义文档与外部资源的关系； 最常见的用途是链接样式表。 rel、href、type、target
64
标签 描述 常用属性 div 定义文档中的分区或节,把文档分割为独立的、不同的部分。 align p 定义段落。 img 向网页中嵌入一幅图像。 src(必需) 、href(必需) h1~h6 定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
65
href、name、target、title
标签 描述 常用属性 a 定义锚； 锚 (anchor) 有两种用法： 通过使用 href 属性，创建指向另外一个文档的链接（或超链接）; 通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）。 href、name、target、title br 插入一个简单的换行符。 clear
66
标签 描述 常用属性 ul 定义无序列表。 ol 定义有序列表。 li 定义列表项目。 可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。 span 被用来组合文档中的行内元素。 strong 文本定义为语气更强的强调的内容。
67
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
标签 描述 常用属性 table 定义HTML 表格。 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。 align、width、height、cellspacing、cellpadding tr 定义 HTML 表格中的行。 align、valign th 定义表格内的表头单元格。 align、width、height、rowspan
68
align、width、height、rowspan
标签 描述 常用属性 td 定义 HTML 表格中的标准单元格。 align、width、height、rowspan tbody 用于组合 HTML 表格的主体内容。 align、valign thead 定义表格的表头。应该与 tbody和 tfoot元素结合起来使用。 tfoot 定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。
69
12. 常用CSS属性
70
类型 属性 值 描述 字体属性 font-size length|% 定义字体大小。 font-style normal|italic|oblique 定义字体风格。 font-family family-name、 generic-family 定义字体系列。 font-variant normal|small-caps 设置小型大写字母的字体显示文本。
71
类型 属性 值 描述 字体属性 font-weight normal|bold|bolder|lighter 定义字体粗细。 font font-style font-variant font-size/line-height font-family 在一个声明中设置所有字体属性(简写属性)。
72
类型 属性 值 描述 文本属性 color color_name、hex_name、rgb_name 定义文本颜色。 text-transform none|capitalize|uppercase|lowercase 定义文本大小写。 text-decoration none|underline|overline|line-through|blink 定义添加到文本的修饰。
73
类型 属性 值 描述 文本属性 text-indent length|% 定义文本块中首行文本的缩进。
74
类型 属性 值 描述 背景属性 background_color color_name、hex_name、rgb_name 定义背景颜色。 background-repeat repeat|repeat-x|repeat-y|no-repeat 定义是否及如何重复背景图像。
75
background-attachment
类型 属性 值 描述 背景属性 background-image none|url(“URL”) 定义背景图片。 background-attachment scroll|fixed 定义背景图像是否固定或者随着页面的其余部分滚动。
76
类型 属性 值 描述 背景 属性 back ground background-color、 background-position、 background-size、 background-repeat、 background-origin、 background-clip、 background-attachment、 background-image 在一个声明中设置所有的背景属性（简写属性）。
77
类型 属性 值 描述 区块属性 text-indent length|% 定义文本块中首行文本的缩进。 text-align right|left|center|justify 定义文本水平对齐方向。 vertical-align left||right|center|justify 定义元素的垂直对齐方式。
78
类型 属性 值 描述 区块属性 letter-spacing normal|length 定义字符间距。 word-spacing 定义词间距。
79
类型 属性 值 描述 布局属性 display block|none|inline|list-item 定义对象显示类型或方式。 clear none|left|right|both 设置对象左右不允许有浮动对象，该属性需与float属性配合使用。
80
类型 属性 值 描述 布局 float none|left|right 设置对象是否浮动以及浮动方向。当被定义为浮动时，对象将被视作块状显示，(display:block)，此时浮动对象的display属性被忽略。 布局属性 visibility inherit|visible|hidden 设置是否显示对象。
81
类型 属性 值 描述 布局属性 clip auto|rect (number number number number) （裁切区域） 设置对象的可视区域，可视区域外的部分是透明的。取值为rect表示依据上-右-下-左的顺序提供自对象左上角为（0, 0）坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。该属性仅在定位属性值设为absolute时才可以使用，目前支持的浏览器不多。
82
类型 属性 值 描述 布局属性 overflow-x visible|auto|hidden|scroll（显示滚动条） 设置对象内容超过指定高时如何显示。 overflow-y 设置对象内容超过指定宽时如何显示。
83
类型 属性 值 描述 方框属性 width auto|length（自定义） 设置对象的宽度。 height 设置对象的高度。 max-width auto|length（自定义）|% 定义对象的最大宽度，ie6及其以下版本浏览器不支持。
84
类型 属性 值 描述 方框属性 min-width auto|length（自定义）|% 定义对象的最小宽度，ie6及其以下版本浏览器不支持。 max-height 定义对象的最大高度，ie6及其以下版本浏览器不支持。
85
类型 属性 值 描述 方框属性 min-height auto|length（自定义）|% 定义对象的最小高度，ie6及其以下版本浏览器不支持。 margin 设置元素外边距。
86
类型 属性 值 描述 方框属性 padding auto|length（自定义）|% 设置元素内边距。 border border-width、border-color、border-style 设置元素边框属性。 列表属性 list-style-type none、disc、circle、square、decimal 设置列表项标记的类型。
87
类型 属性 值 描述 列表属性 list-style-image none|URL 使用图像来替换列表项的标记。 list-style-position inside|outside 设置在何处放置列表项标记。 list-style list-style-type 在一个声明中设置所有的列表属性（简写属性）。
Similar presentations
