• 1. CSS初级教程讲师:黎运根
  • 2. 一.CSS简介什么是CSS? CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 使用CSS布局的优点: 采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势: 1:表现和内容相分离 将设计部分剥离出来放在一个独立样式文件中,
  • 3. 一.CSS简介HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。 2:提高页面浏览速度   对于同一个页面视觉效果,采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。 3:易于维护和改版 你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。
  • 4. 一.CSS简介CSS历史 1994年哈坤·利提出了CSS的最初建议;伯特·波斯(Bert Bos)当时正在设计一个叫做Argo的浏览器,他们决定一起合作设计CSS。    当时已经有过一些关于样式表语言的建议了,但CSS是第一个含有“层叠”的主意的。在CSS中,一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式,在其他地方去继承,或“层叠”作者的样式, 这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合各人的爱好。   
  • 5. 一.CSS简介 哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议,1995年他与波斯一起再次提出这个建议。当时W3C刚刚建立,W3C对CSS的发展很感兴趣,它为此组织了一次讨论会。哈坤、波斯和其他一些人(比如微软的托马斯·雷尔登)是这个项目的主要技术负责人。1996年底,CSS已经完成。1996年12月CSS要求的第一版本被出版。  
  • 6. 一.CSS简介  1997年初,W3C内组织了专门管CSS的工作组,其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题,于是1998年5月出版了CSS的第二版。到2007年为止,第三版还未完备。
  • 7. 二.CSS的发展 1998年5月发布了CSS2.0版本,CSS2.0是一套全新的样式表结构,是由W3C推行的,同以往的CSS1.0或CSS1.2完全不一样,CSS2.0推荐的是一套内容和表现效果分离的方式,HTML元素可以通过CSS2.0的样式控制显示效果,可完全不使用以往HTML中的table和td来定位表单的外观和样式,只需使用div和 Li此类HTML标签来分割元素,之后即可通过CSS2.0样式来定义表单界面的外观。   
  • 8. 二.CSS的发展 CSS2.0提供给我们了一个机制,让程序员开发时可以不考虑显示和界面就可以制作表单和界面,显示问题可由美工或是程序员后期再来编写相应的 CSS2.0样式来解决。不过由于CSS2.0目前尚未见过很好的编辑软件,所以无法做到所见即所得,编写起来不易。 最新的CSS3.0完全向后兼容,所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说,CSS3主要的影响是将可以使用新的可用的选择器和
  • 9. 二.CSS的发展 属性,这些会允许你实现新的设计效果(譬如动态和渐变),而且可以很简单的设计出现在的设计效果(比如说使用分栏)。
  • 10. 三.如何将样式表加入您的网页 1.链入外部样式表文件 (Linking to a Style Sheet) 你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下: 文档标题
  • 11. 而在XML中,你应该如下例所示在声明区中加入: 2.定义内部样式块对象 (Embedding a Style Block) 你可以在你的HTML文档的和标记之间插入一个块对象。示例如下: 文档标题 注意:这里将style对象的type属性设置为“text/css”,是允许不支持这类型的浏览器忽略样式表单。 3.内联定义 (Inline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:
  • 13.

    这一行被增加了左右的外补丁

    4.样式表语法 (CSS Syntax) Selector { property: value } 参数说明: Selector – 选择符 property : value -- 样式表定义。属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开

  • 14. 四.CSS语法CSS的定义是由三个部分构成:   选择符(selector),属性(properties)和属性的取值(value)。 1.语法: selector {property: value} (选择符 {属性:值})
  • 15. 四.CSS语法说明:   ·选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE……,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:   例子:body {color: black},此例的效果是使页面中的文字为黑色。   ·如果属性的值是多个单词组成,必须在值上加引号,比如字体的名称经常是几个单词的组合:   例子:p {font-family: "sans serif"} (定义段落字体为sans serif)   · 如果需要对一个选择符指定多个属性时,我们使用分号将所有的属性和值分开:   例子:p {text-align: center; color: red} (段落居中排列;并且段落中的文字为红色)
  • 16. 四.CSS语法2. 选择符组   你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义: p, table{ font-size: 9pt } (段落和表格里的文字尺寸为9号字) 效果完全等效于:   p { font-size: 9pt }   table { font-size: 9pt } 3. 类选择符
  • 17. 四.CSS语法用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:   p.right {text-align: right}   p.center {text-align: center} 然后用不在不同的段落里,只要在HTML标记里加入你定义的class参数:

    这个段落向右对齐的

      

    这个段落是居中排列的

  • 18. 四.CSS语法类选择符还有一种用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式:   .center {text-align: center} (定义.center的类选择符为文字居中排列) 这样的类可以被应用到任何元素上。下面我们使h1元素(标题1)和p元素(段落)都归为“center”类,这使两个元素的样式都跟随“.center”这个类选择符:

    这个标题是居中排列的

     

    这个段落也是居中排列的

  • 19. 四.CSS语法注意:这种省略HTML标记的类选择符是我们经后最常用的CSS方法,使用这种方法,我们可以很方便的在任意元素上套用预先定义好的类样式。 4. ID选择符   在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。   ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。将上例中类用ID替代,ID只能在一个页面中出现一次,而class可以多次运用.
  • 20. 四.CSS语法这个段落向右对齐   定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同,定义ID选择符的属性也有两种方法。下面这个例子,ID属性将匹配所有id="intro"的元素: #intro   {   font-size:110%;   font-weight:bold;   color:#0000ff;   background-color:transparent }
  • 21. 四.CSS语法(字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明) 下面这个例子,ID属性只匹配id="intro"的段落元素:   p#intro   {   font-size:110%;   font-weight:bold;   color:#0000ff;   background-color:transparent   }
  • 22. 四.CSS语法注意:ID选择符局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用。 5. 包含选择符   可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义,例如: table a   {   font-size: 12px   }   在表格内的链接改变了样式,文字大小为12像素,而表格外的链接的文字仍为默认大小。
  • 23. 四.CSS语法6. 样式表的层叠性   层叠性就是继承性,样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上,所有在元素中嵌套的元素都会继承外层元素指定的属性值,有时会把很多层嵌套的样式叠加在一起,除非另外更改。 例如在DIV标记中嵌套P标记: div { color: red; font-size:9pt}   ……   这个段落的文字为红色9号字(P元素里的内容会继承DIV定义的属性)
  • 24. 四.CSS语法当样式表继承遇到冲突时,总是以最后定义的样式为准。如果上例中定义了P的颜色:   div { color: red; font-size:9pt}   p {color: blue}   ……   这个段落的文字为蓝色9号字 我们可以看到段落里的文字大小为9号字是继承div属性的,而color属性则依照最后定义的。 注意:
  • 25. 四.CSS语法不同的选择符定义相同的元素时,要考虑到不同的选择符之间的优先级。ID选择符,类选择符和HTML标记选择符,因为ID选择符是最后加上元素上的,所以优先级最高,其次是类选择符。 7. 注释:/* ... */   你可以在CSS中插入注释来说明你代码的意思,注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中,注释是不显示的。CSS注释以"/*" 开头,以"*/" 结尾,如下: p { text-align: center; /* 文本居中排列 */ }
  • 26. 五. CSS构造块1.Div 部分(division)——
    元素,经常以div形式引用——是(X)HTML的元素,用于定义(X)HTML文件中的区域。你可以让div包含任何在页面部分的一些额外元素,如文本、图形等——实际上,这些元素可以是任何元素,甚至十一些不同区域中的特殊元素,如页眉、页脚、导航栏等。 示例:在HTML中构造一个div元素:
           

    这是我们的内容区域

  • 27. 为id为container的div元素添加CSS样式代码如下例: #container { padding: 20px; border: 1px solid #000; background: #CCC; } 效果图:
  • 28. 2.维度:宽度和高度 设定值可以使长度、百分比或auto。所有这些值会受到样式表里其他规则的负面影响,也受到(X)HTML中它们包含的元素的影响。例如,margin、padding、border或者自元素都可能对结果产生连锁反应。 3. 外边距 外边距(margin)属性的功能正如它本身表示的意义,用于设定(X)HTML元素和它外部的元素之间的外边距。外边距属性可以为给定的元素设定上外边距、下外边距、左外边距和右外边距四个属性。注意外边距值不从父元素中继承。 下面来看一个外边距CSS定义的例子:
  • 29. #container { width: 300px; margin-top: 20px; margin-left: auto; margin-right: auto; margin-bottom: 1em; border: 1px solid #000; padding: 20px; background: #CCC;} 对外边距可缩写成如下:         #container { margin: 20px auto 1em auto; }
  • 30. 属性值的排列顺序为:上外边距、右外边距、下外边距、左外边距。 CSS中将元素居中的最好的方法是把元素左右外边距属性值设定为auto。对于常用的浏览器,这只需要设定width规则,左外边距话和右外边距都为给定的auto值。 4.内边距 内边距(padding)是(X)HTML元素的边框与元素之间的距离,适用于任何元素。 示例: #container { width: 300px; padding-top: 20px;
  • 31. padding-left: 10% padding-right: 1em; padding-bottom: 0; background: #CCC;} 可以将它缩写成如下代码: #container { padding: 20px 1em 0 10%; } 与margin属性一样,数值的排列顺序为:上、右、下和左。 下面来讨论一下:border-width、border-top-width、border-right-width、border-bottom-width和border-left-width。
  • 32. #container { width: 400px; margin: 10px auto 10px auto; padding: 20px; border-style: dashed dotted solid ridge; border-top-width: thin; border-right-width: 20px; border-bottom-width: medium; border-left-width: thick;}  设置边框颜色的属性设置如下:  #container { border-color: #000 #999 #333 #CCC; }
  • 33. 上例效果图如下: 用border、border-top、border-right、border-bottom和border-left属性可以将给定的border-style、border-width和border-color属性的值集中到一个属性中, 示例如下: #container { width: 400px; margin: 10px auto 10px auto; padding: 20px; border-top: #000 thin dashed;
  • 34. border-right: #999 20px dotted; border-bottom: #333 medium solid; border-left: #CCC thick ridge; } 效果图如下:
  • 35. 六.CSS属性CSS属性包括:字体、文本、背景、定位、尺寸、布局、外补丁、轮廓、边框、内容、内补丁、列表、表格、滚动条等属性。 1.字体属性 1.1: font-style语法 font-style : normal | italic | oblique 取值: normal : 默认值。正常的字体。 italic : 斜体。对于没有斜体变量的特殊字体,将应用 oblique。 oblique : 倾斜的字体
  • 36. 六.CSS属性示例:
    倾斜的字体
    示例效果图:
  • 37. 六.CSS属性1.2:color语法 color : color 取值: color : 指定颜色。 示例:
    指定字体颜色
    效果图如下:
  • 38. 六.CSS属性1.3:font-family语法 font-family : name font-family :ncursive | fantasy | monospace | serif | sans-serif 取值: name : 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格,则应使用引号括起。 第二种声明方式使用所列出的字体序列名称。如果使用fantasy序列,将提供默认字体序列。
  • 39. 六.CSS属性示例:
    指定字体类型
    效果图如下: 1.4:font-size 语法 font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length
  • 40. 六.CSS属性取值: xx-small : 绝对字体尺寸。根据对象字体进行调整。最小 x-small : 绝对字体尺寸。根据对象字体进行调整。较小 small : 绝对字体尺寸。根据对象字体进行调整。小 medium : 默认值。绝对字体尺寸。根据对象字体进行调整。正常 large : 绝对字体尺寸。根据对象字体进行调整。大 x-large : 绝对字体尺寸。根据对象字体进行调整。较大 xx-large : 绝对字体尺寸。根据对象字体进行调整。最大
  • 41. 六.CSS属性 larger : 相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的em单位计算 smaller : 相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的 em 单位计算 length : 百分数 | 由浮点数字和单位标识符组成的长度值,不可为负值。其百分比取值是基于父对象中字体的尺寸。 示例: p { font-style: normal; } p { font-size: 12px; } p { font-size: 20%; }
  • 42. 六.CSS属性1.5:font-style 语法 font-style : normal | italic | oblique 取值: normal : 默认值。正常的字体 italic : 斜体。对于没有斜体变量的特殊字体,将应用 oblique 。 oblique : 倾斜的字体 示例: p { font-style: normal; } p { font-style: italic; }
  • 43. 六.CSS属性1.6:font-weight 语法 font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 取值: normal : 默认值。正常的字体。相当于 400 。声明此值将取消之前任何设置 bold : 粗体。相当于 700 。也相当于 b 对象的作用bolder : 比 normal >粗 lighter : 比 normal >细 100 : 字体至少像 200 那样细 200 : 字体至少像 100 那样粗,像 300 那样细
  • 44. 六.CSS属性 300 : 字体至少像 200 那样粗,像 400 那样细 400 : 相当于 normal 500 : 字体至少像 400 那样粗,像 600 那样细 600 : 字体至少像 500 那样粗,像 700 那样细 700 : 相当于 bold 800 : 字体至少像 700 那样粗,像 900 那样细 900 : 字体至少像 800 那样粗 示例: span { font-weight:800; }
  • 45. 六.CSS属性1.7:font-variant 语法 font-variant : normal | small-caps 取值: normal : 默认值。正常的字体 small-caps : 小型的大写字母字体 示例:
    canyou
    效果图如下:
  • 46. 六.CSS属性1.8:line-height 语法 取值: normal : 默认值。默认行高 length : 百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。 示例: div {line-height:6px; } div {line-height:10.5; }
  • 47. 六.CSS属性 综合示例:定义一个div,宽400px,高200px,字体大小为36像素,行高为40像素,颜色为红色,字体为宋体,字体间的间距为5像素,英文字母全部大写,内容为:这是我们的内容区域 zswmdnrqy。 代码:

    这是我们的内容区域 zswmdnrqy

    CSS样式:#container{width:400px;height:200px;margin:0 auto;padding:0;}
  • 48. 六.CSS属性#container p { font-size:36px; line-height:40px; color:Red ; font-family:宋体; letter-spacing:5px; font-variant:small-caps; } 效果图:
  • 49. 六.CSS属性课堂练习:定义一个div,宽500px,高230px,字体大小为40像素,行高为45像素,颜色为蓝色,字体为微软雅黑、粗体,字体间的间距为6像素,英文字母全部小写,内容为:这是我们的内容区域 zswmdnrqy。 效果图:
  • 50. 六.CSS属性2.文本属性 2.1:text-indent 语法 text-indent : length 取值: length : 百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值。 说明: 检索或设置对象中的文本的缩进。默认值为 0 。 在被另一个对象(如 br )断开的对象内不能应用本属性。
  • 51. 六.CSS属性2.3:text-overflow 语法 text-overflow : clip | ellipsis 取值: clip : 默认值。不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢出时显示省略标记(...) 说明: 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。 这个属性仅仅作用于水平内联方向的,普通的西方文本的溢出。内联溢出发生在行内的文本超出可用宽度却没有换行机会的时候。
  • 52. 六.CSS属性 要强制溢出发生并且应用 ellipsis 值,作者必须设置对象的 white-space 属性值为 nowrap 。 假如没有换行机会(例如,对象容器的宽度是狭窄的,而内有很长的没有合理断行的文本),没有应用 nowrap 也有可能溢出。 为了使 ellipsis 值被应用,此属性必须被设置到具有不可视区域的对象。最好的选择是设置 overflow 属性为 hidden 。设置 overflow 属性为 scroll 或者 auto 时,此属性也会应用。但是会有滚动条出现。 通过选择省略标记,隐藏的文本可以被选择。当选择发生时,省略标记会隐藏而被文本替换。 此属性为在DHTML中制作省略标记提供了高效的方法。
  • 53. 六.CSS属性示例:
    残友软件CSS基本概念CSS构造块CSS基础盒模型CSS文本修饰CSS布局自定义CSS3.0新特性
    效果图如下:
  • 54. 六.CSS属性2.4:vertical-align 语法 vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length 取值: auto : CSS1 根据 layout-flow 属性的值对齐对象内容baseline : CSS1 默认值。将支持 valign 特性的对象的内容与基线对齐 sub : CSS1 垂直对齐文本的下标 super : CSS1 垂直对齐文本的上标 top : CSS1 将支持 valign 特性的对象的内容对象顶端对齐
  • 55. 六.CSS属性text-top : CSS1 将支持 valign 特性的对象的文本与对象顶端对齐 middle : CSS1 将支持 valign 特性的对象的内容与对象中部对齐 bottom : CSS1 将支持 valign 特性的对象的内容与对象底端对齐 text-bottom : CSS1 将支持 valign 特性的对象的文本与对象顶端对齐 length : CSS2 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0,对于百分数来说就是0%。目前IE尚未实现此参数
  • 56. 六.CSS属性说明: 设置或检索对象内容的垂直对其方式。 示例: td { vertical-align : middle; } 2.5:text-align语法 text-align : left | right | center | justify 取值: left : 默认值。左对齐 right : 右对齐 center : 居中对齐 justify : 两端对齐
  • 57. 六.CSS属性说明: 设置或检索对象中文本的水平对齐方式。 此属性作用于所有块对象(block elements)。在一个 div 对象里的所有块对象的会继承此属性值。 假如属性没有设置,这个参数将获取 null 值。 示例: div { text-align : center; } 2.6:word-break 语法 word-break : normal | break-all | keep-all 取值: normal : 默认值。允许在词间换行break-all : 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本
  • 58. 六.CSS属性行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all : 与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本 说明: 设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。 对于中文,应该使用 break-all 。 示例: div {word-break : break-all; }
  • 59. 六.CSS属性2.7:white-space 语法 white-space : normal | pre | nowrap 取值: normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行 pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。
  • 60. 六.CSS属性nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。 说明: 设置或检索对象内空格字符的处理方式。 空格字符,像换行,空格,TAB,在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时,你可以使用不换行空格的命名实体   来添加空格,用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。 此属性作用于块对象。
  • 61. 六.CSS属性示例: p { white-space: nowrap; } /*不换行*/ 2.8:word-wrap 语法 word-wrap : normal | break-word 取值: normal : 默认值。允许内容顶开指定的容器边界break-word : 内容将在边界内换行。如果需要,词内换行( word-break )也将发生 说明: 设置或检索当前行超过指定容器的边界时是否断开转行。 此属性仅作用于有布局的对象,如块对象。内联要素要
  • 62. 六.CSS属性使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。 示例: div { word-wrap: break-word; word-break: break-all; } 3.背景属性 3.1:background 语法 background : background-color || background-image || background-repeat || background-attachment || background-position
  • 63. 六.CSS属性取值: 该属性是复合属性。 默认值为:transparent none repeat scroll 0% 0%。 说明: 设置对象的背景样式。 如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。 3.2:background-attachment 语法 background-attachment : scroll | fixed 取值:
  • 64. 六.CSS属性scroll : 默认值。背景图像是随对象内容滚动 fixed : 背景图像固定 说明: 设置或检索背景图像是随对象内容滚动还是固定的。 示例: html { background-image: url("anasazi.tif"); background-attachment: fixed; } body { background-attachment: scroll; } 3.3:background-color 语法 background-color : transparent | color 取值: transparent : 默认值。背景色透明
  • 65. 六.CSS属性color : 指定颜色。 说明: 设置或检索对象的背景颜色。 当背景颜色与背景图像( background-image )都被设定了时,背景图片将覆盖于背景颜色之上。 3.4:background-image 语法 background-image : none | url ( url ) 取值: none : 默认值。无背景图 url ( url ) : 使用绝对或相对 url 地址指定背景图像
  • 66. 六.CSS属性说明: 设置或检索对象的背景图像。 当背景图像与背景颜色( background-color )都被设定了时,背景图片将覆盖于背景颜色之上。 示例: code { background-image: url("comet.jpg"); } blockquote { background-image:url("c:\InetPub\MyPixs\comet.jpg"); } br { background-image:url(http://Fred.com/ImageFile/Q.gif); } body { background-image: none; }
  • 67. 六.CSS属性3.5:background-position语法 background-position : length || length background-position : position || position 取值: length : 百分数 | 由浮点数字和单位标识符组成的长度值。 position : top | center | bottom | left | center | right 说明: 设置或检索对象的背景图像位置。必须先指定 background-image 属性。
  • 68. 六.CSS属性该属性定位不受对象的补丁属性( padding )设置影响。 默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。 如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。 如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。 对应的脚本特性为 backgroundPosition 。 示例: div { background: url("images/aardvark.gif"); background-position: 35% 80%; }
  • 69. 六.CSS属性body { background: url("images/aardvark.gif"); background-position: top right; } 3.6:background-position-x 语法 background-position-x : length | left | center | right 取值: length : 百分数 | 由浮点数字和单位标识符组成的长度值。 left : 居左 center : 居中 right : 居右
  • 70. 六.CSS属性说明: 设置或检索对象的背景图像横坐标位置。必须先指定 background-image 属性。 该属性定位不受对象的补丁属性( padding )设置影响。 默认值为: 0% 。 示例: p { background-image: url("images/aardvark.gif"); background-position-x: 35%; background-repeat:no-repeat; }
  • 71. 六.CSS属性3.7:background-position-y 语法 background-position-y : length | top | center | bottom 取值: length : 百分数 | 由浮点数字和单位标识符组成的长度值。 top : 居顶 center : 居中 bottom : 居底 说明: 设置或检索对象的背景图像纵坐标位置。必须先指定 background-image 属性。
  • 72. 六.CSS属性该属性定位不受对象的补丁属性( padding )设置影响。 默认值为: 0% 。 3.8:background-repeat 语法 background-repeat : repeat | no-repeat | repeat-x | repeat-y 取值: repeat : 默认值。背景图像在纵向和横向上平铺 no-repeat : 背景图像不平铺 repeat-x : 背景图像仅在横向上平铺 repeat-y : 背景图像仅在纵向上平铺
  • 73. 六.CSS属性说明: 设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( background-image )。 示例: menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; } p { background: url("images/aardvark.gif"); background-repeat: no-repeat; } 3.9:layer-background-color 语法 layer-background-color : transparent | color
  • 74. 六.CSS属性取值: transparent : 默认值。背景色透明color : 指定颜色。 说明: 设置或检索对象整个区域的背景颜色。 示例: div { layer-background-color: transparent; } 4.0:layer-background-image 语法 layer-background-image : none | url ( url ) 取值: none : 默认值。无背景图
  • 75. 六.CSS属性url ( url ) : 使用绝对或相对 url 地址指定背景图像 说明: 设置或检索对象整个区域的背景图像。 示例: code { position: absolute; top: 100px; left: 300px; width: 200px; border: thin solid black; background-image: url("comet.jpg"); layer-background-image: url("bb_comet.jpg"); }
  • 76. 六.CSS属性4.定位属性 4.1:position 语法 position : static | absolute | fixed | relative 取值: static : 默认值。无特殊定位,对象遵循HTML定位规则absolute : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义 fixed : 未支持。对象定位遵从绝对(absolute)
  • 77. 六.CSS属性方式。但是要遵守一些规范relative : 对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置 说明: 检索对象的定位方式。 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border )。
  • 78. 六.CSS属性要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递。 设置此属性值为 relative 会保持对象在正常的HTML流中,但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的,在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。
  • 79. 六.CSS属性内容的尺寸会根据布局确定对象的尺寸。例如,设置一个 div 对象的 height 和 position 属性,则 div 对象的内容将决定它的宽度( width )。 此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。 对应的脚本特性为 position 。 示例: div { position:relative; top:-3px }
  • 80. 六.CSS属性4.2:z-index 语法 z-index : auto | number 取值: auto : 默认值。遵从其父对象的定位number : 无单位的整数值。可为负数 说明: 检索或设置对象的层叠顺序。 较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值,那么将依据它们在HTML文档中声明的顺
  • 81. 六.CSS属性序层叠。对于未指定此属性的绝对定位对象,此属性的 number 值为正数的对象会在其之上,而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。 此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。 这个属性不会作用于窗口控件,如 select 对象。 示例: div { position:absolute; z-index:3; width:6px; } 4.3:top 语法 top : auto | length
  • 82. 六.CSS属性取值: auto : 默认值。无特殊定位,根据HTML定位规则在文档流中分配length : 由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。 说明: 检索或设置对象与其最近一个具有定位设置的父对象顶边相关的位置。 此属性仅仅在对象的定位( position )属性被设置时可用。否则,此属性设置会被忽略。
  • 83. 六.CSS属性此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。 对应的脚本特性为 top 。其值为一字符串,所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posTop , pixelTop 等运行时特性,以及对象的offsetTop 等特性。 示例: div { position: absolute; top: 1in; } div { position:relative; top:-3px; left:6px; } 4.3:根据4.2推算出right、bottom、left的语法
  • 84. 六.CSS属性5.尺寸属性 5.1:height 语法 height : auto | length 取值: auto : 默认值。无特殊定位,根据HTML定位规则分配 length : 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。不可为负数。 说明:
  • 85. 六.CSS属性检索或设置对象的高度。 对于 img 对象来说,仅指定此属性,其 width 值将根据图片源尺寸等比例缩放。 按照样式表的规则,对象的实际高度为其下列属性值之和: margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom 在IE6中使用 !DOCTYPE 声明指定 standards-compliant mod而在IE6中如果没有将 !DOCTYPE 声明指定 standards-compliant 模式,以及以前的浏览器版
  • 86. 六.CSS属性本,对象的实际高度等于:margin-top + height+ margin-bottom此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。 对应的脚本特性为 height 。其值为一字符串,所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posHeight , pixelHeight ,以及对象的offsetHeight 等特性。 示例: div { height: 1in; } div { position:absolute; top:-3px; height:6px; }
  • 87. 六.CSS属性6.布局 6.1:clear 语法 clear : none | left | right | both 取值: none : 默认值。允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 说明:
  • 88. 六.CSS属性该属性的值指出了不允许有浮动对象的边。 此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。 对应的脚本特性为 clear 。 示例: div { clear : left } img { float: right }
  • 89. 六.CSS属性6.2:float 语法 float : none | left | right 取值: none : 默认值。对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 说明: 该属性的值指出了对象是否及如何浮动。 当该属性不等于 none 引起对象浮动时,对象将被视作
  • 90. 六.CSS属性块对象( block-level ),即 display 属性等于 block 。也就是说,浮动对象的 display 属性将被忽略。 跟随浮动对象的对象将移动到浮动对象的位置。浮动对象会向左或向右移动直到遇到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止。 在IE5+中, div 和 span 对象假如没有指定宽度会被分配默认的宽度,而在此前的浏览器版本中则必须指定宽度值才可以呈递此属性。 示例: div { clear : left } img { float: right }
  • 91. 六.CSS属性6.3:overflow 语法 overflow : visible | auto | hidden | scroll 取值: visible : 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 auto : 在必需时对象内容才会被裁切或显示滚动条hidden : 不显示超过对象尺寸的内容 scroll : 总是显示滚动条
  • 92. 六.CSS属性说明: 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。 所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。 对于 table 来说,假如 table-layout 属性设置为 fixed ,则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ,那么超出 td 尺寸的内容将被剪切。如果设为 visible ,将导致额外的文本
  • 93. 六.CSS属性溢出到右边或左边(视 direction 属性设置而定)的单元格。 示例: body { overflow: hidden; } div { overflow: scroll; height: 100px; width: 100px; } 6.4: overflow-x 和overflow-y 语法与6.4相同 6.5:display 语法 display : block | none | inline | compact | marker | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
  • 94. 六.CSS属性取值: block : CSS1 块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行none : CSS1 隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间inline : CSS1 内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行inline-block : IE5.5 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 compact : CSS2 未支持。分配对象为块对象或基于内容之上的内联对象
  • 95. 六.CSS属性list-item : CSS2 将块对象指定为列表项目。并可以添加可选项目标志 table-header-group : CSS2 将对象作为表格标题组显示 table-footer-group : CSS2 将对象作为表格脚注组显示 说明: 设置或检索对象是否及如何显示。 table-header-group 和 table-footer-group 属性值可用来指定当表格( table )跨越了多页时, tHead 和 tFoot 对象的内容在每一页都显示。
  • 96. 六.CSS属性示例: img { disply: block; float: right; } 6.6:visibility 语法 visibility : inherit | visible | collapse | hidden 取值: inherit : 默认值。继承父对象的可见性 visible : 对象可视 hidden : 对象隐藏 说明:
  • 97. 六.CSS属性设置或检索是否显示对象。 与 display 属性不同,此属性为隐藏的对象保留其占据的物理空间。 在IE5.0+中,当父对象不可视时子对象是能被设为可视的。而在此前的浏览器版本中,如果希望对象为可视,其父对象也必须是可视的。 示例: img { visibility: inherit; float: right; }
  • 98. 六.CSS属性7.外补丁 7.1:margin 的语法 margin : auto | length 取值: auto : 取计算机值 length : 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。除了内联对象的上下外补丁外,支持使用负数值。 说明: 检索或设置对象四边的外补丁。默认值为 0 0。
  • 99. 六.CSS属性检索或设置对象四边的外补丁。默认值为 0 0。 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。如果只提供一个,将用于全部的四边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。 对于内联对象来说,上下外补丁如果被设置了,将是用于计算环绕内联对象的边框区域的。它们的值不会影响内联对象所在行的高度( height )。 外补丁总是透明( transparent )的。
  • 100. 六.CSS属性示例: body { margin: 36pt 24pt 36pt; } body { margin: 11.5%; } body { margin: 10% 10% 10% 10%; } 7.2:margin-top 语法 margin-top : auto | length 取值: auto : 取计算机值 length : 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。除了内联对象外支持使用负数值。
  • 101. 六.CSS属性7.3:margin-right 、margin-bottom 、margin-left 的用法和7.2的用法相同。 8.边框 8.1:border-color 语法 border-color : color 取值: color : 指定颜色。
  • 102. 六.CSS属性说明: 设置对象边框的颜色。 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。如果只提供一个,将用于全部的四条边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。 示例:
  • 103. 六.CSS属性

    边框为红色

    8.2:border-style语法 border-style : none | hidden | dotted | dashed | solid
  • 104. 六.CSS属性取值: none : 默认值。无边框。不受任何指定的 border-width 值影响 hidden : 隐藏边框。IE不支持 dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线 dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线 solid : 实线边框 示例:
  • 105. 六.CSS属性

    边框为虚线蓝色

  • 106. 六.CSS属性8.3:border-width 语法 border-width : medium | thin | thick | length 取值: medium : 默认值。默认宽度thin : 小于默认宽度thick : 大于默认宽度length : 由浮点数字和单位标识符组成的长度值。不可为负值。 示例:

    边框为黑色

  • 107. 六.CSS属性示例效果图: 9.内补丁 padding的语法 padding : length 取值: length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。不允许负值。
  • 108. 六.CSS属性示例:

    内容距离左边20像素

  • 109. 六.CSS属性10.列表 list-style-type 语法 list-style-type : disc | circle | square | decimal | none 取值: disc : CSS1 默认值。实心圆 circle : CSS1 空心圆 square : CSS1 实心方块 decimal : CSS1 阿拉伯数字
  • 110. 六.CSS属性
    • 项目符号为实心方块
    • 项目符号为实心方块
  • 111. 七.选择符通配选择符(Universal Selector )语法 * { sRules } 说明: 通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。 假如通配选择符不是单一选择符中的唯一组成,“*”可以省略。 示例: *.div { text-decoration:none; }
  • 112. 八.伪类8.1::link 的语法 Selector : link { sRules } 说明: 设置 a 对象在未被访问前的样式。 默认值由浏览器决定。 对于无 href 属性(特性)的 a 对象,此伪类不发生作用。 示例:
  • 113. 八.伪类 无标题页
  • 114. 八.伪类效果图: 8.2::hover 语法 Selector : hover { sRules } 说明: 设置对象在其鼠标悬停时的样式。 示例:
  • 115. 八.伪类 无标题页
  • 116. 八.伪类效果图: 8.3:active 语法 说明: 设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。 在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象,此伪类不发生作用。
  • 117. 八.伪类8.4::visited 语法 说明: 设置 a 对象在其链接地址已被访问过时的样式。
  • 118. 九.单位9.1:长度 Px 说明: 相对长度单位。像素(Pixel)。 像素是相对于显示器屏幕分辨率而言的。譬如,WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。 Em 说明: 相对长度单位。相对于当前对象内文本的字体尺寸。 如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
  • 119. 九.单位Pt 说明: 绝对长度单位。点(Point)。 1in = 2.54cm = 25.4 mm = 72pt = 6pc 9.2:颜色 9.2-1: rgb ( R , G , B ) 参数: R : 红色值。正整数 | 百分数 G : 绿色值。正整数 | 百分数 B : 蓝色值。正整数 | 百分数
  • 120. 九.单位说明: 颜色单位。 以上三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。 并非所有浏览器都支持使用百分数值。 9.2-2:#RRGGBB 参数: RR : 红色值。十六进制正整数GG : 绿色值。十六进制正整数BB : 蓝色值。十六进制正整数
  • 121. 九.单位说明: 颜色单位。 以上三个参数,取值范围为:00 - FF。 参数必须是两位数。对于只有一位的,应在前面补零。 如果每个参数各自在两位上的数字都相同,那么本单位也可缩写为 #RGB 的方式。例如:#FF8800 可以缩写为 #F80。 9.2-3:Color Name 说明: 颜色单位。颜色名称。不同的浏览器会有不同的预定义颜色名称。
  • 122. 十.CSS基础盒模型 盒模型包含(外补丁)margin,(背景颜色)background-color,(背景图片)background-image,(内补丁) padding ,(内容)content,(边框)border。
  • 123. 十.CSS基础盒模型盒模型3D图:
  • 124. 十一.CSS3.0新特性CSS 3 新功能: 圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa - 加入透明色、文字阴影等等 CSS3 的出现,让代码更简洁、页面结构更合理,性能和效果得到兼顾。 CSS3.0支持用户选择如何渲染盒式: box-sizing :content-box | border-box 有了这个特性支持,即便在标准模式下我们也可以选择传统盒式渲染模型。
  • 125. 谢谢大家!