FIND Select Shop

× 前言





基於大家都對修改css樣式表感到困難而卻步，所以我才提供教學

要修改css樣式表首先要具備的是"耐心"

看到長串的英文數字，大家難免會覺得很頭痛吧??

仔細摸索其實一點都不難，只不過是一些簡單的小東西喔!!

改到最後搞不好會像我變成興趣，越改越有趣~

只要你對自己的網誌樣式有足夠的耐心和愛心，一定可以改出自己的風格喔!!





× 教學開始





先介紹標籤的部份，在大家的css樣式表中都會有很多body{}、.side{}...

等等的英文數字加上大括號組合而成的東西，那就是所謂的標籤~

而這些標籤就是用來指定每個部份的樣式而產生的~

每個部落都有不同的標籤指定方法，所以用無名的css樣式套到別的部落會有問題

就是因為標籤不同的關係喔!!

知道了什麼是標籤後，我們要怎麼明白哪些標籤是指定哪些部分呢??

最簡單的方式就是"教學型樣式套用"後，htcmi - 歪八先生貼心的附上了中文說明

讓大家知道哪些部分是指定哪些部分喔!! 是不是"就甘心"阿??...(全國電子，就甘心)

還有一個方法是在自己的網誌點右鍵→檢視原始檔(有時候會看不見，多試幾次)

可以看見網誌的所有原始檔，然後ctrl+f 啟動搜尋功能~打上id 或class

就可以找到所有被指定的標籤，當然這個方法大概很多人都覺得很難吧??

貼心的19先生整理了標籤的所有列表喔... → 到標籤列表頁面





知道了標籤是指定哪裏之後，就可以開始進行設定了...

最基本的樣式表語法分別有：

color: #色碼; /* 文字顏色指定 */

font-size: 8pt; /* 文字大小 */

font-family: verdanda; /* 字型指定 */

　我通常用verdana，可以用word看字型，但非windows內建的無法在每台電腦正確顯示

　常用的有 verdana、Arial 等等...verdana為製作網頁常用字型，最小可到 7pt

background: #色碼; /* 背景色指定 */

　背景的指定有分項目指定。ex：background-color:; background-image:; 等

　我慣用的是 background: #色碼 url(圖片網址) no-repeat fixed 100% 100%;

　其中 no-repeat 即不重複，改成 repeat 重複，repeat-y y軸重複，repeat-x x軸重複

　fixed 表示不隨卷軸移動，即固定背景。

　100% 100% 為 x、y軸的位置百分比表示，前者為x軸(橫向)後者為y軸(直向)

　也可使用left top(左上)、right top(右上)、left bottom(左下)、right bottom(右下)

border: 1px solid #色碼 ; /* 整圈框線指定 */

　solid 表直線、dashed 表虛線、dotted 表點線(2px以上較明顯)、double 表雙框線(3px以上)

　px就是線條寬度，1px最細，可以指定到多粗都沒問題，基本上以 1px~5px為多

　也可分別指定上下左右的框線~語法如下...

　border-top:; border-bottom:; border-left:; border-right:;

margin: 0px; /* 邊界寬度 */

padding: 10px; /* 空白寬度 */

　以上兩樣有什麼不同呢??

　margin表示此表格外的邊界距離，padding表示表格內容與邊框的邊界

width: 500px; /* 寬度指定 */ ＆ height: 500px; /* 高度指定 */

　以px(像素)為單位，數字越大越寬，越小越窄，對數字沒概念的話...

　螢幕解析度即以px為單位的~一般是1024 × 768~懂了吧??

text-align: left; /* 文字排列 */

　left即是靠左，若改為center則為置中，改為right則為靠右

line-height: 180%; /* 文字行距 */

　可用百分比表示，180%表示為文字大小的180%倍高，也可用pt、px指定





以上，大概就是常常會用來指定各部份的樣式指定法~

每個標籤項目都可以用這些樣式指定其標籤的顯示樣式喔!!

當然，這些都是基礎教學，進階的濾鏡使用和隱藏等等樣式...

可以參考許多教學網站提供的css教學~或是問人也可以~

在這邊推薦大家可以去的教學網站→ OECSPACE

站長所做的css教學比我的詳細且多樣了許多喔~建議想學css樣式的人跑一趟~

css樣式本身是用在網頁製作，而現今多被用在部落的樣式設計上~

而css的活用程度是非常廣的，如同大家看到許多眼花撩亂的網誌設計~

leah的網誌全是用css寫的喔~很不錯吧??

教學結束，下台一鞠躬...如果有任何問題，請於回覆提出...