《网页前端技术》CSS语言任务一.ppt

② 模块二 CSS语言 CSS 任务一 认识CSS 案例分解 案例资讯 我的第一个CSS文件 CSS概念 CSS的使用 教学重点：CSS的基本概念 CSS的特点 教学难点：CSS的类型 CSS的基本写法 案例资讯 案例一 我的第一个CSS文件 1、CSS的基本概念 2、CSS的特点 3、使用CSS的好处 一、CSS概念 1、CSS的基本概念 CSS，中文译作“层叠样式表单”(Cascading Style Sheet) 是一系列格式规则，它们控制网页内容的外观。使用 CSS 样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。 CSS可以完成下列工作： 　(1)弥补HTML对网页格式化功能的不足，如段 落间距、行距等。 　(2)设置字体变化和大小。 　(3)设置页面格式的动态更新。 　(4)进行排版定位。 2、CSS的特点 a、将格式和结构分离，减少工作量 b、以前所未有的能力控制页面布局 c、制作体积更小、下载更快的页面 d、将许多页面同时更新，比以前更快更容易 e、浏览器将成为更友好的界面, 对HTML语言处理 样式的最好补充 f、控制页面中的每一个元素（精确定位） 3、使用CSS的好处 ① 样式解决了一个普遍的问题 HTML 标签原本被设计为用于定义文档内容。通过使用 h1、p、table 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。 ②多重样式将层叠为一个 样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。 优先权 浏览器缺省设置 外部样式表 内部样式表（位于 head 标签内部） 内联样式（在 HTML 元素内部）(拥有最高优先权) ③样式表极大地提高了工作效率 由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。 二、CSS的使用 1、CSS的类型 ? a、自定义CSS，相应的标记中出现“class属性 ?.bg { backgroudn-image: url (bg.gif); } ??在HTML中使用：body class=“bg” ? b、重定义标记的CSS td { color: #000099; font-size:9pt; } c、CSS选择符 使用“ID”作为属性，以保证文档具有唯一可用的值CSS选择符是一种特殊类型的样式，常用的有4种 a:link、a:active、a:visited、a:hover a:link： a:active： a:visited： a:hover： 设定正常状态下链接文字的样式。 设定鼠标单击时链接的外观。 设定访问过的链接外观。 设定鼠标放置在链接文字之上时文字的外观。 a:link { color:#FF3366; font-family:”宋体”; text-decoration:none; } A:hover { color:#FF6600; font-family:”宋体”; text-decoration:underline; } A:visited { color:#FF339900; font-family:”宋体”; text-decoration:none; } 代码如下： 2、CSS的基本写法 ①、在 HEAD 内实现，即HEAD/HEAD标记内： ②、在BODY内实现，使用下面的语法: h3 style=”font-size:10pt”，这样的写法虽然直观，但是无法体现出CSS的优势，因此不推荐使用。 ③、在文件外的调用 CSS 的