嵌入式样式表的建立(图)

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

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

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

3、的“样式”对话框中单击其中的“新建”按钮，从而为当前网页新建一个嵌入式样式表，这时候 FrontPage2000 2000 就会弹出一个标题为“新样式”的对话框，如图 2 所示。 图 2 “新样式”窗口 （4）在弹出的“新样式”对话框中有一栏为“名称”，在“名称”栏下面的文本框中输入所新建的嵌入式样式表的名称，在这里输人文本“mystyle”作为新建的样式表的名称。如图 3 所示。 图 3 “新样式”中名称的输入 （5）单击“新样式”对话框中的“格式”按钮，在按钮下面会弹出一个子菜单，如图 4 所示。在该子菜单中列出了新建的样式表中可以设置项。选择要设置的项，然后对其进行修改。 图 4 格式字

4、菜单 （6）把所有样式都修改好之后，单击“新样式”对话框中的“确定”按钮返回“样式”对话框，这时候在“样式”对话框中左面的列表中列出了刚才新建的样式表的名称“mystyle”。如图 5 所示。 图 5 新样式的建立目前，比较流行的网页制作工具有 Frontpage 2000 和 Dreamweaver 4.0，通过这 2 款所见即所得的网页编辑器，用户只要掌握简单的操作方法，不用编写 HTML 代码即可制作出整洁美观的网页。要使制作的网页具有良好的稳定性 ，使浏览者在采用不同分辨率和改变浏览器字体大小时都能看到您所设定格式的网页，从而始终保持网页版面的整洁美观，就需要使用样式表来锁定 网页文字

5、。 Frontpage 2000 和 Dreamweaver 4.0 都可以通过创建样式表在网页中加入特定的 HTML 标记，从而使网页中文字始终显示为固定格式。样式表分为外部样式表和嵌入式样式表 2 种。外部样式表是保存在一个扩展名为.css的 CSS 文件中，它是对 HTML 语言的扩展，可应用于所有网页，但当网页被另存为 HTML 文件或在指定位置找不到 CSS 文件时，网页文字就不能被其控制; 内嵌样式表是嵌入在网页文件中的一段 HTML 代码，它只能用于当前编辑的单个网页，但因为不需要 CSS 文件的控制，网页文字始终被嵌入的代码所控制。在Frontpage 2000 中，您既可以使

6、用外部样式表、也可以使用嵌入式样式表 ; 而在Dreamweaver 4.0 中，只能使用外部样式表。下面就是如何在 Dreamweaver 4.0 和 Frontpage 2000 中创建、应用样式表的具体步骤。 在 Dreamweaver 4.0 中使用样式表 一、创建样式表 1选择Window*CSS Styles ，打开CSS Styles窗口(如图 1 所示)。 2单击CSS Styles窗口右下角的新建按钮，打开New Style对话框。在Selector栏输入样式选择器名称，例如设定 9 磅字体用.Font9、设定 16 磅字用.Font16 。同时选中Make Custom S

7、tyle (class)或Use CSS Selector单选项(如图 2 所示)。 3单击OK按钮，打开Save Style Sheet File As对话框，输入名称和路径以保存该样式表。注意: 样式表的保存位置可以是相对路径，也可以是绝对路径，但最好和网页文件保存在同一文件夹内，并和网页文件一同上传。 4单击确定按钮，系统弹出 Style Definition对话框。在Category栏中选择Type选项，在Type栏中的 Size栏中选择文字规格，如 9 或 16。然后在其后的单位栏选择 Points(磅)。在Line栏输入行距规格 125150，单位选择%(如图 3 所示)。 5单击

8、OK按钮，样式选择器名称就出现在CSS Styles窗口中了。同时，样式选择器名称还以操作命令的方式自动出现在Text*CSS Styles子菜单中。 您只需重复第 25 步的操作，就可以在一个样式表中设置多种文字样式。 二、链接和修改样式表 如果要使用过去编辑好的样式表文件，用户可以在CSS Styles窗口中单击链接按钮，找到过去保存的 CSS 文件，即可将它链接到当前编辑的网页文件中进行应用。 用户在编辑或链接 CSS 文件后，单击CSS Styles窗口的编辑按钮可以对此文件或文件中的某一样式进行修改。 在CSS Styles窗口中，鼠标右键单击一个样式选择器，选择其快捷菜单中Edit

9、选项，可以退回到Style Definition对话框，对已设定的参数进行修改。 三、应用样式表 在网页编辑窗口点出光标，然后单击CSS Styles对话框中的一个样式选择器，以后输入的文字就被设定为该样式规定的文字规格。在已经输入文字的网页中，在任意位置点出光标并应用一个样式，该样式就对全部文字起作用; 如果是在表格中使用样式，该样式仅对当前单元格中的文字起作用。在一个或相邻段落中连续选中一些文字后应用一个样式，该样式只对选中的文字起作用。另外，应用样式表也可以在点出光标或选中文字后，执行Text*CSS Styles子菜单中相应的样式选择器名称完成。 在 Frontpage 2000 中使

