网站制作大全的学习
今天看论坛上看到一个比较好的建站,素材网,里面比较有许多实用的东西。
也许对我以后有用,所以就写出来一起分享吧,地址 http://www.67g.cn/index.asp
希望大家喜欢~!
今天看论坛上看到一个比较好的建站,素材网,里面比较有许多实用的东西。
也许对我以后有用,所以就写出来一起分享吧,地址 http://www.67g.cn/index.asp
希望大家喜欢~!
建议先从PJBLOG官方默认皮肤——短导航条default开始了解PJ的CSS。
(不用flash的皮肤一般无下面这段)
width:760px; 整体宽度;可写成%自适应样式,100%为满屏。
margin:0 auto; 边距,auto表自动;可写成margin:0px 0px 0px 0px表示依次距离上方top、右方right、下方bottom、左方left有多少;可理解为word文档打印用页边距。另可单独定义某边,比如margin-right:10px。可以为负数。
padding:0; 文字边距,仅限制文字,也可写成padding:0px 0px 0px 0px。另可单独定义某边,比如padding-left:10px。可以为负数。
text-align:center; 文字排列;right靠右、left靠左、center居中。
background:#F8F6E9 url(‘main.jpg’); 背景图片和颜色;#F8F6E9为颜色代码;url(‘main.jpg’)为背景图,图片在皮肤文件夹内;图片也可以为gif和png。
height:109px; 整体高度。
font-size:20px; 文字大小。
color:#FFFFFF; 文字颜色。
text-align:left; 文字排列。
font-weight:bold; 文字是否加粗;normal没变化,正常;blod 粗体字符;bolder 更粗;lighter 更细。
background:url(menu_left.png) no-repeat; 背景图是否平铺,不写的话默认为X、Y都平铺;repeat-x 打竖平铺;repeat-y 打横平铺;no-repeat 不平铺。
background-attachment: scroll;背景图是否随浏览器滚动;不写的话默认为随浏览器滚动;fixed 为不随浏览器滚动。
float:right; 整体排列。
overflow:hidden; 自动隐藏超出的字符,图片,防止撑出层和表格的范围
margin:0 auto!important; margin:0px; 用于调整FF等浏览器的!important,因为ie6不认;但ie7已认此代码。!important后面要给ie6重新定义一次皮肤位置。
line-height:180%; 每行间的间距,如果没调好会看到侧边评论等处每行下面会多些文字。
overflow:visible; 仅IE支持的东西,不在CSS标准之内。意思是超出的部分也显示。
list-style:none; 定义是否有着重号的,具体涉及比较多,可参阅css手册。但一般不用,习惯用图片当着重号因为觉得好看。
background:url(‘../../images/BttnLeft.gif’) 0px 0px; 背景图的路径为上级目录里的图片,后面0px分别表示图片的宽度和高度相对位置。
display:block; 在此之后增加新的一行。
font-family:Georgia,Courier New,宋体; 定义字体,可以一次定义几个,按优先顺序排列。如果字体名称包含空格,则应使用引号括起。 border-bottom:1px dotted #6B5D52; border为定义对象的尺寸和边框;其中包括bottom表位置、1px表线条粗细、dotted表线条样式、颜色代码表线条颜色。具体可参阅css手册。
cursor:default; 表鼠标移上去会变成另外的鼠标样式。具体请参阅css手册。
text-decoration:underline; 文字下面是否有下划线。如不喜欢下划线可删除或改为none 无装饰;其余还有blink 闪烁;underline 下划线;line-through 贯穿线;overline 上划线。
设计或修改皮肤的时候,请参阅PJBLOG的CSS结构图来进行位置选取。而在官方带的皮肤CSS文件里都有一定的文字说明,请多看多想想。
PJBLOG皮肤官方说明:http://pjhome.net/article.asp?id=346
1.服务器端目录的索引文件
在httpd.conj中,有一行:
directoryindex index.html
该行指定目录默认打开文件为index.html,当访问某个目录时,服务器就会自动查找index.html, 若果不存在,则显示目录中的所有文件列表,默认打开文件可以改为别的,如index.php3等等,但是也许我们有很多目录,无论是存放图片,文本等资料的,还是存放php文件或别的文件的目录,我们并不希望用户能看到目录中的文件列表,在httpd.conj 中指定了一个.htacess文件,该文件产生一个目录索引文件,例如我们用写字板建立一个.htacess文件:
# .htacess #
directoryindex error_open.php
再建立一个错误警告文件:
# error_open.php #
其中的error_open.php为权限错误警告文件,将此2文件放在所有保护目录下,当用户企图打开目录时,自动转向执行error_open.php,显示错误警告。
2.配置php文件目录
作为服务器端解释执行的脚本语言,php程序放置在某个服务器可以访问的目录下,一般可以通过修改apache的httpd.conj进行配置,例如我们在该文件中的一句:
alias /test/ “d:/phpwebsite/php/” 那么在浏览器端输入:“http://localhost/test/ php文件名”就可以访问d:/phpwebsite/php/下的php文件了;可见该行不过是为存放php文件的目录起一个别名。
其次,还可以通过指定documentroot路径得到存放服务器文件的目录,在httpd.conj找到以下两行,其中的路径可以随意指定,你的php文件也可以放在该目录下,服务器同样可以运行它们,如“http://localhost/ php文件名”。
一般的,将php文件放在同一个地方比较好,可以方便管理,而其他文件放在另外一个地方。
documentroot “c:/usr/bin/html/”
3.目录删除巧实现
我们知道,php4 for/win32中有个rename()函数可以支持对目录/文件进行重命名,如:
rename( oldpath, newpath) // oldpath为文件或目录原来路径;
// newpath为新定义路径;
实现将 oldpath改名为 newpath。
php4中没有删除目录/文件的函数,怎么作到删除呢?我们知道,php.ini中有一行用来完成http上传操作的临时文件目录配置行:
upload_tmp_dir= ;
php4支持该临时目录的配置(php3不支持),当上载操作完成则自动清空临时目录,好了,用它我们可以巧妙的实现文件/目录的删除,比如设置: upload_tmp_dir=”d:/phpwebsite/php/tmp/” ;
要删除某个目录 path,执行:
tmp=”d:/phpwebsite/php/tmp/;”
rename( path, tmp)
?>
那么文件或目录 path改名为 tmp后, tmp目录下的所有文件/目录自动清除,就完成了删除操作。
1 网页成功的首要条件便是主题清晰。如果你只不过是做一个个人网页,你的内容很杂,这也无可厚非。如果你想吸引更多人,就要写得专业点,要有特色,不要把一些毫无关系的内容放在一起,不如做多一个网站。个人的精力有限的。尝试做一个精而专的网站,既可以使你的知识和能力获得更大的提升,网友也可以从中受益。
2 不要制作一些无聊或言之无物的网站,网络上这类网页很多,若你不洁身自爱也加入的话,实属不智。可尝试制作有意义的网页,如个人介绍、收藏、明星网页等等,对于初学者,网页的主题、取材是最大的困惑,不妨多看看别人的网页规划及内容。
3 不要使用本地化、口语化的文字,别以为所有的浏览者都能看懂这些所谓的亲切的口语。个性的反映不只在于网页的整体设计,你的文字表达风格也是一个非常直接的因素。像我这些广东籍的网页设计者尤需注意。
关于外观的禁忌
1 不要先决定网页的外观,然后强迫自己甚至是强迫别人去适应它。应该从网站的浏览者、网站要传达的信息以及网站的发展目标考虑,设计出一个最适合的网页架构。
2 不要每页都采用不同的背景图片,以免每次转页都要花时间去下载。采用相同的背景色及近似的按钮都能增加网页一致性,树立统一的风格。这也是最基本的网站VI设计(视觉识别系统)。
3 不要把图片的白色部分当作是透明的颜色,要知道别人的操作系统是并不一定会将底色设为白色的。解决的方法是把网页的底色设为白色。而最好的方法是用图片编辑工具为图片设置好透明底色。
4 底色或背景须与文字颜色形成明显对比,方便阅读。若你的网页里有较多文字,不妨在这方面下多点功夫,力求让浏览者能舒适阅读你的文章。
5 每页的排版不要太疏或用太大的字,尽量避免看网页的时候要作很大的卷动。
6 太长的一页要使用内部链接,聪明的网页设计者不会让浏览者在看网页时太多卷动。常见的内部链接例子如 FAQ、或名词解释。
7 在17寸显示器尚未普及的时候,不要以 800×600 以上的像素设计网页。因为这常常会导致设计上的判断失误。因此,无论你有再大的显示器,能上再大的分辨率,将显示器设置成 800×600的显示模式是适当的。 –
8 不要于每页插入太多的广告牌。相信你也不会喜欢贴满广告的网页。什么广告交换、点钱Banner、弹出窗口,还有时下最流行却又最讨厌的浮动广告,还是少放为妙。至少,当我看到的时候,是会第一时间按右上角的“X”的。
关于操守的禁忌
1 不要抄袭别人的创作。网络上的所有资料都是公开的,但都有版权的,若想引用别人的作品,不妨先征得同意,一般作者都只要你注明出处,对于电脑方面的东西,大多数朋友都是热情而慷慨的。更不要下载了别人的网站后,当作是自己的放在网上,这样做的结果是使所有人都知道你是个剽窃者。
2 引用 Newsgroup、BBS、或其他非电子传媒的文章,切记要注明原作者名称及文章事源,若引用别有的网页更要通知网主。尊重版权,避免官司,利人利已。
3 不要利用网页散布谣言、中伤他人,网络虽然难管理,但本着道德良心,都应洁身自爱。维持良好网络环境,要靠大家努力,从我做起。
4 不要将别人的网页变成你的框架中的一个窗口,这样不仅为浏览者带来不便,令人的网页更丑陋,而且也侵犯了别人的版权,解决方法是采用链接中的 target 参数,如 target=”_top” ,或是target=”_blank” 从新窗口打开网页等。若重视访问者的感受请从每一细节做起。
5 不要将别人正在使用的搜索引擎、表单及计数器等放到自己的网页中,这样做会扰乱其正常运作、增加该服务器的负荷,除非该主人表示可以连到他的 cgi-bin 或 JavaClass。
一、Web是图形化的和易于导航的(navigate)
Web 非常流行的一个很重要的原因就在于它可以在一页上同时显示色彩丰富的图形和文本的性能。在Web之前Internet上的信息只有文本形式。Web可以提供将图形、音频、视频信息集合于一体的特性。同时,Web是非常易于导航的,只需要从一个连接跳到另一个连接,就可以在各页各站点之间进行浏览了。
二、Web与平台无关
无论你的系统平台是什么,你都可以通过Internet访问WWW。浏览WWW对你的系统平台没有什么限制。无论从Windows平台、UNIX平台、Macintosh还是别的什么平台我们都可以访问WWW。对WWW的访问是通过一种叫做浏览器(browser)的软件实现的。如Netscape 的Navigator、NCSA的Mosaic、Microsoft的Explorer等。
三、Web是分布式的
大量的图形、音频和视频信息会占用相当大的磁盘空间,我们甚至无法预知信息的多少。对于Web没有必要把所有信息都放在一起,信息可以放在不同的站点上。只需要在浏览器中指明这个站点就可以了。使在物理上并不一定在一个站点的信息在逻辑上一体化,从用户来看这些信息是一体的。
四、Web 是动态的
最后,由于各Web站点的信息包含站点本身的信息,信息的提供者可以经常对站上的信息进行更新。如某个协议的发展状况,公司的广告等等。一般各信息站点都尽量保证信息的时间性。所以Web站点上的信息是动态的。经常更新的。这一点是由信息的提供者保证的。
五、Web是交互的
Web的交互性首先表现在它的超连接上,用户的浏览顺序和所到站点完全由他自己决定。另外通过FORM的形式可以从服务器方获得动态的信息。用户通过填写FORM可以向服务器提交请求,服务器可以根据用户的请求返回相应信息。
工作原理
当你想进入万维网上一个网页, 或者其他网络资源的时候,通常你要首先在你的浏览器上键入你想访问网页的统一资源定位符(Uniform Resource Locator),或者通过超链接方式链接到那个网页或网络资源。这之后的工作首先是URL的服务器名部分,被名为域名系统的分布于全球的因特网数据库解析,并根据解析结果决定进入哪一个IP地址(IP address)。
接下来的步骤是为所要访问的网页,向在那个IP地址工作的服务器发送一个HTTP请求。在通常情况下,HTML文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。
网络浏览器接下来的工作是把HTML、CSS和其他接受到的文件所描述的内容,加上图像、链接和其他必须的资源,显示给用户。这些就构成了你所看到的“网页”。
大多数的网页自身包含有超链接指向其他相关网页,可能还有下载、源文献、定义和其他网络资源。像这样通过超链接,把有用的相关资源组织在一起的集合,就形成了一个所谓的信息的“网”。这个网在因特网上被方便使用,就构成了最早在1990年代初蒂姆·伯纳斯-李所说的万维网
什么是web2.0?
2001年秋天互联网公司(dot-com)泡沫的破灭标志着互联网的一个转折点。许多人断定互联网被过分炒作,事实上网络泡沫和相继而来的股市大衰退看起来像是所有技术革命的共同特征。股市大衰退通常标志着蒸蒸日上的技术已经开始占领中央舞台。假冒者被驱逐,而真正成功的故事展示了它们的力量,同时人们开始理解了是什么将一个故事同另外一个区分开来。[1]
“Web 2.0”的概念开始于一个会议中,展开于O’Reilly公司和MediaLive国际公司之间的头脑风暴部分。所谓互联网先驱和O’Reilly公司副总裁的戴尔·多尔蒂(Dale Dougherty)注意到,同所谓的“崩溃”迥然不同,互联网比其他任何时候都更重要,令人激动的新应用程序和网站正在以令人惊讶的规律性涌现出来。更重要的是,那些幸免于当初网络泡沫的公司,看起来有一些共同之处。那么会不会是互联网公司那场泡沫的破灭标志了互联网的一种转折,以至于呼吁“Web 2.0”的行动有了意义?我们都认同这种观点,Web 2.0会议由此诞生。
在那个会议之后的一年半的时间里,“Web 2.0”一词已经深入人心,从Google上可以搜索到950万以上的链接。但是,至今关于Web 2.0的含义仍存在极大的分歧,一些人将Web 2.0贬低为毫无疑义的一个行销炒作口号,而其他一些人则将之理解为一种新的传统理念。
在我们当初的头脑风暴中,我们已经用一些例子,公式化地表达了我们对Web 2.0的理解:
Web 1.0 Web 2.0
DoubleClick Google AdSense
Ofoto Flickr
Akamai BitTorrent
mp3.com Napster
大英百科全书在线(Britannica Online) 维基百科全书(Wikipedia)
个人网站 博客(blogging)
evite upcoming.org和EVDB
域名投机 搜索引擎优化
页面浏览数 每次点击成本
屏幕抓取(screen scraping) 网络服务(web services)
发布 参与
内容管理系统 维基
目录(分类) 标签(“分众分类”,folksonomy)
粘性 聚合
这个列表还会不断继续下去。但是到底是什么,使得我们认定一个应用程序或一种方式为作所谓“Web 1.0”,而把另外一个叫做“Web 2.0”呢?(这个问题尤为紧迫,因为Web 2.0的观念已经传播的如此广泛,以至于很多公司正在将这个词加到他们的行销炒作中,但却没有真正理解其含义。同时这个问题也尤为困难,因为许多嗜好口号的创业公司显然不是Web 2.0,而一些我们认为是Web 2.0的应用程序,例如Napster和BitTorrent,甚至不是真正适当的网络程序!)
然而,抛开纷繁芜杂的Web 2.0现象,进而将其放到科技发展与社会变革的大视野下来看,Web 2.0可以说是信息技术发展引发网络革命所带来的面向未来、以人为本的创新2.0模式在互联网领域的典型体现,是由专业人员织网到所有用户参与织网的创新民主化进程的生动注释。
早就在pj论坛上大家都讨论QQ空间跳转网站的方法,但是只有很多人不愿意说方法,只有炫耀自己。问起来也不说,个人一直认为这个效果好玩,有点新鲜感,但是一直水平有限,只要羡慕一下别人了。加了好几个好友(会弄跳转的),不给说,有的还要钱呢,说10员一次。真是无法说了。
其实这个简单,就是自己没动手做过,用一个弹窗工具弄一个mp3,然后上传到FTP根目录,最后到你空间新建视频模块,就好了
下载地址:http://www.brsbox.com/filebox/down/fc/c1b0f39c5120658a1dc30da1a2e452a0
还有一个补丁下载地址:http://www.rayfile.com/files/a94fd0f8-ffb0-11dd-bea7-0014221b798a/
文章来自:http://www.yjcode.cn/。隧意’s Blog
效果地址:http://user.qzone.qq.com/584444173
首先假设:要合并到的(即合并后你将用在博客上的)数据库文件为blog1.mdb、被合并的(即合并后你就甩了不要的)数据库文件为blog2.mdb
①先同步两个博客分类(不同步分类可能会出错.那就怪不得我咯.嘻嘻)
②将blog1.mdb、blog2.mdb都下载到本地机上,并把这两个文件各复制出备份;(注意下面的合并操作中没有什么步骤撤消功能可退,且边合并边写库、一错文件就坏,坏了你就要把库文件删了、再从备份复制回来)
③用Access打开blog1.mdb数据库文件,找到表blog_Content ——>设计视图 ——>删除第一行字段”log_ID” ——>关闭并保存更改 ——>菜单工具、数据库实用工具、压缩和修复数据库
④同上执行blog2.mdb的删除工作
⑤运行Access,打开blog1.mdb,点文件–获取外部数据–链接表,找到blog2.mdb,点链接;
⑥点所显示链接表中的blog_Content表(如果要同步其他数据的话自己选吧,最好一次只同步一个数据表,不然出错就麻烦了)点确定;
⑦右击已链接过来的blog_Content1表,点复制,再对着旁边空白处点粘贴,点将数据追加到已有表,在表名称栏中填blog_Content,点确定;
⑧将列表中的blog_Content1链接表删除。这样两个库就合并了(blog2合并到blog1中去了)!
⑨再次打开数据库blog1.mdb点表blog_Content ——>设计视图 ——>重新在第一行加入字段”log_ID”、数据类型设置成”自动编号”并设置成主键——>关闭并保存更改 ——>菜单工具、数据库实用工具、压缩和修复数据库
然后,你将blog1.mdb库上传至空间,进入后台的文章管理,去整理分类去吧.
这样两个博客的数据合并工作就完成了.
第一步,找到你使用的pjblog皮肤(pjblog风格)安装文件夹,就是服务器目录skins(皮肤风格文件都在这里存放)
第二步,找到你用的是那个皮肤,找到layout.css 这个CSS文件
第三步,编辑这个CSS。
其实改几个数值就可以了,就是调整宽度的数值。
#container #header #menu{
height:32px;
text-align:right;/*visibility:hidden;*/
margin-top: 11px;
padding: 0px;
width: 900px; (内容框+侧栏宽度=900.就是你这款皮肤总的宽度,这里需要变化哦)
margin-right: auto;
margin-left: auto;
/*—工具条–*/
#sidebar{float:left;width:210px;margin-left:15px;text-align:left;} 数值”210”是侧边栏的宽度
/*—主内容–*/
#mainContent{float:left;text-align:center;width:670px;padding-top:0px;border:1px solid #ddd;} 数值”670″是内容框的宽度
#innermainContent{margin:5px 10px 0px 0px;}
#mainContent-topimg{height:0px;overflow:hidden;}
#mainContent-bottomimg{height:0px;overflow:hidden;}
.content-width{margin:auto;width:100%;}/*–主内容元素的全局宽度–*/
好了,知道怎么做了吧?首先计算看你现在的宽度是多少?你想改变为多少?为了迎合宽屏和普屏的需要,总宽度不可超过1000,一般是910、996等,做好这个加减法,你就可以看到pjblog的布局变化了。
最后,如果你的blogname那一栏,(就是pjblog顶部)和你设置好的内容宽度不符合,你还可以调整一下PJblog顶部的宽度。见下表:
#container #header #blogname{
font-size:16px;
text-align:left;
font-weight:bold;
margin-right: auto;
margin-bottom: 11px;
margin-left: auto;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 60px; blog标志距离屏幕左边的数值
background-image: url(logo.png);
background-repeat: no-repeat;
height: 55px;
width: 840px; (绿色的两个数值加起来等于你设置的整个pjblog的宽度值)
需要注意需要设计的就这几个数值,我说的很详细咯,琢磨一下自己就会了!可以只增加内容宽度不改变侧栏宽度,也可以同时增加两者的宽度。看你自己的需要吧!
本文转自:http://www.solini.cn/
去年学了点html语言,多少会一点点,但是今天找了一个学习更好的网
就是:http://www.sdjtu.edu.cn/xdjyzx/HTML/html.htm
HTML颜色参考:http://www.admin5.com/html/html_tutorials/050_html_color_ref.html
CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐!^_^
前言
CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一。
W3C(The World Wide Web Consortium)把动态HTML(Dynamic HTML)分为三个部分来实现:脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。
一.层叠样式表的特点
且不说过去的网页缺少动感,就是在网页内容的排版布局上也有很多困难,如果不是专业人员或特别有耐心的人,很难让网页按自己的构思和创意来显示信息。即便是掌握了HTML语言精髓的人也要通过多次地测试,才能驾驭好这些信息的排版,过程十分漫长和痛苦。为了Internet的发展,让更多人早日踏足这个多姿多彩的世界,新的HTML辅助工具呼之欲出。
样式表就是在这种需求下诞生的,它首先要做的是为网页上的元素精确地定位,可以让网页设计者象导演一样,轻易地控制由文字、图片组成的演员们,在网页这个舞台上按剧本要求好好地表演。
其次,它把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构,而为了让浏览者更好地看到这些信息,就要通过格式控制来帮忙了。以前两者在网页上的分布是交错结合的,查看修改很不方便,而现在把两者分开就会大大方便网页的设计者。内容结构和格式控制相分离,使得网页可以光由内容构成,而将所有网页的格式控制指向某个CSS样式表文件。这样一来的好出表现在两个方面:
第一,简化了网页的格式代码,外部的样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。
第二,只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色,在修改页面数量庞大的站点时,显得格外有用。避免了一个一个网页的修改,大大减少了重复劳动的工作量,当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐!^_^
二.添加层叠样式表的方法
我们为网页添加样式表的方法有四种。
1.最简单的方法是直接添加在HTML的标识符(tag)里:
< Tag style=”properties”>网页内容< /tag>
举个例子:
< p style=”color: blue; font-size: 10pt”>CSS实例< /p>
代码说明:
用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显示直观,但是这种方法不怎么常用,因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”。 (注,其中p标志符为创建一个段落)
2.添加在HTML的头信息标识符< head>里:
< head>
< style type=”text/css”>
< !-- 样式表的具体内容 -->
< /style>
< /head>
type=”text/css”表示样式表采用MIME类型,帮助不支持CSS的浏览器过滤掉CSS代码,避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生,还是有必要在样式表里加上注释标识符“< !--注释内容-->”。
3.链接样式表
同样是添加在HTML的头信息标识符< head>里:
< head>
< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>
< /head>
*.css是单独保存的样式表文件,其中不能包含< style>标识符,并且只能以css为后缀。
Media是可选的属性,表示使用样式表的网页将用什么媒体输出。取值范围:
·Screen(默认):输出到电脑屏幕
·Print:输出到打印机
·TV:输出到电视机
·Projection:输出到投影仪
·Aural:输出到扬声器
·Braille:输出到凸字触觉感知设备
·Tty:输出到电传打字机
·All:输出到以上所有设备
如果要输出到多种媒体,可以用逗号分隔取值表。
Rel属性表示样式表将以何种方式与HTML文档结合。取值范围:
·Stylesheet:指定一个外部的样式表
·Alternate stylesheet:指定使用一个交互样式表
4.联合使用样式表
同样是添加在HTML的头信息标识符< head>里:
< head>
< style type=”text/css”>
< !--
@import “*.css”
其他样式表的声明
–>
< /style>
< /head>
以@import开头的联合样式表输入方法和链接样式表的方法很相似,但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时,针对该网页的具体情况,做出别的网页不需要的样式规则。
需要注意的是:
·联合法输入样式表必须以@import开头。
·如果同时输入多个样式表有冲突的时候,将按照第一个输入的样式表对网页排版。
·如果输入的样式表和网页里的样式规则冲突时,使用外部的样式表。
三.层叠样式表的格式
一般来说,样式表的声明分为选择符(selector)和块{}(block),块里包含属性(properties)和属性的取值(value),基本格式如下:
选择符 {属性:值}
其它格式1:
选择符1,选择符2,选择符3 {属性1:值1;属性2:值2;属性3:值3}
有时候多个选择符将使用相同的设置,为了简化代码,我们可以一次性为它们设置样式,并在多个选择符之间加上“,”来分隔它们。
当有多个属性的时候,必须在两个属性之间用“;”来分隔。
其它格式2:
选择符1 选择符2 {属性1:值1;属性2:值2;属性3:值3}
和格式1非常相似,只是在选择符之间少加了“,”,但作用却大不相同。表示如果选择符2包括的内容同时包括在选择符1里的时候,所设置的样式规则才起作用。
四.层叠样式表的分类
为了使网页的格式不过分的单调,必需让相同的选择符也能分类,并能按照不同的类别来进行不同的样式设计。基本格式如下:
选择符.类别名 {属性:值}
类别名将可以在HTML的标识符里引用:
< 标识符 class=类别名>网页内容
五.层叠样式表的伪类
除了上述的分类方式外,为了使分类的使用更灵活多样,又产生了伪类的概念。类和伪类有什么样的区别呢?
一般地说,选择符可以和多个类采用捆绑的形式来设定,这样虽然能够为同一个选择符创建多种不同的样式,但捆绑的形式同时也限制了设定的类为其它的选择符所使用。伪类的产生就是为了解决这个问题,每个预声明的伪类都可以被所有的HTML标识符引用,当然有些块级内容的设置除外。基本格式如下:
.伪类名 {属性:值}
伪类可以被任何标识符在HTML里引用。
<标识符 class=伪类名>网页内容
六.控制字体的样式
控制字体的样式包括控制字
体类型、字体大小、字体风格、字体粗细四个部分。
1.字体类型
平时在使用WORD之类的字处理软件的时候,经常需要调整字体的显示,比如说“Arial”、“Impact”、“Verdana”等字体都是使用的较多的。
基本格式如下:
font-family: 字体名称
如果在font-family后加上多种字体的名称,浏览器回按字体名称的顺序逐一在用户的计算机里寻找已经安装的字体,一旦遇到与要求的相匹配的字体,就按这种字体显示网页内容,并停止搜索;如果不匹配就继续搜索,直到找到为止,万一样式表里的所有字体都没有安装的话,浏览器就会用自己默认的字体来替代显示网页的内容。
注意:
·当指定多种字体时,用“,”分隔每种字体名称。
·当字体名称包含两个以上分开的单词时,用“”把该字体名称括起来。
·当样式规则外已经有“”时,用‘’代替“”。
2.字体大小
基本格式如下:
font-size: 字号参数
字号的取值范围:
·以Point为单位:点单位在所有的浏览器和操作平台上都适用
·以Em为单位:指字母要素的尺寸,和Point相同距离
·以Pixes为单位:像素可以使用于所有的操作平台,但可能会因为浏览者的屏幕分辨率不同,而造成显示上的效果差异
·以in(英寸)为单位
·以cm(厘米)为单位
·以mm(毫米)为单位
·以pc(打印机的字体大小)为单位
·以ex(x-height)为单位
·smaller:比当前文字的默认大小更小一号
·larger:比当前文字的默认大小更小大号
·使用比例关系
·xx-small
·x-small
·small
·medium
·large
·x-large
·xx-large
3.字体风格
字体风格只能控制各种斜体字的显示。
基本格式如下:
font-style: 斜体字的名称
4.字体粗细
字体粗细控制粗体字的显示,取值范围从数字100~900,浏览器默认的字体粗细为400。另外可以通过参数lighter和bolder使得字体在原有基础上显得更细或更粗些。
基本格式如下:
font-weight: 字体粗细
最近评论