css教程ppt课件

1 CSS教程 网页制作系列制作郑伟 2 一本优秀的杂志不仅仅是具备一套完整的结构内容 巧妙出奇的页面布局 还需要一个统一的风格 好的风格代表了一种高级的品味 优秀的网页制作也不再是漂亮的图形 优美的布局和完整的结构就能满足了 使网站整体保持一致的风格 例如字体字形的显示 页面边距等等 也是使网站作品有美感有品味的关键一步 层叠样式表为你完成这一任务 3 通过大量的HTML语言实现 即每次遇上标题 用HTML标签进行设置 这里是标题显然你很容易就会为之头大如斗的 即使你有很好的耐心却难保挂一漏万 设置一多就会有所疏忽 最后 对于公司建设的大型站点来说 往往分成几个组各自开发 这时候就更需要一个统一的样式表来规划网站的整体面貌 各个组都在遵循这统一的样式表的基础上进行各自的开发建设 4 HTML语言由标志和属性构成 CSS也是如此 样式表基本语法 HTML标志 标志属性 属性值 标志属性 属性值 标志属性 属性值 样式表放在不同的地方 产生作用的范围也不同 大致来说 样式表分为内联样式表和外联样式表 即有页面内放置 外部引用 外部导入三种方式 5 1 内联样式表例如我们要设置一HTML页面中所有H1标题字显示为蓝色 其代码如下 ThisisaCSSsamples 页面内容 1 样式表信息包括在和标记中 2 放到和中去 3 整个页面中产生作用 6 注意 1 标记中包括了TYPE text css 这是让浏览器知道你是使用CSS1样式规则 2 加入这一对注释标记是防止有些老式的浏览器不认识样式表规则 可以把该段代码忽略不计 7 在使用样式表时 经常会有多标志用同一个属性比如 B color red I color red H1 color red 用逗号分隔各个HTML标志 把三行代码合并成一行 我们可以写成 B I H1 color red 同一个HTML标志 可能定义到多种属性 例如 我们规定把从H1到H6各级标题定义为红色黑体字 带下划线 则应写为 H1 H2 H3 H4 H5 H6 color red text decoration underline font family 黑体 注意各个标志属性之间用分号隔开 8 内联样式表还包括一种直接插入方式 即单独指定HMTL页面中某一个标志 规定其风格样式 可以写为 定义该表格内的字符大小为10pt 颜色为蓝色 9 2 外部样式表建立一个完全独立的文本文件 其扩展名为 css 文件内容则输入样式表信息 除去任何相关的HTML语言 例如在外部样式表中输入 body line height 130pt H1 H2 H3 H4 H5 H6 color red text decoration underline font family 黑体 b font style italic color FF3333 text decoration underline 少了和注释标记 保存为example css 10 有两种办法可以实现引用外部样式表 一 使用标记链接外部样式表HREF中应包含路径信息 一个HTML文档可引用多个外部样式表 例如 首先链接的example css作为该文档缺省样式表 当样式定义产生冲突时首先满足前者 11 二 使用 IMPORT导入样式表信息存在于在和标记中例如 import example css import style other css 样式表产生作用的优先级按照导入的先后顺序来设定 样式表信息规则一多 就比较容易产生冲突 这时就看哪一个样式表被引用在前 它就是具有第一优先权的 12 四 创建CLASS同一个HTML标志有多种风格时 应该创建类 CLASS 也可直接插入方式可以一一的对之进行定义 但繁琐 定义语法为 标志 类名 标志属性 属性值 标志属性 属性值 标志属性 属性值 引用方法是 13 例如 我们打算让某一些段落缩进0 5in 另一些段落缩进1 0in 我们知道段落采用这个标记 代码如下 Thisisasample 这个段落将缩进0 5in这个段落将比上面缩进一倍距离 14 可以直接定义CLASS 应用于HTML页面中的各个标记 其语法只是比上面的少了一个标志 类名 标志属性 属性值 标志属性 属性值 标志属性 属性值 例如 引用的方法 例如设置某单元格中的字符大小 设置某一段落字符 15 用ID建立多种风格 实现同一规则被应用到页面中不同的地方 语法是 id名 标志属性 属性值 标志属性 属性值 标志属性 属性值 如上面的例子 可以改写为 引用的方法也相同 16 伪类和伪元素伪类和伪元素是特殊的类和元素 能自动地被支持CSS的浏览器所识别 伪类区别开不同种类的元素 例如 visitedlinks 已访问的连接 和activelinks 可激活连接 描述了两个定位锚 anchors 的类型 伪元素指元素的一部分 例如段落的第一个字母 伪类或伪元素规则的形式如选择符 伪类 属性 值 或选择符 伪元素 属性 值 伪类和伪元素不应用HTML的CLASS属性来指定 一般的类可以与伪类和伪元素一起使用 如下 选择符 类 伪类 属性 值 或选择符 类 伪元素 属性 值 17 定位锚伪类伪类可以指定A元素以不同的方式显示连接 links 已访问连接 visitedlinks 和可激活连接 activelinks 定位锚元素可给出伪类link visited或active A link color red A active color blue font size 125 A visited color green font size 85 首个字母伪元素首个字母伪元素用于加大 dropcaps 和其他效果P first letter font size 300 float left 18 五 边框属性每一个网页都可以理解成是被一个方框框起来的 而页面中不同的部分又可以分为一个个小的方框 因此定义方框的边距 边界 颜色等的边框属性应用而生 1 边距属性 左边距 margin left 右边距 margin right 上边距 margin top 下边距 margin bottom 边距 margin 边距属性定义HTML页面中方框四边和其他元素之间的空白距离 每一个margin side属性只影响到一条边 而margin则提供了一个同时设置四个边距的机会 19 2 填充属性 左填充 padding left 右填充 padding right 上填充 padding top 下填充 padding bottom 填充 padding 填充属性设置边框和内部元素的距离 它和边距属性十分相似 每个padding side定义一个边框距离 padding则同时定义四个距离 20 3 边界属性 3 1边界宽度 上边界宽 border top width 右边界宽 border right width 下边界宽 border bottom width 左边界宽 border left width 边界宽 border width这几个属性定义边界宽度 用thin medium和thick分别表示细 中等和粗 或者指定具体的数值来定义边界的宽度 21 3 2边界样式 border style 该属性用以定义边框的风格呈现式样 共有九种 none 不显示边框 为缺省值dotted 点线dashed 虚线solid 实线double 双线groove 凹线ridge 凸线inset 使整个方框凸起outset 使整个方框凹陷 上边界 border top 右边界 border right 下边界 border bottom 左边界 border left 边界 border 这几个是简写属性 它集合了上面几种属性的特点 可使用其给边框一次性定义宽度 式样和颜色 各属性值之间用空格隔开 22 3 3边界颜色 border color 这个属性定义边界的颜色 可以用16种颜色名或RGB值来设置 16种颜色名分别为 aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow RGB值则应表示为 RRGGBB或r g b rrggbb 如 00cc00 rgb x x x x是一个介乎0到255之间的整数 如 rgb 0 204 0 rgb y y y y是一个介乎0 0到100 0之间的整数 如 rgb 0 80 0 23 3 4 尺寸属性定义方框的宽度width和高度height 例 DIV sample width 300px height 200px 3 5 浮动和清除属性浮动属性是指某一对象在母体元素内的浮动位置 清除属性和浮动属性一起使用 则表示同一母体内的其他对象可以流到浮动对象的旁边 例 float1 float left clear right 假如这个样式定义在表格单元中的某个对象 则该对象将浮动在单元中的左边 而同一单元格中的其他对象在它右边的周围部分 logo float right 24 这里是一个比较完整的例子 把这个例子按样输入 建立一个HTML文件 看看它的显示样式 asample这是一个关于边框属性的完整实例看看它的显示风格 25 六 字体属性字体属性共分五种 字体家族 font family 字体风格 font style 字体变体 font variant 字体黑度 font weight 字体尺寸 font size 此外font属性是一个总体属性 可一一指定以上各种属性和属性值 1 字体家族 font family 通过font family指定字体类型 其语法为 标记 font family 字体类型 字体类型 字体类型 例 p font family TimesNewRoman arial serif 假如字体类型之间有空格 就象TimesNewRoman 必须用引号将之括起 中文字体也须用括号括起 列出多种类型 以防浏览用户无前面的字体类型时 可以用后一种字体类型将之取代 26 2 字体风格 font style 属性值 normal 普通 italic 斜体 oblique 倾斜 默认值为normal 例 h1 font syle italic 3 字体变体 font variant 属性值 normal 普通 和small caps 小型大写字母 缺省值为normal 字体变体属性是让字体以小型大写方式来显示 小型大写方式看起来是一般大写字母的75 80 左右 该变体在某些需要特殊表现的标题中比较有用 例 H1 font variant small caps 4 字体加粗 font weight 属性值 normal bold lighter bolder 以及数值100 900 该属性用以指定字体粗细的显示 并不是所有字体都可以显示这些指定的加粗程度 因此有些情况下这些指定值会被替代 例如100到300被lighter替代 600到900则替换bolder 反之亦然 例 h1p 27 5 字体尺寸 font size 字体尺寸可设置绝对尺寸 相对尺寸 长度 百分比 绝对尺寸分为xx small x small small medium large x large xx large七种 它们以各种字体的medium尺寸成比例缩放 每一级1 5倍 相对尺寸有larger和smaller两种 根据字体原来的大小来决定缩放以后的大小 长度是以pt points cm mm inch等度量单位用具体数值来指定字体的尺寸大小 百分比是把字体设置成原来尺寸的百分比值 可以任意指定数值 例如 h1 font size 150 td font size 10pt p font size smaller 28 6 字体 font 该属性使你可以把上述字体的各种属性合并到一行代码中指定 也即提供了一个实现字体属性的快捷方式 各种属性值之间用空格隔开 例如 td font italicbold12pt 方正楷体简体 宋体 29 七 文本属性文本属性设置文本的一些显示特性 例如文本对齐 文本缩进 行间距 字间距等 1 文本对齐text align属性值 left 左 right 右 center 居中 justify 两端对齐 例 h1 text align center 2 文本缩进text indent该属性有效的控制了文本段落第一行的缩进 其值可以指定 是长度或段落宽度的百分比 例 p text indent 1 0in 3 行高line height该属性设置行与行之间的间距 其值可以为数值 长度或百分比 百分比以行高为基础 例 body line height 120 4 字间距letter spacing字间距设置字与字之间的距离 同样可以用数值 长度或百分比来指定 百分比以字符大小为基础 例 body letter spacing 0 5em 顺便提一下 文本属性中还有一个单词间距 word spacing 设置每个单词之间的距离 对于中文页面来讲 可能很少用到 30 5 文本装饰text decoration属性值 underline 下划线 overline 底线 line through 线穿过 blink 闪烁 none 无 例 h3 text decoration underline 6 垂直对齐vertical align属性值 baseline 基准线 super 上标 sub 下标 top 顶部 text top 文本顶部 middle 中 bottom 底部 text bottom 文本底部 和百分比 通过不同的值设某对象相对其他文本的位置 特别有用的是 上标 下标成为可能 例 平方值 32 31 7 文本变换text transform属性值 capitalize 首字母大写 uppercase 大写 lowercase 小写 和none 无 缺省值为none 例 p text transform capitalize 32 八 颜色与背景属性在很多时候 要用到颜色属性 指定文本段落 标题 背景等的颜色 背景属性则用于设定背景图像在浏览器中的显示方式 1 颜色属性 color属性值 16种颜色名 上文已经介绍过 数值 RRGGBB或是r g b 在 及其单元元素 标题等对象都可以用到color属性 下例指定超链接的初始颜色和被激活时的颜色 a color green a hover color red 33 2 背景属性 background color定义页面或指定对象的背景颜色 属性值和颜色属性相同 background image属性值 none url address 包括相对路径和绝对路径 指定对象的背景图像 background repeat属性值 no repeat 无重复 repeat 重复 repeat x x方向重复 repeat y y方向重复 缺省值为repeat 指定背景图像的显示方式 该属性需与background image和background position组合使用 background attachment属性值 scroll 随对象一起滚动 fixed 固定 缺省值为scroll 该属性指定对象的背景图像是否与对象一起滚动 或是固定在页面上的某一个位置 这个属性与background image组合使用 background position属性值 垂直位置vertical 指定top center bottom和具体数值 百分比 水平位置horizontal 指定left center right和具体数值 百分比 定义背景图像的绝对或相对位置显示 34 这是一个简写属性 可以把上述所有背景属性归纳到一行代码中定义 这里是一个较完整的例子 body background image url yueju images 002 gif background repeat no repeat background position 20px50px background attachment fixed 用background属性简写为 body background url yueju images 002 gif no repeat20px50pxfixed 35 九 分类属性分类属性控制了浏览器的显示方式 我们知道在HTML语言中 对于空格和换行的处理是缺陷所在 分类属性的到来使这些特性的控制成为可能 分类属性包括显示属性 空白属性和列表属性 下面一一的介绍 1 显示属性display通过显示属性控制HTML页面中被定义对象在浏览器中的显示方法 这个属性有四个值 块 block 在该对象前后自动增加分行符例 texttext图像前后的文字将与图像分行显示 内联 inline 这个对象前后的元素与之在一行显示这个属性值正好相反 当需要对象与前一元素强制性在同一行时使用该值 列表项 list item 加一个列表项标记 其余同块该