DHTML动态网页设计 作者 王愉 CSS__I.pptVIP

1.1 CSS样式表概述 1996年初诞生了层叠样式表CSS技术。 CSS是层叠样式表Cascading Style Sheet 是用于实现对布局、字体、颜色、背景和其它网页效果实现更加精确的控制，其主旨就是将显示内容和显示的样式定义分离。 CSS样式表既可以定义在HTML文档内部，也可以作为附加文档定义在文档外部。 一个样式表可以作用于多个页面，甚至整个站点，一个HTML文件也可以引用多个CSS样式表中的样式定义。因此，样式表具有更好的易用性和扩展性。 1.1.1 将样式表加入网页的方法 1. 外部链接样式文件(Linked styles) 基本格式： link rel=stylesheet href=stylesfile.css type=text/css 说明： 先建立外部样式表文件（.css），然后使用HTML的link对象进行链接。 2.内部常规定义样式(Embedded styles) 基本格式： style type=text/css !-- ... -- /style 3. 内联在线定义样式(Inline Styles) 基本格式： tag style=property1:value1; property2:value2; ... 说明： 内联定义即在对象的标记内，使用对象的style属性定义适用的样式表属性。 Eg: p style=background: silver; font-family: 宋体; font-size: 12px 1.1.2 样式冲突解决 浏览器通过“继承”与“覆盖”原则来解决样式冲突问题。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义，而通常最接近目标的样式定义优先权越高。 样式表优先级一般原则： 内联在线定义样式（Inline styles）的优先级最高 缺省浏览器样式（Default browser styles）的优先级最低 当内部常规定义样式（Embedded styles）与外部链接样式（Linked styles）同时存在，接近目标的样式优先权高。”就近”原则 Eg: p { font-family: Times;color:red;} I { font-family: Impact } pI thinkIGarden/Iis Davids best novel./p 说明：由于“继承”原则，Garden的颜色为红色显示，由于“覆盖”原则，Garden的字体为Impact显示。 1.2.1 CSS的基本规则 1. CSS的基本语法 基本格式： Selector { property: value; } 说明： 属性和属性值之间用冒号（:）隔开，各定义之间用分号（;）隔开。 Selector?:?是选择符 ，指明应用此样式代码的对象。可以是(X)HTML标记、自定义的id或者class对象。 property?:?样式属性，如：大小、颜色、定位、边框等。 value?:?样式属性值，常见形式有一定范围的可选值或带有单位的数值。 eg： P {background:yellow; font-family:courier } 2. 注释 利用/* …… */为代码加上注释。 eg： P.first { color: green } /* green for the first paragraph of every page */ 3. CSS选择符的命名规则 （1） 区分大小写 在XHTML中，CSS的 id及class选择符名称是区分大小写的，eg：id=nav不同于id=Nav （2） 采用合法字符 命名必须以英文字母开始，后接字母、数字、下划线等 （3） 使用具有一定语义的字母组合 （4） 制定统一的命名规则 例如：“变量类型_变量名”方式 1.2.2 CSS的选择符 1．标记选择符（Tag Selectors） 基本格式： Tag { property: value } Eg: p { font-family:Arial; font-size:20px; color:#800080;word-spacing:8px; } 2. 类选择符（Class Selectors） 基本格式： .Classname { property: value } Tag class=Classname 说明： Classname类命名规则：以英文字母开头，可以与数字、下划线组合命名。注意：点（.）与Classname之间没有空格。 命名类名时，需要注意区分大小写,因为XHTML区分大小写。 Eg: .Silver_text {font: 18pt impact; color: Silver}; 3. ID选择符（ID Selectors