BlogJava-从制造到创造-随笔分类-CSShttp://www.blogjava.net/coderdream/category/26396.html软件工程师成长之路zh-cnSun, 03 Feb 2008 23:23:20 GMTSun, 03 Feb 2008 23:23:20 GMT60CSS美化表格边框汇总与效果http://www.blogjava.net/coderdream/archive/2008/02/03/179168.htmlCoderDreamCoderDreamSun, 03 Feb 2008 07:09:00 GMThttp://www.blogjava.net/coderdream/archive/2008/02/03/179168.htmlhttp://www.blogjava.net/coderdream/comments/179168.htmlhttp://www.blogjava.net/coderdream/archive/2008/02/03/179168.html#Feedback0http://www.blogjava.net/coderdream/comments/commentRss/179168.htmlhttp://www.blogjava.net/coderdream/services/trackbacks/179168.html阅读全文

CoderDream 2008-02-03 15:09 发表评论
]]>漂亮的表格模板http://www.blogjava.net/coderdream/archive/2008/02/03/179166.htmlCoderDreamCoderDreamSun, 03 Feb 2008 07:05:00 GMThttp://www.blogjava.net/coderdream/archive/2008/02/03/179166.htmlhttp://www.blogjava.net/coderdream/comments/179166.htmlhttp://www.blogjava.net/coderdream/archive/2008/02/03/179166.html#Feedback0http://www.blogjava.net/coderdream/comments/commentRss/179166.htmlhttp://www.blogjava.net/coderdream/services/trackbacks/179166.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY>
    <div>
        <table style="border:blue solid;border-width:2 1 1 2" width="800" cellspacing="0" cellpadding="0" border="0" class="table4"> 
            <tr > 
            <td style="border:blue solid;border-width:0 1 1 0 " width="40"><CENTER><B>序号</B></CENTER></td>
            <td style="border:blue solid;border-width:0 1 1 0 " width="700"><CENTER><B>标题</B></CENTER></td>
            <td style="border:blue solid;border-width:0 1 1 0 " width="60"><CENTER><B>地址</B></CENTER></td>
            </tr>
            <tr> 
            <td style="border:blue solid;border-width:0 1 1 0 "><CENTER>01</CENTER></td>
            <td style="border:blue solid;border-width:0 1 1 0 ">&nbsp;</td>
            <td style="border:blue solid;border-width:0 1 1 0 "><CENTER>地址</CENTER></td>
            </tr>
            <tr> 
            <td style="border:blue solid;border-width:0 1 1 0 "><CENTER>02</CENTER></td>
            <td style="border:blue solid;border-width:0 1 1 0 ">&nbsp;</td>
            <td style="border:blue solid;border-width:0 1 1 0 "><CENTER>地址</CENTER></td>
            </tr>
            <tr> 
            <td style="border:blue solid;border-width:0 1 1 0 "><CENTER>03</CENTER></td>
            <td style="border:blue solid;border-width:0 1 1 0 ">&nbsp;</td>
            <td style="border:blue solid;border-width:0 1 1 0 "><CENTER>地址</CENTER></td>
            </tr>
        </table>
    </div>
 </BODY>
</HTML>
效果：

序号
标题
地址
01
  
地址
02
  
地址
03
  
地址


CoderDream 2008-02-03 15:05 发表评论
]]>页面内容居中设置（水平居中与垂直居中）入门http://www.blogjava.net/coderdream/archive/2007/10/18/153928.htmlCoderDreamCoderDreamThu, 18 Oct 2007 08:01:00 GMThttp://www.blogjava.net/coderdream/archive/2007/10/18/153928.htmlhttp://www.blogjava.net/coderdream/comments/153928.htmlhttp://www.blogjava.net/coderdream/archive/2007/10/18/153928.html#Feedback0http://www.blogjava.net/coderdream/comments/commentRss/153928.htmlhttp://www.blogjava.net/coderdream/services/trackbacks/153928.html
 1 <HTML>
 2     <HEAD>
 3         <TITLE>内容居中</TITLE>
 4     </HEAD>
 5     <BODY>
 6         <TABLE WIDTH="100%" HEIGHT="100%">
 7             <TR>
 8                 <TD ALIGN="center" VALIGN="middle">
 9                     要居中的内容！
10                 </TD>
11             </TR>
12         </TABLE>
13     </BODY>
14 </HTML>

2、使用CSS+DIV：
 1 <HTML>
 2     <HEAD>
 3         <TITLE> CSS+DIV设置居中 </TITLE>
 4         <style type="text/css">
 5         .box {
 6             background-color:#f00; 
 7             color:#ccc; 
 8             width:500px; 
 9             height:300px; 
10             border:1px solid #000; 
11             position:absolute; 
12             margin:-150px 0px 0px -250px; 
13             top:50%; 
14             left:50%
15         }
16         </style>
17     </HEAD>
18     <BODY align="center" valign="center">    
19         <DIV class="box">
20             我是个居中的层。。。
21         </DIV>
22     </BODY>
23 </HTML>


