发布时间:2013-09-19 11:33:46来源:阅读(1660)
标记后面加了class=”emphases”参数,如:
…… 当我们把样式加在选中的几个文字上时,文字本身没有HTML标记所包围,就会自动加上标记,例如: ……重点…… 注意:span标记本身没有任何意义,它专门为样式表指定选取范围,为样式表指定区域的还有div。 4. 创建重定义样式表 重定义样式表是对某个HTML标记重新定义格式。例如,我们想重新格式化页面的段落,每个段落前空两格,并设定段落文字的大小和行距。 单击新建样式,弹出新建对话框,在新建样式对话框里,样式表类型选择Redefine HTML Tag,我们仍然建立内部样式表,选This Document Only。当样式表类型选择Redefine HTML Tag时,上面下拉框的名字Name变成了Tag,表示输入的内容是HTML标记,点击下拉按钮,我们可以看到所有HTML标记都在Tag下拉框里,这里我们选段落标记P: OK后,进入样式定义对话框,在Type里,我们设定字体大小为12象素,行距为文字尺寸的150%,如下图: 在Block部分里,我们设定文本缩进,因为文字尺寸为12象素,所以两个字的空格就是24象素: 按OK后,这个重定义样式就完成了。这时页面里每个段落的文字大小都是12象素,行距是150%,但是在Dreamweaver编辑器里我们看不到缩进的效果,不要紧,只要将文件保存,然后用浏览器打开就可以看到效果了。此时CSS样式表的原代码是: 5. 创建动态链接样式表 下面我们来创建一组链接在不同状态下的样式。单击新建样式,弹出新建对话框,在新建样式对话框里,样式表类型选Use CSS Selector,我们仍然建立内部样式表,选This Document Only。当样式表类型选择Use CSS Selector时,上面下拉框的名字变成了Selector,表示输入内容为CSS选择符,单击下拉按钮,可以看到动态链接的4种状态: l a:active 选中超级链接状态 l a:hover 光标移上超级链接状态 l a:link 超级链接的正常状态,没有任何动作的时候 l a:visited 访问过的超级链接状态 接下来我们对这几种状态分别设定,首先,选择a:link,OK后弹出样式定义对话框,我们设定无下划线,颜色为橙色,如下图: 我们用同样的方法设定a:visited,设定无下划线,黄色,如下图: 接下来设定a:hover,有下划线和上划线,颜色为橙色,并在Background设定背景为黄色: 这里我们不对a:active进行设置,根据层叠规则a:active的样式会自动依照a:hover。这样所有动态链接的效果我们就设置好了,注意设置时的顺序。在浏览器中就我们就可以看到:此页面上未访问的链接无下划线,橙色;访问后的链接无下划线,黄色;鼠标指向链接时有上、下划线,橙色,并背景为黄色。样式表原代码为: 这样定义动态链接时,整个页面的链接效果都会改变,如果我想在一个页面中定义两组以上的链接效果,该怎么做呢?在第四章里我们不是说过的类和伪类的混用可以在同一个页面中做不同的链接效果吗。点击新建样式,在选择符下拉框里,我们输入a.link2:link(当然可以先选择a:link,然后更改),如下图: 这样我们就新建立了一个.link2类,我们为a.link2:link设定样式,红色,有下划线: 根据上面的方法我们继续定义a.link2:visited和a.link2:hover,我们定义a.link2:visited为红色有下划线,a.link2:hover为红色无下划线,背景为白色。在CSS Styles面板里多了一个名称为link2的自定义样式。然后将此样式应用在某个动态链接上。保存后,用浏览器打开,我们可以看到两个完全不同的链接样式。全部CSS代码如下: 6. 其他样式表的定义 我们还可以在Use CSS Selector里输入其他CSS选择符: ID选择符,以“#”号开头定义一个样式,例如:“#id-style”,然后建立一个ID为id-style的ID样式,ID样式表必须手动在HTML标记后加id=”id-style”属性。 含HTML标记的类选择符,例如:“p.red”,表示定义段落为red类的样式,此样式只对有class=”red”属性的段落有效果。 包含选择符,是指前一个HTML标记里包含着后一个HTML标记,例如:“div p”,表示定义在DIV里包含段落的样式。 7. 编辑、修改、删除样式表 点CSS Styles面板中的按钮会打开编辑样式表对话框,如下图: 按钮功能介绍: Link:链接外部样式表,这里可以选择链入外部样式表和导入外部样式表两种方式。 New:新建样式。 Edit:选中一个样式然后点Edit就可以进行编辑。 Duplicate:复制一个样式,选中一个样式后点Duplicate按钮,弹出对话框,为复制的样式起一个新的名称,OK。 Remover:移除一个样式或一个外部样式表,选中要删除的样式点Remove按钮,此样式就被删除了。 在Style definition(样式定义)栏里可以看到此样式的内容。 8. 外部样式表 建立外部样式表和建立内部样式表差不多,只是在新建的时候选择(New Style Sheet File),并保存为一个扩展名为.css的样式表文件。 现在,我们把刚才实例中的样式表导出,然后再链接到其他页面。点击CSS Style面板菜单中的Export Style Sheet,系统弹出导出样式表对话框,我们将样式表文件保存为mystyle.css。用记事本打开mystyle.css文件可以看到如下样式表代码: .emphases { font-weight: bold; color: #FF0000} p { font-size: 12px; line-height: 150%; text-indent: 24px} a:link { color: #FF9900; text-decoration: none} a:visited { color: #FFFF00; text-decoration: none} a:hover { color: #FF9900; text-decoration: underline overline; background-color: #FFFF00} a.link2:link { color: #FF0000; text-decoration: underline} a.link2:visited { color: #FF0000; text-decoration: underline} a.link2:hover { color: #FF0000; text-decoration: none; background-color: #FFFFFF} 然后转到其他页面中,点CSS Style面板中的链入外部样式表按钮 ,链入刚才导出的样式表文件mystyle.css,此时这个样式表已经应用到新的页面中了。在新页面的区添加了下列代码: 此外,还可以导入外部样式表,导入方法如下: 点击编辑样式表按钮 ,打开编辑样式表对话框,点击LINK按钮,这时弹出”Link External Style Sheet”对话框,输入外部样式表的路径,选择Import(导入),确定。 可以看到在区的代码为: 0 顶一下 0 评两句 关键字: 上一篇: ASP与数据库应用(给初学者) 下一篇: 表格/单元格强制换行(防止撑大表格) 评论区 热门推荐 asp.netURL重写(URLRewriter)之简化版 1183 Oracle 数据库的备份与恢复(1) 1680 JS实现自动关闭窗口 1257 未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService... 908 Asp编码优化技巧8则 1219 ASP.NET的本质 IIS以及进程模式 1343 ASP.NET用SQL Server中的数据来生成JSON字符串 813 ViewState深入,不能禁止ViewState的控件 1456 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理。 885 ADO初学者教程:ADO 通过GetString()加速脚本 1336 点击排行 PHP模板技术实例应用(自开发类) 9183 flash按钮链接动作代码 5754 PHP分页实例:用PHP实现网页开发中的翻页跳转 5265 教你5分钟做成一个ASP论坛 4887 SQL挂起错误解决 4329 关于在UpdatePanel里使用FileUpload控件 4043 DropDownList微软的例子 3169 一句话技巧集萃 3092 select case语句的用法 3087 网页将不能被另存为的代码 3047 发表评论 × 呢称: 头像: 头像一 头像二 头像三 头像四 头像五 头像六 头像七 验证码: 评论:
关键字:
上一篇: ASP与数据库应用(给初学者)
下一篇: 表格/单元格强制换行(防止撑大表格)
1183
1680
1257
908
1219
1343
813
1456
885
1336
9183
5754
5265
4887
4329
4043
3169
3092
3087
3047