第5章 使用CSS样式

第5章使用CSS样式第1页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑样式的建立与编辑样式的建立与编辑 CSSCSS样式的应用样式的应用样式的应用样式的应用本章内容本章内容本章内容本章内容第2页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑5.1.1 5.1.1 案例制作：案例制作：案例制作：案例制作：书法背后的人生书法背后的人生书法背后的人生书法背后的人生 通过本案例的操作，通过本案例的操作，通过本案例的操作，通过本案例的操作，你将学会创立你将学会创立你将学会创立你将学会创立CSSCSS样式样式样式样式的一般方法、如何创立的一般方法、如何创立的一般方法、如何创立的一般方法、如何创立自定义自定义自定义自定义CSSCSS样式、如何样式、如何样式、如何样式、如何创立重定义创立重定义创立重定义创立重定义HTMLHTML标签标签标签标签样式、如何创立样式、如何创立样式、如何创立样式、如何创立CSSCSS选选选选择器、如何编辑择器、如何编辑择器、如何编辑择器、如何编辑CSSCSS样样样样式。式。式。式。第3页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑5 5.1.2.1.2 新知解析新知解析新知解析新知解析1.CSS样式的作用样式的作用CSS样式在网页设计中得到了广泛的应用，大大提高了网页的制作效率，其主要作用如下：样式在网页设计中得到了广泛的应用，大大提高了网页的制作效率，其主要作用如下：实现了网页中内容与形式的别离，便于网站的管理与维护。实现了网页中内容与形式的别离，便于网站的管理与维护。创立一个样式可以在多个网页中屡次使用，提高了工作效率。创立一个样式可以在多个网页中屡次使用，提高了工作效率。使网站中各网页风格统一。使网站中各网页风格统一。第4页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑2.CSS样式的组织形式样式的组织形式中中CSS样式有三种组织方式分别为样式有三种组织方式分别为vv 内嵌内嵌CSS样式样式v 文档内部文档内部CSS样式样式v 外部文件外部文件CSS样式样式第5页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑3.CSS样式的类型样式的类型在中在中CSS样式根据作用的不同可以分为以下几种类型：样式根据作用的不同可以分为以下几种类型：自定义自定义CSS样式样式自定义自定义CSS样也称为类样式，由用户命名，可以用于任何标签。样也称为类样式，由用户命名，可以用于任何标签。重定义重定义HTML标签标签重定义重定义HTML标签是将原有的标签是将原有的HTML标签重新定义，给原有的标签赋予新的样式。标签重新定义，给原有的标签赋予新的样式。CSS选择器选择器CSS选择器允许用户创立用于指定标签组合的样式，常用于设置超链接，也可创立选择器允许用户创立用于指定标签组合的样式，常用于设置超链接，也可创立ID，但，但ID在网页中只能在网页中只能使用一次，由于具有惟一的特性，常用于脚本，由符号使用一次，由于具有惟一的特性，常用于脚本，由符号“表示。表示。第6页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑4.CSS样式面板样式面板通过通过“CSS样式面板，可以方便的创立、删除、编样式面板，可以方便的创立、删除、编辑辑CSS样式等，也可以附加已有的样式等，也可以附加已有的CSS样式。样式。翻开翻开“CSS样式面板的方法。样式面板的方法。按按ShiftF11键。键。选择主菜单选择主菜单“窗口窗口“CSS样式命令。样式命令。“CSS样式面板的构造共分为两个局部，上半局部显示样式面板的构造共分为两个局部，上半局部显示CSS样式，下半局部那么显示所选定的样式，下半局部那么显示所选定的CSS样式的属性。样式的属性。CSS样式根据所显示内容的不同分两种显示方式，假设单样式根据所显示内容的不同分两种显示方式，假设单击击“全部按钮，那么显示该所有的全部按钮，那么显示该所有的CSS样式；假设选择样式；假设选择“正在按钮，那么显示所选中内容的正在按钮，那么显示所选中内容的CSS样式，在样式，在CSS样样式属性中可以方便地修改某一属性。式属性中可以方便地修改某一属性。第7页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑5.5.创立创立CSSCSS样式方法样式方法创立创立CSSCSS样式的方法如下：样式的方法如下：1 1翻开新建翻开新建CSSCSS规那么对话框规那么对话框,新建新建CSSCSS样式样式2 2定义要创立的定义要创立的CSSCSS样式类型样式类型自定义类型、重定义自定义类型、重定义HTMLHTML标签样式、创立标签样式、创立CSSCSS选择器样式选择器样式3 3选择定义选择定义CSSCSS样式的位置样式的位置4 4设置和应用设置和应用CSSCSS样式的属性样式的属性第8页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑在此创立一个用于修饰文本的自定义样式，字体为宋体，大小为在此创立一个用于修饰文本的自定义样式，字体为宋体，大小为9pt9pt，颜色代码为，颜色代码为#666666#666666，行高，行高140%140%，来介绍自定义样式的操作方法。操作步骤如下：，来介绍自定义样式的操作方法。操作步骤如下：1 1翻开翻开“CSS“CSS样式面板。样式面板。2 2单击单击“CSS“CSS样式面板右下角的新建样式面板右下角的新建CSSCSS规那么按钮，翻开新建规那么按钮，翻开新建CSSCSS规那么对话框。规那么对话框。3 3“选择器类型项选择选择器类型项选择“类，类，“名称文本框中输入名称文本框中输入.content.content，“定义在选择定义在选择“仅对该文档仅对该文档。4 4单击单击“确定按钮，翻开确定按钮，翻开“CSS“CSS规那么定义对话框，在规那么定义对话框，在“分类列表中选择分类列表中选择“类型。类型。设置字体为宋体，大小为设置字体为宋体，大小为9pt9pt，行高，行高140%140%，颜色为，颜色为#666666#666666，设置自定义样式，设置自定义样式contentcontent属性的对话框。属性的对话框。如下图。如下图。5 5设置完成后单击设置完成后单击“确定按钮，在确定按钮，在“属性面板和属性面板和“CSS“CSS样式面板中会显示新建样式面板中会显示新建的样式。的样式。第9页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑第10页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑7.创立重定义创立重定义HTML标签样式标签样式重定义重定义HTML标签样式用于重新定义标签样式用于重新定义HTML中的某一标签，被重定义过的中的某一标签，被重定义过的HTML标签具有新的格式。标签具有新的格式。在此将表示单元格的标签在此将表示单元格的标签td重定义。操作步骤如下：重定义。操作步骤如下：1翻开翻开“CSS样式面板。单击样式面板。单击“CSS样式面板右下角的新建样式面板右下角的新建CSS规那么按钮，翻开规那么按钮，翻开“新建新建CSS规那规那么对话框。么对话框。2“选择器类型选择选择器类型选择“标签，标签下拉列表框中选择标签，标签下拉列表框中选择td，“定义在选择定义在选择“新建样式新建样式表文件。表文件。3单击单击“确定按钮，翻开确定按钮，翻开“保存样式表文件对话框，输入文件名保存样式表文件对话框，输入文件名td_css，并选择保存文件，并选择保存文件的位置。的位置。4单击单击“确定按钮，翻开确定按钮，翻开“CSS规那么定义对话框，在规那么定义对话框，在“分类列表中选择分类列表中选择“类型，右侧字体设类型，右侧字体设置为宋体，大小为置为宋体，大小为12px，行高，行高150%，颜色为，颜色为#333333。第11页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑CSSCSS选择器很重要的一个应用是对超链接进展设置，超链接分为四种状态。选择器很重要的一个应用是对超链接进展设置，超链接分为四种状态。a:linka:link：初始状态的超链接。：初始状态的超链接。a:visiteda:visited：超链接被访问过后的状态：超链接被访问过后的状态a:hovera:hover：光标移到超链接上的状态。：光标移到超链接上的状态。a:activea:active：超链接被激活时的状态，即在超链接上按下鼠标时的状态：超链接被激活时的状态，即在超链接上按下鼠标时的状态第12页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑在此以对超链接的设置为例，分别四种高级样式进展设置，操作步骤如下。在此以对超链接的设置为例，分别四种高级样式进展设置，操作步骤如下。1 1设置设置a:linka:link1 1翻开翻开“CSS“CSS样式面板，单击面板中新建样式面板，单击面板中新建CSSCSS规那么按钮，翻开新建规那么按钮，翻开新建CSSCSS规那么对话框。规那么对话框。2 2“选择器类型项选择选择器类型项选择“高级，高级，“选择器下拉列表框中选择选择器下拉列表框中选择a:linka:link，“定义在定义在选择选择“仅对该文档。仅对该文档。3 3单击单击“确定按钮，翻开确定按钮，翻开“CSS“CSS规那么定义对话框，在规那么定义对话框，在“分类列表中选择分类列表中选择“类型，类型，右侧设置字体为宋体，大小为右侧设置字体为宋体，大小为9pt9pt，颜色为，颜色为#993300#993300，修饰设为无。单击，修饰设为无。单击“确定按钮。确定按钮。2 2设置设置a:visiteda:visited设置字体为宋体，大小为设置字体为宋体，大小为9pt9pt，颜色为，颜色为#993300#993300，修饰设为无，单击，修饰设为无，单击“确定按钮。确定按钮。3 3设置设置a:hovera:hover设置字体为宋体，大小为设置字体为宋体，大小为9pt9pt，颜色为，颜色为#FF0000#FF0000，修饰设为下划线，单击，修饰设为下划线，单击“确定按钮。确定按钮。4 4设置设置a:activea:active设置字体为宋体，大小为设置字体为宋体，大小为9pt9pt，颜色为，颜色为#FF0000#FF0000，修饰设为无，修饰设为无，第13页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑9.CSS9.CSS样式的编辑样式的编辑假设对已创立的假设对已创立的CSSCSS样式不满意，可以进展编辑，操作方法如下：样式不满意，可以进展编辑，操作方法如下：选择某一样式，单击选择某一样式，单击“CSS“CSS样式面板底部的编辑样式表按钮。样式面板底部的编辑样式表按钮。直接双击某一样式，翻开直接双击某一样式，翻开“CSS“CSS规那么定义对话框，进展编辑。规那么定义对话框，进展编辑。选择某一样式，在选择某一样式，在“CSS“CSS样式面板显示的样式属性中进展编辑，样式面板显示的样式属性中进展编辑，单击单击“添加属性按钮可以添加其他属性。添加属性按钮可以添加其他属性。第14页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑10.CSS样式表的应用样式表的应用1应用自定义应用自定义CSS样式样式 如果要应用自定义如果要应用自定义CSS样式的网页元素是文本，那么可以选中该文本，在样式的网页元素是文本，那么可以选中该文本，在“属性面板属性面板 中中“样式选择要应用样式。样式选择要应用样式。如果要应用自定义如果要应用自定义CSS样式的是其他网页元素，如表单、图像等，那么可以选中该元样式的是其他网页元素，如表单、图像等，那么可以选中该元 素，在素，在“属性面板中属性面板中“类选择要应用的样式即可。类选择要应用的样式即可。为文本应用自定义样式为文本应用自定义样式第15页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑2 2应用重定义应用重定义HTMLHTML标签标签由于重定义由于重定义HTMLHTML标签样式是对原有标签样式是对原有HTMLHTML标签重新定义，故会自动应用。标签重新定义，故会自动应用。3 3应用应用CSSCSS选择器选择器CSSCSS选择器如果是对超链接的设置，那么会自动应用，如果应用选择器如果是对超链接的设置，那么会自动应用，如果应用“样样式名的样式，可选择要应用的样式，在式名的样式，可选择要应用的样式，在“属性面板中元素编号的下属性面板中元素编号的下拉列表框中选择样式即可，如果给层应用样式，在拉列表框中选择样式即可，如果给层应用样式，在“属性面板中属性面板中“层编层编号的下拉列表框中选择样式。号的下拉列表框中选择样式。第16页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑样式的删除样式的删除选择选择“CSS“CSS样式面板中某一样式，单击面板中样式面板中某一样式，单击面板中“删除删除CSSCSS规那么按钮，可以删除这一样式，规那么按钮，可以删除这一样式，删除样式因样式表存在的形式不同而细微的差异。删除样式因样式表存在的形式不同而细微的差异。1 1文档内部文档内部CSSCSS样式的删除样式的删除2 2外部文件外部文件CSSCSS样式的删除样式的删除第17页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑12.CSS12.CSS样式属性的设置样式属性的设置CSSCSS样式的属性有很多，以上所接触的属性只是一小局部，属性设置主要在样式的属性有很多，以上所接触的属性只是一小局部，属性设置主要在“CSS“CSS规那么规那么定义对话框中进展，按照类别将属性设置介绍如下：定义对话框中进展，按照类别将属性设置介绍如下：CSS CSS样式样式“类型属性类型属性 CSS CSS样式样式“背景属性背景属性 CSS CSS样式样式“区块属性区块属性 CSS CSS样式样式“方框属性方框属性 CSS CSS样式样式“边框属性边框属性 CSS CSS样式样式“列表属性列表属性 CSS CSS样式样式“定位属性定位属性 CSS CSS样式样式“扩展属性扩展属性第18页，共22页。CSSCSS样式的建立与编辑样式的建立与编辑实战演练：实战演练：实战演练：实战演练：“白洋淀旅游白洋淀旅游白洋淀旅游白洋淀旅游通过本案例的操作你将学会，如何创立自定义通过本案例的操作你将学会，如何创立自定义CSSCSS样式、重定义样式、重定义HTMLHTML标签样式、标签样式、CSSCSS选选择器、择器、CSSCSS样式的各项属性设置。样式的各项属性设置。第19页，共22页。CSSCSS样式的应用样式的应用5 5 5 5案例制作：关于词牌的几句话案例制作：关于词牌的几句话案例制作：关于词牌的几句话案例制作：关于词牌的几句话本实例是把网页已有网页本实例是把网页已有网页中仅应用于本网页的中仅应用于本网页的CSSCSS样式导样式导出，保存到一文件中，然后应出，保存到一文件中，然后应用到尚没有用到尚没有CSSCSS样式的网页中，样式的网页中，使网页更加美观。使网页更加美观。通过本案例的操作，你将学通过本案例的操作，你将学会如何将仅应用一个网页的会如何将仅应用一个网页的CSSCSS样式导出到外部样式导出到外部CSSCSS样式表文件，样式表文件，如何附加外部如何附加外部CSSCSS样式表文件。样式表文件。如何应用如何应用CSSCSS样式。最终效果如样式。最终效果如下图。下图。第20页，共22页。CSSCSS样式的应用样式的应用5 5 5 5案例制作：案例制作：案例制作：案例制作：新知解析新知解析新知解析新知解析1.附加外部附加外部CSS样式表文件样式表文件单击单击“CSS样式面板中的样式面板中的“附加样式表附加样式表“按钮，如下图链接外部样式表对话框附加外部样式按钮，如下图链接外部样式表对话框附加外部样式文件有两种方式：链接和导入。文件有两种方式：链接和导入。链接：可以认为是将样式表文件链接到网页，使用时从样式表文件中调用链接：可以认为是将样式表文件链接到网页，使用时从样式表文件中调用导入：可以简单地认为是将样式表文件嵌入到网页。导入：可以简单地认为是将样式表文件嵌入到网页。第21页，共22页。谢谢观赏！2020/11/522第22页，共22页。