参考：1、CSS布局基础--水平和垂直居中
             2、DIV的水平垂直居中
             3、利用CSS实现垂直居中
             4、DIV内容垂直居中

CoderDream 2007-10-18 16:01 发表评论
]]>CSS滤镜http://www.blogjava.net/coderdream/archive/2007/10/09/151111.htmlCoderDreamCoderDreamTue, 09 Oct 2007 09:59:00 GMThttp://www.blogjava.net/coderdream/archive/2007/10/09/151111.htmlhttp://www.blogjava.net/coderdream/comments/151111.htmlhttp://www.blogjava.net/coderdream/archive/2007/10/09/151111.html#Feedback1http://www.blogjava.net/coderdream/comments/commentRss/151111.htmlhttp://www.blogjava.net/coderdream/services/trackbacks/151111.html    4.1、Alpha属性－－设置透明层次
   4.2、Blur 滤镜－－模糊效果
   4.3、FlipH、FlipV 滤镜－－水平垂直翻转
   4.4、Gray滤镜－－灰度
   4.5、Invert滤镜－－反转
   4.6、Xray滤镜－－X射线
   4.7、Wave滤镜－－波纹

        使用滤镜属性可以把可视化的滤镜和转场效果添加到一个标准的 HTML 元素中，例如图片、文本，以及其他一些对象。对于滤镜和渐变效果，前者是基础，后者是滤镜效果的不断变化和演示更替。 下面介绍几种常用的滤镜：

        1、Alpha 滤镜-- 设置透明层次
            基本语法                
{
    filter: alpha (
        opacity = opacity,
        finishopacity = finishopacity,
        style = style,
        startx = startx,
        starty = starty,
        finishx = finishx,
        finishy = finishy
    )
}

            语法解释
            Alpha 属性是把一个目标元素与背景混合，设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。它们的含义分别如下：

　　“opacity”：代表透明度水准。范围是从0~100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
　　“finishopacity”：是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
　　“style”：指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。
　　“StartX”和“StartY”：代表渐变透明效果的开始X和Y坐标。
　　“FinishX”和“FinishY”：代表渐变透明效果结束X和Y 的坐标。 

        文件范例：13-23.htm
{
    filter: alpha (
        opacity = opacity,
        finishopacity = finishopacity,
        style = style,
        startx = startx,
        starty = starty,
        finishx = finishx,
        finishy = finishy
    )
}

        文件说明：
            设定 Alpha 滤镜为半透明

        显示结果：


下面的三种效果除“Style”参数不同外（分别为1、2、3），其它参数均相同。图1的代码是： Alpha(Opacity=10, FinishOpacity=90, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)；

        2、Blur 滤镜-- 模糊效果
            基本语法                
                
{    filter:blur (
        add = add,
        direction = direction,
        strength = strength
    )
}

            语法解释
            add 参数是一个布尔判断：true （默认）或false ，它指定图片是否被改变成印象派的模糊效果。
            模糊效果是按顺时针方向进行的，derection 参数用来设置模糊的方向。其中0°表示垂直向上，然后每45°为一个单位，默认值是向左的270°。
            strength 值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响，默认是 5 像素。

        文件范例：13-24.htm
<!-- ------------------------------ -->
<!--       文件范例：13-24.htm      -->
<!--     文件说明：CSS中的Blur滤镜  -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS中的Blur滤镜</TITLE>
        <Style Type="text/css">
        <!--
            img{
                FILTER:BLUR(STRENGTH=10);
            }
        -->
        </Style>
    </HEAD>
    <BODY>
    <H2>强大的CSS滤镜</H2>
    <IMG Src=13-23.jpg>
    </BODY>
</HTML>

        文件说明：
            设定了 blur 滤镜的模糊强度为 10。

        显示结果：


        3、FlipH、FlipV 滤镜-- 水平垂直翻转
            基本语法                
{ filter:filph }
{ filter:filpv }

            语法解释
            上述两句代码分别 表示水平翻转和垂直翻转

        文件范例：13-25.htm
<!-- ------------------------------ -->
<!--       文件范例：13-25.htm      -->
<!--    文件说明：CSS中的FlipV滤镜  -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS中的FlipV滤镜</TITLE>
        <Style Type="text/css">
            <!--
            img{
                FILTER:FlipV;
            }
            -->
        </Style>
    </HEAD>
    <BODY>
        <H2>强大的CSS滤镜</H2>
        <IMG Src=13-23.jpg>
    </BODY>
</HTML>

        文件说明：
            设定垂直翻转滤镜

        显示结果：


        4、Gray 滤镜 -- 灰度
            基本语法                
{ filter:gray }

            语法解释
                Gray 滤镜的作用是把一张图片变成灰度图。
                
            文件范例：13-26.htm
