《网页设计基础-11css的应用2》由会员分享，可在线阅读，更多相关《网页设计基础-11css的应用2（55页珍藏版）》请在金锄头文库上搜索。
1、CSS样式表的应用（样式表的应用（2） 马宝君 北京邮电大学 2014-04-29 课程回顾课程回顾 本章重点（本章重点（2 2次课）：次课）： 创建、编辑创建、编辑CSSCSS样式样式 创建、编辑、选用创建、编辑、选用CSSCSS外部样式表外部样式表 常用常用CSSCSS特效滤镜的使用方法特效滤镜的使用方法 网上学习参考材料网上学习参考材料 http:/http:/ / http:/http:/ /csscss/ /index.aspindex.asp 2 回顾：回顾：CSS的基础知识的基础知识 1、CSS (Cascading Style Sheets) 层叠样式表： 是一系列格式设置规则
2、，来控制网页内容的外观显示 3 样式：就是对网页中的元素（字体、段落、图象、列表等）属性样式：就是对网页中的元素（字体、段落、图象、列表等）属性 的整体概括。的整体概括。 层叠：指当层叠：指当HTML文件引用多个文件引用多个CSS文件时，如果文件时，如果CSS文件之间文件之间 所定义的样式发生了冲突，将依据层次的先后来处理其样式对内所定义的样式发生了冲突，将依据层次的先后来处理其样式对内 容的控制。容的控制。 CSSCSS主要功能在于希望在一开始就将需要使用或者能提前确定的格主要功能在于希望在一开始就将需要使用或者能提前确定的格 式设置好，不需要反复写入同样的标签，就可以对整个网页应用式设置好
3、，不需要反复写入同样的标签，就可以对整个网页应用 设置好的设置好的CSSCSS格式。格式。 CSSCSS在在DreamweaverDreamweaver使用中占有举足轻重的地位，如果能够充分利使用中占有举足轻重的地位，如果能够充分利 用用CSSCSS特性，不但网页的布局安排更加灵活，内容呈现叶更能趋于特性，不但网页的布局安排更加灵活，内容呈现叶更能趋于 完美。完美。 回顾：回顾：CSS的基本语法的基本语法 选择器选择器 属性属性1:值值1; 属性属性2:值值2 bodyfont-family: “Courier New” p text-align: center; color: red; fo
4、nt-family:calibri 类选择类选择符符 p.red color: red .redcolor:red id选择选择符符 p#id1color: red #id1color: red 包含选择符包含选择符 4 引用：引用： 引用：引用： 回顾：回顾：CSS样式表的几种插入方式样式表的几种插入方式 嵌入样式表CSS文件定义在HTML主体 内部样式表CSS文件定义在HTML文件头 链入外部样式表文件定义在HTML文件外部 导入外部样式表文件定义在HTML文件外部 import “/css/tablestyle.css” ; 5 编辑编辑CSS样式样式 CSS样式有8种类型： 定义定义C
5、SS样式类型属性样式类型属性 定义定义CSS样式背景属性样式背景属性 定义定义CSS样式区块属性样式区块属性 定义定义CSS样式方框属性样式方框属性 定义定义CSS样式边框属性样式边框属性 定义定义CSS样式列表属性样式列表属性 定义定义CSS样式定位属性样式定位属性 定义定义CSS样式扩展属性样式扩展属性 6 更详细的介绍及范例见：更详细的介绍及范例见： http:/ 1. CSS样式类型属性样式类型属性 设置“类型”属性设置“类型”属性 使用“CSS规则定义”对话框中的“类型”类别 可以定义CSS样式的基本字体和类型设置。 7 设置字体样式设置字体样式 字体字体 font-family 8
6、 样式样式 font-style 设置字体是否为斜体 font-style:normal|italic|oblique normal 正常显示正常显示 italic 斜体斜体 oblique-歪斜体显示歪斜体显示 行高行高 line-height normal| 值值 设置字体样式设置字体样式 变体变体 font-variant 针对英文字体设置的。即设置字体显示为小型的大写针对英文字体设置的。即设置字体显示为小型的大写 字母。字母。 normal（正常）（正常）|samll-caps(小型的大写字母小型的大写字母) 9 粗细粗细 font-weight normal|bold|bolder|
7、lighter|100|200|900 字体大小字体大小 font-size 设置字体样式设置字体样式 文字的大小写文字的大小写Text-transform 用来控制英文单词的大小写转换用来控制英文单词的大小写转换 capitalize: 每个单词的首字母大写每个单词的首字母大写 uppercase :所有单词字母大写所有单词字母大写 lowercase: 所有单词字母大写所有单词字母大写 none : 默认值显示默认值显示 10 文字的修饰文字的修饰 text-decoration 对文字添加修饰对文字添加修饰 underline|overline|line-through|blink un
8、derline: 下划线下划线 overline: 上划线上划线 line-through: 删除线删除线 blink: 添加文字闪烁效果添加文字闪烁效果 (在在Netscape浏览器中正常显示浏览器中正常显示) none: 没有修饰，是默认值没有修饰，是默认值 设置字体样式设置字体样式 11 2. CSS样式背景属性样式背景属性 设置“背景”设置“背景” 使用“CSS规则定义”对话框中的“背景”类型，可以 定义CSS样式的背景设置。可以网页中的任何元素应用 背景属性。 12 CSS样式背景属性样式背景属性 背景颜色属性背景颜色属性 BackgroundBackground- -color:c
9、olor: 为元素设置一种纯色：这种颜色会填充元素的内容、内边距和边 框区域，扩展到元素边框的外边界（但不包括外边距）。如果边 框有透明部分（如虚线边框），会透过这些透明部分显示出背景 色 |transparent(默认,背景颜色为透明) 背景图像属性背景图像属性 BackgroundBackground- -image:image: |none(默认，不显示背景图片) 背景图片重复属性背景图片重复属性 BackgroundBackground- -repeat:repeat: repeat(默认)|repeat-x|repeat-y|no-repeat 设置背景图像网页长度超过一屏时是否随网
10、页滚动设置背景图像网页长度超过一屏时是否随网页滚动 BackgroundBackground- -attachmentattachment： fixed|scroll(默认) 13 CSS样式背景属性样式背景属性 背景图像的水平方向位置背景图像的水平方向位置BackgroundBackground- -positionposition（X X） left|center|right|值 背景图像的垂直方向位置背景图像的垂直方向位置BackgroundBackground- -positionposition（Y Y） top|center|bottom|值 14 CSS样式背景样式背景属性属性(
11、界面设置里没有界面设置里没有) 背景图片的尺寸：背景图片的尺寸：background-size 15 背景图片平铺、拉伸！背景图片平铺、拉伸！ 3. CSS样式区块属性样式区块属性 设置区块属性设置区块属性（文本区块属性文本区块属性） 使用“CSS规则定义”对话框中的“区块”类别，可以定 义间距和对齐设置。 区块在网页的文本段落排版中经常用到，如首行缩进、 文件间距。 16 CSS样式区块属性样式区块属性 Word-spacing: (单词间距单词间距) 指英文单词间的距离。一般使用默认设置。 normal|长度单位 正值为增加间距，负值为缩小间距。 Letter-spacing（字母间距）（
12、字母间距） normal|长度单位 Vertical-align（垂直对齐垂直对齐） baseline(基线)| sub (下标)|super| (上标)| top(顶部)|text-top(文本顶对齐 )|middle (居中对齐) |bottom (底部对齐) |text-bottom (文本底对齐) | 值( 后面对应的单位是%) 17 CSS样式区块属性样式区块属性 Text-align（文字对齐（文字对齐 ） 设置对象的水平对齐方式设置对象的水平对齐方式 left(默认默认)|right|center|justify(两端对齐两端对齐) Text-indent（文本缩进属性文本缩进属
13、性 ） 数字数字|百分比百分比 百分比是相对上一级元素的宽度设定的百分比是相对上一级元素的宽度设定的 18 CSS样式区块属性样式区块属性 White-Space（空格）（空格） 值：normal|pre|nowrap normal：忽略源代码之间所有空格； pre：保留由空格键、Tab键和Enter键产生的空格； nowrap：文本不自动换行，文本会在在同一行上继续，直到遇 到 标签为止。 Display（显示）（显示） Display：设置对象如何显示或是否显示。一般不常用 19 4. CSS样式方框属性样式方框属性 设置设置“方框方框”属性属性 使用“CSS规则定义”对话框中的“方框”类
14、别，即可在右 侧选项栏中设置图像距离。 一般在单元格四周的距离或图文混排时，会用到此项设置。 20 CSS样式方框属性样式方框属性 宽宽(Width)和高和高(Height) 设置对象的宽度和高度 浮动浮动(Float) 设置其他对象（如文本、层、表格）在哪边围绕对象浮动 清除清除(Clear) 规定元素的哪一侧不允许其他浮动元素 填充填充(Padding) 如果对象有边框，指定对象内容与对象边框之间的间距（内 边距属性） 边界边界(Margin) 如果对象有边框，指定一个对象的四边与其他对象之间的间 距（外边距属性） 21 5. CSS样式边框属性样式边框属性 设置设置“边框边框”属性属性
15、使用“CSS规则定义”对话框中的“边框”类别可以定义 元素周围的边框的设置（如宽度、颜色和样式）。 22 6. CSS样式列表属性样式列表属性 设置设置“列表列表”属性属性 使用“CSS规则定义”对话框中的“列表”类别，可以为 定义列表的外观样式。（如项目符号大小和类型）。 23 CSS样式列表属性样式列表属性 类型类型 list-style-type: 设置列表符号类型。 项目符号图像项目符号图像 list-style-image: 可以自定义列表的图像。 位置位置 list-style-postion: 有“内 inside”、“外 outside”两个选项。 内列表缩进，浏览时效果不明显 外列表贴近左边框，有明显缩进 (系统默认) 24 7. CSS样式定位属性样式定位属性 设置“定位”属性 “定位”样式属性是对于“层”的设置。 25 CSS样式定位属性样式定位属性 Position属性属性 absolute 表示绝对定位，使用Placement 输入的、
