嵌入式样式表的建立图

《嵌入式样式表的建立图》由会员分享，可在线阅读，更多相关《嵌入式样式表的建立图（5页珍藏版）》请在金锄头文库上搜索。

1、嵌入式样式表的建立(图)嵌入式样式表是内嵌于网页内的一段HTML语言代码，它统一定义了当前网页的样式。可以在网页中创立一个嵌入式样式表使得网页具有统一的风格。嵌入式样式表与外接样式表的不同之处在于，嵌入式样式表只能作用于当前的网页，而不能覆盖链接到当前站点的其他网页中。其实，所谓的嵌入式样式表只不过是网页中各种元素的格式的一个集合，通过创立一个嵌入式样式表可以使网页具有统一的风格。 在FrontPage2000中创立一个嵌入式样式表的操作十分简单，在“格式菜单中选择“样式项，然后在弹出的“样式对话框中就可以创立嵌入式样式表。单击对话框中的“新建按钮，FrontPage2000会弹出一个嵌入式样

2、式表的容器。在该对话框中首先应该输入新建的样式表的名称，而这个名称可以任意定义。接下来单击“格式按钮为新建的样式表定义样式，在这里可定义的样式包括：字体、段落、边框、编号方式以及定位。 1在“文件菜单中选择“新建项，然后在右面弹出的子菜单中选择“站点项，在弹出的“新建对话框中把站点名称改为“样式表，单击“确定按钮。 2在文件夹列表视图中双击文件“defaulthtm把该文件翻开，然后把鼠标放到网页视图中，在“格式某单中选择“样式项，这时候FrontPage2000就会弹出标题为“样式的对话框，如图1所示。 图1“样式窗口 3在弹出的“样式对话框中单击其中的“新建按钮，从而为当前网页新建一个嵌入

3、式样式表，这时候FrontPage20002000就会弹出一个标题为“新样式的对话框，如图2所示。 图2“新样式窗口 4在弹出的“新样式对话框中有一栏为“名称，在“名称栏下面的文本框中输入所新建的嵌入式样式表的名称，在这里输人文本“mystyle作为新建的样式表的名称。如图3所示。 图3“新样式中名称的输入 5单击“新样式对话框中的“格式按钮，在按钮下面会弹出一个子菜单，如图4所示。在该子菜单中列出了新建的样式表中可以设置项。选择要设置的项，然后对其进行修改。 图4格式字菜单 6把所有样式都修改好之后，单击“新样式对话框中的“确定按钮返回“样式对话框，这时候在“样式对话框中左面的列表中列出了刚

4、刚新建的样式表的名称“mystyle。如图5所示。 图5新样式的建立目前，比拟流行的网页制作工具有Frontpage 2000和Dreamweaver 4.0，通过这2款所见即所得的网页编辑器，用户只要掌握简单的操作方法，不用编写HTML代码即可制作出整洁美观的网页。要使制作的网页具有良好的稳定性，使浏览者在采用不同分辨率和改变浏览器字体大小时都能看到您所设定格式的网页，从而始终保持网页版面的整洁美观，就需要使用样式表来锁定网页文字。 Frontpage 2000和Dreamweaver 4.0都可以通过创立样式表在网页中参加特定的HTML标记，从而使网页中文字始终显示为固定格式。样式表分为外

5、部样式表和嵌入式样式表2种。外部样式表是保存在一个扩展名为.css的CSS文件中，它是对HTML语言的扩展，可应用于所有网页，但当网页被另存为HTML文件或在指定位置找不到CSS文件时，网页文字就不能被其控制; 内嵌样式表是嵌入在网页文件中的一段HTML代码，它只能用于当前编辑的单个网页，但因为不需要CSS文件的控制，网页文字始终被嵌入的代码所控制。在Frontpage 2000中，您既可以使用外部样式表、也可以使用嵌入式样式表; 而在Dreamweaver 4.0中，只能使用外部样式表。下面就是如何在Dreamweaver 4.0和Frontpage 2000中创立、应用样式表的具体步骤。

6、在Dreamweaver 4.0中使用样式表 一、创立样式表 1选择Window*CSS Styles，翻开CSS Styles窗口(如图1所示)。 2单击CSS Styles窗口右下角的新建按钮，翻开New Style对话框。在Selector栏输入样式选择器名称，例如设定9磅字体用.Font9、设定16磅字用.Font16。同时选中Make Custom Style (class)或Use CSS Selector单项选择项(如图2所示)。 3单击OK按钮，翻开Save Style Sheet File As对话框，输入名称和路径以保存该样式表。注意: 样式表的保存位置可以是相对路径，也可

7、以是绝对路径，但最好和网页文件保存在同一文件夹内，并和网页文件一同上传。 4单击确定按钮，系统弹出Style Definition对话框。在Category栏中选择Type选项，在Type栏中的Size栏中选择文字规格，如9或16。然后在其后的单位栏选择Points(磅)。在Line栏输入行距规格125150，单位选择%(如图3所示)。 5单击OK按钮，样式选择器名称就出现在CSS Styles窗口中了。同时，样式选择器名称还以操作命令的方式自动出现在Text*CSS Styles子菜单中。 您只需重复第25步的操作，就可以在一个样式表中设置多种文字样式。 二、链接和修改样式表 如果要使用过去

