PHOTOSHOP 培训基础实践第1课

Download Report

Transcript PHOTOSHOP 培训基础实践第1课 

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