Java Web程序设计 课件 第3章 CSS.pptx

第3章CSS主讲人：2025/2/61

主要内容2025/2/6《Web程序设计》21CSS简介2基本语法3常用样式4DIV+CSS布局

本章课程目标知识目标掌握CSS样式的基本语法、常用样式以及使用方法；能力要求：能够认识到解决问题有多种解决方案，并运用文献资料检索研究寻找可替代的方案，具备多方案比较选择能力；能够理解并掌握Web程序设计中的基础知识与工作原理，将知识与原理应用于开发过程中的问题分析；2025/2/6《Web程序设计》3

2.1HTML简介CSS（CascadingStyleSheets层叠样式表）是W3C协会为了弥补HTML在样式排版功能上的不足而制定的一套扩展样式标准，也由于CSS可以丰富网站的视觉效果，使网页设计者能够以更有效的方式设计出更具表现力的网页效果。2025/2/6《Web程序设计》4

CSS特点丰富的样式定义：CSS提供了丰富的文档样式外观内容和样式分离：使网页设计简洁明了，分工明确易于使用和修改：CSS可以将样式定义在专门的CSS文件中多页面应用：可以在多个页面中使用同一个CSS样式表层叠：就是对一个元素多次设置同一个样式，将使用优先级最高方式设置的属性值。页面压缩：样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少2025/2/6《Web程序设计》5

CSS一键设置黑白页面2025/2/6《Web程序设计》6

主要内容2025/2/6《Web程序设计》71CSS简介2基本语法3常用样式4DIV+CSS布局

CSS基本语法CSS的每个规则都包括三部分：选择器、样式属性和属性值。使用语法规范如下所示：2025/2/6《Web程序设计》8selector{property:value;property:value;...property:value}参数说明：selector，选择器，选择样式要作用的HTML元素，可以是多个，以逗号分隔；property，样式的属性，即样式的名称；value，样式的值，与property为一对。

样式说明2025/2/6《Web程序设计》9

简单示例2025/2/6《Web程序设计》10htmlheadtitleCSS简单示例/titlestyleh1{color:red;font-size:14px}/style/headbodydivh1网页标题1/h1/div/body/html

选择器选择器是控制CSS样式作用的对象，通常可以选择一个或多个HTML元素。CSS选择器包括了：元素选择器类选择器ID选择器属性选择器派生选择器。2025/2/6《Web程序设计》11

元素选择器元素选择器是CSS选择器中最基本的一种选择器，通过直接指定HTML元素标签，设置CSS样式要作用的元素。2025/2/6《Web程序设计》12stylehtml{background-color:black;}p{font-size:30px;backgroud-color:gray;}h2{background-color:red;}/style实现的效果分别是：对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。

元素选择器也可以对多个元素使用同一组样式允许使用“*”通配符，让网页中所有元素的字体都设置为“黑体”如果font-size属性对于某些元素是无效的话，那么该效果将被忽略。2025/2/6《Web程序设计》13h1,h2,h3,h4,h5,h6,p{font-family:黑体;}*{font-family:黑体;font-size:12px}

类(class)选择器类选择器用于描述一组元素的样式，这组元素指定了相同的样式名称，这样就允许了样式定义可以应用于多个元素中。class选择器在HTML中以class属性表示,在CSS定义中，类选择器以一个点.号显示。2025/2/6《Web程序设计》14style.center{text-align:center}/stylebody.....divclass=”center”.../divpclass=”center”.../p/body

类(class)选择器CSS还允许使用多类选择器，即对于一个元素的class声明中使用了多个class，必须要同时满足这个多个class。2025/2/6《Web程序设计》15style.bold{font-weight:bold;}.italic{font-style:italic;}.bold.italic{