1 / 32

第 5 讲 CSS 级联样式表

第 5 讲 CSS 级联样式表. 主要内容和要求. 内容 : CSS 样式表的使用方法和技巧 文本样式、超级链接样式和页面元素标签样式的创建与应用 样式编辑、分级和共享 CSS 样式表文件 要求 数量掌握 CSS 样式表的创建和应用 了解利用代码编辑方式修改 CSS 样式表. CSS 的基本概念. Cascading Style Sheets ， CSS ，也称为 CSS 样式表或层叠样式表、级联样式表。 和 Word 中样式为同一个概念，可对网页页面内容进行修饰，不同之处是增加了设置超级链接、表单元素属性和其它页面属性。

chika
Download Presentation

第 5 讲 CSS 级联样式表

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第5讲 CSS 级联样式表

  2. 主要内容和要求 内容: • CSS 样式表的使用方法和技巧 • 文本样式、超级链接样式和页面元素标签样式的创建与应用 • 样式编辑、分级和共享 CSS 样式表文件 要求 • 数量掌握 CSS 样式表的创建和应用 • 了解利用代码编辑方式修改 CSS 样式表

  3. CSS 的基本概念 • Cascading Style Sheets，CSS，也称为CSS样式表或层叠样式表、级联样式表。 • 和 Word 中样式为同一个概念，可对网页页面内容进行修饰，不同之处是增加了设置超级链接、表单元素属性和其它页面属性。 • 是将文字、超级链接和表单元素等页面元素统一为相同风格的管理工具。

  4. 一、创建文本的CSS样式表 • 打开 css1.htm • 选菜单窗口CSS样式 • 或右击编辑窗口CSS样式表 • 新建样式表

  5. 选择"创建自定义样式表"，输入名称“.p9” 选仅对该文档，然后单击确定

  6. 应用 CSS样式 应用 效果

  7. CSS代码

  8. 使用CSS选择器 • a:link：文字链接样式 • a:visited：点击过链接后样式 • a:hover：鼠标悬停在链接上时的样式 • a:active：文字链接处于激活状态时样式 打开link.htm 进行样式设置

  9. 右击编辑窗口

  10. 设置样式后的效果

  11. 选编辑样式表

  12. 预览效果 a.link a.hover a.active a.visited

  13. 创建HTML标签的CSS样式 • 打开 htmlcss.htm 文件，创建样式表 设置input标签的类型

  14. 设置input标签的背景 设置input标签的边框

  15. 操作完成后得到 的样式表代码 按下面的样式表 代码设置select 标签样式

  16. 按右边的样式代码 设置textarea控件的 样式 在浏览器 的预览效果

  17. CSS样式表修改 打开 css1.htm 选中要编辑的样式 进行编辑

  18. CSS样式表分组 途径： • 用CSS样式面板中添加样式 • 通过代码编辑器进行设置 • 创建超级链接的big和small样式 • 打开cssgroup.htm文件

  19. 选编辑样式表，出现右图的界面 按以下的要求分别建立样式

  20. a.big的样式要求

  21. a.small 的样式要求

  22. 样式应用 完成后的效果

  23. 样式表文件共享 • 导出样式表到文件： • 打开 css1.htm， 导出完成

  24. 导入样式表到文件 • 打开adds.htm文件， 出现如下界面

  25. 选中已存在的样 式表文件act.css 选择“链接”样式表 得到的代码如下所示

  26. 或选择“导入”方式 得到的代码如下所示

  27. 应用导入的样式表

  28. 通过新建窗口建立样式表 • 菜单新建窗口

More Related