层叠式样式表CSS.ppt

CSS 中华女子学院－计算机系 1 CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) ,是一种用来为结构化文档添加样式的计算机语言。 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 ，并集中管理，这样，当要改变网页外观时，只需更改样式设定部分，HTML文件本身并不需要修改。 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 2 在页面中插入样式表的方法 1.行内样式（有素材:实验501） 2.内嵌式（有素材） 3.链接式（有素材） 4.导入样式表（有素材） 3 CSS基本语法 CSS选择器 标记选择器 3 CSS基本语法 类别选择器（有素材） 3 CSS基本语法 ID选择器 选择器的声明 集体声明（具有同样属性的标记同时声明）（有素材） 3 CSS基本语法 选择器的嵌套（有素材） CSS的继承 父子关系（有素材） 父属性的设置会被子属性继承 父属性与子属性相同时，屏蔽父属性 4 CSS文字效果 CSS文字样式（有素材） 字体 文字大小 文字颜色 文字粗细 文字斜体 上画线，顶划线，删除线 英文字母大小写 模拟google公司的logo 4 CSS文字效果 段落文字（有素材） 段落水平对齐 段落垂直对齐 行间距，字间距 首字放大 5 CSS图片效果 图片样式 图片边框（素材22） 图片缩放23 图片对齐 横向对齐24 纵向对齐25（不同浏览器可能有差别） 图文综合实例：八仙过海26 5 CSS页面背景 背景颜色 页面背景颜色27 用背景颜色给页面分块28 背景图片 页面的背景图29 背景图片的重复30 背景图片的位置31 固定的背景图片32 6 CSS设置表格和表单样式 控制表格 表格颜色34 表格边框35 隔行变色36 CSS与表单 像文字一样的按钮37 直接输入的EXCEL表格38 【实验501】 7 页面和浏览器元素 丰富的超链接特效 动态超链接39 按钮式超链接40 浮雕式超链接41（通过变换背景图片实现） 鼠标特效 控制鼠标箭头42 页面滚动条43 8 CSS制作实用菜单 项目列表 列表的符号44 图片符号45(不同浏览器有差别) 无需表格的菜单46 菜单的横竖转换47（float:left） 流行的Tab菜单48（见CSS文件代码） 9 CSS滤镜实例（只有IE适用） Alpha通道49（透明效果） Blur模糊50 透明色51（过滤掉某色） Flip翻转52 遮罩53 波浪54 滤镜综合运用55 【实验502】 10 CSS与DIV定位 Div与span标记的区别56 盒子模型：border57;padding58;margin59 10 CSS与DIV定位 元素的定位 Float定位60 Position定位61 Z-index定位62 给图片签名实例63 11 CSS排版 将页面用DIV分块 11 CSS排版 设计各模块的位置64 11 CSS排版 固定宽度且居中的版式65 （最常用） 电子相册66 把样式表11-6ppt.css换成11-6catalog.css看样式表的变换对页面布局的影响 核心代码就是float:left 12 网页变换实例 框架搭建67 12 网页变换实例 实例1：蓝色经典01.css 固定宽度且居中版式 通过DIV块背景图片设置的风格大翻转 正文采用DIV块内加入项目列表实现 实例2：清明上河图02.css 背景在y轴是重复的 实例3：交河古城03.css 两条竖线是背景图的一部分 自动选择CSS样式 【实验503】 【实验504】 Diagram Contents Diagram Cycle Diagram Diagram Diagram Diagram Diagram Table Diagram Diagram Diagram Diagram Block Diagram Table 3-D Pie Chart Diagram ThemeGallery is a Design Digital Content Contents mall developed by Guild Design Inc. ThemeGallery is a Design Digital Content Contents mall developed by Guild Design Inc. ThemeGallery is a Design Digital Content Contents mall developed by Guild Design Inc. Text Text Text Con