《层叠式样式表CSS》由会员分享，可在线阅读，更多相关《层叠式样式表CSS（40页珍藏版）》请在金锄头文库上搜索。
1、HCSS 中华女子学院计算机系霍1 CSS 概述 v CSS 指层叠样式表 (Cascading Style Sheets) ,是一种用 来为结构化文档添加样式的计算机语言。 v 样式定义如何显示 HTML 元素 v 样式通常存储在样式表中 v 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的 问题 ，并集中管理，这样，当要改变网页外观时，只需更改样 式设定部分，HTML文件本身并不需要修改。 v 外部样式表可以极大提高工作效率 v 外部样式表通常存储在 CSS 文件中 2 在页面中插入样式表的方法 v1.行内样式（有素材:实验501） v2.内嵌式（有素材） v3.链接式（有素
2、材） v4.导入样式表（有素材）3 CSS基本语法 vCSS选择器 标记选择器3 CSS基本语法 类别选择器（有素材）3 CSS基本语法 ID选择器v选择器的声明 集体声明（具有同样属性的标记同时声明 ）（有素材）3 CSS基本语法 选择器的嵌套（有素材） vCSS的继承 父子关系（有素材） 父属性的设置会被子属性继承 父属性与子属性相同时，屏蔽父属性4 CSS文字效果 CSS文字样式（有素材） 字体 文字大小 文字颜色 文字粗细 文字斜体 上画线，顶划线，删除线 英文字母大小写 模拟google公司的logo4 CSS文字效果 段落文字（有素材） 段落水平对齐 段落垂直对齐 行间距，字间距
3、首字放大5 CSS图片效果 图片样式 图片边框（素材22） 图片缩放23 图片对齐 横向对齐24 纵向对齐25（不同浏览器可能有差别） 图文综合实例：八仙过海265 CSS页面背景 背景颜色 页面背景颜色27 用背景颜色给页面分块28 背景图片 页面的背景图29 背景图片的重复30 背景图片的位置31 固定的背景图片326 CSS设置表格和表单样式 控制表格 表格颜色34 表格边框35 隔行变色36 CSS与表单 像文字一样的按钮37 直接输入的EXCEL表格38 【实验501】7 页面和浏览器元素 丰富的超链接特效 动态超链接39 按钮式超链接40 浮雕式超链接41（通过变换背景图片实现）
4、鼠标特效 控制鼠标箭头42 页面滚动条438 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;margin5910 CSS与DIV定位 元素的定位 Float定位60 Po
5、sition定位61 Z-index定位62 给图片签名实例6311 CSS排版 将页面用DIV分块11 CSS排版 设计各模块的位置6411 CSS排版 固定宽度且居中的版式65 （最常用） 电子相册66 把样式表11-6ppt.css换成11-6catalog.css看 样式表的变换对页面布局的影响 核心代码就是float:left12 网页变换实例 框架搭建6712 网页变换实例 实例1：蓝色经典01.css 固定宽度且居中版式 通过DIV块背景图片设置的风格大翻转 正文采用DIV块内加入项目列表实现 实例2：清明上河图02.css 背景在y轴是重复的 实例3：交河古城03.css 两条
6、竖线是背景图的一部分 自动选择CSS样式 【实验503】 【实验504】HAdd your company slogan DiagramConceptAdd Your TextTextTextTextTextTextTextContentsClick to add Title1Click to add Title2Click to add Title3Click to add Title4DiagramThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.Title Add
7、your textThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.Cycle DiagramTextText TextTextTextCycle nameAdd Your TextDiagramTextTextTextAdd Your Title TextText 1Text 2Text 3Text 4Text 5Add Your Title TextText 1Text 2Text 3Text 4Text 5TextTextDiagramAdd Your TextAd
8、d Your TextAdd Your TextAdd Your TextAdd Your TextAdd Your TextAdd Your TextAdd Your TextDiagramAdd Your TitleAdd Your TitleAdd Your TitleThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.ThemeGallery is a Design Digital Content & Contents mall developed by Guild
9、 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.ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.ThemeGallery is a Design Di
10、gital Content & Contents mall developed by Guild Design Inc.DiagramTextTextTextTableConceptConceptConceptConceptconceptconceptConceptConceptDiagramTitleAdd Your TextAdd Your TextAdd Your TextAdd Your TextAdd Your TextAdd Your TextDiagram1ThemeGallery is a Design Digital Content & Contents mall devel
11、oped by Guild Design Inc.2ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.3ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.DiagramYour TextYour TextYour TextYour TextYour TextYour TextYour TextYour Text2001200220032004Diag
12、ramTitleTitleThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.TitleTitleThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.TitleTitleThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.Block DiagramTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTableTitleTitleTitleTitleTitleTitleOOOOOTitleOOOOOTitleOOOOOTitleOOOOOTitleOOOOOTitleOXOXOText1Text2 Text3Text4Text53-D Pie ChartDiagramAdd Your TitleAdd Your TextAdd Your TextAdd Your TextAdd Your TextAdd Your Text
