网页设计考点复习讲解.ppt

*/60 PNG PNG（Portable Network Graphics，可移植的网络图形）格式的特点： 无损压缩 没有颜色限制 支持透明度 在网页中插入图像 IMG 标记符 WIDTH 和 HEIGHT 属性指定图像的显示大小 BORDER 属性指定图像的边框 align属性设置对齐方式 hspace属性设置水平方向的空白 vspace属性设置垂直方向的空白 IMG src=”xx” 使用css样式三种方法 直接在标记符中嵌套p133 HTML 标记符的 style 属性 例如：P style=“text-align:center” 其中，style属性的取值形式为： “CSS属性:CSS属性值” 多个属性用分号分隔 在STYLE 标记符定义样式 head中 STYLE样式定义 /STYLE 样式定义的方式为Selector{property1:value1;property2:value2;property3:value3;……} 链接外部样式表文件 LINK 标记符 LINK rel=“stylesheet” type=“text/css” href=“stylesheet.css” HTMLHEAD LINK rel=stylesheet type=text/css href=test.css /HEAD BODYP正文内容/P/BODY /HTML CSS属性单位（长度、颜色、其他） 相对值 em: 相关字体的’font-size’值 ex: 相关字体的’x-height’值 px: 像素值, 与设备相关 绝对值 in: 英寸 — 1 英寸= 2.54 厘米 cm: 厘米 mm: 毫米 pt: 点 —CSS 2.1 用的1点= 1/72英寸 pc: 皮卡 — 1 皮卡= 12 点 常用选择器类型 HTML标记符 具有上下文关系的选择器 用户定义的类 用户定义的ID 虚类 HTML标记符 HTML标记符是最常用的selector，它重新定义了HTML标记符的显示效果。例如： H1{text-align:center;color:red} 使所有用H1标记符修饰的内容都居中和用红色显示。 具有上下文关系的选择器 如果选择器之间用空格分开，就表示具有上下文关系的选择器。 例如 p b {color:red} 表示位于p标记符中的b标记符采用相应格式。 用户定义类 .classname{property:value…} 表示任何class属性为classname的标记符都采用所定义的样式。 eg：H1.color_red{color:red} H1 class=”color_red” 用户定义ID #IDname {property:value;…} 表示id属性为 Idname的标记符采用所定义的样式。 eg: #container { width: 46em; margin: 0 auto; border: 1px solid #000000; } p id=”container” 虚类选择器 a:link 未访问过的超链接 a:visited 访问过的超链接 a:hover 悬停状态的超链接 a:active 活动超链接 所有超链接去下划线：a{text-decoration:none} 悬停变色a:hover{color:red} 样式优先级 （1）外部样式表-站点样式表 headlink （形成站点风格css） (2)页内样式表 headstyle (形成单独页面的风格) （3）行内样式表 h1 style=” “ font-weight:bold (仅在测试时用) * * 网页设计基础 ——考点复习 * 基本语法+标记符基础 p7-14 在 HTML 中，所有的标记符都用尖括号括起来。例如，html、a。 HTML 标记符是不区分大小写的。html、Html和HTML没有区别。 注意：XHTML要求标记符区分大小写 * 标记符基础 绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。某些标记符，例如BR，只要求单一标记符号。 开始标记符与结束标记符的区别在于：结束标记符多一个斜杠“/”（不是反斜杠“\”！） * 背景图案 使用 BODY 标记符的 BACKGROUND 属性可以设置背景图案。HTML语句为： BODY BACKGROUND = “image.gif” 注意：html中没有，所有设定在css中 * 小节 HTML HEADTITLE/TITLE/HEAD BODY/BODY /HTML HTTP超文本传输协议 三种颜色表示方法：颜色名称、#RRGGB