CSS和JavaScript语言之一.pptVIP

* CSS和JavaScript语言 课程简介 1、课程的地位 ■ 强化网页制作的技术 ■ 掌握网页设计的高级技术 2、教学方式 ■ 理论与实践相结合 ■ 强化综合实例应用 ■ 多动手才是硬道理 『南华计算机系』 CSS和JavaScript语言 主要内容 ■ Web标准和XHTML ■ CSS选择器 ■ 字体属性 『南华计算机系』 Web标准 『南华计算机系』 什么是Web标准 标准的意义 XML在IT行业标准所起的作用 Web标准 XHTML基本概念 『南华计算机系』 什么是XHTML XHTML是The eXtensible HyperText Markup Language(可扩展标识语言)的缩写。 它是HTML到XML过渡的Web语言 与HTML相似，并且符合XML要求 XHTML实际上就是将HTML根据XML规范重新定义一遍。它的标签与HTML4.0一致，而格式严格遵循XML规范。 XHTML基本概念 『南华计算机系』 XHTML元素 XHTML与HTML的区别 1、文档声明不同 2、标签结构要求不同 3、属性值写法不同 XHTML基本概念 『南华计算机系』 XHTML元素 XHTML与HTML的区别 1、文档声明不同 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml XHTML基本概念 『南华计算机系』 XHTML元素 XHTML与HTML的区别 2、标签结构要求不同 （1）元素和属性必须小写(大小写有区分) 例:li……/LI （2）非空元素必须成对出现。对空元素必须使用结束符 例:错误：p第一段 正确：p第一段/p br/、hr/、input type=“text”/ 、 img src=“images/1.gif” / （3）属性值需要加引号，并且不能简写 例：错误：img src=images/1.gif/ input type=radio checked / 正确： img src=“images/1.gif” / input type=radio checked=“checked” / 第一个实例 『南华计算机系』 第一个实例 一个简单的DIV+CSS制作的网页 CSS基本概念 『南华计算机系』 网页中书写CSS head style type=text/css …… /style /head CSS基本概念 『南华计算机系』 CSS选择器 CSS通过选择器来查找所以应用样式的标签。有三种类型的选择器： 标记选择器 ID选择器 类选择器 CSS基本概念 『南华计算机系』 CSS选择器 标记选择器 采用标记的名称进行定义 特点：自动把样式应用到对应的标签上，整个页面对应的标签具有定义的样式。 例： body{ background-color:#000; color:#CCCC00; font-size:12px;} p{ padding:10px; margin:0; text-indent:2em;} CSS基本概念 『南华计算机系』 CSS选择器 ID选择器 通过标签的ID属性进行定义样式。 特点：为标签命名对应的ID后，该标签将具有对应的样式。 例：#header{ background-color:#000; color:#CCCC00; font-size:12px;} div id=“header”网页的头部/div CSS基本概念 『南华计算机系』 CSS选择器 类选择器 通过标签的class属性进行定义样式。 特点：为标签的class属性对赋于对应的值后，该标签将具有对应的样式。 例：.content{ background-color:#000; color:#CCCC00; font-size:12px;} div class=“header”网页的内容/div CSS基本概念 『南华计算机系』 CSS选择器 选择器的区别 标签选择器：只需定义，不能应用。作用范围：整个网页对应的标签。 ID选择器：定义后，需要应用到标签上。作用范围：应用的标签。 Class选择器：定义后，需要应用标签上。作用范围：应用的标签。 一般地，ID选择器在一个页面中只应用到一个标签，而Class选择器可以在一个页面中应用到多个标签上。 CSS基本属性 『南华计算机系』 CSS中的背景属性 背景属性 对应的属