CSS是樣式屬性標籤,可以將頁面中的各個部份的字體、圖片做個人化喜好的調整。很方便:)也很有趣。
所有的標籤語法都是以兩個大括號『 {} 』包起來的,括號內的各小屬性以『 ; 』分號隔開。
將CSS部落格的語法中,各屬性標籤各代表什麼的部份歸類。
此篇以wretch版型為主。

html{ ;}  /*設定頁面的HTML語法部分*/

/*整個頁面*/

body {  ;}  /*在此設定整個頁面內的字體大小顏色、滑鼠指標等等。*/

td { }

img{ border: none;}  /*img是圖片的意思。設定了此語法,會讓頁面中的圖片外面才沒有框框。*/

br {letter-spacing: 0px;}  /*br是換行指令,可設定每行中間的間隔。px代表像素。不要太擠才不會看不清楚。依字型的樣式做設定。*/

a {color: #色碼; text-decoration/*字體裝飾*/ ;}  /*連結的字體顏色、大小效果。*/
a:hover {color: #色碼; cursor: url("滑鼠網址");}  /*當滑鼠滑過連結時的效果。*/

input,select { }

#container1 { ;}  /*為整個頁框的範圍和擺設做設定,本文部份都包括在這裡*/

h3 { }

/*----------banner----------*/

/*整個表頭範圍,包括部落格名稱和敘述*/

#banner { ;} / *設定banner部分的位移、寬高、字體顏色、背景等各效果。*/

/*部落格名稱與動態*/
#pageheader h1 { ;}

/*部落格名稱*/
#pageheader h1 a { ;}  /*部落格的原本顯示顏色*/
#pageheader h1 a:hover { ;}  /*當滑鼠滑過部落格名稱時顯示的字體效果*/

/*部落格描述*/
.description { ;}  /*設定敘述部分的位移、寬高、字體顏色、背景等各效果。*/

/*----------main----------*/

/*包括content跟link*/

#main2 { ;}  /*本文和旁邊連結的部份的大頁面部份,不包括部落格名稱敘述部份。*/

/*內容區塊*/

/*本文部份的字體效果、卷軸顏色和顯示,等等。*/
#content {
    
SCROLLBAR-FACE-COLOR: #色碼;
    SCROLLBAR-HIGHLIGHT-COLOR: #色碼;
    SCROLLBAR-SHADOW-COLOR: #色碼;
    SCROLLBAR-3DLIGHT-COLOR: #色碼;
    SCROLLBAR-TRACK-COLOR: #色碼;
    SCROLLBAR-ARROW-COLOR: #色碼;
    SCROLLBAR-DARKSHADOW-COLOR: #色碼;
    overflow: auto
;}
 /*--產生捲軸--*/

/*單篇文章,包括文章的內容與下方的回應*/
.blogbody { ;}

/*日期區塊*/
.date { ;} /*就是每篇文章上方的日期部份*/

/*文章標題*/
.title { ;} /*每篇文章標題部份的設定*/

/*文章內文*/
.innertext { ;} /*設定位置,每行大小間距、字體效果等等。*/

/*文章分類*/
.extended { ;}

/*more圖示*/
a.more { ;} /* "繼續閱讀" 的效果設定,可把文字換成圖片。*/

/*作者資訊,回應,引用,轉寄*/
.posted { ;}
.posted a { ;}
.posted a:hover { ;}
.posted img { ;}
input#trackback_url { ;}

/*----------comment----------*/

/*迴響的按鈕*/
.commentTitle { ;} /*"迴響"的效果設定,也可把文字換成圖片。*/

/*迴響(迴響文中的內容可分別設定)*/
.comments-body { ;}
.comments-body br { ;}
.comments-post { ;}
.comments-post img { ;}
.comments-head { ;}

/*----------links----------*/
#links {   overflow: auto; /*看要不要顯示捲軸*/
    SCROLLBAR-FACE-COLOR: #色碼;
    SCROLLBAR-HIGHLIGHT-COLOR: #色碼;
    SCROLLBAR-SHADOW-COLOR: #色碼;
    SCROLLBAR-3DLIGHT-COLOR: #色碼;
    SCROLLBAR-TRACK-COLOR: #色碼;
    SCROLLBAR-ARROW-COLOR: #色碼;
    SCROLLBAR-DARKSHADOW-COLOR: #色碼
;}
#links br { ;}
#links img { ;}

.side { ;} /*連結部份都叫做side*/
.sidetitle { ;} /*sidetitle顧名思義就是每個side的標題*/
.sidetitle a { ;}

/*---side裡面的字體顏色,修改顏色值。
.Sidebody a:link{color : #色碼 ;text-decoration : none;} /*連結樣式*/
.Sidebody a:hover{color : #色碼 ;text-decoration : none;font-weight:bold;} /*當滑鼠滑過連結時的效果*/
.Sidebody a:visited{color : #色碼 ;text-decoration : none;} /*訪問過的連結*/
.Sidebody a:active{color : #色碼 ;text-decoration : none;} /*當滑鼠正點在連結上面時的效果*/
---*/

/*這部份還在研究XD*/
.boxNewComment1 .side { ;}
.boxNewComment1 .side a { ;}
.boxNewComment1 img { ;}
.boxCounter1 .side { ;}

/*日曆*/
span.calendar a { ;}  /*我是這樣設定的,可設定日曆中有寫日記那天的日期所顯現的字體顏色、大小、粗細等等。*/

span.calendar a:hover { ;}  /*滑鼠滑過有日記的日期的效果,還可改變數字後的背景圖:)*/

/*登入*/
.powered {padding: 10px 0px 0px 10px;}
.powered img {display: none;}


-----
arrow
arrow
    全站熱搜

    薇朵兒❤朵貓貓 發表在 痞客邦 留言(1) 人氣()