css - 文字教學 (2009/6/20)

作者：小角落..│2008-02-05 16:42:05│巴幣：0│人氣：1847

本文引用自此
本文引用自此
本文引用自此
本文引用自此
本文引用自此
本文引用自此
本文引用自此

如果這篇看的一點都不懂的話，請看css - 超級新手教學
如果找不到自己想要的，請看css - 導引 (看圖說故事)
如果沒有自己想要的效果，請看css - 語法說明
想要找小細部的設定，請看css - 各區塊分類解說圖(2009/4/13)
(不過這要20元喔!!不想花錢的可以看巴哈提供的分類區塊解說圖)

這裡是其他大大的css教學css - 巴哈css教學網
色碼表、上傳空間、螢幕檢色器css - 好用軟體+好文推薦

這教學是寫給我自己看的..
可以問問題..但是我自己也不是很懂XD

◎圖片要上傳到http://..某處..不能放在自己電腦..
我是放在這裡樂多日誌(不過沒有資料夾可以編輯,有點麻煩><)

1.這次要改文字部分,包含以下圈起來的地方..

2.打開『小屋首頁』> 『自訂面板』

3.找到這段文字

粉紅色部分:文字的顏色,顏色可參考色碼表
綠色部分:文字大小
紫色部分:文字字型,若用其他別人沒有的,只有自己看的到唷!!

還可參考以下屬性..
　　color: #006699; /*文字顏色*/
　　font-family:"Times New Roman"; /*文字字型*/
　　font-size: 12pt; /*文字大小*/
　　font-style: normal; /*文字樣式*/
　　line-height: 1.5px; /*文字行高*/
　　font-weight: bold; /*文字粗細(bold粗　　none細)*/
　　text-align: center; /* 文字對齊方式（水平方向）(left左.center中.riight右) */
　　vertical-align: top; /* 文字對齊方式（垂直方向)*/

4.『確定送出』

★個人資訊文字置中 (點圖進入圖片設定方法)

.box_list1{
background:transparent;
border:0px;
text-align: center;
}

如果要單獨設定這裡的文字↓

基本上他原本是寫在TD內的,
但是如果你要特別抽出來設定也可以,

新增以下語法↓
.home_h1{color: #000;}

另外還有這裡的文字!!..

新增以下語法↓

/*--次選單的文字顏色--*/
.home_t1, .home_t1 a:link, .home_t1 a:visited{color: #000;}
.home_t1 a:hover {color: red;}
詳細請看css - 次選單設定

另外還有這裡的文字↓[/font]

1.找到這段字↓

2.
紅色部分:文字顏色
橘色部分:文字大小
紫色部分:文字位置(預設35px)
假如改成350,就會變成這樣↓

3.『完成』

若要修改背景圖片(像我用小雞)可參考css - 首頁標題底圖更換教學
以上轉載自 houup(淵)-小屋系統預設文字修改教學 - PART 1
若有不懂的語法,可參考css - 語法說明

ID

1.就是這裡的文字

2.找到這段文字
.banner_t1{
color:#0055CB;
font-weight:bold;/*字體粗細(bold粗體.none細)*/
}/*這是圖片箭頭指的那個括弧*/
.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
color:#0055CB;
font-weight:bold;
text-decoration:inherit;
}/*暱稱和帳號文字*/

.banner_t3{
color:#6C7A8D;
line-height:18px;
height:20px;/*帳號與碎碎唸文字上下的距離*/
}/*碎碎唸文字顏色*/

.banner_t4{
color:#008E25;
}/*顯示官階的文字顏色*/

.banner_t5{
color:#235BD3;
}/*顯示稱號的文字顏色*/

3.若要隱藏可增加這行--------2008.3.8
.banner table{display:none;}/*隱藏帳號暱稱碎碎唸(『勳章』)*/

4.徽章消除

.banner image{
display:none;
}

4-1 以上,如果有寫『訂閱小屋按鈕』的,-----------2008.3.8
會影響到帳號,暱稱的文字顏色(就是小角落kinini那個)
到這裡修改↓
.banner a:visited{
color:#c93030;
background:transparent;
}

5.還有增加這些語法(消除『訂閱他的小屋』那個按鈕)
/*-------訂閱小屋按鈕(一般狀態的字顏色)------------*/
.banner a:visited{
display:none;
}

/*-------訂閱小屋按鈕(滑鼠移入狀態)------------*/
.home_order_button:hover{
display:none;}
↑詳細設定請看css - 按鈕教學

6.另外想要變動這些文字的位置,像我把他擺到快要中間

7.更改padding-left:275px;和padding-top:35px;的數字即可
.banner{
background:transparent;
height:120px;
padding-left:275px;/*文字距離左邊275px*/
padding-top:35px;/*文字距離上方35px*/
}/*小屋上方主圖*/

部落閣內文
1.就是粉紅色圈起來部分

2.將以下複製貼上
/*--部落閣「文章內的文字」--*/
.home_h4{
color:#000000;
font-size:12px;
}

3.『完成』

留言版文字部分
1.引用網址的這個框框

2.找到以下文字,在這裡修改
.home_input1{
color:#999999;
border:1px dashed #ff3399;
background-color:#FFF;
}/*input實線(只用於引用文章網址處)*/

3.這些輸入的文字框

4.則是在這裡修改
.home_input2{
color:#FFFFFF;
border:1px solid #000;
background-color:#fff;
}/*input實線*/

其他部分的文字
1.像以下這四個部分

2.在最下面增加這些語法
.box1 a:link{color:#000}
.box1 a:visited{color:#000}
.box1 a:hover{color:#000}

另外..『相關文章』欄位的文字也可以這樣寫
.home_scroll a:link,.home_scroll a:visited{color:royalblue ;}
.home_scroll a:hover{color: royalblue;}

粉紅色圈起來的部分↓-----2008.3/13

這裡原本在TD就可以設定了,
如果要另外設定的話,可以新增以下語法
/*--版權宣告文字--*/
.ssize { color:#000;
font-size: 12px;
line-height: 150%; }/*文字上下間距*/

至於上面兩行灰色的字..
div.footer font{color:red;}

div.footer br {display: none;} /*底部文字變成一行*/