Embed Size (px)
Citation preview
CSS 样式表
长安大学
计算机基础教学委员会
知识点
• 理解CSS样式表的意义和原理
• 掌握CSS样式表的定义和应用
• 掌握CSS样式表的管理方法
• 熟悉CSS样式表的高级应用
主要内容
1 CSS样式表概述
2 创建CSS样式表
3 定义CSS样式表
4 应用CSS样式表
5 管理CSS样式表
6 外部CSS样式表
CSS样式表概述
什么是 CSS 样式• CSS是英文Cascading Style Sheet的缩写形式，称为“层
叠样式表”或者“级联样式表”，它是一段特殊的HTML代码，用于控制网页中元素的格式和外观。
• CSS样式表可以直接写在文档头部来控制当前文档的格式和外观，也可以保存为一个单独的CSS样式表文件保存在磁盘上，CSS样式表文件是以 .css为后缀名的文本文档。
• CSS样式表中的层叠是指多个CSS样式表可以同时应用于同一个页面或网页中的同一元素，浏览器根据 CSS 标准中定义的层叠规则来决定哪一种样式优先，优先的样式将覆盖其他样式。
CSS样式表概述
• CSS 样式表是由一系列样式选择器和 CSS 属性组成，它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等，从而大大增强了网页的格式化能力。
• 除了功能强大这个优点外，使用 CSS 样式的另一优点是可以使用同一个样式表对整个站点的具有相同性质的网页进行格式修饰，当需要更改这些页面的样式设置时，只要在这个样式表中修改，而不用对每个页面逐个进行修改，从而大大简化了格式化的工作。
CSS样式表概述
CSS样式表的功能
1、精确控制网页中文本的字体、大小、颜色和风格等外观。
2、精确设置一段文本的字符间距、行高和缩进等格式，为文本添加各种效果的边框。
3、精确控制网页元素在页面中的位置。
4、方便地为网页中的任意元素设置背景颜色和背景图片。
5、在网页元素上使用滤镜，制作特殊视觉效果。
6、与脚本程序结合使用，制作动态网页效果。
CSS样式表概述
CSS 样式的类型
1.自定义 CSS 样式
2.重新定义 HTML 标签样式
3.CSS 选择器样式
CSS样式表概述
• 自定义 CSS 样式
又称为class类样式，它在网页中定义了一个CSS样式属性集，当页面中的对象引用该样式后，所定义的CSS属性应用到页面中。此类样式是应用最为广泛的一种样式类型。
• 重新定义 HTML 标签样式
该类样式是将 HTML 标签重新定义。例如，创建或更改H1标签（段落格式中的“标题 1”）的CSS样式时，网页中的所有使用H1标签设置了格式的文本都能立即被更新。
• CSS 选择器样式
该类样式可以定义网页中的超链接效果。例如，可以使超链接文字在各种状态下均无下划线，并且当鼠标悬停时文字颜色由蓝色变为红色等。
创建CSS样式表
CSS样式面板 在网站或网页中创建和应
用 CSS 样式时，需要使用“CSS 样式”面板。
选择“窗口”菜单中的“CSS 样式”命令或按【Shift + F11】键，可以打开“CSS 样式”面板。
附加样式表 新建CSS规则
创建CSS样式表
创建CSS样式1、使用“CSS 样式”命令
选择主菜单“文本”→“CSS样式”→“新建”命令，将弹出“新建 CSS规则”对话框。
2、使用“CSS 样式”面板
在 CSS 样式面板中，单击“新建CSS规则”按钮 ，打开“新建CSS规则”对话框。
创建CSS样式表
在“新建CSS规则”对话框中进行如下设置：
选择“高级”可以定义网页中的超链接效果。
创建CSS样式表
在“新建CSS规则”对话框中进行如下设置：
选择“标签”重新定义HTML 标签。
创建CSS样式表
在“新建CSS规则”对话框中进行如下设置：
选择“创建自定义样式（class）”样式类型，则在“名称”文本框中输入样式名称，必须是以.开头的英文字母。
创建CSS样式表
定义CSS规则
创建CSS样式表
定义CSS规则
创建CSS样式表
定义CSS规则
创建CSS样式表
定义CSS规则
创建CSS样式表
定义CSS规则
创建CSS样式表
定义CSS规则
创建CSS样式表
定义CSS规则
创建CSS样式表
定义CSS规则
应用CSS样式表
应用CSS样式1、在“属性”面板中的“样式”下拉列表框中选择CSS样式。
2、在CSS面板中的CSS样式规则上单击鼠标右键，在弹出的快捷菜单中选择“套用”命令。
3、在选中的文本上单击鼠标右键，在弹出的快捷菜单中选择“CSS样式” 命令，然后选择要套用的CSS样式。
4、选择主菜单“文本”→“CSS样式”命令，然后选择要套用的CSS样式。
5、对于“重新定义 HTML 标签”样式与“使用CSS选择器”样式，网页自动应用该样式而无须用户指定。
管理样式表
在CSS面板中可以方便的管理已经创建的CSS样式表，包括编辑样式表、复制样式表和删除样式表等操作。
管理样式表
1．编辑样式表
在CSS面板中选中要编辑的CSS样式规则，单击“编辑样式”按钮，打开该CSS样式的CSS规则定义对话框，可在对话框中对CSS规则重新定义。
2．复制样式表
在CSS面板中选中要复制的CSS样式规则，单击鼠标右键，在弹出的快捷菜单中选择“复制”命令，弹出“重制CSS规则”对话框，对话框中可以更改CSS样式规则的选择器类型、名称和定义的方式等。
管理样式表
3．删除样式表• 选中要删除的CSS样式表，单击CSS面板上的“取消CSS样
式表的链接”按钮，可取消CSS样式表与当前文档的链接，即取消在当前文档中应用该CSS样式表中定义的样式，但是CSS样式表本身不会被删除。
• 选中要删除的CSS样式规则，单击CSS面板上的“删除CSS规则”按钮，即删除了CSS样式规则，相应的HTML代码也被删除。
• 选中要删除的CSS样式表或者CSS样式规则，单击鼠标右键，在弹出的快捷菜单中选择“删除”命令，即可取消CSS样式表链接或者删除CSS样式规则。
外部样式表
外部CSS样式表
把多个CSS样式规则保存在一个单独的CSS样式表文件中，在使用时把这个CSS样式表文件链接到网页文档，即可在网页文档中使用该CSS样式表中保存的CSS样式规则。
这样做的好处是既方便易用，又不会在网页文档中产生大量的用于定义元素外观样式的HTML代码，而是把这些代码统一保存在CSS样式表文件中，还可以把一个CSS样式表文件链接到多个网页文档中使用。
外部样式表
链接外部样式表 打开要应用CSS样式的网页文档，打开CSS面板，单击CSS
面板上的“附加样式表”按钮，弹出“链接外部样式表”对话框。
外部样式表
样式冲突时的处理 在网页中应用 CSS 样式可能会发生同一对象（例如文本、图像、表
格等）应用多个 CSS 样式的情况，这些样式很可能发生冲突并产生意外的结果。浏览器将根据以下规则应用 CSS 样式属性：
• 如果多个样式同时应用于一个对象，浏览器将这些样式一起显示出来，除非样式格式发生冲突。
• 如果应用于同一对象上的多个样式发生冲突，浏览器将显示离该对象最近的样式属性（在 HTML 源代码中，哪个样式距所修饰的对象最近，即应用该样式）。
• 如果有直接冲突，则 class 类样式中的属性取代 HTML 标签样式中的属性。
