第九章文字實例二

時間 2019-11-12

標籤第九文字實例简体版

原文原文鏈接

<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屬性設置其偷出來的顏色，即可以實現風格的改變。html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

第九章 文字實例二

第九章文字實例二