Dreamweaver MX 2004 CSS样式(转)

Dreamweaver MX 2004 CSS样式(转)[@more@]

  我们可能都有这样的体验,如果设置浏览器中字体的大小,网页中的字体就会随之改变。这固然会给一些有特殊需要的用户带来方便,但同时也给网页的布局带来负面影响--网页的版面会随着字体的改变而变的面目全非。但一个好的网页,却不受浏览器字体设置的影响,网页中的文本等始终保持原有的外观,这就是CSS的作用。

  CSS是Cascading Style Sheets(层叠样式表单)的简称。它允许作者在HTML文档中加入样式(如字体类型、颜色、大小等等)。对于设计者来说它是一个非常灵活的工具,不必再把繁杂的样式定义编写在文档结构中,可以将所有有关于文档的样式指定内容全部脱离出来,在行内定义、在标题中定义,甚至作为外部样式文件供HTML调用。CSS在当前的网页设计中已经成为不可缺少的技术,例如我们现在最常见的去除链接文字的下划线就是CSS最简单的应用。

  Dreamweaver是最早将CSS的应用于网页的工具。通过直观的界面,设计者可以定义超过70种不同的CSS设置,这些设置可以影响到网页中的任何元素,从文本的间距到类似于多媒体的转换。可以随时创建自己的样式单,然后在任何时候连接调用它。

  CSS也是以代码形式出现的,编写好的CSS代码,在网页的HTML中以

外部文件方式

   即用任何一种文本编辑工具将编辑好的CSS代码保存为***.css的文件,然后在网页的文档头加入代码 凡是在网页文档头加入了这行代码的网页都将按照CSS格式显示。这种方式一般主要在使整站风格统一时使用。

内部文档头格式:

   它是将CSS风格网页的文件头之间,应用的范围仅在该文档。这种方式主要在确定某个页面风格时使用。

直接插入式:

   这种方法是在每一个HTML标签后直接书写CSS属性。在对页面的某一个标签进行调整时使用这种方式。

   CSS是HTML代码的扩充,只要修改CSS代码中的参数值,就能随心所欲的改变网页的风格,但是编写代码仍旧是一个很繁琐的工作。幸好 Dreamweaver MX 2004 的【CSS样式】面板和【CSS属性】面板,为我们提供了极大的便利,只需要点点鼠标,就能自动生成CSS代码。

  【CSS样式

  在【窗口】菜单选择【CSS样式】

1160475477_ddvip_6489.gif

  打开【CSS样式面板】其右下脚的几个快捷按钮见下图的注释。

1160475481_ddvip_9916.gif

  【附加样式表】

   链接外部样式表,给出***.css文档的URL即可。也能导入这个CSS文件进行编辑。

  【新建样式表】

1160475488_ddvip_4031.gif

  名称:

   为新建的样式命名,必须以“.”开头,以英文字母命名。

  选择器类型:

  类-应用与任何标签。

  标签-定义特定的标签 。

  高级-为具体的某一个标签组合或者具有ID属性的标签定义格式。

  定义在:

选择“新建样式表文件”按下“确定”后弹出对话框,要求将样式保存为样式表文件,供“外部文件方式”使用。

选择“仅对该文档”定义只能用在改文档的样式。

  下面通过一个实例来体会一下样式表的作用:

  要求:

   建立一个名为“.aaa”的样式表,字体为“宋体”,字号为24点,颜色为“红色”,背景颜色为“蓝色”。

  1、新建一个HTML文档,单击【CSS样式】面板中的【新建样式】打开对话框。

1160475496_ddvip_3378.gif

  在【分类】中选择【类情】设置字体,大小,颜色后按下【应用】按钮。

1160475502_ddvip_1954.gif

  在【分类】中选择【背景】设置背景颜色后点击【确定】.aaa样式表建立完毕。

  在编辑窗口的属性面板样式中选择“aaa”然后输入文本。

1160475514_ddvip_9704.gif

  回到【CSS样式】面板,选中“.aaa”然后单击右下脚的“编辑样式”按钮,可以对刚才设定的样式进行更改,例如,将文字颜色改为白色。

1160475527_ddvip_7355.gif

  上面已经大致介绍了CSS的基本概念,下面来了解一下CSS的属性。

  【CSS的属性

  通过上面的介绍,大家会发现CSS定义样式有八个大类,每个类都有自己相应的属性。

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/10752019/viewspace-955174/,如需转载,请注明出处,否则将追究法律责任。

user_pic_default.png
请登录后发表评论 登录
全部评论
<%=items[i].createtime%>

<%=items[i].content%>

<%if(items[i].items.items.length) { %>
<%for(var j=0;j
<%=items[i].items.items[j].createtime%> 回复

<%=items[i].items.items[j].username%>   回复   <%=items[i].items.items[j].tousername%><%=items[i].items.items[j].content%>

<%}%> <%if(items[i].items.total > 5) { %>
还有<%=items[i].items.total-5%>条评论 ) data-count=1 data-flag=true>点击查看
<%}%>
<%}%> <%}%>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值