10、用样式表 一、创建外部样式表 1选择文件*新建*网页 ，打开新建对话框。 2单击样式表 选项卡，选中 普通样式表模板图标，然后单击 确定按钮，进入new_page_1.css编辑窗口。 3选择格式*样式 ，打开样式 对话框，其中样式栏显示的是所有默认 HTML 标记的名称。 4单击新建按钮，打开新样式对话框。在名称( 选择器)栏中输入样式选择器名称，如font9，然后单击格式 按钮，打开样式项目选择菜单 (如图 4 所示)。 5选择样式项目选择菜单的字体 选项，打开字体对话框，在 大小栏中输入文字规格，例如 9pt(9 磅) ，然后单击 确定 按钮返回新样式对话框。 6选择样式项目选择菜单的段

11、落 选项，打开段落对话框，在 行距大小栏输入行距规格，如120%，然后单击确定 按钮返回新样式对话框。 7单击确定按钮返回样式对话框，设定的样式选择器 .font9就显示在 样式栏中了。单击确定按钮即返回编辑窗口。 8重复第 47 步，直至设定好编辑网页所需的各种不同文字、行距规格。 9保存样式表，将文件保存在所编辑网页的保存位置即可。 二、创建嵌入式样式表 执行创建外部样式表的第 37 步，即可在当前网页中加入内嵌样式表。进入编辑窗口的HTML视图方式，我们就会看到，在网页的 HTML 代码的 段前出现了这样几段代码 : 其中的.font9是样式选择器名称，font-size:9pt 是文字

12、规格，line-height:120%是行距规格。在此您还可以根据实际需要，修改创建新的样式选择器或直接编辑其中的数据。 三、应用样式表 链接样式表开始编辑网页时，如果要使用外部样式表，可以在编辑窗口的普通 视图方式下选择格式 *样式表链接，打开链接样式表 对话框，单击添加 按钮，在选择超链接 对话框里选择要链接的样式表，如果要将该样式表链接到同一站点的全部网页，还应选中 所有网页选项。单击确定按钮返回编辑窗口，即开始应用样式表。如果使用嵌入式样式表，创建样式表后可直接应用样式表。 应用样式表创建并链接好样式表后，Frontpage 2000 就会把样式表中自定义的样式加入格式工具栏左端样式

13、按钮的下拉列表中。在一个段落的任意位置点出光标，单击样式按钮，从下拉列表中选择一个样式选择器，即可将该样式应用于指定段落。需要说明的是: 网页文件段落开头的 HTML 代码为，段落结尾代码为; 编辑过程中按一次回车键Enter产生一个，标志着上一段的结束和下一段的开始。而按ShiftEnter按钮产生的 HTML 代码为，它只是表示在段落中插入了一个换行符，是同一段落另起一行后的延续。 注意事项 1在 Frontpage 2000 中，可以使用外部样式表和嵌入式的样式表; 而在 Dreamweaver 4.0中，则只能使用外部样式表。 2Frontpage 2000 应用一次样式表，只对光标所

14、在的段落(即代码至之间而非至之间)的文字起作用。 3Frontpage 2000 不能对选定的文字单独设置样式，但可以在 HTML 视图方式下以手工编写 HTML 代码的方法为指定文字单独应用样式。用户在指定文字开始处加入代码，在指定文字结尾处加入代码，即可使该样式应用于指定的文字，即使后来对该段落改设其他样式，为指定文字手动设置的样式也不会改变。 另外，HTML 语言规定的字号只有 7 种( 即 8pt36pt)，而在样式表中，则可以不受此限制，您可以随心所欲地设定文字规格，直接输入所需的值即可，并且您还可以用像素、 cm、mm等非标准单位来限定文字大小。 在设置文字样式的步骤中，您还可以同

15、时设定字体、颜色、文字修饰(如斜体、粗体、下划线)等属性，不过，这些属性最好不要在样式表中设定，因为在样式表中设定过的属性，将无法用其他操作命令改变; 如果不在样式表中进行这些属性的设定，则可以随时使用设置文字属性的相关命令来设定除规格之外的其他文字属性，从而使网页设计更加灵活。定义 HTML 标记的样式 在 Frontpage2000 下，选择菜单“格式/样式”，会弹出一个定义样式的窗口，在 CSS 列表下拉菜单（位于左下）中，选“所有的 HTML 标记”， 这时在左边的列中会出现大部分常用的 HTML 标记，选中一个，然后点右下的“修改”， 会弹出一个“修改样式”窗口，在该窗口左下方有一个“格式”按钮，点击该按钮，会出现一个下拉菜单，一共有五个选项： 字体：顾名思义，这里就是定义字体的地方。 段落：跟“字体”差不多，点进去后根据提示定义就可以了。 边框：定义边框和背景等，根据提示定义就可以了。进入后有有“；边框”和“阴影”两个选项卡，在“边框”中定义边框，在“阴影”中定义前景和背景。 编号方式：共有三个选项卡，根据字面意义去定义就可以了。 定位：这就是 CSS 定位啦，但一般用在具体的网页元素当中。