第九章文字实例二

<html>
<head>
<title>CSS控制Title</title>
<style>
<!--
h1{
    font-family:arial,sans-serif;
    font-size:28px;
    color:#336699;
    padding-bottom:4px;            /*下方补白*/
    border-bottom:1px solid #999999;    /*线条     宽度 样式 颜色 */
}
h1{
    font-family:arial,sans-serif;
    font-size:28px;
    color:#ffffff;
    padding:4px;                /*四周补白*/
    background-color:#669966;
}
h1{
    font-family:arial,sans-serif;
    font-size:28px;
    color:#666;
    padding:4px;        /*四周补白*/
    background-color:#ddd;  
    border-bottom:3px  solid  #aaa;   /*底边框*/
}
h1{
    font-family:arial,sans-serif;
    font-size:28px;
    color:#369;
    background-color:#000000;
    background-image:url(01.jpg) repeat-x bottom;   /*底部背景   水平方向重复背景图片  设置在在文字底部*/
    padding-bottom:10px;    /*增加额外的底部补白*/
}
h1{
    font-family:arial,sans-serif;
    font-size:28px;
    color:#369;
    padding-left:32px;        /*左侧移动*/
    background:url(icon.gif) no-repeat 0 50%;   /*把图标设置在文字左边*/
}

/*  img  可以通过CSS实现一些变幻的效果，例如在整个站点标题中大量使用小图标*/
body{
    background-color:#000000;
}
h1{
    font-family:arial,sans-serif;
    font-size:28px;
    color:#369;
}
h1 img{
    background:#f22;
    vertical-align:middle;
}
-->
</style>
</head>
<body>
<h1><img src="bg.gif" border="0">Super Title CSS</h1>  
</body>
</html>

img 这种编码有两个原因：一个原因是，有各种各样的图标，它取决于标题的主题。另一个原因：网站或许会根据当前的时间更换整个站点的配色方案，要让这些图标随着页面上其他元素一起变换颜色，并不需要每次都创建新的图标。创建一些透明的GIF图片即可。如上例，透过图标中透明的部分，使用CSS中的background属性设置其偷出来的颜色，便可以实现风格的改变。

第九章 文字实例二

第九章文字实例二