正在加载...
 
    一个在线CSS编辑器  

    QrONE CSS Designer

    http://www.rexsong.com//blog/attachments/200601/cssdesigner.htm

    标签:css+html学习 | 浏览数(6699) | 评论数(0) | 2006-10-26
    简明 HTML CSS 开发规范  

    作者:wjack    文章来源: 蓝色理想

    //总论

    本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通。但是,请大家千万不要随意更改规范。如果有任何问题,请及时与我联系,我会及时更改本规范的相关代码样例和文档。

    /基 本 要 求

    1. 在网站根目录中开设images common temp 三个子目录,根据需要再开设media 子目录,images目录中放不同栏目的页面都要用到的公共图片,例如公司的标志、banner 条、菜单、按钮等等;common 子目录中放css、js,、php、include 等公共文件;temp 子目录放客户提供的各种文字图片等等原始资料;media 子目录中放flash, avi, quick time 等多媒体文件 。
    2. 在根目录中原则上应该按照首页的栏目结构,给每一个栏目开设一个目录,根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件,如果这个栏目的内容特别多,又分出很多下级栏目,可以相应的再开设其他目录。
    3. temp 目录中的文件往往会比较多,建议以时间为名称开设目录,将客户陆续提供的资料归类整理。

    4. 除非有特殊情况,目录、文件的名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;目录的命名请尽量以英文为指导,不到万不得已不要以拼音作为目录名称,经验证明,用拼音命名的目录往往连一个月后的自己都看不懂,

    /脚 本 编 写

    我们应该有一个脚本整体风格一致的概念,意思是一个月后和一个月前的你写的脚本风格保持一致,以及同一个工作组中不同的开发人员编写的脚本风格保持一致,因为我们不可能永远孤立的开发,你随时都有可能和三个月前的自己合作(你的客户要求改版),也经常要和工作室中不同的同事共同开发一个项目,还有可能被要求修改已经离职人员开发的脚本,当然你自己也有可能会扔下一个项目给后来的同事。

    1. Html 文件的通用模板:

    <html>
    <!--
    Generator: Sub Design Studio ( www.eastline.net.cn)
    Creation Data: 2000-8-1
    Original Author: eastline
    -->
    <head>
    <title> 文档标题 </title>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <meta name="author" content="eastline">

    其他meta 标 记

    <link rel="stylesheet" type="text/css" href="style/style.css">

    样式表定义
    客户端javascript 函数定义及初始化操作

    </head>
    <body bgcolor="#ffffff">
    … …
    </body>

    补充:
    为了保证网站能够与下一代的web 语言xml 标准兼容,所有的HTML 标签的属性都要用单引号或者双引号括起,即我们应该写 <a href=”url”> 而不 是 <a href=url>.

    2. 允许全文检索的页面,为了使Internet上的搜索引擎能够有效检索,在频道的首页的html的<head></head>之间应该加入Keywords 和Description 元标记,例如 :

    <meta name=”keywords” content=”东方新干线,汽车,买车”>
    <meta name=”description” content=”东方新干劲线,全球中文汽车信息第一站”>

    3. CSS 文件的格式样例代码 :

    <style type="text/css">
    <!—
    p { text-indent: 2em; }
    body { font-family: "宋体"; font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}
    table { font-family: "宋体"; font-size: 9pt; line-height: 20px; color: #000000}
    a:link { font-size: 9pt; color: #FFFFFF; text-decoration: none}
    a:visited { font-size: 9pt; color: #99FFFF; text-decoration: none}
    a:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
    a:active { font-size: 9pt; color: #FF9900; text-decoration: none}
    a.1:link { font-size: 9pt; color: #3366cc; text-decoration: none}
    a.1:visited { font-size: 9pt; color: #3366cc; text-decoration: none}
    a.1:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
    a.1:active { font-size: 9pt; color: #FF9922; text-decoration: none}
    .blue { font-family: "宋体"; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}
    -->
    </style>

    这里尤其要注意的是a:link a:visited a:hover a:actived 的排列顺序一定要严格照上面的样例代码,否则或多或少会出问题。另外我们规定重定义的最先,伪类其次,自定义最后,便于自己和他人阅读!

    为了保证不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12px 和14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7px 的字号比较合适。

    在写 <table> 互相嵌套时,严格按照的规范,对于单独的一个<table>来说,<table><tr>对齐,<td> 缩进两个半角空格,<td> 中如果还有嵌套的表格,<table>也缩进两个半角空格,如果<td>中没有任何嵌套的表格,</td> 结束标记应该与 <td> 处于同一行,不要换行,

    如我们注意在源代码中不应有这样的代码:

    <td><img src=”../images/sample.gif”>
    </td>

    而应该是这样的:

    <td><img src=”../images/sample.gif”></td>

    这是因为浏览器认为换行相当于一个半角空格,以上不规范的写法相当于无意中增加一个半角空格,如果确实有必要增加一个半角空格,也应该这样写:

    <td><img src=”../images/sample.gif”> </td>

    属于同一个级别 的 <table> 一定是左首对齐的,另外不允许没有任何内容的空的单元格存在,高度大于等于12px 的单元格应该 在 <td> 和 </td> 之间写一个如果高度小于12px, 则应该 在 <td> 和 </td> 之间插入一个1*1 大小的透明的gif 图片,这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱,在DW3中可以通过command->apply souce formatting进行重新整理!

    5. Width 和height 的写法也有统一的规范,一般情况下只有一列的表格,width 写在<table> 的标签内,只有一行的表格,height 写在 <table> 的标签内,多行多列的表格,width 和height 写在第一行或者第一列的 <td> 标签内。总之遵循一条原则:不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的,也就是你改动代码中任何一个width 和height 的数值,都应该在浏览器中看到变化。做到这一条不容易,需要较长时间的练习和思考。

    /一 般 原 则

    1. 在排布表格之前,请大家一定要好好思考一个最佳的方案,表格的嵌套尽量控制在三层以内,并且应该尽量避免 <colspan> <rowspan> 两个标记,经验表明,这两个标记会带来许多麻烦。

    2. 一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。如果必须这样做,请使用 <tbody>标记,以便能够使这个大表格分块显示。

    3. 排版中我们经常会遇到需要进行首行缩进的处理,不要使用 或者全角空格来达到效果,规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记,注意,一般情况下,请不要省略 </p> 结束标记 。

    4. 原则上,我们禁止用 <img width=? height=?> 来人为干预图片显示的尺寸,而且建议 <img> 标签中不要带上width 和height 两个属性,这是因为制作过程中,图片往往需要反复的修改,这样可以避免人为干预图片显示的尺寸,尽可能的发挥浏览器自身的功能;但是这样的一个副作用是当网页还未加载图片时,不会留出图片的站位大小,可能会造成网页在加载过程中抖动(如果图片是插在一个固定大小的表格里的,不会有这个现象),尤其是当图片的尺寸较大时,这种现象会很明显,所以当预料到这种会明显导致网页抖动的情况会发生时,请大家务必在最后给 <img>附上 width 和 height 属性。

    5. 为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用<br> 来人工干预分段。

    6. 不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。

    7. 所有的字号都应该用样式表来实现,禁止在页面中出现 <font size=?> 标记。

    8. 请不要在网页中连续出现多于一个的也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。

    9. 中英文混排时,我们尽可能的将英文和数字定义为verdana 和arial 两种字体。

    10. 行距建议用百分比来定义,常用的两个行距的值是line-height:120%/150%.

    11. 网站中的路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,如我们不必这样:<a href=”aboutus/index.htm”> 而应该这样:<a href=”aboutus/”>

    12. 嵌入图形文本的使用较大的字体,建议不要在图形中包括文本。

    13.“网页大小”定义为网页的所有文件大小的总和,包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户,网页大小保持在34K以下为合适。

    /文 件 命 名 原 则

    1. 每一个目录中应该包含一个缺省的html 文件,文件名统一用index.htm

    2.件名称统一用小写的英文字母、数字和下划线的组合。

    3. 命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。

    4. 下面以“新闻”(包含“国内新闻”和“国际新闻”)这个栏目来说明html 文件的命名原则 :

    ☆ 在根目录下开设news目 录

    ☆ 第一条缺省新闻取名index.htm

    ☆ 所有属于“国内新闻”的新闻依次取名为:china_1.htm, china_2.htm, …

    ☆ 所有属于“国际新闻”的新闻依次取名为:internation_1.htm, internation _2.htm, …

    ☆ 如果文件的数量是两位数,请将前九个文件命名为:china_01.htm, china_02.htm 以保证所有

    标签:css+html学习 | 浏览数(6359) | 评论数(2) | 2006-10-26
    中文排版CSS心得  

    摘自勤能补拙是良训,一分辛劳一份才

     

    数月来学习web标准,并遵循标准设计和制作web页面。一直想写点什么,整理一下自己的心得体会。写这篇文章,主要是针对中文排版设计,英文排版因为很少做,所以不涉及。

    先介绍如何设定字体、颜色、大小、段落空白等比较简单的应用,后面再介绍下比如首字下沉、首行缩进。最后讲一些常用的web页面中文排版,比如中文字的截断、固定宽度词内折行(word-wrap和word-break)等等。因为只是写一些应用方面的心得,如果需要完整的CSS属性介绍,请参考CSS手册。

    1、如何设定文字字体、颜色、大小 —— 使用font

    font-style设定斜体,比如font-style: italic;
    font-weight设定文字粗细,比如font-weight: bold;
    font-size设定文字大小,比如font-size: 12px;(或者9pt,不同单位显示问题参考CSS手册)
    line-height设定行距,比如line-height: 150%;
    color设定文字颜色(注意不是font-color),比如color: red;
    font-family设定字体,比如font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;(这是通用的写法)

    以上都可以写在一行font属性里(除了color属性需要单独写):
    font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;

    2、如何控制段落排版 —— 使用margin,text-align

    中文段落使用<p>标签,左右(相当于缩进)、段前段后的空白,都可以用margin。比如:
    p{
     margin: 18px 6px 6px 18px; /*分别是上、右、下、左,十二点开始的顺时针方向*/
    }
    文字的对齐方式用text-align,比如:
    p{
     text-align: center;  /*居中对齐*/
    }
    对齐方式还有left、right和justify(两端对齐)

    PS.谈起margin,我习惯于在写CSS的时候为所有的标签定义margin: 0; 因为时而出现由于默认的margin值导致页面排版问题,而自己找不到原因(特别注意的是ul/ol/p/dt/dd等标签)

    3、竖排文字 —— 使用writing-mode

    writing-mode属性有两个值lr-tb和tb-rl,前者是默认的左-右、上-下,后者是上-下、右-左。
    比如:
    p{
     writing-mode: tb-rl;
    }
    可以结合direction排版。

    4、项目符号的问题 —— 使用list-style

    在CSS里项目符号有disc(实心圆点)、circle(空心圆圈)、square(实心方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无)。比如设定一个列表(ul或ol)的项目符号为方块,如:
    li{
     list-style: square;
    }
    另外list-style还有一些值,比如可以采用一些小图片作为项目符号,在list-style下直接写url(“图片地址”)就可以了。注意如果一个项目列表的左外补丁(margin-left)设为零的时候,list-style-position: outside(默认是outside)的项目符号不会显示。可惜的是上述的项目符号似乎并不能设定大小,圆点和方块始终是那么点。并且不能设定垂直方向上的对齐。

    5、首字下沉 —— 使用:first-letter

    伪对象:first-letter配合font-size、float可以制作首字下沉效果。
    比如:
    p:first-letter{
     padding: 6px;
     font-size: 32pt;
     float: left;
    }

    6、首行缩进 —— 使用text-indent

    text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。可以这么写:
    p{
     text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/
    }
    如果font-size是12px的话,那么text-indent: 2em则缩进24px。

    7、关于汉字注音 —— 使用ruby标签和ruby-align属性

    比如说<ruby>注音<rt style="font-size: 11px;">zhu yin</rt></ruby>,可以利用ruby-align设置对齐方式。这是在CSS手册里面看到的,具体可以自行查阅ruby-align项。

    8、固定宽度汉字截断 —— 使用text-overflow

    用后台语言可以对从数据库里的字段内容做截断处理,比如说截12个汉字(之后用省略号)。但是有时还需要html标签的过滤等,而用CSS来控制则没有这个问题。比如对列表应用以下样式:
    li{
     overflow:hidden;
     text-overflow:ellipsis;
     white-space:nowrap;
    }
    不过只能处理文字在一行上的截断,不能处理多行。

    9、固定宽度汉字(词)折行 —— 使用word-break

    举个例子,比如说要在一个固定宽度容器里面显示很多地名(假设以空格分隔),为了避免地名中间断开(即一个字在上面而另一个字折断到下一行去了)。则可以使用word-break。比如:
    <div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
    南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京上海南京上海 南京上海 上海 南京上海 上海
    </div>
    值得注意的是里面的空格不能以&nbsp;代替(最少要有一个软空格)。

    标签:css+html学习 | 浏览数(5777) | 评论数(1) | 2006-10-26
    CSS手册(简单了解)  

     
    W3CThe World Wide Web Consortium)制定了代号为CougarHTML4.0版本以来,存在在Web页面中的动态效果首次被正式的承认了,W3C把动态超文本(Dynamic HTML)的实现分为了三个部分:脚本、支持动态效果的浏览器和CSS。前两者也许你经常用到,但CSS是什么或许你并不清楚,如果有过制作Web页面的经历,你可能听说过样式单或风格单,如果对此你亦无耳闻,不要紧,只要你想制作出具有更多新特性的 Web页,本文将同样适合于你。(请使用IE4或IE5对CSS手册中的属性实例进行验证)

    一、什么是CSS

    CSSCascading Style Sheet的缩写,有些书上把它译为"层叠样式单""级联样式单"(下文简称"样式单"),在1997W3C颁布HTML4标准的同时也公布了有关样式单的第一个标准CSS1。样式单是对以前的HTML3.2以前的HTML版本)语法的一次重大革新,以前的HTML版本中,各种功能的实现是通过标记元素实现的,这也造成了各个浏览器厂商为了标新立意创建各种只有自家支持的标记,各种标记互相嵌套,就可以达到不同的效果,比如要在一段文字中把一部分文字变成红色, HTML3.2中应该是这样的:

    <p><font color=red>这里显示红色字</font></p>

    而在样式单中,把某些标记(如上例中的"font"标记)属性化,利用样式单,上例可以变成:

    <p style="color:red">这里显示红色字</p>

    这就是样式单的全部功能吗?远远不是!前面说过样式单是DHTML的一部分,建立样式单的真正意义在于把对象真正引入了HTML,使得可以使用脚本程序(如JavascriptVBScript)调用对象属性,并且可以改变对象属性,达到动态的目的,这在以前的HTML中是无法实现的,如果你使用过如VB等面向对象的编程工具,你会更快的发现,用样式单做DHTML是多么容易。样式单的另一项贡献是简化了HTML中各种繁琐的标记,使得各个标记的属性更具有一般性和通用性,并且样式单扩展了原先的标记功能,能够实现更多的效果,样式单甚至超越了 Web页面的本身显示功能,而把样式扩展到多种媒体上,显示了难以抗拒的魅力。

    样式单自从CSS1的版本之后,又在19985月发布了CSS2版本,样式单得到了更多的充实。Internet Explorer4Netscape Navigator4都宣传支持样式单,但从各方面来看IE4的效果都要超过NE4,这是因为IE4NE4Javascript文档模型(DOM)不同而造成的,从表面看,二者的模型区别不大,但实质上却是大相径庭,IE4的模型能够更加容易的把动态效果引入Web页面,虽然现在IE4的模型只有微软自己支持,但它却已被清楚的写入了W3CDHTML标准;而NE4的样式单并不能通过脚本调用对象的属性,说的不好听一点,它的样式单只是徒有其表罢了。( Netscape公司自己开发了一种样式单称作JSSS,它利用Javascript来定义样式,但是并没有得到W3C的承认。)

    二、进一步了解样式单

    Cascading Style Sheet中的Cascading"层叠"的意思,也就是说在同一个Web文档中可以有多个样式单存在,这些样式单根据所在的位置,拥有不同的优先级,优先级越高,就会被最后在显示时采用。从样式单插入的形式来看可以分为三种:

    • 内联式样式单:它利于现有的HTML标记,把特殊的样式加入到那些由标记控制的信息中,比如刚才的例子。

    • 嵌入式样式单:它和Javascript一样可以嵌入到HTML文件的头部中去(<html><body>标记之间),使用<Style></Style>容器装载,例如:"<style> p {color : red ; font-weight : bold} </style>",这样会对页面中所有<p>标记都起作用。

    • 外部式样式单:是一种保存在外部的样式单文件,外部文件以 .CSS为扩展名,例如"<link rel=stylesheet href="main-sheet.css" type="text/css">"

    在应用时可以根据需要随意运用以上三种方式,但在实际中内联式样式单和嵌入式样式单使用得更多一些。

    三、样式单的语法特征

    样式单有自己独特的书写方法,掌握了它的语法特征,再了解它的各种属性,那么你会发现在Web页面中运用样式单会是多么轻松。例如有一个最简单的HTML文档:

    <html>
    <body>
      <p>Text goes here
    <p>
    </body>
    </html>

    我们可以用嵌入式样式单规定样式。

    <html>
    <style>
    <!--
      p {color:red; font-weight : bold}
    - ->
    </style>
    <body>
      <p>
    这里显示红色字</p>
    </bdoy>
    </html>

    可以看到,在这个文档里,多了"Style"标记,之间用<!-- ……… - ->注释,以防止不能识别样式单的低版本浏览器把样式单当作内容显示出来,然后是关键的一句:

    p {color:redfont-weight : bold }

    这整行称为一个声明(Statement),在样式单中,声明分为两种,一种是象这样的,叫做"rule set",另一种则称为"at-rule"

    At-rule"@"作为关键字,放在元素的最前面,at-rule通常用来对媒体(Media)的声明,并且如果对同一个at-rule进行声明,那么只有位置靠前的会起到作用,如:

    @import "subs.css"
    H1
    @import "list.css"

    后一个At-Rule无效。

    rule set就象我们前面看到的样子了,它由几个部分组成,其中包括选择器、属性和属性值。一般的书写是这样的:

    Selector1 {property1:value1; property2:value2;……}
    Selector2 {
    ……}

    其中刚才例子中的"P"代表段落标记元素,为选择器,"{}"为一个块(Block),表示对标记属性的声明(Declaration),有多个属性的时候使用";"隔开,属性在样式单中的一般表示方法是前面是一类属性的名称,后面是具体属性的名称,中间用 "-"隔开,而在脚本中使用属性的时候,则把"-"去掉,并把第二部分的开头字母大写。属性值的表示可以使用10进制,16进制数值(如#FFFFFF),百分数(如100%),字符串,URL(如url(http://www.mysite.com))和RGB(如rgb(255,255,255))等多种方式表示。下面我将对其中的重点部分进行更详细的解释。



    1
    、选择器(Selector

    选择器不只是文档中的元素标记,它还可以是类(Class,这不同于JavaC++中的类)、ID(给予元素特殊的名称,也便于在脚本中使用)或是元素的某种状态(如:a:link)。如:

    <html>
    <style>
    <!--
    p {color:red
    font-weight : bold }
    .bigFont
    #blueBack
    -->
    </style>
    <body>
    <p>
    利用<span class="bigFont">Class</span><span id="blueBack">ID</span>显示内容。</p>
    </body>
    </html>

    其中.someclass代表类,#someID代表ID。类和ID也可以和元素标记合用,比如:

    p.bigFont {……}

    则表示必须在某个为bigFont类的P标记(<p class="bigFont">)才执行样式单,同样的也适合于ID
    为了简化声明某些重复属性的标记,可以用","把不同的选择器隔开,表示它们都表示成相同的属性,如:

    H1,H2
    Div, p.mytext {
    ……}

    有时我们还希望能够在特定的范围内使样式单生效:

    p em

    元素标记间又空格隔开,表示在<p></p>间的<em><em>用红色表示。另外还可以利用"~"表示一个选择器后面紧跟另一个选择器,并且两边以"/"围住:

    / Selector1 ~ Selector2/ {……}

    表示如果Selector2紧跟着Selector1则使用该样式单。

    2、属性值的单位

    在样式单中,属性的单位多为长度单位,包括px(象素)、pt(磅)、em(一种排版中的单位,1em12pt)、mm(毫米)、cm(厘米)、pc1pc12pt)、in(英寸),这些单位可以使用整数(如px)表示,也可以使用实数(如em)表示,并且元素中对数值还有继承(inherit)的关系比如:

    body
    H1

    那么在显示中H1text-indent属性就不是36pt而是45pt

    有的属性的单位甚至可以是负值,如margin,可以达到一些特殊的效果,如元素之间的重叠。另外还有一些其他的单位如角度,它的单位有 deg(度)、grad(梯度)和rad(弧度);频率的单位,HzkHz,这些都是我们非常熟悉的。

    3、注释及空格

    样式单也有注释语句:可以用"/*……*/"作为注释标记,在浏览器中有一个对样式单的分析器,它负责对样式单的检查,分析器将忽略注释标记之间的内容。空格在样式单中是有效的,如果字符之间有超过一个空格存在,它将省略其余空格,而只保留一个,特别是在声明某些字体的时候,空格一定不能省略。

    2 要注意的方面

    首先,样式单是区分大小写的,所以要注意拼写;其次对于CSS2未声明的属性和方法,样式单的分析器会忽略它的存在,如:

    H1 ,H2
    H3 ,H4 & H5
    P {color:blue ;font-variant:small-caps}

    其中"&"是样式单中没有的标号,第二行整个被分析器略过,第三行中的font-variant不是一个合法属性,也被略过("color:blue"有效)。

    了解了以上规则,你就已经对样式单入门了,下面将详细介绍样式单的各种属性及属性值。



    CSS
    属性:

    1、媒体(Media)类型

    样式单的一个最重要的特点就是它可以作用于多种媒体,比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体,如 "font-size"属性只对可卷动的媒体类型有效(屏幕)。

    声明一个媒体属性可以用@import@media引入:

    @import url(loudvoice.css) speech;
    @media print {
    /* style sheet for print goes here */
    }

    也可以在文档标记中引入媒体:

    <LINK rel="stylesheet" type="text/css" media="print" href="foo.css">

    可以看出,@import@media的区别在于,前者引入外部的样式单用于媒体类型,后者直接引入媒体属性。@import的使用方法是@import加样式单文件的URL地址再加媒体类型,可以多个媒体共用一个样式单,媒体类型之间用""分割符分开。@media用法则是把媒体类型放在前面,其他规则和rule-set基本一样。下面列出各种媒体类型:

    SCREEN:指计算机屏幕。
    PRINT:指用于打印机的不透明介质。
    PROJECTION:指用于显示的项目。
    BRAILLE:盲文系统,指有触觉效果的印刷品。
    AURAL:指语音电子合成器。
    TV:指电视类型的媒体。
    HANDHELD:指手持式显示设备(小屏幕,单色)
    ALL:适合于所有媒体。

    CSS属性:

    2BOX模型(BOX Model)属性

    什么是BOXCSSHTML中以<somesign>……</somesign>的部分称为BOX(容器),BOX有三类属性:paddingmarginborder

    Margin属性:

    Margin属性分为margin-topmargin-rightmargin-bottommargin-leftmargin五个属性,分别表示BOX里内容离边框的距离,它的属性值是数值单位,可以是长度、百分比或automargin甚至可以设为负值,造成BOXBOX之间的重叠显示,关于margin的属性详见下表:

    属性名称: 'margin-top''margin-right''margin-bottom''margin-left'
    属性值: <margin-width>
    初始值: 0
    适合对象: 所有元素
    是否继承: no
    百分比备注: 相对于BOX的宽度

    例如:

    H1 { margin-top: 2em }
    H2 { margin-right: 12.3% }

    Margin还有一个快捷的书写方法,就是直接用margin属性,例如:

    BODY { margin: 1em 2em 3em 2em}

    等同于:

    BODY {
    margin-top:1em;
    margin-right:2em;
    margin-bottom:3em;
    margin-left:2em;
    }

    margin属性后面可以有四个值,中间用空格隔开(记住不是逗号),顺序是"上右下左",当然margin后面可以不足四个值,例如:

    BODY { margin: 2em } /* 所有的margin都设为2em */
    BODY { margin: 1em 2em } /*
    上下margin1em,右左margin2em */
    BODY { margin: 1em 2em 3em } /*
    margin1em,右左margin2em,下margin3em*/

    Padding属性:

    Padding属性用来描述BOX的边框和内容之间插入多少空间,和margin属性类似,它也分为上右下左和一个快捷方式padding,关于padding的属性详见下表:

    属性名称: 'padding-top''padding-right''padding-bottom''padding-left''padding'
    属性值: <padding-width>
    初始值: 0
    适合对象: 所有元素
    是否继承: no
    百分比备注: 相对于BOX的宽度

    例如:

    BLOCKQUOTE { padding-top: 0.3em }

    padding属性和margin类似此处略去。

    Border属性:

    平时我们在查看HTML文档时,看到一段文字,并不会把它当作一个BOX,实际上BOX是有边框的,只是平时不显示出来罢了,而border属性就是用来描述BOX边框的。Border属性分为border-widthborder-colorborder-style,而这些属性下面又有分支。

    border-width属性:

    border-width属性又分为:border-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-width属性,border-width用长度表示为"thin/medium/thick"或长度单位表示,下面是border-width属性的详细列表:

    属性名称: 'border-top-width''border-right-width''border-bottom-width''border-left-width''border-width'
    属性值: <border-width>
    初始值: medium
    适合对象: 所有元素
    是否继承: no
    百分比备注: 被禁止

    border-width为快捷方式,顺序为上右下左,值之间用空格隔开。

    border-color属性:

    border-color属性用来显示BOX边框颜色,分为border-top-colorborder-right-colorborder-bottom-colorborder-right-colorborder-color属性,属性值为颜色,可以用十六进制表示,也可用 rgb()表示,属性见下:
    属性名称: 'border-top-color''border-right-color''border-bottom-color''border-left-color'
    'border-color'

    属性值: <color>
    初始值: 元素颜色的初始值
    适合对象: 所有元素
    是否继承: no
    百分比备注: 被禁止

    border-color为快捷方式,顺序为上右下左,值之间用空格隔开。

    border-style属性:

    border-style属性用来设置BOX对象边框的样式,它的属性值为CSS规定的关键字,平常看不到border是因为,初始值是none的缘故。属性见下:

    属性名称: 'border-top-style''border-right-style''border-bottom-style''border-left-style''border-style'
    属性值: <border-style>
    初始值: none
    适合对象: 所有元素
    是否继承: no
    百分比备注: 被禁止

    border-color为快捷方式,顺序为上右下左,值之间用空格隔开。

    属性值的名称和代表意义如下:

    none:无边框。
    dotted:边框为点线。
    dashed:边框为长短线。
    solid:边框为实线。
    double:边框为双线。
    grooveridgeinsetoutset:显示不同效果的3D边框(根据color属性)。

    border属性:

    border属性为Border的快捷方式,属性值间用空格隔开,顺序是"边框宽度 边框样式 边框颜色",例如:

    <h1 style="border:.5em outset red">hello!</h1>

    还可以用border-topborder-rightborder-bottomborder-left分别作为上右下左的快捷方式,属性值顺序同border属性。


    CSS属性:

    3、布局(Layout)属性:

    在以前的HTML里,元素的位置只能靠元素的依次排列觉得,而在CSS里你可以更精确的定位元素。Netscape曾提出过Layer标记,它对于精确布局很有好处,但是并没有被W3C承认,W3CCSS提出了类似于Layer标记的功能。

    position属性:

    position属性用来决定元素的位置类型,详见属性:

    属性名称: 'position'
    属性值: absolute | relative | static
    初始值: static
    适合对象: 所有元素
    是否继承: no
    百分比备注: 被禁止
    其属性值分别代表:
    absolute:屏幕上的绝对位置。
    relative:屏幕上的相对位置。
    static:固有位置。


    direction属性:

    direction属性决定BOX的排列方向,详见属性:

    属性名称: 'direction'
    属性值: ltr| rtl
    初始值: ltr
    适合对象: 所有元素
    是否继承: yes
    百分比备注: 被禁止


    floatclear属性:

    HTML中图片可以选择飘浮的位置,现在BOX对象通过CSS对于也可以选择飘浮的位置。改变BOXfloat属性,BOX将飘浮在其他元素的左或右方:

    属性名称: 'float'
    属性值: left| right|none
    初始值: none
    适合对象: 所有元素
    是否继承: no
    百分比备注: 被禁止

    例如:

    <STYLE type="text/css">
    IMG { float: left }
    BODY, P, IMG { margin: 2em }
    </STYLE>
    <BODY>
    <P>
    <IMG src=img.gif>
    Some sample text that has no other...
    </BODY>

    相反的,使用clear属性将禁止元素在BOX的左方或右方飘浮:

    属性名称: 'clear'
    属性值: left| right|both|none
    初始值: none
    适合对象: 所有元素
    是否继承: no
    百分比备注: 被禁止


    绝对位置属性:

    绝对位置属性有四个属性:toprightbottomleft,属性值为长度单位或百分数:

    属性名称: 'top''right''bottom''left'
    属性值: <length>|<percentage>|auto
    初始值: none
    适合对象: 所有元素
    是否继承: no
    百分比备注: 被禁止

    利用以上属性,用户就可以精确定义元素的位置,如:

    <P style="position: relative; margin-right: 10px; left: 10px;">
    I used two red hyphens to serve as a change bar. They
    will "float" to the left of the line containing THIS
    <SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN>
    word.</P>

    z-index属性:

    CSS中允许元素的重叠显示,这样就有一个显示顺序的问题,z-index属性描述了元素的前后位置,如果把电脑屏幕看作X-Y平面的话,那么Z轴就是垂直于屏幕的,z-index使用整数表示元素的前后位置,数值越大,就会显示在相对靠前的位置,并且CSS同意在z-index中使用负数。

    属性名称: 'z-index'
    属性值: auto|<integer>
    初始值: auto
    适合对象: 使用position属性的元素
    是否继承: no
    百分比备注: 被禁止


    width属性:

    规定BOXwidth属性,可以使BOX的宽度不依靠它所包含的内容的多少:

    属性名称: 'width'
    属性值: <length> | <percentage> | auto
    初始值: auto
    适合对象: 块元素
    是否继承: no
    百分比备注:根据父元素的width而定

    CSS中还提供了min-widthmax-width属性,使得BOX的宽度在最小宽度和最大宽度之间。

    属性名称: 'min-width'
    属性值: <length> | <percentage>
    初始值: 0
    适合对象: all
    是否继承: no
    百分比备注:根据父元素的width而定

    属性名称: 'max-width'
    属性值: <length> | <percentage>
    初始值: 100%
    适合对象: all
    是否继承: no
    百分比备注:根据父元素的width而定

    height属性:

    相同的BOX还有height属性来控制本身的高度:

    属性名称: 'height'
    属性值: <length> | <percentage> | auto
    初始值: auto
    适合对象: 块元素
    是否继承: no
    百分比备注:根据父元素的height而定

    CSS中还提供了min-heightmax-height属性,使得BOX的高度在最小高度和最大高度之间。

    属性名称: 'min-height'
    属性值: <length> | <percentage>
    初始值: 0
    适合对象: all
    是否继承: no
    百分比备注:根据父元素的height而定

    属性名称: 'max-height'
    属性值: <length> | <percentage>
    初始值: 100%
    适合对象: all
    是否继承: no
    百分比备注:根据父元素的height而定


    overflow属性:

    在规定元素的宽度和高度时,如果元素的面积不足以显示全部内容的话就要用到overflow属性:

    属性名称: 'overflow'
    属性值: visible | hidden | scroll | auto
    初始值: visible
    适合对象: 元素的position属性
    是否继承: no
    百分比备注: 被禁止

    属性值含义如下:

    visible:扩大面积以显示所有内容。
    hidden:隐藏超出范围的内容。
    scroll:在元素的右边显示一个滚动条。
    auto:当内容超出元素面积时,显示滚动条。

    clip属性:

    CSS还提供了一种clip属性,可以把元素区域剪切成各种形状,但目前提供的只有方形一种:

    属性名称: 'clip'
    属性值: <shape> | auto
    初始值: auto
    适合元素: 元素的position属性被设为absolute
    是否继承: no
    百分比备注: 被禁止

    <shape>值为rect(top right bottom left)

    line-heightvertical-align属性:

    line-height属性可以规定元素内部的行间距,使用长度单位或百分数:

    属性名称: 'line-height'
    属性值: normal | <number> | <length> | <percentage>
    初始值: normal
    适合对象: 所有元素
    是否继承: yes
    百分比备注:根据元素的字体大小而定

    例如下面的例子,虽然表达方式不同,但结果一样:

    DIV { line-height: 1.2; font-size: 10pt }
    DIV { line-height: 1.2em; font-size: 10pt }
    DIV { line-height: 120%; font-size: 10pt }

    vertical-align属性决定元素在垂直位置的显示:

    属性名称: 'vertical-align'
    属性值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
    初始值: baseline
    适合对象: inline elements
    适合继承: no
    百分比备注: 根据元素的line-height属性而定

    属性值含义如下:
    baseline:与元素的基线对齐。
    middle:与元素中部对齐。
    sub:字下沉。
    super:字上升。
    text-top:文本顶部对齐。
    text-bottom:文本底部对齐。
    Top:和本行位置最高元素对齐。
    Bottom:和本行位置最低元素对齐。

    Visibility属性:

    该属性用于控制元素的显示或隐藏:

    属性名称: 'visibility'
    属性值: inherit | visible | hidden
    初始值: inherit
    适合对象: 所有元素
    是否继承: 如果该值为inherit,则继承父元素属性
    百分比备注: 被禁止



    CSS属性:

    4、颜色和背景(Color and Background)属性:

    这里介绍有关CSS中前景色和背景颜色、图片的设定方法。

    color属性:

    color属性用于设定元素的前景色:

    属性名称: 'color'
    属性值: <color>
    初始值: 根据用户的初始值而定
    适合对象: 所有元素
    是否继承: yes
    百分比备注: 被禁止

    color属性的值可以是十六进制数值、rgb()函数或CSS承认的颜色名称。如:

    EM { color: red }
    EM { color: rgb(255,0,0) }

    背景属性:

    background-color属性用于设定背景色,初始值为透明:

    属性名称: 'background-color'
    属性值: <color> | transparent
    初始值: transparent
    适合对象: 所有元素
    是否继承: no
    百分比备注: 被禁止


    backgroud-image属性用于设定背景的图片:

    属性名称: 'background-image'
    属性值: <url> | none
    初始值: none
    适合对象: 所有元素
    是否继承: no
    百分比备注: 被禁止

    其中url可以为绝对地址,也可以是相对地址,例如:

    BODY { background-image: url(marble.gif) }
    P { background-image: none }

    以上两个属性利用普通的HTML属性也可以实现,下面的属性是CSS对原有HTML的扩展。
    background-repeat属性用来描述背景图片的重复排列方式:

    属性名称: 'background-repeat'
    属性值: repeat | repeat-x | repeat-y | no-repeat
    初始值: repeat
    适合对象: 所有元素
    是否继承: no
    百分比备注: 被禁止

    其中属性值的含义为:
    repeat:沿X轴和Y轴两个方向重复显示图片。
    repeat-x:沿X轴方向重复图片。
    repeat-y:沿Y轴方向重复图片。
    none:不重复图片。

    例如:

    BODY {
    background: red url(pendant.gif);
    background-repeat: repeat-y;
    }
    /*
    表示沿Y轴重复图片"pendant.gif",其余部分以红色为背景色*/

    background-attachment属性表示在滚动整个文档时,背景图片的显示方式。它的属性值有两种: fixedscrollfixed相当于IE4里的水印效果,也就是说在拖动文档时,背景相对是静止的,scroll则和文档一起滚动。

    background-position属性用来指定背景图片显示的位置:

    属性名称: 'background-position'
    属性值: [<percentage> | <length> ] | [top | center | bottom] || [left | center | right]
    初始值: 0% 0%
    适合对象: 容器元素
    是否继承: no
    百分比备注
    : refer to the size of the element itself

    其中属性值含义为:
    "top left""left top"表示"0% 0%"
    "top""top center""center top"表示"50% 0%"
    "right top""top right"都表示"100% 0%"
    "left""left center""center left"表示"0% 50%"
    "center""center center"表示"50% 50%"
    "right""right center""center right"都表示"100% 50%"
    "bottom left""left bottom"表示"0% 100%"
    "bottom""bottom center""center bottom"都表示"50% 100%"
    "bottom right"
    "right bottom"表示"100% 100%"
    例如:

    BODY { background: url(banner.jpeg) right top } /* 100% 0% */
    BODY { background: url(banner.jpeg) top center } /* 50% 0% */
    BODY { background: url(banner.jpeg) center } /* 50% 50% */
    BODY { background: url(banner.jpeg) bottom } /* 50% 100% */

    background属性是以上背景属性的快捷方式,属性和顺序如下:

    属性名称: 'background'
    属性值: <'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>
    适合对象: 所有元素
    是否继承: no
    百分比备注: 只在background-position中容许使用


    CSS属性:

    5、字体(Font)属性:

    这里定义了关于字体的各种属性。

    font-family属性定义字体的名称,可以是一个字体的名称,也可以是一类字体的名称,字体的名称一定要和计算机系统里的完全一样:

    属性名称: 'font-family'
    属性值: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>]
    初始值: 根据用户定义而定
    适合对象: 所有元素
    是否继承: yes
    百分比备注: 被禁止

    有些计算机系统里如果没有样式单要求的字体,可以再设一个次字体以备万一。例如:

    BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }

    family-name是指确定的某字体,如Heisi Mincho W3generic-family指某一类字体,如serif

    font-style属性描述字体的倾斜程度:

    属性名称: 'font-style'
    属性值: normal | italic | oblique
    初始值: normal
    适合对象: 所有元素
    是否继承: yes
    百分比备注: 被禁止


    font-variant属性:

    属性名称: 'font-variant'
    属性值: normal | small-caps
    初始值: normal
    适合对象: 所有元素
    是否继承: yes
    百分比备注: 被禁止

    一个使用了small-caps属性的元素中的小写字母看起来要比正常的大写字母小一些。

    font-weight属性用来描述字重。

    属性名称: 'font-weight'
    属性值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
    初始值: normal
    适合对象: 所有元素
    是否继承: yes
    百分比备注: 被禁止

    100900代表9种不同的字重,400代表normal700代表bold900是最重的字体,bolderlighter表示字体的字重比父元素高或低一级,比如父元素字重为400,则bolder代表字重500,如果父元素本身字重为900,那么bolder后,字重还是900,同样的lighter也一样。有些字体并没有100900那么全的字重,也许是从300700,那么字重的最小和最大值也为300700。例如:

    P { font-weight: normal } /* 400 */
    H1 { font-weight: 700 } /* bold */

    font-size属性描述字体的大小:

    属性名称: 'font-size'
    属性值: <absolute-size> | <relative-size> | <length> | <percentage>
    初始值: medium
    适合对象: 所有元素
    是否继承: yes
    百分比备注: relative to parent element's font size

    该属性可以使用绝对大小,也可以使用相对大小,其中绝对大小可以使用,如下关键字表示:

    xx-small | x-small | small | medium | large | x-large | xx-large 分别代表最小、较小、小、中等、大、较大和最大。相对大小可以使用:largersmaller描述。例如:

    P { font-size: 12pt; }
    BLOCKQUOTE { font-size: larger }
    EM { font-size: 150% }
    EM { font-size: 1.5em }

    Font属性是以上属性的快捷方式,属性如下:

    属性名称: 'font'
    属性值: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]
    适合对象: 所有元素
    是否继承: yes
    百分比备注: 只在font-size使用

    例如:

    P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif }
    P { font: x-large/110% "new century schoolbook", serif }
    P { font: bold italic large Palatino, serif }
    P { font: normal small-caps 120%/120% fantasy }

    CSS属性:

    6、文本(Text)属性:

    这里的属性将影响WEB文档中的文本显示情况。

    text-indent属性描述文本的缩进程度:

    属性名称: 'text-indent'
    属性值: <length> | <percentage>
    初始值: 0
    适合对象: 容器元素
    是否继承: yes
    百分比备注: 根据父元素的宽度而定

    下面的例子表明段落的缩进值为3em

    P { text-indent: 3em }

    Alignment属性表明文本的对齐方式:

    属性名称: 'alignment'
    属性值: left | right | center | justify
    初始值: 依照用户定义
    适合对象: block-level elements
    是否继承: yes
    百分比备注: 被禁止


    text-decoration属性描述对文本的修饰方法:

    属性名称: 'text-decoration'
    属性值: none | [ underline || overline || line-through || blink ]
    初始值: none
    适合对象: 所有元素
    是否继承: no (see clarification below)
    百分比备注: 被禁止

    属性值含义分别为:
    underline:下划线。
    overline:上划线。
    line-through:删除线。
    blink:闪烁(如同Navigator中的blink标记的功能)

    text-shadow属性可以为文本加入阴影的特效:

    属性名称: 'text-shadow'
    属性值: none | <color> [, <color> ]*
    初始值: none
    适合对象: all
    是否继承: No
    百分比备注: 只在描述透明度时有效

    例如:

    P { text-shadow: black }

    上例将在文本的右下方显示黑色阴影,另外阴影将增大BOX的面积。

    letter-spacing属性表明文本的字间距:属性名称: 'letter-spacing'

    属性值: normal | <length> | auto
    初始值: normal
    适合对象: 所有元素
    是否继承: yes
    百分比备注: 被禁止

    例如:

    BLOCKQUOTE { letter-spacing: 0.1em }

    word-spacing属性表明文本中单词间距:

    属性名称: 'word-spacing'
    属性值: normal | <length>
    初始值: normal
    适合对象: 所有元素
    是否继承: yes
    百分比备注: 被禁止

    例如:

    H1 { word-spacing: 1em }

    text-transform属性可以将BOX内的文本按指定的大写或小写形式显示:

    属性名称: 'text-transform'
    属性值: capitalize | uppercase | lowercase | none
    初始值: none
    适合对象: 所有元素
    是否继承: yes
    百分比备注: 被禁止

    属性值含义为:
    capitalize:把BOX中的每句句首字母变成大写。
    uppercase:把BOX中所有的字母变成大写。
    lowercase:把BOX中所有的字母变成小写。

    White-space属性描述如何显示文本中的空格,在HTML中,空格是被省略的,也就是说你在一个段落标记的开头无论输入多少个空格都是无效的,要输入空格有两个方法,一是直接输入空格的代码 "&nbsp;",或者使用<pre>标记,CSS中也制定了类似于pre的属性:

    属性名称: 'white-space'
    属性值: normal | pre | nowrap
    初始值: normal
    适合对象: 容器元素
    是否继承: yes
    百分比备注: 被禁止

    标签:css+html学习 | 浏览数(6964) | 评论数(0) | 2006-10-26
    div+css布局入门  

    这是在网页设计师上看到的一篇文章,很适合入门div+css布局的人看.

     

    收藏......


    你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习:

    第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。

    另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left"等等)束手无策,不知道该转换成对应的什么CSS语句。当你解决了第一种问题,知道了如何结构化你的HTML,我再给出一个列表,详细列出原来的表现属性用什么CSS来代替。

    结构化HTML
    我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。

    如果你希望你的HTML页面用CSS布局(是CSS-friendly的),你需要回头重来,先不考虑“外观”,要先思考你的页面内容的语义和结构。

    外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来,CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。

    HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义,显示在任何地方,任何网络设备上。

    开始思考
    首先要学习什么是"结构",一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块,以及每块内容服务的目的,然后再根据这些内容目的建立起相应的HTML结构。

    如果你坐下来仔细分析和规划你的页面结构,你可能得到类似这样的几块:

    标志和站点名称
    主页面内容
    站点导航(主菜单)
    子菜单
    搜索框
    功能区(例如购物车、收银台)
    页脚(版权和有关法律声明)
    我们通常采用DIV元素来将这些结构定义出来,类似这样:

    <div id="header"></div>

    <div id="content"></div>

    <div id="globalnav"></div>

    <div id="subnav"></div>

    <div id="search"></div>

    <div id="shop"></div>

    <div id="footer"></div>

    这不是布局,是结构。这是一个对内容块的语义说明。当你理解了你的结构,就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块,也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。

    根据上面讲述的,你已经知道如何结构化HTML,现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方,再指定这个块的颜色、字体、边框、背景以及对齐属性等等。

    使用选择器是件美妙的事
    id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全不同于#content里的图片规则。

    另外一个例子是:你可以通过不同规则来定义不同内容块里的链接样式。类似这样:#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如,通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲,你的页面是由图片、链接、列表、段落等组成的,这些元素本身并不会对显示在什么网络设备中(PDA还是手机或者网络电视)有影响,它们可以被定义为任何的表现外观。

    一个仔细结构化的HTML页面非常简单,每一个元素都被用于结构目的。当你想缩进一个段落,不需要使用blockquote标签,只要使用p标签,并对p加一个CSS的margin规则就可以实现缩进目的。p是结构化标签,margin是表现属性,前者属于HTML,后者属于CSS。(这就是结构于表现的相分离.)

    良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如,原先的代码<table width="80%" cellpadding="3" border="2" align="left">,现在可以只在HTML中写<table>,所有控制表现的东西都写到CSS中去,在结构化的HTML中,table就是表格,而不是其他什么(比如被用来布局和定位)。

    亲自实践一下结构化
    上面说的只是最基本的结构,实际应用中,你可以根据需要来调整内容块。常常会出现DIV嵌套的情况,你会看到"container"层中又有其它层,结构类似这样:

    <div id="navcontainer">

    <div id="globalnav">

    <ul>a list</ul>

    </div>

    <div id="subnav">

    <ul>another list</ul>

    </div>

    </div>

    嵌套的div元素允许你定义更多的CSS规则来控制表现,例如:你可以给#navcontainer一个规则让列表居右,再给#globalnav一个规则让列表居左,而给#subnav的list另一个完全不同的表现。

    用CSS替换传统方法
    下面的列表将帮助你用CSS替换传统方法:

    HTML属性以及相对应的CSS方法
    HTML属性 CSS方法 说明
    align="left"

    align="right" float: left;

    float: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等

    当你使用float属性,必须给这个浮动元素定义一个宽度。

    marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的,你可以分别指定元素的top, right, bottom和left的margin值。

    vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;

    a:visited: #339;

    a:hover: #999;

    a:active: #00f;
    在HTML中,链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器,页面不同部分的链接样式可以不一样。

    bgcolor="#FFFFFF" background-color: #fff; 在CSS中,任何元素都可以定义背景颜色,不仅仅局限于body和table元素。

    bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder),你可以分别定义top, right, bottom和left

    border="3"

    cellspacing="3" border-width: 3px; 用CSS,你可以定义table的边框为统一样式,也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。

    你可以使用 table, td or th 这些选择器.

    如果你需要设置无边框效果,可以使用CSS定义: border-collapse: collapse;

    <br clear="left">

    <br clear="right">

    <br clear="all">
    clear: left;

    clear: right;

    clear: both;
    许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片,你可以使用clear属性

    标签:css+html学习 | 浏览数(5814) | 评论数(0) | 2006-10-26
    国外几个WEB标准网站  

    xhtml

     

    xhtmlforum.de
    w3.org/QA/2002/04/valid-dtd-list.html
    puredesign.ch/lounge/artikel/doctype.shtml
    devmag.net/html/xhtml_einfuehrung.htm
    usegroup.de/software/xmltutorial/xhtml.html
    go4xml.com/xml/xhtml/intro.php
    jendryschik.de/wsdev/einfuehrung/
    weblehre.de/verfahren/xhtml.htm
    exine.de/xml/xhtml_einfuehrung.htm
    selfhtml.teamone.de/html/xhtml/modularisierung.htm

     

    Articles on doc types

     

    www.w3.org
    fabrice-pascal.de/artikel/dtd/
    devmag.net/html/html_dtd.htm
    selfhtml.teamone.de/html/allgemein/grundgeruest.htm#dokumenttyp
    w3.org/QA/2002/04/valid-dtd-list.html
    puredesign.ch/lounge/artikel/doctype.shtml

     

    Validation tools

     

    mac tidy =>versiontracker.com/dyn/moreinfo/mac/2677
    infohound.net/tidy/
    validator.w3.org/
    jigsaw.w3.org/css-validator

     

    Selectors

     

    chem.uni-potsdam.de/inet_kurs/css/css-4.html
    mediaevent.de/artikel/positionieren2.html
    comet-doku.info/schule/xhtml/k151.shtml

     

    Inheritance

     

    chem.uni-potsdam.de/inet_kurs/css/css-5.html
    gitnet.de/content/web-design/css/css-vererbung.htm
    jendryschik.de/wsdev/einfuehrung/css/kaskade.html
    bjoernsworld.de/css/grundlagen.html#vererbung
    html4you.unkenmann.de/workshops/css/css05.php

     

    embed CSS

     

    juergens-workshops.de/tutorial/css/index.php?show=csseinbinden
    locomputing.de/sites/1225.html
    kurs.hechtnetz.de/css/einbinden.htm
    selfhtml.teamone.de/css/formate/einbinden.htm

     

    cool stuff

     

    tanfa.co.uk/css/borders/clock-working
    css diary
    css creator
    csszengarden.com/
    glish.com/css
    meyerweb.com/eric/css/edge/
    ssi-developer.net/main/templates/
    html4you.unkenmann.de/workshops/css/css05.php http://www.squarefree.com/userstyles/make-bookmarklet.html
    http://css.maxdesign.com.au/floatutorial/
    http://www.tantek.com/CSS/Examples/
    http://css-discuss.incutio.com/?page=CssHacks
    http://www.infimum.dk/HTML/slantinfo.htm l
    http://www.donkeyontheedge.com/ala.html
    http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml

     

    Fonts on the web

     

    typetester.maratz.com
    upuauet.com/_webworld/typo/vergleich.html
    maroufi.net/kurs3.php
    141.84.51.10/palaeo_de/multimediakurs/
    chem.uni-potsdam.de/inet_kurs/css/css-3.html


     

    tutorials

     

    moronicbajebus.com/playground/cssplay/reformat-table
    bjoernsworld.de/css/grundlagen.html#vererbung
    w3schools.com/css
    mako4css.com
    webwriting-magazin.de/sogehts
    css4you.pehlgrim.de/wscss/
    html4you.unkenmann.de/workshops/css/css05.php
    developer.apple.com/internet/css/introcsslayout.html
    hotwired.lycos.com/webmonkey/

     

    css3

     

    w3.org/Style/CSS/current-work
    w3.org/TR/css3-roadmap/
    ideenreich.com/csstechnik/css3.shtml
    guppi.de/css3-ausblick.shtml
    s.informatik.htw-dresden.de/svortrag/
    heise.de/ix/artikel/2003/05/136/06.shtml

     

    css bugs & Games

     

    positioniseverything.net/
    literarymoose.info
    centricle.com

    标签:css+html学习 | 浏览数(6808) | 评论数(0) | 2006-10-26
    实现一个表格的背景色为渐进&用CSS实现圆角表格  

    用CSS实现一个表格的背景色为渐进

     程序代码
    <body bgcolor="#EEEEEE">
    <style type="text/css">
    <!--
    .xr td {
     font-family: "Tahoma";
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100);
    }

    table {
     font-family: "Tahoma";
     font-size: 12px;
    }
    -->
    </style>

    <table width="80%" border="0" cellpadding="5" cellspacing="1" bgcolor="#999999">
    <tr bgcolor="#FFFFFF" class="xr">
    <td width="20">ID</td>
    <td>Name</td>
    <td>ICQ</td>
    <td>MSN</td>
    <td>Homepage</td>
    <td>Date</td>
    <td>Content</td>
    </tr>
    <tr align="center" bgcolor="#FFFFFF">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    </tr>
    </table>


    用CSS实现圆角表格:
     程序代码
    <html xmlns:v>
    <style>6
    v\:*{behavior:url(#default#VML)}
    </style>)
    <body>
    <v:RoundRect style="position:relative;width:150;height:240px" arcsize=0.5>
    <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
    <v:TextBox style="font-size:10.2pt;">
    </v:RoundRect>
    </body>
    </html>


      用VML技术可以很容易地制作一个圆角表格,而且还有投影哦!

      ①修改<html>表识为<html xmlns:v>

      ②在<head>区域添加如下代码:
    <style>〈br>v\:* {behavior: url(#default#VML);}〈br〉</style>

      ③在您要添加圆角表格的地方加入以下代码:<v:RoundRect style="position:relative;width:200;height:100px">
    <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
    <v:textbox style="font-size:12px">

      这里输入表格中的内容
    </v:textbox>
    </v:RoundRect>

      您可以在上面的代码中设置圆角表格的宽度、高度、投影颜色等。
      这样,一个有投影的圆角表格就制作好了。

    标签:css+html学习 | 浏览数(6501) | 评论数(0) | 2006-10-26
    CSS新手入门  

      手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Se lectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,以及 Internet Explorer 和 Netscape 各自的私有内容。出于种种众所周知的原因考虑,本手册以浏览器的事实标准—— Internet Explorer 为主。

      手册中为几乎所有的已被支持的属性、伪类、单位等,除了基本的语法示范外,都度身制作了可以对照源代码即时察看运行演示的实例。

     

    作者苏沈小雨制作的CSS2.0手册,对学习CSS和查询CSS属性非常有帮助。

    软件名称:css20手册
    开发者主页:www.rainersu.com
    软件大小:553K
    安装环境:Microsoft Windows 95/98/Me/NT4/2000/xp ;IE 5.0 以上浏览器
    格式:CHM

     

    css2中文手册:www.i170.com/Attach/F1580EA6-36B3-464A-99FB-BDFC999A760E

    标签:css+html学习 | 浏览数(5164) | 评论数(0) | 2006-10-26

      Powered by Haiwit