- 1、本文档共27页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
② 模块二 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 的
文档评论(0)