专题6 CSS样式（课件）-《网页设计与制作》（电子工业出版社）高考备考讲练测(山东省)
2024-01-29
|
38页
|
558人阅读
|
6人下载
精品
内容正文：
专题六、CSS样式
网页设计与制作课程
专题复习讲练测
考纲要求
1、掌握创建和管理CSS样式的方法。
2、掌握定义CSS样式属性的方法。
知识点梳理
一
第一讲 CSS样式
知识点一 CSS基本概念
1、概念
CSS叫做层叠样式表或级联样式表，是一组格式设置规则，用于控制网页内容的外观。
2、目的
简化代码，加快下载显示速度，减少上传代码数量，减少重复劳动。
3、按其位置划分
（1） 内嵌(内联/行内)样式表：在HTML 标签实例内定义。
例：<p style="color:#F00; font-size:20px; ">字体颜色为红色，大小为20像素</p>
知识点梳理
一
第一讲 CSS样式
知识点一 CSS基本概念
3、按其位置划分
（2）内部样式表(嵌入式样式表)：嵌入 HTML 文档<head>头部的 style 标签中。
例：<head> <style type="text/css"> .td { font-size: 15px; color: #000000; } </style> </head>认设置
（3）外部样式表：存储在一个单独的外部 CSS (.css)文件中。
例：<head> <link rel="stylesheet" type="text/css" href="a1.css"> </head>
4、优先级
由高到低依次是:内联样式>内部样式表>外部样式表>浏览器默认设置
知识点梳理
一
第一讲 CSS样式
知识点二 CSS设计器面板
可以使用“CSS 设计器”面板查看、创建、编辑和删除 CSS 样式，并且可以将外部样式表附加到文档。
1、打开“CSS设计器”面板的方法。（3种）
选择“窗口→CSS样式”命令。
按【Shift+F11】组合键。
单击“属性” 面板上的“CSS设计器”按钮。
知识点梳理
一
第一讲 CSS样式
知识点二 CSS设计器面板
2、“CSS设计器”面板的组成。
“CSS设计器”面板包含源、@媒体、选择器、属性四个窗口，各窗口按钮的含义及作用如下：
（1）源窗口
①“添加CSS源”按钮 ：单击该按钮，弹出的列表中包括“创建新的CSS文件”、“附加现有的CSS文件”、“在页面中定义”三个选项，用于创建或附加CSS文件。
②“删除CSS源”按钮 ：单击该按钮可将选中的CSS文件删除。
知识点梳理
一
第一讲 CSS样式
知识点二 CSS设计器面板
（2）@媒体窗口
①“添加媒体查询”按钮 ：选中一个CSS源并单击该按钮，打开“定义媒体查询”对话框，可定义希望使用的媒体查询。
②“删除媒体查询”按钮 ：单击该按钮可将选中的CSS文件删除。
（3）选择器窗口
① “添加选择器”按钮 ：选择一个CSS源单击该按钮，输入样式名称。
②“删除媒体查询”按钮 ：单击该按钮可将选中的CSS样式删除。
知识点梳理
一
第一讲 CSS样式
知识点二 CSS设计器面板
（4）属性窗口
在“选择器”窗口中选中一个CSS样式，可在“属性”窗口中进行以下操作：
①“添加CSS属性”按钮 ：单击该按钮，定义属性。
②选择“布局”“文本”“边框”“背景”“更多”选项按钮，设置属性值。
③“删除CSS属性”按钮 ：单击该按钮可将选中的属性删除。
知识点梳理
一
第一讲 CSS样式
知识点三 创建CSS样式
1、CS6--创建CSS样式
(1)打开CSS样式面板，单击面板右下方的新建CSS规则按钮 ，打开新建CSS规则对话框。
(2)选择要创建的CSS样式的类型。
类(可用于任何HTML元素): 类名以”.”开头。 ID(仅用于一个HTML元素): 名称以”#”开头。
标签(重新定义HTML元素); 复合内容(基于选择的内容);
(3)选择定义样式的位置,单击“确定”安钮。
选择“仅对该文档”—在当前文档中嵌入样式
选择“新建样式表文件”—创建外部样式表 （打开“保存样式表文件为”对话框，选择保存位置，输入文件名，保存。）
(4)在“CSS规则定义”对话框中，从“分类”列表中选择样式选项，完成样式属性的设置后，单击“确定”按钮。
知识点梳理
一
第一讲 CSS样式
知识点三 创建CSS样式
2、CC--创
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。