动态网页制作与编程_3_CSS+DIV教案详解.ppt

计算机科学与技术学院608教研室 动态网页制作与编程 孟宇龙 mengyulong@hrbeu.edu.cn 本次课程主要内容 一、CSS简介 二、CSS分类 三、CSS基本语法 四、CSS的文字效果 五、CSS的段落文字 六、CSS中的图片效果 七、CCS控制背景颜色 八、表格和表单 九、CSS的超链接 十、CSS制作实用菜单 一、CSS简介 CSS的概念：CSS（Cascading Style Sheet）层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 Html的缺陷：繁琐。 引入CSS: 一、CSS简介 样式解决了一个普遍的问题 HTML 标签原本被设计为用于定义文档内容。通过使用 h1、p、table 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。 由于浏览器不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。 为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。 一、CSS简介 多重样式将层叠为一个 样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。 二、CSS分类 行内样式 内部样式 链接式 便于维护 导入式 便于维护 二、CSS分类 链接式和导入式的区别 链接式：会在装载页面主体部分之前装载css文件，这样显示出来的网页从一开始就是带有样式效果的;导入式：会在整个页面装载完成后再装载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式的页面，闪烁一下之后再出现设置样式后的效果，从浏览者的感受来说，这是导入式的一个缺陷。 对于一些比较大的网站，为了便于维护，可能会希望把所有的css样式分类别放到几个CSS文件中，这样如果使用连接式引入，就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类，就需要同时调整HTML文件，这对于维护工作来说，是一个缺陷，如果使用导入式，则可以只引进一个总的CSS文件，在这个文件中再导入其他独立CSS文件；而连接则不具备这个特性。因此给大家的建议是：如果仅需要引入一个CSS文件，则使用连接方式；如果需要引入多个CSS文件，则首先用连接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件。如果希望用javascript来动态决定引入哪个css文件，则必须使用连接式才能实现 二、CSS分类 层叠次序 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中（4）拥有最高的优先权。 （1） 浏览器缺省设置 （2） 外部样式表 （3） 内部样式表（位于 head 标签内部） （4） 内联样式（在 HTML 元素内部） 因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：head 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。 三、CSS基本语法 CSS的选择器 选择器的声明 选择器的继承 三、CSS基本语法 CSS的选择器 标记选择器 类别选择器 ID选择器 CSS注释 以 “/* ” ? 开头，以 “*/ ” 结尾 标记选择器-一定是html的标准标记 style h2{ font: 宋体; color: #0000FF; font-size: 24px } /style 类别选择器——用户自定义 style .one { color:#FFFF00; font-size:20px; background:#666666; } /style ID选择器——用户自定义 style #ID { color:#FFFF00; font-size:20px; background:#666666; } /style 类别选择器和ID选择器 ID标记不允许同时出现在两段代码中，类别标记可以被多个html控件套用 因为ID标记允许使用在javascript中，如果允许同时使用，则将导致javascript的语法混乱。 如果不是实用javascript，不建议使用ID选择器 三、CSS基本语法 选择器的集体声明 在使用选