<!-- ------------------------------ -->
<!--       文件范例：13-26.htm      -->
<!--    文件说明：CSS中的Gray滤镜   -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS中的Gray滤镜</TITLE>
        <Style Type="text/css">
        <!--
            img{
                FILTER:gray;
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H2>强大的CSS滤镜</H2>
        <IMG Src=13-23.jpg>
    </BODY>
</HTML>

        显示结果：


        5、Invert 滤镜 -- 反转
            基本语法                
{ filter:invert }

            语法解释
                Invert 滤镜的作用是把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。

        文件范例：13-27.htm
<!-- ------------------------------ -->
<!--       文件范例：13-27.htm      -->
<!--   文件说明：CSS中的Invert滤镜  -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS中的Invert滤镜</TITLE>
        <Style Type="text/css">
        <!--
            img{
                FILTER:invert;
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H2>强大的CSS滤镜</H2>
        <IMG Src=13-23.jpg>
    </BODY>
</HTML>

        显示结果：


        6、Xray 滤镜 -- X 射线
            基本语法                
{ filter:xray }

            语法解释
                Xray 滤镜的作用是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片。

        文件范例：13-28.htm
<!-- ------------------------------ -->
<!--       文件范例：13-28.htm      -->
<!--    文件说明：CSS中的Xray滤镜   -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS中的Xray滤镜</TITLE>
        <Style Type="text/css">
        <!--
            img{
                FILTER:xray;
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H2>强大的CSS滤镜</H2>
        <IMG Src=13-23.jpg>
    </BODY>
</HTML>

        显示结果：


        7、Wave 滤镜 -- 波纹
            基本语法                
{
    filter:wave (
        add = add,
        freq = freq,
        lightstrength = strength,
        phase = phase,
        strength = strength
    )
}

            语法解释
                 Wave
                Add参数有两个参数值：True代表把对象按照波纹样式打乱；False代表不打乱；
　　        Freq参数指生成波纹的频率，也就是指定在对象上共需要产生多少个完整的波纹。 　　
                LightStrength参数是为了使生成的波纹增强光的效果。参数值可以从0到100。 　　　
                Phase参数用来设置正弦波开始的偏移量。这个值的通用值为0，它的可变范围为从0到100。这个值代表开始时的偏移量占波长的百分比。比如该值为25，代表正弦波从90度（360*25%）的方向开始。 
                STRENGTH 振幅大小 

        文件范例：13-29.htm
<!-- ------------------------------ -->
<!--       文件范例：13-29.htm      -->
<!--    文件说明：CSS中的Wave滤镜   -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS中的Wave滤镜</TITLE>
        <Style Type="text/css">
        <!--
            img{
                FILTER:wave(add=add,freq=2,lightstrength=50,phase=45,strength=10);
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H2>强大的CSS滤镜</H2>
        <IMG Src=13-23.jpg>
    </BODY>
</HTML>

        显示结果：

CoderDream 2007-10-09 17:59 发表评论
]]>CSS的边框属性、鼠标光标属性、定位属性、区块属性、列表属性http://www.blogjava.net/coderdream/archive/2007/10/08/151064.htmlCoderDreamCoderDreamMon, 08 Oct 2007 09:18:00 GMThttp://www.blogjava.net/coderdream/archive/2007/10/08/151064.htmlhttp://www.blogjava.net/coderdream/comments/151064.htmlhttp://www.blogjava.net/coderdream/archive/2007/10/08/151064.html#Feedback0http://www.blogjava.net/coderdream/comments/commentRss/151064.htmlhttp://www.blogjava.net/coderdream/services/trackbacks/151064.html3.4、边框属性
   3.5、鼠标光标属性
   3.6、定位属性
   3.7、区块属性
   3.8、列表属性

3.3.4、边框属性
        
        不同方向的边框属性如表所示：
边框属性 描述
border 边框
border-top 上边框
border-left 左边框
border-right 右边框
border-bottom 下边框

        对于边框的样式，可以按照下表中所示进行设置：
边框样式属性值 描述
none 无边框
dotted 边框由点组成
dash 边框由短线组成
solid 边框是实线
double 边框是双实线
groove 边框带有立体感的沟槽
ridge 边框成脊型
inset 边框内嵌一个立体边框
outset 边框外嵌一个立体边框

范例文件：13-18.htm
 1 <!-- ------------------------------ -->
 2 <!--       文件范例：13-18.htm      -->
 3 <!--        文件说明：CSS边框       -->
 4 <!-- ------------------------------ -->
 5 <HTML>
 6     <HEAD>
 7         <TITLE>CSS背景图像位置</TITLE>
 8         <Style Type="text/css">
 9         <!--
10             P{ 
11                 border-top: 2px solid #990000;
12                 border-right: 2px solid #3399FF;
13                 border-bottom: 2px solid #00FF33;
14                 border-left: 2px solid #CC33FF;
15             }
16         -->
17         </Style>
18     </HEAD>
19     <BODY>
20         <H1>主流的网页设计软件</H1>
21         <p>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
22     </BODY>
23 </HTML>


文件说明：
第10～15行分别设定了上、右、下、左4个边框的宽度、边框样式和颜色。

显示结果：


3.4.5、鼠标光标属性

鼠标光标属性值 描述
hand 手
crosshair 交叉十字
text 文本选择符号
wait Windows 的沙漏形状
default 默认的鼠标形状
help 带问号的鼠标
e-resize 向东的箭头
ne-resize 指向东北方的箭头
n-resize 向北的箭头
nw-resize 指向西北方的箭头
w-resize 向西的箭头
sw-resize 指向西南方的箭头
s-resize 向南的箭头
se-resize 指向东南方的箭头

范例文件：13-19.htm

<!-- ------------------------------ -->
<!--       文件范例：13-19.htm      -->
<!--   文件说明：CSS鼠标光标属性    -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS鼠标光标属性</TITLE>
        <Style Type="text/css">
        <!--
            Body{ 
                CURSOR:CROSSHAIR
            }
            IMG{ 
                Cursor:help
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <img src=13-19.jpg align=left>
        <P>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>


显示结果：




3.4.6、定位属性
定位属性 描述
position “absolute”（绝对定位）、“relative”（相对定位）
top 层距离顶点纵坐标的距离
left 层距离顶点横坐标的距离
width 层的宽度
height 层的高度
z-index 决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素
clip 限定只显示裁切出来的区域，裁切出的区域为矩形。只要设定两个点即可，一个是矩形左上角的顶点，由top和right两项的设置完成，另一个是右下角的顶点，由bottom和 right 两项设置完成
overflow

当层内的内容超出层所能容纳的范围时：
visible：层的大小、内容都会显示出来
hidden：会隐藏超出层大小的内容
scrol：不管内容是否超出层的范围，选中此项都会为层添加滚动条
auto：只在内容超出层的范围时才显示滚动条
visibility

这一项是针对嵌套层的设置，嵌套层是插入在其他层中的层，分为嵌套的层（子层）和被嵌套的层（父层）
inherit：子层继承父层的可见性，父层可见，子层也可见；父层不可见，子层也不可见
visible：无论父层可见与否，子层都可见
hidden：无论父层可见与否，子层都隐藏

范例文件：13-20.htm

<!-- ------------------------------ -->
<!--       文件范例：13-20.htm      -->
<!--      文件说明：CSS定位属性     -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS定位属性</TITLE>
        <Style Type="text/css">
        <!--
            .self{
                position:absolute;
                top:80px;
                left:50px;
                width:300px;
                height:100px;
                overflow:auto;
                background-color:#336699;
                color:#FFFFFF;
                z-index:1;
                visibility:visible;
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <div class="self">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</div>
    </BODY>
</HTML>


显示结果：


3.4.7、区块属性
区块属性 描述
width 设定对象的宽度
height 设定对象的高度
float 让文字环绕在一个元素的四周
clear 指定在某一个元素的某一边是否允许有环绕的文字或对象
padding 决定了究竟在边框与内容之间应该插入多少空间距离，它有4个属性，分别是：top、bottom、left、right，分别用于设定上下左右的填充距离
margin 设置一个元素在4个方向上与浏览器窗口边界或上一级元素的边界的距离。与“padding”类似，它也有上下左右4个属性，分别控制4个方向

范例文件：13-21.htm

<!-- ------------------------------ -->
<!--       文件范例：13-21.htm      -->
<!--      文件说明：CSS区块属性     -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS区块属性</TITLE>
        <Style Type="text/css">
        <!--
            .self{
                width:300px;
                height:100px;
                MARGIN-TOP: 20PX; 
                MARGIN-RIGHT: 30PX; 
                MARGIN-BOTTOM: 20PX; 
                MARGIN-LEFT: 30PX
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <div class=self>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</div>
    </BODY>
</HTML>


显示结果：


3.4.8、列表属性
列表属性 描述
list-style-type 设定引导列表选项的符号类型
bullet 选择图像作为项目的引导符号
position 决定列表项目缩进的程度，outside：列表贴近左侧边框；inside：列表缩进

列表符号类型属性值 描述
disc 在文本行前面加“●”实心园
circle 在文本行前面加“○”空心园
square 在文本行前面加“■”实心方块
decimal 在文本行前面加普通的阿拉伯数字
lower-roman 在文本行前面加小写罗马数字
upper-roman 在文本行前面加大写罗马数字
lower-alpha 在文本行前面加小写英文字母
upper-alpha 在文本行前面加大写英文字母
none 不显示任何项目符号或编号


范例文件：13-22.htm
<!-- ------------------------------ -->
<!--       文件范例：13-22.htm      -->
<!--      文件说明：CSS列表属性     -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS列表属性</TITLE>
        <Style Type="text/css">
        <!--
            li{
                list-style-type:upper-roman;
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H2>图像设计软件</H2>
        <OL>
            <LI>Photoshop</LI>
            <LI>Illustrator</LI>
            <LI>Freehand</LI>
            <LI>CorelDraw</LI>
        </OL>
    </BODY>
</HTML>

显示结果：


CoderDream 2007-10-08 17:18 发表评论
]]>CSS的颜色和背景属性http://www.blogjava.net/coderdream/archive/2007/10/08/151055.htmlCoderDreamCoderDreamMon, 08 Oct 2007 06:40:00 GMThttp://www.blogjava.net/coderdream/archive/2007/10/08/151055.htmlhttp://www.blogjava.net/coderdream/comments/151055.htmlhttp://www.blogjava.net/coderdream/archive/2007/10/08/151055.html#Feedback0http://www.blogjava.net/coderdream/comments/commentRss/151055.htmlhttp://www.blogjava.net/coderdream/services/trackbacks/151055.html       3.3.1、颜色
      3.3.2、背景颜色
      3.3.3、背景图像
      3.3.4、背景图像重复
      3.3.5、背景图像位置
 
文本属性 描述
color 定义颜色
background-color 设定一个元素的背景颜色
background-image 设定一个元素的背景图像
background-repeat 决定一个指定的背景图像如何被重复
background-position 设置水平和垂直方向上的位置

3.2.1、 颜色 
        颜色 color 属性允许网页制作者指定一个元素的颜色，一般用RGB，#FFFFFF（16进制数）表示。
文件范例：13-13.htm
<!-- ------------------------------ -->
<!--       文件范例：13-13.htm      -->
<!--        文件说明：CSS颜色       -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS颜色</TITLE>
        <Style Type="text/css">
        <!--
            H1 { 
                color:#336699
            }
            .text { 
                color:#ffcc00
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：
 

3.2.2、背景颜色

文件范例：13-14.htm
<!-- ------------------------------ -->
<!--       文件范例：13-14.htm      -->
<!--      文件说明：CSS背景颜色     -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS背景颜色</TITLE>
        <Style Type="text/css">
        <!--
            body { 
                background-color:#336699
            }
            H1 { 
                background-color:#ffffff
            }
            .text { 
                background-color:#ffcc00
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：


3.2.3、背景图像

文件范例：13-15.htm
<!-- ------------------------------ -->
<!--       文件范例：13-15.htm      -->
<!--      文件说明：CSS背景图像     -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS背景图像</TITLE>
        <Style Type="text/css">
        <!--
            body { 
                Background-image:url(13-15.gif)
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：


3.2.4、背景图像重复
 
背景图像重复属性值 描述
repeat-x 图像横向重复
repeat-y 图像纵向重复
repeat 图像横向纵向重复
no-repeat 图像不重复（只显示一张图，无任何方向的平铺）
       
文件范例：13-16.htm
<!-- ------------------------------ -->
<!--       文件范例：13-16.htm      -->
<!--    文件说明：CSS背景图像重复   -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS背景图像重复</TITLE>
        <Style Type="text/css">
        <!--
            body { 
                Background-image:url(13-15.gif);
                background-repeat: repeat-y
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：


3.2.5、背景图像位置
  
背景图像位置属性值 描述
left 背景图像居左
right 背景图像居右
center 背景图像水平居中，垂直居中
top 背景图像上对齐
bottom 背景图像下对齐
       
        与 background-repeat 属性结合使用，否则没有任何效果，因为 background-repeat 的默认属性为repeat。
文件范例：13-17.htm
<!-- ------------------------------ -->
<!--       文件范例：13-17.htm      -->
<!--    文件说明：CSS背景图像位置   -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS背景图像位置</TITLE>
        <Style Type="text/css">
        <!--
            body { 
                Background-image:url(13-15.gif);
                background-repeat:repeat-y;
                Background-position:right top
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：




CoderDream 2007-10-08 14:40 发表评论
]]>CSS的文本属性http://www.blogjava.net/coderdream/archive/2007/10/08/151010.htmlCoderDreamCoderDreamMon, 08 Oct 2007 06:14:00 GMThttp://www.blogjava.net/coderdream/archive/2007/10/08/151010.htmlhttp://www.blogjava.net/coderdream/comments/151010.htmlhttp://www.blogjava.net/coderdream/archive/2007/10/08/151010.html#Feedback0http://www.blogjava.net/coderdream/comments/commentRss/151010.htmlhttp://www.blogjava.net/coderdream/services/trackbacks/151010.html       3.2.1、字母间隔
      3.2.2、文字修饰
      3.2.3、文字排列
      3.2.4、文本缩进
      3.2.5、行间距
 
文本属性 描述
letter-spacing 定义一个附加在字符之间的间隔数量
text-decoration 文本修饰属性允许通过五个属性中的一个来修饰文本
text-align 设置文本的水平对齐方式，包括左对齐、右对齐、居中、两端对齐
text-indent 文字的首行缩进
line-height 行高属性接受一个控制文本基线之间的间隔的值

3.2.1、 字母间隔 
        letter-spacing 属性定义一个附加在字符之间的间隔数量，改值必须符合长度格式，允许使用负值。一个设为0的值会阻止文字的调整。
文件范例：13-8.htm
<!-- ------------------------------ -->
<!--       文件范例：13-8.htm       -->
<!--      文件说明：CSS字母间隔     -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS字母间隔</TITLE>
        <Style Type="text/css">
        <!--
            H1{ 
                letter-spacing:    -10px
            }
            .text { 
                letter-spacing:    5px
            }
        -->
        </Style>
    </HEAD>
    <BODY>
    <H1>主流的网页设计软件</H1>
    <p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：
 

3.2.2、文字修饰

文字修饰属性值 描述
underline 下划线
overline 上划线
line-through 删除线
blink 闪烁，只适用 NetScape 浏览器
none 无任何修饰
文件范例：13-9.htm
<!-- ------------------------------ -->
<!--       文件范例：13-9.htm       -->
<!--      文件说明：CSS文字修饰     -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS文字修饰</TITLE>
        <Style Type="text/css">
        <!--
            a:link {
                font-family: "宋体";
                text-decoration: none
            }
            a:visited {
                font-family: "宋体"; 
                text-decoration: none
            }
            a:hover{
                font-family:"宋体";
                text-decoration: underline
            }
            .text {
                text-decoration: underline
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、FIireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
        <A href=mailto:husong@elong.com>给我来信</A>
    </BODY>
</HTML>

显示结果：


3.2.3、文本排列
文字排列属性值 描述
left 左对齐
center 居中对齐
right 右对齐
justify 两端对齐

文件范例：13-10.htm
<!-- ------------------------------ -->
<!--       文件范例：13-10.htm      -->
<!--      文件说明：CSS文本排列     -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS文本排列</TITLE>
        <Style Type="text/css">
        <!--
        H1 {
            text-align:center
        }
        .text {
            text-align:justify
        }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
        <A href=mailto:husong@elong.com>给我来信</A>
    </BODY>
</HTML>

显示结果：


3.2.4、文本缩进
        文本缩进 text-indent 属性可以应用于块级元素（P，H1等），定义该元素第1行可以接受的缩进的数量。改值必须是一个长度或一个百分比，若为百分比，则视上级元素的宽度而定。通用的文本缩进用法是用于段缩进。
文件范例：13-11.htm
<!-- ------------------------------ -->
<!--       文件范例：13-11.htm      -->
<!--      文件说明：CSS文本缩进     -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS文本缩进</TITLE>
        <Style Type="text/css">
        <!--
            H1 {
                text-indent:100pt
            }
            .text {
                text-indent:24pt
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
        <A href=mailto:husong@elong.com>给我来信</A>
    </BODY>
</HTML>

显示结果：


3.2.5、行间距
        行间距 line-height 属性可以接受一个控制文本基线之间的间隔的值。当值为百分比数字时，行高由元素字体大小的量与该数字相乘所得，百分比的值相对于元素字体的大小而定，不允许使用负值。
文件范例：13-12.htm
<!-- ------------------------------ -->
<!--       文件范例：13-12.htm      -->
<!--       文件说明：CSS行间距      -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS行间距</TITLE>
        <Style Type="text/css">
        <!--
            .text {
                line-height:24pt
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
        <A href=mailto:husong@elong.com>给我来信</A>
    </BODY>
</HTML>

显示结果：




CoderDream 2007-10-08 14:14 发表评论
]]>CSS的字体属性http://www.blogjava.net/coderdream/archive/2007/10/08/150979.htmlCoderDreamCoderDreamMon, 08 Oct 2007 03:56:00 GMThttp://www.blogjava.net/coderdream/archive/2007/10/08/150979.htmlhttp://www.blogjava.net/coderdream/comments/150979.htmlhttp://www.blogjava.net/coderdream/archive/2007/10/08/150979.html#Feedback0http://www.blogjava.net/coderdream/comments/commentRss/150979.htmlhttp://www.blogjava.net/coderdream/services/trackbacks/150979.html    3.1、字体属性
      3.1.1、字体族科
      3.1.2、字体大小
      3.1.3、字体风格
      3.1.4、字体加粗

字体属性 描述
font-family 用一个指定的字体名或一个类的字体族科
font-size 字体显示的大小
font-style 设定字体风格
font-weight 以 bold 为值可以使字体加粗

1、字体族科 font-family

文件范例：13-4.htm
 1 <!-- ------------------------------ -->
 2 <!--       文件范例：13-4.htm       -->
 3 <!--      文件说明：CSS字体族科     -->
 4 <!-- ------------------------------ -->
 5 <HTML>
 6     <HEAD>
 7     <TITLE>CSS字体族科</TITLE>
 8         <Style Type="text/css">
 9         <!--
10         H1{ 
11             font-family: "隶书"
12         }
13         .text { 
14             font-family: "宋体,仿宋_gb2312";
15         }
16         -->
17         </Style>
18     </HEAD>
19     <BODY>
20     <H1>主流的网页设计软件</H1>
21     <p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
22     </BODY>
23 </HTML>
文件说明：
        第10～12设定H1标记样式，规定了字体为隶书，第13～15行设定了名为text的自定义样式，规定了字体为宋体或仿宋，即当客户机没有第一种
宋体字体的时候，浏览器会使用第2种仿宋字体显示。
        定义了样式后，第20行的标题字会自动应用H1样式，而第21行通过了 class 属性引用了 text 样式。

显示结果：


2、字体大小
        单位可以是厘米、像素、磅等，另外还有其他一些值，例如：xx-small、x-small、smaller、x-large、xx-large等。最常用的单位为pt。

文件范例：13.5.htm
<!-- ------------------------------ -->
<!--       文件范例：13-5.htm       -->
<!--      文件说明：CSS字体大小     -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS字体大小</TITLE>
        <Style Type="text/css">
        <!--
            H1{ 
                font-size:14pt
            }
            .text { 
                font-size:9pt
            }
        -->
        </Style>
    </HEAD>
    <BODY>
    <H1>主流的网页设计软件</H1>
    <p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：


3、字体风格
字体风格属性值 描述
normal 普通的文字
italic 斜体的文字
oblique 倾斜的文字，在中文文字的使用上与italic 并无明显区别

文件范例：13-6.htm
<!-- ------------------------------ -->
<!--       文件范例：13-6.htm       -->
<!--      文件说明：CSS字体风格     -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS字体风格</TITLE>
        <Style Type="text/css">
        <!--
            H1{ 
                font-style:italic
            }
            .text { 
                font-style:oblique
            }
            -->
        </Style>
    </HEAD>
    <BODY>
    <H1>主流的网页设计软件</H1>
    <p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：


4、字体加粗

字体加粗属性值 描述
值 100～900之间
normal 普通的文字
bold 加粗
bolder 特粗
lighter 加细

文件范例：13-7.htm
<!-- ------------------------------ -->
<!--       文件范例：13-7.htm       -->
<!--      文件说明：CSS字体加粗     -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
    <TITLE>CSS字体加粗</TITLE>
        <Style Type="text/css">
        <!--
            H1{ 
                font-weight:900
            }
            .text { 
                font-weight:bolder
            }
        -->
        </Style>
    </HEAD>
    <BODY>
    <H1>主流的网页设计软件</H1>
    <p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>
 显示结果：




CoderDream 2007-10-08 11:56 发表评论
]]>CSS 层叠样式表 入门与提高http://www.blogjava.net/coderdream/archive/2007/10/07/150910.htmlCoderDreamCoderDreamSun, 07 Oct 2007 14:21:00 GMThttp://www.blogjava.net/coderdream/archive/2007/10/07/150910.htmlhttp://www.blogjava.net/coderdream/comments/150910.htmlhttp://www.blogjava.net/coderdream/archive/2007/10/07/150910.html#Feedback0http://www.blogjava.net/coderdream/comments/commentRss/150910.htmlhttp://www.blogjava.net/coderdream/services/trackbacks/150910.html1、什么是CSS
   1.1、CSS的基本概念
   1.2、CSS的特点

2、CSS的类型与基本写法
   2.1、CSS的类型
   2.2、CSS的基本写法
   2.3、CSS的冲突

3、CSS的属性和值
   3.1、字体属性
      3.1.1、字体族科
      3.1.2、字体大小
      3.1.3、字体风格
      3.1.4、字体加粗

   3.2、文本属性
      3.2.1、字母间隔
      3.2.2、文字修饰
      3.2.3、文字排列
      3.2.4、文本缩进
      3.2.5、行间距
      
   3.3、颜色和背景属性
      3.3.1、颜色
      3.3.2、背景颜色
      3.3.3、背景图像
      3.3.4、背景图像重复
      3.3.5、背景图像位置

   3.4、边框属性

   3.5、鼠标光标属性

   3.6、定位属性

   3.7、区块属性

   3.8、列表属性

4、CSS滤镜
   4.1、Alpha属性－－设置透明层次
   4.2、Blur 滤镜－－模糊效果
   4.3、FlipH、FlipV 滤镜－－水平垂直翻转
   4.4、Gray滤镜－－灰度
   4.5、Invert滤镜－－反转
   4.6、Xray滤镜－－X射线
   4.7、Wave滤镜－－波纹

CoderDream 2007-10-07 22:21 发表评论
]]>什么是CSS和CSS的类型与基本写法http://www.blogjava.net/coderdream/archive/2007/10/07/150901.htmlCoderDreamCoderDreamSun, 07 Oct 2007 14:10:00 GMThttp://www.blogjava.net/coderdream/archive/2007/10/07/150901.htmlhttp://www.blogjava.net/coderdream/comments/150901.htmlhttp://www.blogjava.net/coderdream/archive/2007/10/07/150901.html#Feedback0http://www.blogjava.net/coderdream/comments/commentRss/150901.htmlhttp://www.blogjava.net/coderdream/services/trackbacks/150901.html   1.1、CSS的基本概念
         从总体来说，CSS 能够完成下列工作：
         a、弥补 HTML 对网页格式化功能的不足，比如段落间距、行距等。
         b、字体变化和大小；
         c、页面格式的动态更新；
         d、排版定位等。

   1.2、CSS的特点
         a、将格式和结构分离
         b、以前所未有的能力控制页面布局
         c、制作体积更小、下载更快的页面
         d、将许多页面同时更新，比以前更快更容易
         e、浏览器将成为更友好的界面

2、CSS的类型与基本写法
   2.1、CSS的类型
      CSS层叠样式表包含3种类型：
      a、自定义CSS，相应的标记中出现“class"属性
            如下代码：
            
.bg {
    background-image: url(bg.gif);
}

            在HTML中使用：
<body class="bg">

      b、重定义标记的CSS

td {
    color: #000099;
    font-size: 9pt
}

      c、CSS选择符
      CSS 选择符为特殊的组合标记定义CSS，使用“ID”作为属性，以保证文档具有唯一可用的值。CSS选择符是一种特殊类型的样式，常用的有4种，分别为：
      a:link、a:active、a:visited、a:hover
      其中：
      a:link：设定正常状态下链接文字的样式。
      a:active：设定鼠标单击时链接的外观。
      a:visited：设定访问过的链接外观。
      a:hover：设定鼠标放置在链接文字之上时文字的外观。
      如下代码：
a:link {
    color: #FF3366;
    font-family:"宋体";
    text-decoration:none;
}

a:hover {
    color: #FF6600;
    font-family:"宋体";
    text-decoration:underline;
}

a:visited {
    color: #339900;
    font-family:"宋体";
    text-decoration:none;
}


   2.2、CSS的基本写法
   CSS的基本写法有3种：
   1、在 HEAD 内实现，即<HEAD></HEAD>标记内：
   
文件范例：13-1.htm
<!-- ------------------------------ -->
<!--       文件范例：13-1.htm       -->
<!-- 文件说明：CSS在<head>中的实现  -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS在head中的实现</TITLE>
        <Style Type="text/css">
        <!--
            body {
                font-family: "黑体";
                font-size: 12pt;
                line-height: 16pt;
                color: #FFFFFF;
                background-color: #006699;
            }
        -->
        </Style>
    </HEAD>
    <BODY>
        主流的网页设计软件
        <p>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果： 


      2、在<BODY>内实现
            使用下面的语法：
      
<h3 style="font-size:10pt">

            这样的写法虽然直观，但是无法体现出CSS的优势，因此不推荐使用。
文件范例：13-2.htm
<!-- ------------------------------ -->
<!--       文件范例：13-2.htm       -->
<!-- 文件说明：CSS在<body>中的实现  -->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>CSS在body中的实现</TITLE>
    </HEAD>
    <BODY>
        主流的网页设计软件
        <p style="font-size:9pt;line-height:12pt;background-color:#FFCC00;font-family:宋体">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：


      3、在文件外的调用
      CSS 的定义既可以是在HTML文档内部，也可以单独成立文件，如下代码是将CSS样式链接到外部到style.css文件：
<link rel="stylesheet" href="style.css" type="text/css">

文件范例：13-3.htm
<!-- ------------------------------ -->
<!--       文件范例：13-3.htm       -->
<!-- 文件说明：调用外部的CSS样式文件-->
<!-- ------------------------------ -->
<HTML>
    <HEAD>
        <TITLE>调用外部的CSS样式文件</TITLE>
        <link href="13-3.css" rel="stylesheet" type="text/css">
    </HEAD>
    <BODY>
        主流的网页设计软件
        <p class="t">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>
文件范例：13-3.css
.t {
    font-family: "宋体";
    font-size: 9pt;
    text-decoration: underline;
    letter-spacing: 3px;
    line-height: 12pt;
}
显示结果：


2.3、CSS的冲突
      a、执行最近的
      b、CSS样式优先级高于HTML样式



CoderDream 2007-10-07 22:10 发表评论
]]>