| 网站首页 | 站内资讯 | 原创图书 | 图文教程 | 视频教程 | 课件下载 | 远程网校 | 留言建议 | 视频教程吧 | 官方微博 | 
>>  您现在的位置: Flash课件吧 >> 图文教程 >> 网页教程 >> 正文
专题栏目
畅销教材
征稿与合作
如果您是计算机方面的专家或对计算机在某方面的应用有一定心得,我们真诚地希望与您合作。请下载作者信息表并认真填写。在邮件主题中注明寻求合作字样,我们将尽快给您答复。
  • 下载作者信息表
  • 邮件联系我们
  • 相关文章
    推荐图书
    第3课 创建CSS(二)
            ★★★   
    第3课 创建CSS(二)
    >>  教程简介: 
    作者:佚名 教程来源:本站原创 点击数: 更新时间:2008/5/1 9:13:13

    特别致谢

      本教程由课件吧(http://www.cai8.net)开发,并由本书作者寒蓝老师提供在“闪客起航”开设专栏进行在线学习,以帮助大家快速掌握CSS的知识。
      本教程选自清华大学出版社2008年2月出版的《Dreamweaver网页制作实用教程》一书。《Dreamweaver网页制作实用教程》是“21世纪师范院校计算机实用技术规划教材”中的一本教材。由于教材内容新颖、实用,深受广大读者的欢迎,目前全国已有多所中、高等院校和IT培训学校选择本书作为正式的网页制作教材。
      朋友们可以在全国各新华书店购买此书,或者在当当网互动出版网邮购此书。

     

    3.2.3 CSS重新定义HTML标签

    创建CSS样式时,在“新建CSS规则”对话框中,将“选择器类型”设置为“标签(重新定义特定标签的外观)”,可以实现用CSS重新定义HTML标签的外观的功能。

    下面以p标签为例讨论用CSS重新定义HTML标签的外观的方法。

    1.修改HTML标签<p></p>

           1)打开示例文件C:\part6\3.2.3.html,切换到设计视图,这个文件中包含几段文本,通过前面的知识可以知道,每段文本对应了一对<p></p>标签,切换到代码视图中可以看到如图3-1所示的内容。

    3-1 代码视图中看到的<p></p>标签

           2)在【CSS样式】面板中单击右下角的【新建CSS规则】按钮,这时将弹出【新建CSS规则】对话框,在【选择器类型】右边的单选按钮组中选择【标签(重新定义特定标签的外观)】,展开【标签】下拉列表选择p(也就是HTML标签<p></p>),选择【定义在】为【仅对该文档】,然后单击【确定】按钮,如图3-2所示。

    3-2 选择标签p

    2.设置p标签的属性

           1)在【pCSS规则定义】对话框中,选择【分类】下面的【边框】,在右侧的窗格中,选择【样式】为【虚线】,设置宽度为1像素,设置颜色为灰色,注意【全部相同】复选框都选中,如图3-3所示。

    3-3 设置p标签的边框属性

           2)在左侧的【分类】列表中选择【方框】,在右侧的窗格中,设置【宽】和【高】分别为200像素,展开【浮动】下拉列表选择【左对齐】。将【填充】和【边界】均设置为10像素,【全部相同】复选框均选中,然后单击【确定】按钮,如图3-4所示。

    3-4 设置p的方框属性

           3)因为进行的CSS规则定义是直接针对标签<p></p>进行的,所以在样式定义之后不需要手工将CSS样式制定给页面元素,在这个页面中凡是使用<p></p>的内容都将会立刻受到影响。直接按下键盘上的快捷键F12打开浏览器进行预览,效果如图3-5所示。

    3-5 <p></p>标签用CSS重新定义后的效果

    3.2.4 超级链接的CSS样式

    网页中的文本上建立超级链接后,文字就会变成蓝色,同时还出现下划线,这是HTML默认的超级链接外观。如果想改变超级链接的默认外观,可以利用CSS样式进行处理。

    1.创建超级链接

    1)新建一个网页文档,保存为3.2.4.html。插入一个15列的表格,在单元格中输入相应的文字,并设置表格背景颜色为蓝色。将单元格中的文字颜色都设置为白色,这样可以得到更好的显示效果,如图3-6所示。

    3-6 创建表格

    2)选择第1个单元格中的“首页”文字,在【属性】面板的【链接】文本框中输入相应的链接文件(这里可以输入一个假设的网页地址),定义一个文字超级链接。同样,也分别定义另外几个文本的超级链接。这时,文字都变成了蓝色,并且都出现了下划线。在浏览器预览效

    [1] [2] [3] 下一页

      >> 教程录入:admin    责任编辑:admin 
  • 上一篇教程:
  • 网友评论:(只显示最新8条。评论内容只代表网友观点,与本站立场无关!)
    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 管理登录 | 
    版权所有 课件吧 Copyright ◎2006 - 2013
    如涉及侵权行为请书面告之,本站将立即处理
    站长:cai8net  备案序号:豫ICP备13010258号