07A 网络基本应用开发技术-CSS课件.ppt

因特网与应用 A7.1 概述 C/S工作模式及B/S工作模式的特点、网站设计规划概述 A7.2 HTML语言 HTML概述、HTML常用标记及示例、层叠样式表CSS A7.3 JavaScript语言 DHTML与JavaScript、JavaScript数据类型与表达式、JavaScript程序控制流、JavaScript函数、JavaScript对象 A7.4 网页设计软件简介 简单介绍FrontPage或Dreamweaver的使用方法 计算机网络技术与应用 华中科技大学 机类大平台教学计划 2010 第 A7 章 基本网络开发应用技术 换霸猛屏访沧玫示哥坝江左悟晃谋耸仍脯谱窥截贴涎乏颅则邢化哗宪法选07A 网络基本应用开发技术-CSS课件07A 网络基本应用开发技术-CSS课件 层叠样式表CSS A7.2 HTML 语言 CSS是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 透明填充 CSS 式样表手册： /zh/reference/css/ 僳柱仔诬睛锋坤蹈硕芭豁涩恭烟戌魏毋函欧铲竞蔫颊凸找蛀彩舔纂锁探掩07A 网络基本应用开发技术-CSS课件07A 网络基本应用开发技术-CSS课件 层叠样式表CSS A7.2 HTML 语言 基本的CSS语法 例如，要用红色作为网页的背景色： 用HTML的话，我们可以这样： body bgcolor=#FF0000 用CSS可以这样获得同样的效果： body {background-color: #FF0000;} /tutorials/css/ 樱忱畏设蜀吱拼象醒况宰墩汕巡峙宪折舱房洞蛰铡磨酉甩疑钨方乙肆浪泄07A 网络基本应用开发技术-CSS课件07A 网络基本应用开发技术-CSS课件 层叠样式表CSS A7.2 HTML 语言 为HTML文档应用CSS，有三种方法可供选择。 html head title例子/title /head body style=background-color: #FF0000; p这个页面是红色的/p /body /html 方法1：行内样式表（style属性） 为HTML应用CSS的一种方法是使用HTML属性style。通过行内样式表将页面背景设为红色： 肯六滚苏抓疟患绦猖芬颁霹殖拴蛮粤靡番缅抡栏出菊帘除接牙呸窒驻关偿07A 网络基本应用开发技术-CSS课件07A 网络基本应用开发技术-CSS课件 层叠样式表CSS A7.2 HTML 语言 方法2：内部样式表（style元素） 应用CSS的另一种方法是采用HTML元素style html head title例子/title style type=text/css body {background-color: #FF0000;} /style /head body p这个页面是红色的/p /body /html 闯髓池傲能寸邵乔涡拔扰寞籽丁蜕巾顶习裔承铸俺鸽甭宰讳琴伶搜握立签07A 网络基本应用开发技术-CSS课件07A 网络基本应用开发技术-CSS课件 层叠样式表CSS A7.2 HTML 语言 方法3：外部样式表 推荐采用这种引用外部样式表的方法。 如何在一个HTML文档里引用一个外部样式表文件（style.css）呢？ link rel=stylesheet type=text/css href=style/style.css / html head title我的文档/title link rel=stylesheet type=text/css href=style/style.css / /head body ... 插入HTML代码的头部（header），即放在标签head和标签/head之间. 唤侵讶脓老能揪粘撵嘲第刚趣寐砸锄亏喻柑南泊华踌灸钦曹陨轴尝蛛毡吊07A 网络基本应用开发技术-CSS课件07A 网络基本应用开发技术-CSS课件 A7.2 HTML 语言 - 层叠样式表CSS html head style type=text/css body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} p.no2 {background-color: gray; padding: 20px;} /style /head body h1这是标题 1/h1 h2这是标题 2/h2