DIV教程之玩转CSS CSS出色实例教程(一)

显示全部楼层 · 发表于 2015-1-16 00:20:22

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

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

x

另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。
　　CSS(CascadingStylesheets，层叠款式表)是一种制造网页的新手艺，如今已为年夜多半的扫瞄器所撑持，成为网页计划必不成少的工具之一。利用CSS可以简化网页的格局代码，加速下载显现的速率，也削减了必要上传的代码数目，年夜年夜削减了反复休息的事情量。特别是当你面临的是无数百个网页的站点时，CSS几乎象是神对我们的赏赐!
　　媒介
　　CSS(CascadingStylesheets，层叠款式表)是一种制造网页的新手艺，如今已为年夜多半的扫瞄器所撑持，成为网页计划必不成少的工具之一。
　　W3C(TheWorldWideWebConsortium)把静态HTML(DynamicHTML)分为三个部分来完成:剧本言语(包含JavaScript、Vbscript等)、撑持静态效果的扫瞄器(包含InternetExplorer、NetscapeNavigator等)和CSS款式表。
　　1、层叠款式表的特性
　　且不说已往的网页短少动感，就是在网页内容的排版结构上也有良多坚苦，假如不是专业职员或出格有耐烦的人，很难让网页按本人的构想和创意来显现信息。即使是把握了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”>
　　
　　</style>
　　</head>
　　以@import开首的团结款式表输出办法和链接款式表的办法很类似，但团结款式表输出体例更有上风。由于团结法能够在链接内部款式表的同时，针对该网页的详细情形，做出其余网页不必要的款式划定规矩。
　　必要注重的是:
　　・团结法输出款式表必需以@import开首。
　　・假如同时输出多个款式表有抵触的时分，将依照第一个输出的款式表对网页排版。
　　・假如输出的款式表和网页里的款式划定规矩抵触时，利用内部的款式表。
</p>
在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

显示全部楼层 · 发表于 2015-3-11 06:11:08

学Dreamweaver技术的过程其实是一个增加信心的过程。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之玩转CSS CSS出色实例教程(一)

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

相关帖子