二十三、创建CSS样式表
1、在网页上输入一些文字。
2、打开“CSS样式”面板,也可以用“窗口/CSS样式”打开。
3、面板下方有四个按钮,分别是附加样式、新建样式、编辑样式、删除样式。
4、点击“新建样式”,打开对话框。输入名称,注意名称前有一个点号。如取名为.zi(中文名不行)。类型:创建自定义样式,定义在:仅对该文档。
5、此时再打开一个对话框,在左边的分类里选择“类型”,然后在右面设置字体为宋体,大小为14像素,颜色任意。然后确定。
6、选中页面上的文字,然后点击窗口里的样式.zi。此时这段文字就应用了CSS样式。
7、如要对刚才定义的CSS样式进行修改,可以点中它,然后点下面的编辑样式按钮。
二十四、创建动态链接样式表
1、点击“新建CSS样式”对话框,在“定义在”一栏选择“仅对该文档”,在“类型”一栏里选择“使用CSS选择器”。
2、当样式表类型选择“使用CSS选择器”时,下拉菜单的名字变成了“选择器”,表示输入内容为CSS选择符,单击下拉按钮,可以看到动态链接的4种状态。
a:link——超级链接的正常状态; a:visited——访问过的超级链接状态。
a:hover——光标移至超级链接上时的状态; a:active——选中超级链接的状态。
3、 接下来对这几种状态分别设定,首先从下拉菜单中选择a:link,点击“确定”按钮后弹出样式表设置窗口,设定该样式无下划线,颜色为#FF6600(橙色)。
4、 用同样方法设定a:visited,设定其为无下划线,颜色为#FFFF00(黄色)。
5、 接下来设定a:hover,设定其为有划线,颜色为#FF6600(橙色)。
6、 a:active不用设置,它会自动依照a:hover而定。
7、 在网页上输入一句话,在属性面板中设定它的链接为“#”。即可。
****注意:必须按照这样a:link、 a:visited 、a:hover 、a:active的顺序来设置,否则不会出现预期的效果。
如果我们需要一个页面上有两个或更多的链接效果,可以用以下方法:
1、 点击新建样式按钮,样式类型选“使用CSS选择器”,在“选择器”一栏里,直接输入a.link2:link,接着设置a.link2:link为红色无下划线。
2、 继续定义下面两个样式。名称都直接输入,分别设定它们为a.link2:visited,紫色无下划线。 a.link2:hover,蓝色有下划线。
3、 此时在“CSS样式”选项下多了一个名称为link2的自定义样式。
4、 在页面中输入一段话,为它添加一个#链接,选中这个链接,然后点击样式表窗口中的样式link2,将此样式应用在该链接上。
5、 同样方法可以处理同一页面上的不同链接格式。
****为保持一种风格,同一页面上不宜建立过多的链接样式。
二十五、外部样式表
***在不同的页面中应用相同的