CSS详解javaweb入门解答.ppt

;1996年初诞生了层叠样式表CSS技术。 CSS是层叠样式表Cascading Style Sheet 是用于实现对布局、字体、颜色、背景和其它网页效果实现更加精确的控制，其主旨就是将显示内容和显示的样式定义分离。 CSS样式表既可以定义在HTML文档内部，也可以作为附加文档定义在文档外部。 一个样式表可以作用于多个页面，甚至整个站点，一个HTML文件也可以引用多个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） 制定统一的命名规则 例如：“变量类型_变量名”方式;根据样式代码的位置，分为三类： 行内样式 内嵌样式 外部样式 ;您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。;HTML HEAD TITLE应用样式/TITLE STYLE TYPE=text/css P { font-size:20px; color:blue; text-align:center; } /STYLE /HEAD BODY P我是段落 1/P P我是段落 2/P P我是段落 3/P P我们的样式绝对统一/P /BODY /HTML;根据选择器的不同，内嵌样式又分为： HTML 选择器 CLASS 类选择器 ID 选择器 伪类选择器 ; 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（import）外部样式表 ;使用LINK（链接）标签 ，语法： HEAD LINK rel = “stylesheet” type = ”text/css” href = ”样式表文件.css” /HEAD;使用@import导入 ，语法： HEAD STYLE TYPE=text/css @ import 样式表文件.css; /STYLE /HEAD;外部样式文件;/*--关键代码--*/ HEAD STYLE type=text/css P { /*设置样式：字体和背景色*/ font-family: System; font-size: 18px; color: #3333CC; } H2 { background-color: #CCFF33; text-align: center; } /STYLE /HEAD BODY H2品种特征方面：/H2 P　　 1、蛋鱼：蛋鱼…….。/P P　　 2、龙睛：龙睛……..。/P P　　 3、高头：高头….。/P;选择器--class类选择器;HEAD STYLE TYPE=text/css #fire { color:red; font-size: 24px; } /STYLE /HEAD BODY H2 ID=fire我是二级标题，火是这样的/H2 P ID =fire我是段落，火是这样的/P /BODY ;基本格式： E1.E2 { property: value } E1#E2 { property: value } 说明： 针对于class为E2的E1标记进行样式定义； 针对于id为E2的E1标记进行样式定义； Eg: ul.Blueli{font-family:Arial; color:#369} *针对于class为Blueli的ul标记进行重新定义*;