[理学]CSS基础.pptVIP

CSS 边框 属性 语法 属性值 常规值 上边框线宽 border-top-width ? ? 上边框线型 border-top-style solid[实线]、dotted[点划线]、dashed[虚线] ? 上边框颜色 border-top-color ? ? 设置某一边框属性的简捷方式 ? border-边框位置:线宽 线型 颜色; ? 设置边框属性的简捷方式 border:线宽 线型 颜色; ? ? ? CSS 链接 状态 描述 a:link 正常显示的链接文本状态 a:hover 鼠标置于链接文本之上的状态 a:active 鼠标按下链接的状态 a:visited 访问过的链接文本状态 CSS div id=container div id=headerHeader/div div id=wrapper div id=contentContent/div /div div id=navigationNavigation/div div id=extraExtra stuff/div div id=footerFooter/div /div 同一个XHTML文件，配以不同的CSS文件，可以实现多种多样的布局效果。 如上图的XHTML结构，配以40个不同的CSS文件，可以实现下图的40种布局结构。 先看四种… CSS基础 CSS是Cascading Style Sheets(层叠样式表)的简称。 CSS是由W3C（World Wide Web Consortium）的CSS工作组产生和维护的，第一次提出是在1996。 CSS是一种标记语言，它不需要编译，可以直接由浏览器执行(属于浏览器解释型语言)。 在标准网页设计中CSS负责网页内容(XHTML)的表现。 CSS文件也可以说是一个文本文件，它包含了一些CSS标记，CSS文件必须使用css为文件名后缀。 可以通过简单的更改CSS文件，改变网页的整体表现形式，可以减少设计者的工作量，所以CSS是每一个网页设计人员的必修课。 要求：能借助DW的自动提示功能手写CSS代码。 CSS代码 我们来看三个网页： /zengarden-sample.html / /?cssfile=/208/208.csspage=0 这三个页面的截图分别如下： CSS代码 使用CSS的好处有很多，主要有以下几点： 表现和内容相分离（网页：结构、表现、行为）； 提高页面浏览速度； 易于维护和改版。 CSS的优点 样式的创建 演示…… 样式的编辑 演示…… CSS的应用 1、内联样式 2、外部链接 3、外部导入 CSS的应用 内联样式 内联样式有两种使用方法： 1、通过style属性来定义样式。如： h1 style=“color:#FFFFFF”文字/h1 2、通过style标签元素定义样式。如： style type=“text/css” h1 {color:#FFFFFF} /style CSS的应用 外部链接 通过link标记链接进一个独立的CSS文件。如： link href=3.css rel=stylesheet type=text/css 注意： 1、link标签必须放在文档的head部分，而不能放在其它任何元素里。 2、样式表文件里必须只有样式规则，没有任何XHTML元素标签。 3、通常给独立的样式表文件的扩展名为.css。 CSS的应用 外部导入 通过@import这个语法来引导浏览器载入一个外部的样式表。如： style type=text/css @import url(4.css); /style 注意： @import必须处于style标签内，并且必须位于style标签内的其他CSS规则之前，否则就不能正常工作。 CSS的应用 思考 在建设网站要使用CSS时，哪种应用方式更好： 在标签的style属性中应用的内联样式方法？ 在文档头部的style标签中应用的内联样式方法？ 外部链接？ 外部导入？ CSS的应用 CSS的定义是由三个部分构成: 选择符(selector)，属性(properties)和属性的取值(value)。 语法: selector {property: value;……} 选择符 {属性:属性值;……} CSS的使用规则 标签选择符: 文档中被所有该标签控制的部分都应用该样式。 标签{属性:属性值;……} 类选择符: 文档中应用该类的元素所控制的