电子工业出版社2022-2023学年山东省青州三中职教高考网络技术专业高二网页设计CSS-设计视图

CSS样式-设计视图 网页设计 No matter the flat land or the peak Infinite scenery is occupied After picking a hundred flowers into honey For whom hard for whom sweet 要求：懂理论，会实操 目录 CONTENTS 01 CSS面板 创建CSS面板 管理CSS样式 02 03 04 No matter the flat land or the peak Infinite scenery is occupied After picking a hundred flowers into honey For whom hard for whom sweet CSS面板 01 打开CSS面板的方法： 方法一：窗口→CSS样式 方法二：快捷键 shift+F11 方法三：“属性”面板上的“CSS设计器”按钮 CSS面板 “CSS设计器”面板包含源、@媒体、选择器、属性4个窗口 （1）源窗口 “添加CSS源”按钮：单击该按钮，弹出的列表中包括“创建新的CSS文件”、“附加现有的CSS文件”、“在页面中定义”3个选项，用来创建或附加CSS文件。 “删除CSS源”按钮：单击该按钮可以将选中的CSS文件删除。 （2）@媒体窗口 “添加媒体查询”按钮：选择一个CSS源并单击该按钮，打开“定义媒体查询”对话框，可以定义希望使用的媒体查询。 “删除媒体查询”按钮：单击该按钮可以将选中的CSS文件删除。 CSS面板 “CSS设计器”面板包含源、@媒体、选择器、属性4个窗口 （3）选择器窗口 “添加选择器”按钮：选择一个CSS源并单击该按钮，输入样式名称。 “删除选择器”按钮：单击该按钮将选中的CSS样式删除。 （4）属性 在选择器窗口中选择一个CSS样式，可以在属性窗口中进行以下操作： “添加CSS属性”按钮：单击该按钮，定义属性。选择“布局”、“文本”、“边框”、“背景”、“更多”选项按钮，设置属性值。 “删除CSS属性”按钮：单击该按钮可将选中的属性删除。 若勾选“显示集”选项，则仅显示已设置属性。 CSS面板 No matter the flat land or the peak Infinite scenery is occupied After picking a hundred flowers into honey For whom hard for whom sweet 创建CSS面板 02 创建CSS面板 第一步：打开“CSS设计器”面板，在源窗口中单击“添加CSS源”按钮 。 第二步： 如果选择的是“创建新的CSS文件”选项，则打开“创建新的CSS文件”对话框，单击右侧的“浏览”按钮，打开“将样式表文件另存为”对话框。选择样式表文件的保存位置，输入样式表文件名，单击“保存”按钮，在“创建新的CSS文件”对话框中选择“链接”或“导入”，单击“确定”按钮。 如果选择“附加现有的CSS文件”，则打开“使用现有的CSS文件”对话框，单击“浏览”按钮，弹出“选择样式表文件”对话框，选择现有的CSS文件，单击“确定”按钮。在“使用现有的CSS文件”对话框中选择“链接”或“导入”，单击“确定”按钮。 如果选择的是“在页面中定义”选项，则定义的样式、属性嵌入在文档中。 第三步：在选择器窗口单击“添加选择器”按钮 ，输入样式名称，在属性窗口定义属性。 No matter the flat land or the peak Infinite scenery is occupied After picking a hundred flowers into honey For whom hard for whom sweet 管理CSS样式 03 （1）编辑CSS样式 打开“CSS 设计器”面板。在“选择器”窗口选择要编辑的样式， 在“属性”窗格中编辑该规则的属性。 （2）应用CSS样式 CSS样式后被定义后，可以将这些CSS样式应用于网页中的文本、图像等对象。 （3）从选定内容删除类样式 选择要从中删除样式的对象或文本，在属性面板“目标规则”列表或“类”列表中选择“无”。 （4）删除CSS样式 在“CSS 设计器”面板中，选中要删除的样式，按Delete键即可将样式删除。 （5）重命名CSS样式 在“CSS 设计器”面板中，双击要重命名的CSS样式，输入新样式名称，然后按【Enter】键。 （6）链接外部CSS样式表 在“CSS 设计器”面板的源窗口中单击“添加CSS源”按钮 ，从列表选择“附加现有的CSS文件”。 管理CSS样式 THE END 网页设计 No matter the flat land or