【css】文字陰影應用

在逛別人網站時應該常常會看到在文章標語加上"文字陰影"，適當的陰影位置及陰影暈開程度能使文字有效的提升讀者注意力，也為網站增添幾分美感。

若以css來表示文字陰影的方式也十分簡單，僅需短短一行字就能製造出漂亮的文字陰影效果，且不受超連結影響，照樣能做出美觀的陰影字。

 

語法:

text-shadow:1px  1px  1px  #000000;

解釋:

 

text-shadow

照字面翻譯的意思就是"文字影子"，也就只需這短短一行以及後面的參數即可塑造出陰影效果。

 

1px  1px  1px

px這個單位就是指"像素"，為長度單位。

其中三個1px分別是定義"陰影距離文字最左方多少px、陰影距離文字最上方多少px、陰影的暈開程度"。

 

#000000;

此則是定義該文字陰影的顏色，建議若文字為黑色，陰影則選用灰色系(#999999)會較為美觀。

(色碼表參考:http://rhinejo.myweb.hinet.net/home/color/color-cord.html)

 

都將語法改換成自己所要的規格後即可將它放置於欲增加文字陰影的文字css內。

(放置於body{}內會使網站所有區域的文字皆改變。)

EX:

text-shadow:6px  6px  3px  #999999;

text-shadow:6px  6px  20px  #999999;

***IE可能無法顯示文字陰影效果***

 

【css】"服務切換tab"走山....

今天一打開網誌...

啥!?  服務切換tab怎跑位了....(如圖)

原本在"加到我的最愛"旁邊的"服務切換tab"

跑到.....下面去了

更糟糕的是....

更改它css裡位置還沒作用!?

嘖嘖....竟然如此頑固!!

那只好以正義之名來制裁它!

照理來說 只要改紅色字的部分就能調位置

但它就是不講理....

/* 服務切換tab*/
.tab_service{
position: relative;
    width: 260px;
    top: 0px;   
    left: 5px;    
    position: absolute;
}
.tab_service ul{
float: left;
    padding: 0px;
    margin: 0px;
}
.tab_service li{
    margin: 0px 0px 0px 0px;
    display: block;
    float: left;
    list-style-type: none;
    padding: 5px;
    color: #ffffff;               
    cursor: pointer;
    background: #000000;    
}

因為語法更改名稱

所以將

.tab_service{  改成  #service-list{

.tab_service ul{  改成  #service-list
li

.tab_service li{  改成   #service-list
a

 

這樣就會讓它乖乖回到之前所設定的位置啦~~

 

 

【css】更改網站字體

網站預設的字體有時總是有點....醜

為了不讓它影響整體的美觀所以要對"字體"來進行修改

一般改變字體就是加這段語法

font-family:"字體名稱","Times New Roman",Georgia,Serif;

但總是會有突發狀況

像是你設定這個字體

對方(瀏覽者)的電腦若沒有安裝這個字體

就等於 無效

所以可以多加幾個字體在語法內

以防萬一

範例:

font-family:"PMingLiU.serif,Microsoft JhengHei","Times New Roman",Georgia,Serif;

至於這串語法要放在哪裡就得看你想要改哪些範圍的字體來決定

改變全部字體

body{

font-family:"PMingLiU.serif,Microsoft
JhengHei","Times New Roman",Georgia,Serif;

}

改變左右欄字體

.sidetilte {

font-family:"PMingLiU.serif,Microsoft
JhengHei","Times New Roman",Georgia,Serif;

}

.personaltitle{

font-family:"PMingLiU.serif,Microsoft
JhengHei","Times New Roman",Georgia,Serif;

}

改變文章標題字體

/*文章標題列*/
.title{

font-family:"PMingLiU.serif,Microsoft
JhengHei","Times New Roman",Georgia,Serif;

}

我的網站基本上是沒有改字體

除了文章會改一下英文字體

因為每種字體的大小難免不同

若更改了字體會影響到不少先前調整好的物件

所以....就懶得改啦~~

 

【css】調整左欄linksLeft.右欄linksRight.中間欄mid寬度及位置

在著手做網頁時 若發生欄位大小不協調的情況...就好像眼睛一大一小XD

若要改變左欄linksLeft.右欄linksRight.中間欄mid寬度及位置

只要在它們的語法中動一點手腳就好啦~~

/*左欄*/
#linksLeft{
    width: 210px;
    left: 30px;
    padding: 0px;
    float: left;
    position: absolute;
    color: #999999;
    top: 295px;
}

語法解說:

width: 210px; 即為該欄寬度 可自行修改

left: 30px; 向左對齊 與左側距離的值可自行修改

top: 295px; 向上對齊 與最上端距離的值可自行修改

/*右欄*/
#linksRight{
    width: 210px;
    right: -240px;
    padding: 0px;
    float: right;
    position: absolute;
    color: #999999;
    top: 0px;
}

語法解說:

width: 210px; 即為該欄寬度 可自行修改

right: -240px; 向右對齊
與右側距離的值可自行修改

top: 0px; 向上對齊 與最上端距離的值可自行修改

/*中間欄*/
#mid{
    padding: 50px 10px 0px 250px;
    float:left;
    width:600px;

}

語法解說:

padding: 50px 10px 0px 250px; 對齊四周 上右下左對齊 不允許使用負值

width:600px; 即為該欄寬度 可自行修改

只要稍微的修改就能解決大小眼和鼻子腫脹的問題啦XD

 

 

【css】更改欄位名稱sidetitle的圖片&文字大小...等

欄位名稱sidetitle就是指在左右欄內的欄位 也包括自由欄位

更改它的背景圖片並不難

你能將它改成擁有自己風格的圖片

就像我的

也是最具有無中生有象徵性的"無"

欄位名稱sidetitle的語法若沒修改過的話應該是這樣

/*欄位名稱*/
.sidetitle{
    padding:8px 0px 0px 40px;
    font-weight: bold;
    font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
    font-size: 15px; /* 支援 Firefox 判讀 */
    height: 30px;
    list-style: none;
    background-image: url(圖片網址);
    background-repeat: no-repeat;
    color: #000000;
}

語法解說:

padding:8px 0px 0px 40px; 定義欄位名稱文字的位置

font-weight: bold; 文字設為粗體

font-size: 15px; /* 支援 Firefox 判讀 */ 設定字體大小

height: 30px; 設定圖高

background-image: url(圖片網址); 定義所要顯示圖片的網址

background-repeat: no-repeat; 圖片不反覆貼 單貼一張

color: #000000; 字體顏色

font-weight: bold;可以把bold改為數字 設定厚度

font-size: 15px; 字體大小可自行更改 數值越大 字體越大

height: 30px; 圖高也可自行更改 若設定圖高小於原圖圖高則會被截掉

background-image: url(圖片網址); 只要輸入已上傳到網路空間的圖片網址貼入即可

background-repeat: no-repeat; 不反貼可以改

可換參數:

repeat-x;  背景底圖從左至右一列

repeat-y;  背景底圖從上到下一行 

no-
repeat;   背景底圖只顯示一張 

repeat:repeat; 重複貼背景底圖

color: #000000;
字體顏色可以參考:http://rhinejo.myweb.hinet.net/home/color/color-cord.html

欄位名稱sidetitle改成適合自己網頁的樣式後

看起來就不會那麼突兀啦~~

 

 

 

 

 

 

【css】更改文章標題列title的圖片

在每篇文章的主題後面應該都有一張圖片作為它的底圖

若本來的圖片與整個主題不相配的話

整個看起來就會很突兀

所以就要從css中修改它啦~

一般文章標題列title的css應該是像這樣

/*文章標題列*/
.title{
    position: relative;
    width: 100%;
    height: 50px;
    background-repeat: no-repeat;
    background-image: url(圖片網址);
}

語法解說:

position: relative; 是指讓此元件以一般網頁排列
方式決定位置後 再以此點為相對座標定位

width: 100% 使用原始圖片100%寬度

height: 50px;圖高

background-repeat: no-repeat; 圖片不重複貼 單貼一張

background-image: url(圖片網址); 定義圖片及設定要顯示的圖片網址

要更改圖片當然就是從

background-image: url(圖片網址);

來做修改

只要將圖片網址輸入即可~

 

 

【css】更改網誌名稱的顏色

修改網誌名稱很多人認為只要從/*日誌名稱*/這裡將color:
#FFFFFF;修改掉

但非如此!

因為網誌名稱一般都是"連結"而非普通"文字"

所以要從連結的地方改

/*連結*/
A {
    color: #FFFFFF;
    text-decoration: none;
}
A:link {
    color: #759b5e;
    text-decoration: none;
}
A:visited {
    color: #096c46;
    text-decoration: none;
}
A:active {
    color: #95c34d;
    text-decoration: none;
}
A:hover {
    text-decoration: none;
    color: #95c34d;
}

只要將下面的 color:
#759b5e;做修改即可~

A:link與A:visited分別是滑鼠位移入超連結的顏色與移入超連結的顏色

A:link {

    color:
#759b5e;

    text-decoration: none;

}

A:visited {

    color:
#096c46;

    text-decoration: none;

}

但是如果改連結的話就會改變到全部的連結

譬如文章標題的連結顏色也會改

所以要在/*日誌名稱*/這裡加一段語法

/*日誌名稱*/
.blogname{
 font-size: 25px;
 font-weight: bold;
 color: #FFFFFF;
 padding-left:20px;
 padding-top:80px;
}

.blogname a:link {
 color:#FFFFFF;
 text-decoration:none;
}
.blogname
a:visited {
 color: #FFFFFF;
 text-decoration:none;
}

加入藍色那段語法後就不會影響到其他連結的定義了!

本來的color:
#FFFFFF;似乎也是沒有意義

刪掉也不會影響到顏色

【css】更換檔頭banner

把檔頭換成擁有自己風格的圖片才夠炫呀~~

從此以後再也不會跟人撞檔頭XD

更能搭配動畫設計來製作檔頭

GIF製作參考:

 製作gif圖片的工具-Microsoft GIF Animator

線上製作gif圖像的工具-gifninja

讓自己的網頁更搶眼!

/*檔頭*/
#banner{
    margin: 0px 0px 0px 0px;
    padding: 0px;
    height: 300px;
    background-image: url(圖片網址);
    background-repeat: no-repeat;
    background-position: center top;
    width: 970px;
    left: 0px;
}

一般xuite的檔頭css語法應該就差不多是這樣

語法解說:

margin: 0px 0px 0px 0px; 定義圖片擺放的位置

height: 300px; 圖高

width: 970px;  圖寬

background-image: url(圖片網址);  使用圖片來作為檔頭且輸入圖片的網址

background-repeat: no-repeat;  檔頭圖片單貼一張

left: 0px;  向左對齊 距離左側的值

 

只要將background-image:
url(圖片網址);

 (圖片網址)填入已上傳到網路空間圖片的位置即可

位置也能自己更改

做成gif檔頭一定能更搶目光~

 

 

 

 

 

【css】更換網頁背景底圖

在改網頁css時必學的就是更改網頁底圖

"body"可以算是最下層的底圖

"定位框"則是在"body"之上

所以body的底圖若修改

定位框的範圍內不會受到變動

只有body減掉定位框剩下的空間會被變更

改body底圖的語法:

body{ 
    margin:0px 0px 0px 0px;
    text-align:
center;
    background-image:url(圖片網誌);
    background-attachment:fixed;
    background-repeat:repeat;
}

語法解說:

margin:0px 0px 0px 0px;   定義底圖擺放位置

text-align:
center;  使用此背景圖像

background-image:url(圖片網誌);  要更改的圖片網址

background-
attachment:fixed;  表示拉動捲軸時底圖不動

background-repeat:repeat;  重複貼背景底圖

可換參數: 

repeat-x;  背景底圖從左至右一列

repeat-y;  背景底圖從上到下一行 

no-
repeat;   背景底圖只顯示一張 

repeat:repeat; 重複貼背景底圖

定位框的背景底圖更改:

/*定位框*/ 

#wrap{}
#container {
        position:relative;
        text-align: left;
        width:986px;
        padding:0px;
        margin:0px auto;
        background:url(圖片網址) repeat-y center;
        border:0px solid #6e6e6e;
        overflow:hidden;
}

語法解說:

background:url(圖片網址) repeat-y center;

就與改body背景底圖一樣

可以自己選擇想要的貼圖方式與貼的圖片

可換參數: 

repeat-x; 
背景底圖從左至右一列

repeat-y;  背景底圖從上到下一行 

no-
repeat;   背景底圖只顯示一張 

repeat:repeat;
重複貼背景底圖

-------------------------我是分隔線-----------------------

雖然有時背景底圖不是必要的

像我也都是"空白"一片....

極簡風也是很有它的風格 (雖然我的版面應該是很凌亂複雜.....)

但body與定位框間距太大的話

感覺有點空虛

添加個圖片是一個不錯的選擇~

【css】更改網站字的顏色

在之前改八大行星CSS的時候由於背景都是黑色系

但字本身是用預設的黑

所以完全看不到

改字的顏色非常簡單....

它簡單的程度讓我為之驚奇

只要.....

body{

color:#FFFFFF

}

簡單來說就是加上color:#FFFFFF這段語法

就是定義在body範圍內字的顏色

色碼可以自己改

就是 如此 簡單.....