动态网页制作CSS与JavaScript.pptVIP

3 CSS与JavaScript;学会偷懒，并懒出境界是提高工作效率最有效的方法！;3.1 CSS ;一.什么是CSS CSS是Cascading Style Sheet 的缩写, 层叠样式表. 在应用CSS之前,内容与表现方式混杂在一起。典型的例子是font标签。 用CSS分离表现层和内容。使代码更简洁、下载速度更快，批量修改和定制表现形式更容易。;二.CSS语法结构 1.CSS属性与选择符 CSS语法结构由三部分组成:选择符(Selector),属性(property)和值(value). 使用方法: Selector { Property: value} 如:body { background-color:blue} 除了单个属性之外,我们还可以给一个标签定义一个至更多个属性定义,每个属性之间使用分号隔开.如: .title { line-height: center; color: blue; font-family: arial; } ;4.包含选择符 当我们仅仅想对某一个对象中的子对象进行样式指定时,包含选择符就被派上了用场.包含选择符组合中前一个对象包含后一个对象,对象之间使用空格作为分隔符. 如: CSS定义:h1 span{ font-weight:bold } 使用: h1这是我们的一段文本span这是span内的文本/span/h1 这样做能让我们避免过多的id及class的设置,直接对所需要设置的元素进行设置 ;5.Id及class 选择符 在xhtml中，给不同的div做上标记，然后在css中给对应的标记样。 标记可以分为2种：id和class 区别： 每个id都是唯一的，不允许重复。在css中的格式是 #id名{样式} 如: #content { margin:0 auto;padding:0px} class是一个类，可以重复调用。在css中的格式是 .class名{样式} 如: .p1 {background:blue url(bg.gif) repeat} ;6.组合选择符 对于以上所有css选择符,无论是什么时候样的选择符,均可以进行组合使用 如: .p1,#content,h1 .p2{ color:red } 表示class为p1,id为content,以及类型选择符h1标签下的所有class为p2的标签内字体的颜色为红色. ;*7.伪类及伪对象 伪类及伪对象是一种特殊的类和对象,它由CSS自动支持,属CSS的一种扩展类和对象,名称不能被用户自定义,使用时只能够按标准格式进行应用.使用时格式如下: a: hover { background-color:#000; } 伪类的使用只需要知道对于a的常用伪类的应用就足够了,对于a的常用伪类有: 1 :link a链接标签的未被访问前的样式; 2 :hover 对象在鼠标移上时的样式; 3 :active 对象被用户点击及被点击释放之间的样式; 4 :visited 链接对象被访问后的样式 ;三.常用标签及属性 1. div div就是层,在CSS布局里,它就是核心.以前我们依靠table表格来为我们布局,现在多数的布局是依靠div来实现. *用XHTML+CSS布局，有一个技术，或者应该说是一种思维方式与传统表格布局不一样，那就是：所有辅助图片都用背景来实现。类似这样： background: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;;四.CSS应用到网页 1.行间样式表 这种CSS样式编码直接编写在XHTML标签之中,如： h1 style=“font:14px red bold;line-height:15px” 2.内部样式表 内部样式表与行间样式表的相似之处在于,两者都是将CSS样式编写在页面之中,所不同的是,内部样式表是将样式表统一放置在一个固定位置,如： head…style type=“text/css” .head {width:760px; height:auto; margin:0px;} .main {width:750px; height:600px; margin:0 auto;} /style /head;3.外部样式表 外部样式表是CSS应用中最好的一种形式.将CSS样式编码单独编写在一个独立文件之中,由网页进行调用,多个网页可以调用同一个样式文件,因此能够实现代码的最大化重用用网站文件的最优