CSS 好好玩(補充)

雅虎部落格支援的語法標籤（指令）

 部落格置頂區塊，設定透明度，改變區塊底色、加入底圖。

作法：到CSS裡面找到這段語法，更改一下底色及透明度％就ＯＫ了。

語法範例：

--------------------------------------------------------------------------------------------------------------------------------------

/*Master header*/
#yhtw_masthead{color:#CFDAE5; background:#F6DEF0(opacity=50); opacity:0.50; moz-opacity:0.5;}
#yhtw_masthead a,#yhtw_masthead a:link,#yhtw_masthead a:visited,#yhtw_masthead a:hover{font-size:120%;color:#686EB8;}

background:#F6DEF0;　←底色色碼

/*Master header*/
#yhtw_masthead{color:#ff122c; background:url(圖片網址);filter:alpha(opacity=50); opacity:0.50; moz-opacity:0.5;}
#yhtw_masthead a,#yhtw_masthead a:link,#yhtw_masthead a:visited,#yhtw_masthead a:hover{color:#CFDAE5;}

 

 

 

--------------------------------------------------------------------------------------------------------------------------------------

background:url(圖片網址);　←背景圖片

 

filter:alpha(opacity=50); 　　←透明度％

 

 

 

---

 

 

 

 

 

 

  更改各個底色的透明度

 

 

 

 

 

設定透明度時，要先把各個底色前面的方框打勾，再拉拉桿，才能設定透明度！

 

若有的話，還是無法設定透明度，那麼就要到自訂樣式裡面的ＣＳＳ修改了。

 

 

 

作法：

 

 

 

到自訂樣式裡面找到下列這些語法，把透明值改個數值(100-0之間)就ＯＫ了。

 

 opacity:100　←為透明度設定值。(數值越小越透明。0是完全透空。)

 

 

 

 

語法範例：

--------------------------------------------------------------------------------------------------------------------------------------

 

↓標題底色透明度

 

/*Opacity for blogtitle*/　

 

#yblogtitle .rctop, #blogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:100)}

 

↓內文底色透明度

 

 

 

/*Opacity for main content*/　
.yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div {zoom:1; filter:alpha(opacity:100)}

 

↓整個欄底位色透明度

 

 

 

/*Opacity for sub column*/　
.yc3subbd .rctop,.yc3subbd .rctop div,.yc3subbd .rcl,.yc3subbd .rcr,.yc3subbd .rcbtm,.yc3subbd .rcbtm div, .yc3sec .rctop,.yc3sec .rctop div,.yc3sec .rcl,.yc3sec .rcr,.yc3sec .rcbtm,.yc3sec .rcbtm div {zoom:1; filter:alpha(opacity:100)}　

 

↓欄位內容底色透明度

 

 /*Background color for module*/　

 

.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft {zoom:1; background: #FA7B1B; filter:alpha(opacity:100)}　

 

--------------------------------------------------------------------------------------------------------------------------------------

 

 第三次修改於　2006.08.11\pm-04:36

 

 

 

---

 

新增字體更換： 　

 

我先試了內文標題的字體，改成標楷體，因為標楷體跟細明體是網路通用的，其他字體，就要看對方電腦有沒有安裝跟一樣的字體，才能看的到。 　

作法：　

在自訂樣式的ＣＳＳ裡面找到下列的語法項目，在紅字那行的後面再加上藍色的那段語法，就可以更改字體了。（font-family:標楷體　←意指字體為標楷體）　

 

語法範例：

----------------------------------------------------------------------------------------------------　

/*article content module*/

.yblogcnt .blgtitlebar {margin-bottom:12px;zoom:1;}

.yblogcnt .blgtitlebar h2 {font-size:150%;font-weight:bold;background:url(圖片網址
) no-repeat;padding-left:40px;font-family:標楷體}

.yblogcnt .blgtitlebar h2 a {color:#682C98; padding-right:5px;}　

---

  正常連結無底線，連結時加背景底圖（底色）　

語法範例：

----------------------------------------------------------------------------------------------------　

 

/*Links*/
a,a:link,a:visited{color:red;text-decoration: none}
a:hover{color:#37B7FF;background-color: #ffffff;text-decoration: none;}　

 

----------------------------------------------------------------------------------------------------

 

none　　　　←無底線

 

background-color: #色碼;　←背景底色

 

background-image: url(圖片網址);　←背景底圖　

 

------------------------

 

第二次修改於　2006.08.11\AM-09:32　 　

 

---

 

CSS語法屬性一覽表

　

 Background背景屬性一覽

 

====================================================
background-color: #00ff00; /*背景色彩*/ (也有用rgb(255,255,0);)
background-image: none; /*無背景圖片 */
background-image: url(stars.gif); /*背景圖片URL網路位址 */
background-attachment: scroll; /*背景圖片隨頁面捲動 */
background-attachment: fixed; /*背景圖片隨固定不捲動 */
background-position: top left; /*背景圖片位置 */
其他參數：top left
                    top center
                    top right
                    center left
                    center center
                    center right
                    bottom left
                    bottom center
                    bottom right
                    x-% y-%   
                    x-pos y-pos /* xn px yn px*/
background-repeat: repeat;  /*背景圖片反覆顯示 */
background-repeat: repeat-x;  /*背景圖片水平反覆顯示 */
background-repeat: repeat-y;  /*背景圖片垂直反覆顯示 */
background-repeat: no-repeat;  /*背景圖片不反覆顯示 */

 

---

 

 

 

 

font-weight:100;200; 300; ...; 至800;900; /*文字粗體*/

 

---

 

 

 

 Element Dimension屬性一覽
==================================
height: 230px; /*高，也可以是n%來表示*/
width: 230px; /*寬，也可以是n%來表示*/

 

---

 

 

 

 Text文字位置屬性一覽
=============================================
color : #FF0099; /*文字色彩*/ (也有用color: rgb(255,255,0);)
direction:ltr; /*文字由左到右 */
direction:rtl; /*文字由右到左 */
letter-spacing : 1px;/*文字間距離 n個pixels*/
text-align:right; /*文字靠右對齊*/
text-align:left; /*文字靠左對齊*/
text-align:center; /*文字置中對齊*/
text-align:justify; /*????????我也不懂*/
text-decoration:none; /*刪除連結底線*/
text-decoration:underline; /*加底線*/
text-decoration:overline; /*加頂線*/
text-decoration:line-through;/*加刪除線*/
text-decoration:blink; /*加閃爍*/
text-indent: 20px; /*文字縮排n的pixels */
text-transform : capitalize; /*首字大寫*/
text-transform : uppercase; /*英文大寫*/
text-transform : lowercase; /*英文小寫*/
line-height : 200%; /*設定行高 ，也可以是14pt、或是1.5行高等等設定*/
word-spacing: 30px; /*單字間的間距 */

 

-------------------------------------------------

以上補充說明，來自格友晨曦婆婆。感恩

 

引用自：http://tw.myblog.yahoo.com/smile_wisdom46/article?mid=3981&prev=4091&next=3938

第一次修改於　2006.08.11\AM-09:21　

---

 

 

 

 

 

　固定背景。