[计算机软件及应用]CSS.pptVIP

* 边距margin 边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。 使用：.d1 {margin:1cm 2cm 3cm 4cm} * 内边距padding 又称为内补丁、补白 设置对象四边的补丁边距 * 定位position（难点） 定位方式 position：absolute 层叠顺序 z-index : auto | number ? * 布局layout 浮动float : none | left |right 显示方式display: block | none …… * 其他样式 竖排文字 writing-mode 该属性有两个值lr-tb、tb-rl； 鼠标 cursor:url(2.cur) 演示：CSS2.0中文手册中Cursor * 样式的组合和嵌套 当多个样式的属性和值相同时，不必重新定义各样式，只需要使用“,”把选择符分开 h2,?.thisOtherClass,?.yetAnotherClass? {? color:?red;? }? * 样式的组合和嵌套 嵌套（包含）： #top?{? background-color:?#ccc;? padding:?1em?}?#top?h1?{? color:?#ff0;?}? div?id=top? * 制作菜单 制作简单的纵向和横向菜单 * 总结 样式表的语法规则 3种(1种补充)样式表选择器 3种样式表的定义方式 样式表的优先级 div和span * 任何一个DIV块，border是它的边框 第五讲 css 样式表 * 回顾 段落标记 字符标记 特殊字符表示方法 图片及图片标记 多媒体（动画，音乐） * 目 标 掌握样式表的语法规则 样式选择器 样式表的嵌入方式： 行内样式表 内嵌样式表 外部样式表 掌握常用的样式属性 了解层div和span标签 * 对于样式表的需求 Html语言中有一些标记用来描述元素的外观:bi 另外有些标记可加入描述外观的属性:如table标记的border,p标记的align 即便这样:HTML语言对于网页元素的外观的控制力还是太弱,如段落文字的行间距,左边距,文本框里的文字的颜色 升级HTML语言,为标记添加一些属性,或增加一些标记,可解决这个问题.但是… * 对于样式表的需求 但这样会把HTML语言本身复杂化 违背了HTML当初要简单明了的初衷 考虑:把描述网页结构\内容的代码与描述网页外观\样式的代码分离开来 98年,W3C发布CSS 2.0版,由它专门负责控制网页元素的外观 同时也实现了内容和形式的分离 Cascading Stylesheet 层叠样式表 * DHTML 早期网页 网页代码的杂乱无章 表现力不够丰富 网页不能与用户交互 DHTML 动态超文本标记语言 Html 构建网页的内容 Css 决定网页的外观 Javascript 操纵网页的元素，实现动态效果，实现和 客户的交互 * 样式规则 样式表代码就是一些样式规则 样式规则的通用写法: 样式选择器{属性: 属性值 ; 属性 : 属性值;……} p { color : blue} 大括号内的部分称为样式声明(定义),它描述此样式的详情(位置,大小,边框,颜色,字体,边距,……) 样式选择器决定了此样式将应用于哪些元素 选择符 声明 属 性 值 * 选择符 样式表基本规则 p { color : blue} 选择符分类 Html 选择器 Class 选择器 ID 选择器 包含选择器(补充) 选择符 声明 属 性 值 * Html 选择器 Html选择器 使用html标签来标志 … style type=text/css !-- body { color: red; font-size:14px; /* 必须加单位*/ } -- /style … 演示: input标签，P标签使用样式 * Class 选择器 Class 选择器 类选择器采用英文点号 ”.” 开头，后面的名字设计者可以自行定义（良好的命名习惯根据其功能而不是外观来命名） … style type=text/css !-- .warning { color: red; font-size:14px; } -- /style … body pCss对Html语言的一次重大革新!/p p class=“warning”学习CSS很重要/p /body 其它标签不受影响 类选择器可以重复使用，且可以用在任意多个元素上，使用任意次 * ID 选择器 ID选择器 使用Ht