CSS的建立流程实验资料.docVIP

实验1 内部CSS的建立流程 一、建立标签样式 1、打开index_ori.htm网页，可以看到，页面中以一个层的形式插入了一个Flash动画，这个层layer2了后面的排版，所以我们选择“窗口／层”命令，打开层面板，然后单击面板中1ayer2左侧的眼睛图标，使眼睛关闭。这样，就可以遮挡层的外观，便于我们后续建立CSS样式了选择“窗口／CSS样式”命令，切换到CSS样式面板，单击“新建CSS样式”接下来，会弹出一个“新建CSS样式”对话框这一步是要定义文档中默认文本的样式。由于文本都是位于单元格中的，因要定义文本样式，只须定义单元格的标签td的样式即可。首先在“选择器类型”中选“标签”单选按钮，在上面的标签下拉菜单处选择标签为td，在“定义在”中选中“仅该文档”单选按钮，这样CSS样式就被定义在该文档中设置完毕后，单击“确定”按钮关闭对话框。这时会打开样式表编辑器，进式表的定义在左侧的分类中选择“类型”，便可以在右侧看到与字体相关的属性设置了。“字体”下拉列表中选择一个字体这里我们希望选择宋体，但在字列表中没有自己需要的字体，可选择“编辑字体列表”。这时会弹出对在右下的框内可以选择系统已经安装的字体，单击框左侧的固按钮，可以将选定的字体添加到列表内，这里在字体列表中添加宋体添加完所需的字体后，单击“确定”按钮，确认操作，关闭对话框，继续编辑文本样式在“大小”下拉列表中选择字体大小，或在文本框中直接输入一个数值。在这里定义字体大小为9，单位为“点数(pt)”在“颜色”文本框中定义文本颜色，单击箭头可弹出颜色面板#种颜色，或直接在右侧的文本框内输入一个十六进制的颜色代码，这里设置其为#000000其他属性使用默认设置，设置完毕后，单击“确定”按钮关闭对话框。这时，在CSS样式面板中会出现建立好的样式保存文件，并按下F12键预览页面，可看到文本设置的效果如果查看页面源代码的话，头部区域出现的代码为： STYLE type=text/css td{ f ont-f amily：¨宋本”j font-size： 9pt; color： #; ) /STYLE 二、建立类样式 下面我们希望设置Happy New Year!”字样的颜色，页面中的其他文字颜色已经设置C黑色，这里我们希望将其设置成其他颜色。回到样式面板，单击“新建CSS样式”按钮，弹出新建CSS样式选中“类”单选按钮，在“名称”的下拉列表框中输入这个自定义样式的命名，命名必须以符号“ ”开头，这里命名为red。在“定义在”选项中，选中“仅对该文档”单选按钮，这样css样式就被定义在该文档中单击“确定”按钮关闭对话框。这时会打开样式表编辑器，进入样式表的定在左侧的分类中选择“类型”，便可以在右侧看到与字体相关的属性设置了。“字体”下拉列表中选择种字体，这里我们选择Courier New, Courier, mono，在“大”下拉菜单选择字体大小，在这里定义字体大小为12，单位为点数(pt)，在“颜色”定义文本颜色，这里设置其为#CC其他属性使用默认设置，设置后，单击“确定”按钮关闭对话框。这时， css样式中会出现建立好的样式样式设定完成以后，对于类样式，需要进行样式的应用。将英文文字“New Year!”字样选中，然后单面板“样式”中的red。用到了文字上保存文件，并按下F12键预览页面，可看到文本设置的效果 这时查看源代码的头部区域，可以看到，代码中增加了如下内容：， STYLE type=text/css .red{ font-family: Courier New¨, Courier, mono; font-size： 12pt; color： #cc0000; } /STYLE 三、建立高级样式 1、回到CSS样式面板，单击“新建CSS样式”按钮，弹出 “新建CSS样式”对话框，选择“高级”，首先定义链接的默认样式，因此在选择器下拉列表中选择a:link，在“”选项中，选中“仅对该文档”单选按钮，这CSS样式就被定义在该文档中单击“确定”按钮关闭对话框，这时会打开样式表编辑器，进入样式表的(pt)”，在“颜色”处定义文本颜色，这里设置其为0066CC，我们希望链接下面没有下划线，因此在“修饰”处选择“无”其他属性使用默认，设置完毕后，单击确定按钮关闭对话框保存文件，并按下F12键预览页面，可看到文本设置的效果接下来，重复刚才的步骤，回到css样式面板，单击新建CSS样式按钮，出“新建CSS样式”对话框，型为高级，这里要定义链接的访问过后，因此在拉列表中选择a：Ⅵsited，在“在”选项中，选中仅对该文档单按钮，这样css样式就被定义在该文档中单击