WEB程序设计之CSS技术.ppt

2005－03 Web程序设计 ——CSS技术 内容 什么是CSS 在网页中使用CSS CSS如何定义样式内容 CSS属性 什么是CSS CSS（Cascading Style Sheet，层叠样式表）是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式。 演示——层叠样式表示例 演示 在网页中使用CSS 方式1 在标记符中使用 style 属性，例如： p style=“text-align:center” 演示 在网页中使用CSS 方式2 使用style 标记符，例如： style样式定义/style 演示 在网页中使用CSS 方式3 使用link 标记符，例如： link rel=“stylesheet” type=“text/css” href=“stylesheet.css” 演示 演示——使用CSS的三种方式 综合演示 CSS样式定义 样式表项的组成： Selector{property1:value1;property2:value2;property3:value3;……} 例如：h3 {COLOR: #ff0000; TEXT-ALIGN: right} CSS样式定义 常用Selector类型 HTML标记符 用户定义的类 用户定义的ID 虚类 HTML Selector HTML标记符是最常用的selector，它重新定义了HTML标记符的显示效果。 h1{text-align:center;color:red} 演示 HTML Selector 具有上下文关系的HTML标记符 p i{color:red} 演示 用户定义的类 Selector.classname{property:value…} .classname{property:value…} 演示——用户定义类 演示 虚类 Selector :link 未访问过的超链接 :visited 访问过的超链接 :hover 悬停状态的超链接 :active 活动超链接 虚类 Selector 例如： 所有超链接去下划线：a{text-decoration:none} 悬停变色:hover{color:red} 演示——虚类selector效果 演示1 演示2 CSS属性——字体属性 font-family font-style (normal/italic…) font-weight (normal/bold/bolder/lighter/100/…) CSS属性——字体属性 font-size (绝对大小/相对大小/长度值/百分比) font (顺序：weightvariantstylesize/line-heightfamily) 演示——字体属性 CSS属性——颜色与背景属性 color background-color background-image background-attachment(scroll/fixed) 演示——颜色与背景属性 演示 CSS属性——文本属性 line-height text-align(left/right/center/justify) text-decoration(none/underline/overline) text-indent 演示——文本属性 * * 演示 演示