css样式学习课件.ppt

主要内容 添加层叠样式表的方法层叠样式表的格式层叠样式表的分类层叠样式表的伪类 CSS层叠样式表简介 CSS CascadingStyleSheets 层叠样式表 内容结构和格式控制相分离 Css的好处 将内容结构和表现样式分离 可以使web开发人员加快网页设计速度 并能减少维护的工作量 做到 一改全改 提供了HTML所不支持的属性 提供我们开发网页更多的选择 可以使网页更漂亮 Css语法核心 规则 Css规则 选择器 属性 属性值 属性 属性值 如 H1 color green 每一条规则包含两部分 一个选择及其说明说明包含两部分 属性和属性值 添加层叠样式表的方法 共有4种方法 内联样式表 inlinestylesheets 嵌入样式表 embeddedstylesheets 链接样式表 linkedstylesheets 输入样式表 importedstylesheets 添加层叠样式表的方法 一 内联样式表方式 inlinestylesheets 直接添加在HTML的标记里 方式为 网页内容注意 这种方式内容和样式没有分离 没有发挥css优势 添加层叠样式表的方法 二 嵌入样式表方式 embeddedstylesheets 添加层叠样式表的方法 三 链接外部样式表文件 linkedstylesheets rel stylesheet 指在页面中链接资源类型是一个外部样式表 type text css 指文档类型是样式表文本 href css 是文件所在的位置 在head标记里面去链接 外部样式表文件可以用任何文本编辑器 例如 记事本 打开并编辑 一般样式表文件扩展名为 css 内容是定义的样式表一个外部样式表文件可以应用于多个页面 当你改变这个样式表文件时 所有页面的样式都随之而改变 在制作大量相同样式页面的网站时 非常有用 一个比较成熟的网站一般只需要1到2个css样式表文件即可 添加层叠样式表的方法 四 输入样式表方式 importedstylesheets 添加层叠样式表的方法 总结 1 这四种方式 前三种在实际项目开发当中用的最多 尤其是第三种链接样式表方式 因此要求掌握 2 css规则的优先级如果前三种方式在一个网页同时出现 且都定义了同一类型性质的属性 优先级排列顺序是内联样式表 嵌入样式表 链接样式表 对同一种方式优先级顺序 如链接样式表之间优先级是最后定义的优先级高 选择器的分类 共有3种类型的选择器1 标记选择器2 类选择器 关联类选择器 独立类选择器 3 ID选择器 标记选择器 对某特定HTML标记规定样式 语法 HTML标记名 属性1 属性1值 属性2 属性2值 标记选择器 对某特定HTML标记规定样式 如何使用CSS指定CSS修饰的段落 关联类选择器 为同一标记定义不同样式 语法 标记名 类名1 属性1 属性1值 属性2 属性2值 标记名 类名2 属性1 属性1值 属性2 属性2值 引用 内容 关联类选择器 为同一标记定义不同样式 如何使用CSS未加CSS修饰的段落指定CSS修饰的段落指定另一种CSS修饰的段落 独立类选择器 为多个不同标记定义相同的样式 语法 类名 属性1 属性1值 属性2 属性2值 引用 内容 独立类选择器 为多个不同标记定义相同的样式 如何使用CSS未加CSS修饰的段落指定CSS修饰的段落指定另一种CSS修饰的段落 ID选择器 为某一个特定标记定义样式 语法 ID名 属性1 属性1值 属性2 属性2值 引用 内容 选择器的分类小结 1 标记选择器 对某特定HTML标记规定样式2 类选择器1 关联类选择器 为同一标记规定不同样式2 独立类选择器 为多个不同标记规定相同样式3 ID选择器 为某一个特定标记定义样式注意前两种选择器最常用 尤其是独立类选择器 使用这种方法 我们可以很方便的在任意元素上套用预先定义好的类样式 样式控制常用属性 控制字体 文字的样式 字体类型语法如下 字体大小语法如下 字体风格语法如下 字体粗细语法如下 文字大小写语法如下 文字修饰语法如下 font family 字体名称 font size 字号参数 font style 斜体字的名称 font weight 字体粗细 text transform 参数 text decoration 参数 控制文本的样式 单词间距语法如下 word spacing 间隔距离 字母间距语法如下 letter spacing 字母间距 行距语法如下 line height 行间距离 文本水平对齐语法如下 text align 参数 文本垂直对齐语法如下 vertical align 参数 文本缩进语法如下 text indent 缩进距离 控制颜色和背景的样式 颜色属性语法如下 color 参数 背景颜色语法如下 background color 参数 背景图片语法如下 background image url URL 背景图片重复语法如下 background repeat 参数 背景图片固定语法如下 background attachment 参数 背景定位语法如下 background position 参数表 控制列表 界面的的样式 列表符号语法如下 图形符号语法如下 列表位置语法如下 list style type 参数 list style image URL list style position 参数 cursor 鼠标形状参数 户界面的样式语法如下 控制框与边框的样式 边框空白 MARGIN 语法如下 边框空白 MARGIN 对象间隙 PADDING 语法如下 显示的样式语法如下 空白样式语法如下 margin top 顶部空白距离margin right 右边空白距离margin bottom 底部空白距离margin left 左边空白距离 padding top 顶部间隙padding right 右边间隙padding bottom 底部间隙padding left 左边间隙 display 参数 white space 参数 小结 1 CSS CascadingStylesheets 层叠样式表 是一种制作网页的新技术 添加层叠样式表的方法 最简单的方法是直接添加在HTML的标记 tag 里 添加在HTML的头信息标识符里 同样是添加在HTML的头信息标识符里 联合使用样式表 样式表的声明分为选择符 selector 和块 block 块里包含属性 properties 和属性的取值 value 控制字体的样式包括控制字体类型 字体大小 字体风格 字体粗细四个部分 小结 2 控制文字的样式包括文字大小写 文字修饰两个部分 控制文本的样式包括单词距离 字母距离 文本行距 文本水平对齐 文本垂直对齐文本缩进六个部分 控制颜色和背景的样式包括颜色属性 背景颜色 背景图片 背景图片重复 背景图片固定 背景定位六个部分 控制列表的样式包括列表样式 图形符号 列表位置三个部分 容器BOX包括了对象本身 边框空白 对象边框 对象间隙四个方面 补充内容 Ul和li用法滤镜效果 ul标签和li标签的运用 A 运用CSS格式化列表符 ulli list style type none B 如果你想将列表符换成图像 则 ulli list style type none list style image url blog images icon gif C 为了左对齐 可以用如下代码 ul list style type none margin 0px D 如果想给列表加背景色 可以用如下代码 ul list style type none margin 0px ulli background CCC E 如果想给列表加MOUSEOVER背景变色效果 可以用如下代码 ul list style type none margin 0px ullia display block width 100 background ccc ullia hover background 999 说明 display block 这一行必须要加的 这样才能块状显示 F LI中的元素水平排列 关键FLOAT LEFT ul list style type none width 100 ulli width 80px float left 滤镜效果制作 制作一个 Alpha滤镜参数测试板 在测试板上输入参数值后 点一下鼠标 立即可看到结果 完全的 立等可见 使你很快就能获得一组合适地参数值 从而给你节约许多宝贵时间 alpha滤镜给制作网页特效提供了较大的创作空间 但由于它控制参数较多 在实际应用时 为了确定一组合适的参数值 不得不反复调整修改 在编辑窗口和预览窗口来回倒腾 甚是麻烦 本文介绍了一种简单的方法 制作一个 Alpha滤镜参数测试板 在测试板上输入参数值后 点一下鼠标 立即可看到结果 完全的 立等可见 使你很快就能获得一组合适地参数值 从而给你节约许多宝贵时间 测试板具体的制作方法 1 输入一段文字或插入一张图片 2 制作一个alpha滤镜 名称为 alpha1 参数任意 不是使用Dreamweaver的网友 可直接把下面的滤镜代码复制到网页源代码的 head 与 head 之间 styletype text CSS alpha1 filter alpha opacity 50 style 3 插入一个层 给层取名为 myimage 这一点很重要 否则javascript程序将无法执行 因它不知对那个对象操作 在层上插入一张图片或写上一段文字 若是用文字则应给层设置背景色 在层上加载alpha滤镜 这个图层必需能覆盖住下面的文字或图象 4 在上面插入的层中再插入一个层 这个图层应放置在上次插入的图层的下方 不要相互遮盖 并在层上做一个输入alpha滤镜主要参数的表单 像图1所示的那样 表单中要加入一个 onchage 事件来调用javascript函数 以达到动态改变Alpha滤镜参数的目的 网页源代码中表单的代码是这样的 form p 输入透明度 inputtype text name opacity size 4 value 100 onChange setfilter br 输入结束状态的透明度 inputtype text name finishopacity size 4 value 0 onChange setfilter br 输入样式的值 inputtype text name setstyle size 3 value 0 onChange setfilter p form 这段代码中的 onChange setfilter 在用Dreamweaver制作表单时不能自动生成 必须手动加入 表单中的初始值也就是Alpha滤镜的初始参数值 5 在网页源代码 head 与 head 之间插入下面这段javascript程序 scriptlanguage javascript functionsetfilter myimage filters alpha opacity document forms 0 opacity value myimage filters alpha finishopacity document forms 0 finishopacity value myimage filters alpha style document forms 0 setstyle value script 这段程序的作用是把在表单中输入的滤镜参数值传给Alpaha滤镜 6 在网页载入时调用javascript中的 selfilter 函数 也就是在 body 标记中加上这样的一句代码 onload setfilter 其目的是使Alpha滤镜获得初始参数值 CSS常用技巧十则 1 Block和inline元素对比所有的HTML元素都属于block和inline之一 block元素的特点是 总是在新行上开始 高度 行高以及顶和底边距都可控制 宽度缺省是它的容器的100 除非设定一个宽度 和是块元素的例子 相反地 inline元素的特点是 和其他元素都在一行上 高 行高及顶和底边距不可改变 宽度就是它的文字或图片的宽度 不可改变 和是inline元素的例子 用display inline或display block命令就可以改变一个元素的这一特性 什么时候需要改变这一属性呢 让一个inline元素从新行开始 让块元素和其他元素保持在一行上 控制inline元素的宽度 对导航条特别有用 控制inline元素的高度 无须设定宽度即可为一个块元素设定与文字同宽的背景色 2 再来一个box黑客方法之所以有这么多box黑客方法 是因为IE在6之前对box的理解跟别人都不一样 它的宽度要包含边线宽和空白 要想让IE5等同其他浏览器保持一致 可以用CSS的方法 padding 2em border 1emsolidgreen width 20em width 14em 第一个宽度所有浏览器都认得 但IE5 x不认得第2行的宽度设置 只因为那一行上有空白的注释符号 多么蠢的语法分析 所以IE5 x就用20减掉一些空白 而其他浏览器会用14这个宽度 因为它是第2行 会覆盖掉第1行 3 页面的最小宽度min width是个非常方便的CSS命令 它可以指定元素最小也不能小于某个宽度 这样就能保证排版一直正确 但IE不认得这个 而它实际上把width当做最小宽度来使 为了让这一命令在IE上也能用 可以把一个放到标签下 然后为div指定一个类 然后CSS这样设计 container min width 600px width expression document body clientWidth1200 1200px auto 4 IE与宽度和高度的问题IE不认得min 这个定义 但实际上它把正常的width和height当作有min的情况来使 这样问题就大了 如果只用宽度和高度 正常的浏览器里这两个值就不会变 如果只用min width和min height的话 IE下面根本等于没有设置宽度和高度 比如要设置背景图片 这个宽度是比较重要的 要解决这个问题 可以这样 box width 80px height 35px html body box width auto height auto min width 80px min height 35px 所有的浏览器都可以使用第一个box设置 但IE不认得第2段设置 因为其中用到了子选择器命令 第2个设置更特殊些 所以它会覆盖掉第1个设置 5 字体变形命令text transform命令很有用 它有3个值 text transform uppercase text transform lowercase和text transform capitalize 第1个会把文字变成全大写 第2个变成全小写 第3个变成首字母大写 这对拼音文字非常有用 即使输入时有大小写错误 在网页上也看不到 6 IE中图片文字消失的问题有时会遇到文字或背景图突然消失的问题 刷新一下又出现了 这在靠近漂浮元素时更容易发生 注 没见过 此时 可以为消失的元素设定 position relative 如果不行 再考虑为这些元素指定一个宽度试试 7 不可见文字不论因为何种原因希望某些网页文字不在浏览器中显示 比如为了打印或为了小屏幕而让某些文字不显示 都可以用display none 这非常简单 但有时对某些人这有点没用 他们能去掉这个控制 这时就要用到 position absolute left 9000px 这实际上是把文字指定在页面以外显示 8 为手持设备设计专门的CSS也就是手机 PDA等小屏幕用户 可以专门设计一个CSS来让网页显示更舒服些 为此 可以把浏览器窗口调整到150点宽来看效果 指定专门的手持设备的CSS的语法是 也可以阅读专门的手持设备可用性 9 3D效果的按钮以前要想制作带有3D效果 并且点击下去还会变化的按钮 就得用图片替换的方法 现在CSS就可以了 a display block border 1pxsolid border color aaa 000 000 aaa width 8em background fc0 a hover position relative top 1px left 1px border color 000 aaa aaa 000 至于效果 还可以自己调整了 10 在不同页面上使用同样的导航代码许多网页上都有导航菜单 当进入某页时 菜单上相应这一项就应该变灰 而其他页亮起来 一般要实现这个效果 需要写程序或专门为每一页做设计 现在靠CSS就可以实现这个效果 首先 在导航代码中使用CSS类 HomeAboutusContactus然后分别为每一页的Body指定一个id 和上面类同名 如 然后设计CSS如下 home home about about about about commandsforhighlightednavigationgohere 这里 当id设为home时 home就会起作用 也就是class设为home的那一行导航条就会显示出特殊效果来 其他页也是如此 深入理解CSS块级 block 元素和内联 inline 元素关键字 任何不是块级元素的可见元素都是内联元素 其表现的特性是 行布局 形式 这里的 行布局 的意思就是说其表现形式始终以行进行显示 CSS权威指南 任何不是块级元素的可见元素都是内联元素 其表现的特性是 行布局 形式 这里的 行布局 的意思就是说其表现形式始终以行进行显示 比如 我们设定一个内联元素border bottom 1pxsolid 000 时其表现是以每行进行重复 每一行下方都会有一条黑色的细线 如果是块级元素那么所显示的的黑线只会在块的下方出现 A 行内就是在一行内的元素 只能放在行内 块级元素 就是一个四方块 可以放在页面上任何地方 B 说白了 行内元素就好像一个单词 块级元素就好像一个段落 如果不另加定义的话 它将独立一行出现 C 一般的块级元素诸如段落 标题 列表 表格 表单 DIV和BODY等元素 而内联元素则如 表单元素 超级链接 图像 D 块级无素的显著特点是 每个块级元素都是从一个新行开始显示 而且其后的无素也需另起一行进行显示 E 在CSS定义中属于一个行内元素 而是块级元素 用容器这一词会更容易形象理解它们的存在与用途 行内元素相当一个小容器 而相当于一个大容器 大容器当然可以放一个小容器了 就是小容器 块元素 blockelement 一般是其他元素的容器元素 块元素一般都从新行开始 它可以容纳内联元素和其他块元素 常见块元素是段落标签 P form 这个块元素比较特殊 它只能用来容纳其他块元素 如果没有css的作用 块元素会顺序以每次另起一行的方式一直往下排 而有了css以后 我们可以改变这种html的默认布局模式 把块元素摆放到你想要的位置上去 而不是每次都愚蠢的另起一行 需要指出的是 table标签也是块元素的一种 tablebasedlayout和cssbasedlayout从一般使用者 不包括视力障碍者 盲人等 的角度来看这两种布局 除了页面载入速度的差别外 没有其他的差别 但是如果普通使用者不经意点了查看页面源代码按钮后 两者所表现出来的差异就非常大了 基于良好重构理念设计的css布局页面源码 至少也能让没有web开发经验的普通使用者把内容快速的读懂 从这个角度来说 csslayoutcode应该有更好的美学体验吧 你能够把块容器元素div想象成一个个box 或者如果你玩过剪贴文载的话 那就更加容易理解了 我们先把需要的文章从各种报纸 杂志总剪下来 每块剪下来的内容就是一个block 然后我们把这些纸块按照自己的排版意图 用胶水重新贴到一张空白的新纸上 这样就形成了你自己独特的文摘快报了 作为一种技术的延伸 网页布局设计也遵循了同样的模式 内联元素 inlineelement 一般都是基于语义级 semantic 的基本元素 内联元素只能容纳文本或者其他内联元素 常见内联元素 a 块元素 blockelement 和内联元素 inlineelement 都是html规范中的概念 块元素和内联元素的基本差异是块元素一般都从新行开始 而当加入了css控制以后 块元素和内联元素的这种属性差异就不成为差异了 比如 我们完全可以把内联元素cite加上display block这样的属性 让他也有每次都从新行开始的属性 可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素 可变元素还是属于上述两种元素类别 一旦上下文关系确定了他的类别 他就要遵循块元素或者内联元素的规则限制 大致的元