1、学习目标,掌握css嵌入的方法 掌握css的表示方法 掌握使用css统一控制页面 掌握CSS盒模型 掌握定位 掌握隐藏标记,CSS简介,CSS：Cascading Style Sheet层叠样式表，简称样式表 来源 网页设计最初是用HTML标记来定义页面文档及格式，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。 作用 能够精确控制页面元素的字体样式、背景、排列方式等 简化网页的格式代码、加快下载显示速度、减少重复的工作
2、量 注意：CSS需要IE4.0和Netscape 4.0以上的浏览器支持，有些效果需要更高版本的浏览器支持。有些CSS效果不能写有 ,层叠样式表的添加(1/4),内部样式表 内部样式表是把样式表放到页面区里用标记定义：例： hr color: sienna p margin-left: 20px body background-image:url(pic1.bmp) 或body background:url(pic1.bmp) 可用来对所有body中出现的同标记进行格式定义，除非此标记已另行定义了格式。,层叠样式表的添加(2/4),内嵌样式表 内嵌样式是混合在HTML标记里使用的，用这种方法，
3、可以简单的对某个元素单独定义样式。 内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例： 这是一个段落 缺点是不方便进行统一修改,层叠样式表的添加(3/4),链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中标记链接到这个样式表文件，这个标记必须放到页面的区内，如下： 无结束标签 一个外部样式表文件可以方便应用于多个页面,层叠样式表的添加(4/4),导入外部样式表 导入外部样式表是指在内部样式表的里导入一个外部样式表，导入时用import。例：小提示：“import”命令在netscape 4.0版本浏览器是无效
4、的。当你希望某些效果在netscape 4.0浏览器中隐藏，在4.0以上或其它浏览器中又显示的时候，你可以采用“import“命令方法调用样式表。,使用层叠样式表(1/4),层叠样式表基本语法 CSS定义分为选择符、属性、属性取值 如:selector property:value说明:1):选择符可以是HTML中的标记名称2):属性和值用冒分开，多个属性之间加分号例如:ptext-align:center; color:red; font-family:arial3):如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合例如：p font-family: “san
5、s serif“,使用层叠样式表(2/4),选择符组 可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义 如:p, table font-size: 9pt 效果完全等效于： p font-size: 9pt table font-size: 9pt ,使用层叠样式表(3/4),类选择符 能够把相同的元素分类定义不同的样式 分为相关类选择符和伪类选择符 相关类选择符：标记名.类名属性：值 注意：只能应用于对应标记 如：p.righttext-align:right p.centertext-align:center 伪类选择符: .类名属性：值 如：.colo
6、rcolor:blue 类选择符的引用：在标记中使用class属性 如：. .,使用层叠样式表(4/4),ID选择符 在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式语法：#ID 属性：值 如：#infocolor:red; ID选择符的应用： 如： 这个段落文字为红色 注意： ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。,样式表的层叠性继承性,层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。 事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加
7、在一起，除非另外更改。 例：这个段落的文字为红色9号字，继承了DIV的样式设置 这个段落的文字为蓝色9号字，继承了DIV的字体大小，但颜色被覆盖重写了 有些属性是不能继承的。这没有任何原因，只是因为它就是这么设置的。如：border属性就没有继承性。一旦外面的标签设置了border，则将包围整个。,样式表的层叠性就近原则,如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。如： h3 color: red;text-align: left;font-size: 8pt; /*标题3的文字颜色为红色；向左对齐；文字尺寸为8号字*/ h3 t
8、ext-align: right; font-size: 20pt; /*标题3文字向右对齐；尺寸为20号字*/ 那么叠加后的样式就是 color: red; text-align: right; font-size: 20pt; /*文字颜色为红色；向右对齐；尺寸为20号字*/ 字体颜色保留下来，而对齐方式和字体尺寸都有定义时，按照后定义优先原则保留下来。,注意： 依照后定义优先原则(就近原则)： 优先级最高的是内嵌样式， 内部样式表高于导入外部样式表， 链入的外部样式表和内部样式表之间是最后定义的优先级高。,样式表的层叠性优先级,不同的选择符应用到同一个标记上时，要考虑到不同的选择符之间的
9、优先级： 在ID选择符，类选择符和标记选择符中，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。 如：p color: #FF0000.blue color: #0000FF#id1 color: #00FF00对页面中的同一个段落标记加上以上三种样式，则依照优先权最高的ID选择符为绿色文字。,注释,你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。CSS注释以“/*“ 开头，以“*/“ 结尾，如：/* 定义段落样式表 */ptext-align: center; /* 文本居中排列 */color: black; /* 文字为
10、黑色 */font-family: arial /* 字体为arial */,控制字体的样式(1/3),控制字体的样式包括控制字体类型、字体大小、字体风格、字体粗细四个部分 字体类型语法:font-family: 字体名称 字体大小语法:font-size: 字体大小 字体风格语法:font-style: 斜体字的名称 字体粗细语法:font-weight: 字体粗细,控制文字的样式(2/3),控制文字的样式包括文字大小写、文字修饰两个部分 文字自动变为大小写语法:text-transform: 参数 文字修饰：删除线，下划线等语法:text-decoration: 参数,控制文本的样式(3/
11、3),控制文本的样式包括单词距离、字母距离、文本行距、文本水平对齐、文本垂直对齐、文本缩进六个部分 单词间距语法:word-spacing: 间隔距离 字母距离语法:letter-spacing: 字母间距 行距语法:line-height: 行间距离 文本水平对齐语法:text-align: 参数 文本垂直对齐语法:vertical-align: 参数 文本缩进语法:text-indent: 缩进距离,控制超级链接的样式,控制A标记以不同的方式显示，可以设置超级链接的4种状态(伪类选择符)： 初始状态(Link)语法:a:link 鼠标移到超级链接上的状态(hover)语法:a:hover
12、鼠标点击超级链接时的状态(active)语法:a:active 鼠标点击超级链接后的状态(visited)语法:a:visited ,CSS盒模型,CSS中的盒模型是关系到设计中排版定位的关键，任何一个选择符都遵循盒模型规范，例如、 盒模型包含: (外补丁)margin (背景颜色)background-color (背景图片)background-image (内补丁)padding (内容)content (边框)border。,CSS盒模型,下图是CSS盒模型的平面示意图,CSS盒模型,下图是CSS盒模型的3D示意图,CSS盒模型,内部样式表 divwidth:90px; padding
13、:10px;margin:10px;border:10px;div的宽度应该为90px+10px*2+10px*2+10px*2=150px,无定位static,position:static是所有元素定位的默认值, 一般不用显示定义这个属性。 没有特别的设定，遵循基本定位规定，不能通过z-index进行层次分级。#div1 width:300px;height:100px;background-color:red #div2 width:100px;height:30px;background-color:#dddddd; #div3 width:200px;height:50px;back
14、ground-color:blue;,相对定位relative,使用position:relative，不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。#div1width:300px;height:100px;background-color:red #div2 width:100px;height:30px;background-color:#dddddd;position:relative;left:10px;top:10px; #div3 width:200px;height:50px;background-
15、color:blue;,绝对定位absolute,使用position:absolute,脱离文档流，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。以body坐标原点进行定位，可以通过z-index进行层次分级。#div1 width:300px;height:100px;background-color:red #div2 width:100px;height:30px;background-color:#dddddd;position:absolute;left:5p
16、x;top:5px; #div3 width:200px;height:50px;background-color:blue;,绝对定位+相对定位, #div1 width:300px;height:100px;background-color:red;position:relative;left:20px;top:20px; #div2 width:100px;height:30px;background-color:#dddddd;position:absolute;left:5px;top:5px; #div3 width:200px;height:50px;background-col
17、or:blue;,z-index,用于设置相对和绝对定位元素的“内外”位置,数值越小的在最内层,外层的将覆盖内层.默认后面的覆盖前面的。 #ParentDivwidth:80%;height:150px;padding:6px;background-color:#666;position:relative; #Div1width:160px;height:50px;background-color:#FF6600;padding:15px;position:absolute;left:9px;top:9px;z-index:3; #Div2width:120px;height:70px;bac
18、kground-color:#FF0000;padding:15px;position:absolute;right:15px;bottom:15px;z-index:1; #Div3width:140px;height:50px;background-color:#0099FF;padding:15px;position:absolute;left:150px;top:25px;z-index:2; #Div4width:100px;height:30px;background-color:#bbbbbb;padding:15px;position:absolute;left:-10px;
19、bottom:30px; #Div5width:140px;height:50px;background-color:#EEEEEE;padding:15px;position:absolute;left:10px;bottom:-10px;Div1z-index : 3 Div2z-index : 1 Div3z-index : 2 Div4 Div5 ,显示三个DIV,三个DIV都显示了，接下来通过visibility和display属性来隐藏div2标记，看下这两个属性有什么区别#div1 width:300px;height:100px;background-color:red #di
20、v2 width:100px;height:30px;background-color:#dddddd; #div3 width:200px;height:50px;background-color:blue;,使用visibility来隐藏表记,inherit : 默认值。继承父对象的可见性 。 visible : 对象可视 。 hidden : 对象隐藏 。此属性为隐藏的对象保留其占据的物理空间。#div1width:300px;height:100px;background-color:red #div2 width:100px;height:30px;background-color:
21、#dddddd; visibility:hidden #div3 width:200px;height:50px;background-color:blue;,隐藏块看不见,使用display来隐藏标记,none : 对象隐藏 。此属性不为被隐藏的对象保留其物理空间 #div1 width:300px;height:100px;background-color:red #div2 width:100px;height:30px;background-color:#dddddd; display:none; #div3 width:200px;height:50px;background-color:blue;,总结,掌握css嵌入的方法 掌握css的表示方法 掌握使用css统一控制页面 掌握CSS盒模型 掌握定位 掌握隐藏标记,练习及提问时间,
