第3讲-css.pptVIP

第3讲Html 标记与CSS样式表 刘文捷 2009.10 Why ？ 从 word 到 html DREAMWEAVER软件 表单 表单 表单 表单 表单 表单 表单 表单 表单 表单 表单 2. CSS样式表 层叠样式表CSS 样式表的作用是什么？ 如何定义样式表？ 如何把样式表和HTML标记关联起来？ CSS属性定义是否和HTML标记属性一致 功能：精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。 优点：简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，减少了重复劳动的工作量。 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 2. CSS样式表 小结 本章内容回顾： （1）对html的基本标记、结构进行了介绍； （2）对网页中如何插入文字、图片、超链接、列表和框架进行了说明； （3）着重介绍了表格、表单、样式表的用法。 重点掌握的问题： （1）如何使用表单实现一些简单功能？ （2）适合使用样式表简化网页？ 例题 定义一个表格，每个单元格所包含的字体都采用楷体，文字间隔为2，文字离单元格上方距离为2，边框颜色为红色 补充 自助建站实例1 实验内容 采用HTML建立个人主页，要求： -有框架 -有链接 -有表格 -由样式表控制主页风格 -不少于4个HTML文件 2.3 CSS的字体属性 4、字体粗细 说明：它有九个级别，如normal、bold、bolder、lighter等 语法：font – weight: [normal|bold|bolder|lighter|100|…] 举例：font-weight: 900 补充：bolder和 lighter是按照前面的字体大小变化。 p#normal { font-weight:normal; } p#bold { font-weight:bold; } p#100 { font-weight:100; } p#900 { font-weight:900; } 真正符合标准网页设计的显示粗体文字的方法是使用font-weight:bold; 使用100-900的数值表示粗体的时候通常情况下不会表现出什么不同. 2.3 CSS的字体属性 5、字体大小 说明：使用的大小可以采用绝对大小、相对大小、长度、百分比等。长度单位分为绝对单位pt、mm、cm、pc、inc；相对单位px。 语法：font – size: [绝对大小|相对大小|长度|百分比] 举例：font-size: 5px 补充：绝对大小允许xx-small/x-small/small/medium/large/x-large/xx-large，默认值是medium；长度和百分比要求是正值。 2.3 CSS的字体属性 6、字体属性 说明：该标记是前面几种方式的组合。 语法：font : [字体风格||字体变形||字体加粗||字体大小||/行号||字体科族] 举例：p { font: italic bold 15px/20px 宋体 } 补充：也可以使用前面的方式，不过不同的部分用‘；’隔开。 2.4 CSS的文本属性 1、文字间隔属性和字母间隔属性 说明：允许使用normal或者长度。 语法：word – spacing: [normal|长度] letter-spacing：[normal|长度] 举例： p { word-spacing: 5px ；letter-spacing : 5px} 补充：要求英文。 2.4 CSS的文本属性 2、文字修饰属性 说明：包含underline、overline、line-through、blink、none五种。 语法：text-decoration: [none|underline|overline|line-through|blink] 举例