《网页设计与制作》课件——第四章 CSS3入门.pptVIP

Page*本章知识点CSS简介网页中使用CSS的4种方式CSS的基本语法基本选择器高级选择器选择器的优先级伪类和伪元素一、CSS简介CSS的作用修饰美化网页内容，简陋的HTML显示效果在CSS的作用下变得精致而美观CSS样式开发理念：HTML负责网页结构、CSS负责网页美化、Javascript负责动作交互目标是要实现“结构、样式、动作分离”一、CSS简介CSS（CascadingStyleSheets）“层叠样式表”或“级联样式表”，简称“样式表”是用于（增强）控制网页样式，并且能够将样式信息与网页内容分离的一种标记性语言在1994年被提议，1996年被浏览器支持，现使用的是CSS3一、CSS简介CSS的优点丰富的修饰样式各种修饰属性，实现所想即所得内容与修饰分离，利于团队开发标签组织内容，CSS修饰元素内容实现样式复用，提高开发效率CSS样式可以同时作用于多个元素实现页面的精确控制使用选择器对页面元素进行控制与修饰二、网页中使用CSS的4种方式内联样式表又称为行内样式表每一个HTML标签都有一个“style”属性，内联样式表的内容就是style属性的属性值内联样式表只对使用了的标签有用不建议使用例如：divstyle=font-size:36px;color:#F00; 窗前明月光，疑是地上霜。/div二、网页中使用CSS的4种方式内嵌样式表样式的定义部分包含在style标签之间内嵌样式表是HTML文件的一部分，style标签一般放在head标签之间内嵌样式表对整个网页都有效建议少使用例如：htmlhead……styletype=text/css p{ font-size:18px; color:#F00; }/style/headbody div静夜思/div p窗前明月光，疑是地上霜。 /p p举头望明月，低头思故乡。 /p/body/html二、网页中使用CSS的4种方式外链样式表是指在网页中通过link标签调用外部的CSS样式表文件的方式link标签一般位于head元素内外部样式表文件的后缀为“.css”，其内容仅为“定义的CSS样式”，除此之外不包含任何其它内容外链样式表对引入它的页面都有效（多个页面）强烈建议使用二、网页中使用CSS的4种方式外链样式表:CSS文件（mycss.css）举例：p{ font-size:18px;color:#F00; }li{ font-size:16px; color:#309;}使用link标签引入：linkrel=“stylesheet”type=“text/css”href=“css/mycss.css”/二、网页中使用CSS的4种方式导入样式表导入样式表和外链样式表基本相同，都是引入外部的独立CSS文件导入样式表是通过style标签内部的“@import”关键字实现的导入样式表对整个网页都有效不建议使用使用style标签的@import关键字：styletype=text/css@importurl(css/mycss.css);/style三、CSS的基本语法选择器（selector）：用来选择样式呈现的对象声明部分（declarationblock）：大括号及其内的所有内容声明（declaration）：由“属性（property）”和“属性值（value）”组成，属性和属性值之间使用英文状态下的冒号“:”作为分隔符。在声明部分中，可以有多个声明，声明与声明之间使用英文状态下的分号“;”作为分隔符。css对大小写敏感，css中属性名称都要求小写四、基本选择器CSS支持三种基本选择器HTML选择器Class选择器Id选择器四、基本选择器HTML选择器又称标签选择器，以HTML标签名称作为选择器，用来控制这一类标签的样式实际应用（见书上示例）注意：CSS中的注释只能使用“/*注释内容*/”HTML选择器常用于这样的场景：希望网页中某个标签的样式全部统一四、基本选择器Class选择器又称类选择器，每个标签都拥有一个名为”class”的属性。使用Class选择器的两个步骤给目标HTML标签一个class属性，并赋值在内嵌样式表或外链样式表中，以目标HTML标签的class属性的值作为选择器名称，前面加符号“.”，然后再定义该选择器的声明部分实际应用（见书上示例）Class选择器代表着显示风格是一类的对象，Class选择器中定义的样式一个重要的特征就