仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 690|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来一发CSS特性及到场网页的四种办法

[复制链接]
只想知道 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:13:14 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
一个样式规则由一个选择器后跟一个声明块组成,声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
明天给初学者先容一下CSS特性及怎样在网页中利用已设置的CSS。
  CSS(CascadingStylesheets,层叠款式表)是一种制造网页的新手艺,如今已为年夜多半的扫瞄器所撑持,成为网页计划必不成少的工具之一。利用CSS可以简化网页的格局代码,加速下载显现的速率,也削减了必要上传的代码数目,年夜年夜削减了反复休息的事情量。特别是当你面临的是无数百个网页的站点时,CSS几乎象是神对我们的赏赐!
  媒介
  CSS(CascadingStylesheets,层叠款式表)是一种制造网页的新手艺,如今已为年夜多半的扫瞄器所撑持,成为网页计划必不成少的工具之一。
  W3C(TheWorldWideWebConsortium)把静态HTML(DynamicHTML)分为三个部分来完成:剧本言语(包含JavaScript、Vbscript等)、撑持静态效果的扫瞄器(包含InternetExplorer、NetscapeNavigator等)和CSS款式表。
  层叠款式表的特性
  且不说已往的网页短少动感,就是在网页内容的排版结构上也有良多坚苦,假如不是专业职员或出格有耐烦的人,很难让网页按本人的构想和创意来显现信息。即使是把握了HTML言语精华的人也要经由过程屡次地测试,才干把握好这些信息的排版,历程非常冗长和疾苦。为了Internet的开展,让更多人早日踏足这个多姿多彩的天下,新的HTML帮助工具呼之欲出。
  款式表就是在这类需求下出生的,它起首要做的是为网页上的元素准确地定位,可让网页计划者象导演一样,容易地把持由笔墨、图片构成的演员们,在网页这个舞台上按脚本请求好好地扮演。
  其次,它把网页上的内容布局和格局把持相分别。扫瞄者想要看的是网页上的内容布局,而为了让扫瞄者更好地看到这些信息,就要经由过程格局把持来协助了。之前二者在网页上的散布是交织分离的,检察修正很不便利,而如今把二者分隔就会年夜小气便网页的计划者。内容布局和格局把持相分别,使得网页能够光由内容组成,而将一切网页的格局把持指向某个CSS款式表文件。如许一来的好出体现在两个方面:
  第一,简化了网页的格局代码,内部的款式表还会被扫瞄器保留在缓存里,加速了下载显现的速率,也削减了必要上传的代码数目(由于反复设置的格局将被只保留一次)。
  第二,只需修正保留着网站格局的CSS款式表文件就能够改动全部站点的作风特征,在修正页面数目复杂的站点时,显得分外有效。制止了一个一个网页的修正,年夜年夜削减了反复休息的事情量,当你面临的是无数百个网页的站点时,CSS几乎象是神对我们的赏赐!^_^
  增加层叠款式表的办法
  我们为网页增加款式表的办法有四种。
  1.最复杂的办法是间接增加在HTML的标识符(tag)里:
  <Tagstyle=”properties”>网页内容</tag>
  举个例子:
  <pstyle=”color:blue;font-size:10pt”>CSS实例</p>
  代码申明:
  用蓝色显现字体巨细为10pt的“CSS实例”。只管利用复杂、显现直不雅,可是这类办法不怎样经常使用,由于如许增加没法完整发扬款式表的上风“内容布局和格局把持分离保留”。
  2.增加在HTML的头信息标识符<head>里:
  <head>
  <styletype=”text/css”>
  <!--款式表的详细内容-->
  </style>
  </head>
  type=”text/css”暗示款式表接纳MIME范例,匡助不撑持CSS的扫瞄器过滤失落CSS代码,制止在扫瞄器眼前间接以源代码的体例显现我们设置的款式表。但为了包管上述情形必定不要产生,仍是有需要在款式内外加上正文标识符“<!--正文内容-->”。
  3、链接款式表
  一样是增加在HTML的头信息标识符<head>里:
  <head>
  <linkrel=”stylesheet”href=”*.css”type=”text/css”media=”screen”>
  </head>
  *.css是独自保留的款式表文件,个中不克不及包括<style>标识符,而且只能以css为后缀。
  Media是可选的属性,暗示利用款式表的网页将用甚么媒体输入。取值局限:
  ・Screen(默许):输入到电脑屏幕
  ・Print:输入到打印机
  ・TV:输入到电视机
  ・Projection:输入到投影仪
  ・Aural:输入到扬声器
  ・Braille:输入到凸字触觉感知设备
  ・Tty:输入到电传打字机
  ・All:输入到以上一切设备
  假如要输入到多种媒体,能够用逗号分开取值表。
  Rel属性暗示款式表将以何种体例与HTML文档分离。取值局限:
  ・Stylesheet:指定一个内部的款式表
  ・Alternatestylesheet:指定利用一个交互款式表
  4、团结利用款式表
  一样是增加在HTML的头信息标识符<head>里:
  <head>
  <styletype=”text/css”>
  <!--
  @import“*.css”
  其他款式表的声明
  -->
  </style>
  </head>
  以@import开首的团结款式表输出办法和链接款式表的办法很类似,但团结款式表输出体例更有上风。由于团结法能够在链接内部款式表的同时,针对该网页的详细情形,做出其余网页不必要的款式划定规矩。
  必要注重的是:
  ・团结法输出款式表必需以@import开首。
  ・假如同时输出多个款式表有抵触的时分,将依照第一个输出的款式表对网页排版。
  ・假如输出的款式表和网页里的款式划定规矩抵触时,利用内部的款式表

</p>
Table布局灵活性不大,你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
若天明 该用户已被删除
沙发
发表于 2015-1-18 05:41:16 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
小妖女 该用户已被删除
板凳
发表于 2015-1-25 17:09:37 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
爱飞 该用户已被删除
地板
发表于 2015-2-3 12:14:47 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
愤怒的大鸟 该用户已被删除
5#
发表于 2015-2-8 23:11:28 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
深爱那片海 该用户已被删除
6#
发表于 2015-2-26 13:55:14 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
精灵巫婆 该用户已被删除
7#
发表于 2015-3-8 15:39:36 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
飘飘悠悠 该用户已被删除
8#
发表于 2015-3-16 05:17:35 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
admin 该用户已被删除
9#
发表于 2015-3-22 20:44:39 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-29 22:07

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表