11-12节《网站开发》课程地位、目标和章节.pptVIP

第11-12节 CSS基础知识 上节回顾 掌握表单标记 掌握插入表单对象 掌握列表菜单 掌握文本域标记 上节案例学生展示 学生展示完善后的上节案例 本节目标 掌握CSS的含义、优点及语法结构 掌握CSS选择器 掌握在XHTML文件中使用CSS的方法 本节案例 使用链接样式表，设置网页文字样式 CSS样式表 认识CSS CSS（cascading style sheet，层叠样式表)是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一。 使用css的优点： 使网页代码更少，网页下载更快 实现了内容与样式的分离，使网站维护更快捷 使网页与浏览器的兼容性更好 CSS样式表 CSS的语法结构 每个CSS样式由两个分组成：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。例如： CSS选择器 1、标记选择器 CSS选择器 2、类别选择器 CSS选择器 3、ID选择器 本章内容 伪类选择器——定义超链接样式 a:link 定义超链接默认样式 a:visited 定义访问过的样式 a:hover 定义鼠标经过的样式 a:active 定义鼠标按下的样式 在XHTML中使用CSS样式表 1、行内样式 在XHTML中使用CSS样式表 2、内部样式 在XHTML中使用CSS样式表 3、外部样式 在XHTML中使用CSS样式表 4、导入样式 总结 案例扩展 CSS样式表的综合应用 5个问题 什么是CSS？ CSS样式表的优点？ CSS的语法结构是什么？ CSS选择器有哪几种？ 在XHTML中使用CSS样式表有哪几种方法？ 下节预习 掌握文字属性 了解文字复合属性 掌握段落属性 掌握CSS的含义、优点及语法结构 掌握CSS选择器 掌握在XHTML文件中使用CSS的方法 CSS的思想就是首先指定对什么“对象”进行设置，最后给出该设置的“值”。因此，概括来说，CSS就是由三个基本部分组成的——“对象”、“属性”和“值”。 在css的三个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）。 选择器是css中很重要的概念，所有html语言中的标记样式都是通过不同的css选择器进行控制的。用户只需要通过选择器对不同的html标签进行选择，并赋予各种样式声明，即可实现各种效果。 1、标记选择器 style H1{ color:red; font-size:25px; } /style 以上这段css代码声明了HTML页眉中所有的h1标记，文字的颜色都采用红色，大小都为25px。每一个css选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记声明多种样式风格。如上图所示。 在上一节中提到的标记选择器一旦声明，那么页面中所有的相应标记都会相应地产生变化。例如当声明了p标记不是红色时，页眉中所有的p标记都将显示为红色。如果希望其中的某一个p标记不是红色，而是蓝色，这时仅依靠标记选择器是不够的，还需要引入类别选择器。 类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范。 html head titleclass选择器/title style type=text/css .red{ color:red; font-size:18px; } .green{ color:green; font-size:20px; } /style/head body p class=redcss选择器1/p p class=greencss选择器2/p h3 class=greenh3同样适用/h3 /body /html ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，id翻译为中文表示身份的意思，与每个人的身份证类似，具有唯一性，因此针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用css中的css中的ID选择器。 html head titleID选择器/title style type=text/css #bold{ font-weight:30px;