8、编辑好的样式表文件，用户可以在CSS Styles窗口中单击链接按钮，找到过去保存的CSS文件，即可将它链接到当前编辑的网页文件中进行应用。 用户在编辑或链接CSS文件后，单击CSS Styles窗口的编辑按钮可以对此文件或文件中的某一样式进行修改。 在CSS Styles窗口中，鼠标右键单击一个样式选择器，选择其快捷菜单中Edit选项，可以退回到Style Definition对话框，对已设定的参数进行修改。 三、应用样式表 在网页编辑窗口点出光标，然后单击CSS Styles对话框中的一个样式选择器，以后输入的文字就被设定为该样式规定的文字规格。在已经输入文字的网页中，在任意位置点出光标并

9、应用一个样式，该样式就对全部文字起作用; 如果是在表格中使用样式，该样式仅对当前单元格中的文字起作用。在一个或相邻段落中连续选中一些文字后应用一个样式，该样式只对选中的文字起作用。另外，应用样式表也可以在点出光标或选中文字后，执行Text*CSS Styles子菜单中相应的样式选择器名称完成。 在Frontpage 2000中使用样式表 一、创立外部样式表 1选择文件*新建*网页，翻开新建对话框。 2单击样式表选项卡，选中普通样式表模板图标，然后单击确定按钮，进入new_page_1.css编辑窗口。 3选择格式*样式，翻开样式对话框，其中样式栏显示的是所有默认HTML标记的名称。 4单击新建

10、按钮，翻开新样式对话框。在名称(选择器)栏中输入样式选择器名称，如font9，然后单击格式按钮，翻开样式工程选择菜单(如图4所示)。 5选择样式工程选择菜单的字体选项，翻开字体对话框，在大小栏中输入文字规格，例如9pt(9磅)，然后单击确定按钮返回新样式对话框。 6选择样式工程选择菜单的段落选项，翻开段落对话框，在行距大小栏输入行距规格，如120%，然后单击确定按钮返回新样式对话框。 7单击确定按钮返回样式对话框，设定的样式选择器.font9就显示在样式栏中了。单击确定按钮即返回编辑窗口。 8重复第47步，直至设定好编辑网页所需的各种不同文字、行距规格。 9保存样式表，将文件保存在所编辑网页的

11、保存位置即可。 二、创立嵌入式样式表 执行创立外部样式表的第37步，即可在当前网页中参加内嵌样式表。进入编辑窗口的HTML视图方式，我们就会看到，在网页的HTML代码的 段前出现了这样几段代码: 其中的.font9是样式选择器名称，font-size:9pt是文字规格，line-height:120%是行距规格。在此您还可以根据实际需要，修改创立新的样式选择器或直接编辑其中的数据。 三、应用样式表 链接样式表开始编辑网页时，如果要使用外部样式表，可以在编辑窗口的普通视图方式下选择格式*样式表链接，翻开链接样式表对话框，单击添加按钮，在选择超链接对话框里选择要链接的样式表，如果要将该样式表链接到

12、同一站点的全部网页，还应选中所有网页选项。单击确定按钮返回编辑窗口，即开始应用样式表。如果使用嵌入式样式表，创立样式表后可直接应用样式表。 应用样式表创立并链接好样式表后，Frontpage 2000就会把样式表中自定义的样式参加格式工具栏左端样式按钮的下拉列表中。在一个段落的任意位置点出光标，单击样式按钮，从下拉列表中选择一个样式选择器，即可将该样式应用于指定段落。需要说明的是: 网页文件段落开头的HTML代码为，段落结尾代码为; 编辑过程中按一次回车键Enter产生一个，标志着上一段的结束和下一段的开始。而按ShiftEnter按钮产生的HTML代码为，它只是表示在段落中插入了一个换行符，

13、是同一段落另起一行后的延续。 考前须知 1在Frontpage 2000中，可以使用外部样式表和嵌入式的样式表; 而在Dreamweaver 4.0中，那么只能使用外部样式表。 2Frontpage 2000应用一次样式表，只对光标所在的段落(即代码至之间而非至之间)的文字起作用。 3Frontpage 2000不能对选定的文字单独设置样式，但可以在HTML视图方式下以手工编写HTML代码的方法为指定文字单独应用样式。用户在指定文字开始处参加代码，在指定文字结尾处参加代码，即可使该样式应用于指定的文字，即使后来对该段落改设其他样式，为指定文字手动设置的样式也不会改变。 另外，HTML语言规定的

14、字号只有7种(即8pt36pt)，而在样式表中，那么可以不受此限制，您可以随心所欲地设定文字规格，直接输入所需的值即可，并且您还可以用像素、cm、mm等非标准单位来限定文字大小。 在设置文字样式的步骤中，您还可以同时设定字体、颜色、文字修饰(如斜体、粗体、下划线)等属性，不过，这些属性最好不要在样式表中设定，因为在样式表中设定过的属性，将无法用其他操作命令改变; 如果不在样式表中进行这些属性的设定，那么可以随时使用设置文字属性的相关命令来设定除规格之外的其他文字属性，从而使网页设计更加灵活。定义HTML标记的样式在Frontpage2000下，选择菜单“格式/样式，会弹出一个定义样式的窗口，在CSS列表下拉菜单位于左下中，选“所有的HTML标记， 这时在左边的列中会出现大局部常用的HTML标记，选中一个，然后点右下的“修改，