以下將以官方樣板的「white style」為例做說明。
變更文字大小欲變更文字大小時,也可以簡單修正CSS。在此以變更「部落格標題」的大小為例。
在HTML的編輯上,尋找記述標題的部分。
以下為有記述標題部分的標籤。
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
標題部分為前後<h1>所涵蓋的部分。
若將所涵蓋的部分加以設定,則可以變更文字的大小。
h1 { font-size: 180%; }
請試著在實際的樣板中,找出<h1>的範圍。指定在「font-size:」後面的實數值+單位、%值、關鍵字等。
實數值+單位在數值上加上單位指定文字大小。無法指定負數值。
單位有
px, ex, em, in, cm, mm, pt, pc等。
%值
以對應母要素的文字大小的百分比來指定文字大小。
關鍵字
以七階段的關鍵字來指定文字大小。
xx-small | x-small | small | medium | large | x-large | xx-large
以對應母要素的文字大小的關鍵字,來個別指定縮小一階段或是放大文字。
smaller
| larger
根據瀏覽器種類的設定,使用pt或是px等單位來指定文字大小時,用戶方將無法變更文字大小。
因為這些單位將可能會剝奪「必要時變更文字大小」的功能,因此建議您使用em或是%來設定文字大小。
變更文字顏色欲變更文字顏色時,在對應的要素中設定顏色內容即可變更。
在CSS上好有幾種方法可以指定顏色,但通常所使用的顏色編碼為
[# 和6個字元] 或
[# 和3個字元]。
在變更文字顏色時,請先決定要使用何種顏色編碼(顏色)。
以下範例將說明如何同時變更網站全體的文字顏色,和只變更本文的顏色。
進行網站全體的變更時,請套用最上位要素的HTML,html(body)。
HTML的要素和親子關係▼HTML全體(親)
<html>
<head>
<meta>
<title></title>
</head>
<body>
<h1></h1>
<p></p>
<address></address>
</body>
</html>
▼<body>內的樣式設定(子)
body {
background-color: #FFFFFF;
color: #666666;
}
變更「
color: #666666;」的數字部分後即可變更網站全體的文字顏色
(例:設定為「
#000000」時,文字將變為黑色)
那麼如果要將本文設為黑色,文章標題設為紅色時該如何進行變更呢?以下為您解說選擇器的使用方法。
基本選擇器什麼是選擇器?
選擇器即為指定何種樣式適用於HTML的要素(標籤)上。
下列以選擇器為例,來確認看看選擇器如何指定。
▼選擇器範例
上圖中,橘色為「選擇器」,水藍色為「內容」,藍色為「值」。
「內容」為指定「適用何種樣式」、「值」為指定「適用樣式的具體內容」,因此依照上面的選擇器的範例,在<h1>的標籤裡,將為指定「顏色內容」是「值#FFFFFF」的意思。在此可以利用逗號區隔指定複數。
要素名h1 { ... }
將樣式套用在指名標籤名稱的要素上
*(星號)
*.MyClass { ... }*#MyID { ... }將樣式套用在所有要素上
要素名#名稱p#MyID { ... }將樣式套用在該要素中所指定的識別(ID)屬性的要素上。
要素名・名稱p.MyID { ... }將樣式套用在該要素中所指定的class屬性的要素上。
以此為例,來試試看變更文章本文的文字顏色吧。
變更文章本文的文字顏色
將文章本文展開後所顯示FC2部落格的單獨標籤為
<%topentry_body></strong> <%topentry_body>
下圖中的黃色部分。
▼編輯HTML
包含此標籤的母要素為 <div class="entry_body">
(圖中紅色部分)
▼樣式單變更編輯前
現在來嘗試將文章內文設定成紅色。將下列輸入至圖中所標示的
[overflow:hidden] 下方。
color : #FF0000; /
▼樣式單變更編輯後
如此一來即完成文字顏色的變更。可以利用選擇器來縮小適用的條件範圍。
變更連結的顏色連結顏色的設定,可以使用pseudo class來進行設定。
當在設定
:hover pseudo class時,請務必注意順序(link > visited > hover > active)。
若順序有誤時將無法正確顯示結果。
要素名:link
適用於未被閱覽的連結(未產生Cache)
要素名:visited
適用於已經被閱覽的連結(已產生Cache)
要素名:hover
適用於當用戶將滑鼠游標放置在該要素上,或是當沒有在活動中狀態時。
要素名:active
適用於當用戶將該要素設為活動中狀態。
設定頁面全體的連結時
a:link {color : #f60; /* Non-viewed links become orange */}
a:visited {color : #00f; /* Viewed links become dark blue */}
a:hover {color : #f00; /* Link becomes red when the mouse cursor is moved over.*/}
a:active {color : #f00; /* Active link becomes red */}
設定所指定特定等級的連結
a.MyClass:link {color : #f60; /* Non-viewed link becomes orange. */}
a.MyClass:visited {color : #00f; /*Viewed link becomes dark blue. */}
a.MyClass:hover {color : #f00; /*Link turns red when mouse is moved over. */}
a.MyClass:active {color : #f00; /* Link colour is red when active. */}
設定所指定有包含特定等級的連結
MyClass a:link {color : #f60; /* Non-viewed link becomes orange */}
.MyClass a:visited {color : #00f; /*Viewed link becomes dark blue */}
.MyClass a:hover {color : #f00; /* Link becomes red when mouse is moved over. */}
.MyClass a:active {color : #f00; /* Link turns red when active. */}}
變更背景變更背景色背景顏色和背景圖片皆可在樣式單中簡單地做變更。
請在該要素上套用background內容。
全體的變更以及部份的變更請參照前面所敘述的選擇器說明。
背景色的設定為使用background-color內容。
在下圖中的紅色框框部分的值,請依照樣式單上的書寫形式任意指定顏色。
變更背景圖片背景圖片的設定為使用background-image內容。
圖片的排列方式以及顯示位置等,可在background-repeat內容和background-position內容設定。
body {
background-image : url("Image URL”); /* Sets the background image */
background-repeat : repeat; /* Set images as tiles */
background-position : left top; /* Set the image position to the left of the screen */
background-attachment : fixed; /* Fixating the background image position */
}
圖片的排列方法repeat
背景圖片只往橫向重複排列。
repeat-y
背景圖片只往縱向重複排列。
no-repeat
背景圖片僅以單一顯示。
圖片的顯示位置實數值+單位
用數值來設定間隔,指定橫向或縱向的開始位置。
單位為
px, em, ex, in, cm, mm, pt, pc。%值
用%來設定間隔,指定橫向或縱向的開始位置。
left | center | right
top | center | bottom
用關鍵字來設定間隔,指定橫向或縱向的開始位置。
指定順序並無特別限制。
圖片的固定配置fixed
固定背景圖片的位置。
scroll
圖片與其他內容一起展開。