HTML5教學初學者必學:CSS基礎語法-文字管理包在我身上!

 

HTML5教學的CSS上得你頭昏眼花嗎?這裡直接幫你整理有CSS碼,讓你一目瞭然!

 

1. 跟字型相關的CSS設定 (常用)

屬性名稱

說明

設定範例

font-family

指定使用的字體,可以設定多個,讓瀏覽器依照排序使用

font-family: 微軟正黑體,"Arial";

font-size

指定字體大小,有多種單位可以使用:

small、large、pt、px、cm、%

font-size:16pt

font-size:large

font-weight

指定字型厚度,數值越大字型越粗

也可以直接使用"bold"指定之

font-weight:100;font-weight:bold;

font-style

指定字型樣式,大多用來設定斜體

font-style:italic;

 

 

2. 跟文字排列 (行距、排序) 有關的設定

屬性名稱

說明

設定範例

letter-spacing

指定字與字之間的間距

letter-spacing: 4pt;

line-height

設定行高

line-height:200%

line-height:16px

text-align

指定字型對齊方式

包含 left(向左)、center(置中)、right(向右)、justify(左右對齊)

text-align:justify;

text-decoration

修飾文字

包含 underline(底線)、overline(上線)、line-through(刪除線)、blink(讓文字閃爍)、

text-decoration:line-through;

text-decoration

修飾文字

包含 underline(底線)、overline(上線)、line-through(刪除線)、blink(讓文字閃爍)、

text-decoration:line-through;

text-indent

段落的第一行要留多少縮排

text-ident:20px

text-ident:12pt;

text-transform

大小寫控制

包含 capitalize(第一個字母大寫)、uppercase(全部字母大寫)、lowercase(全部字母小寫)

text-transform:uppercase;

word-spacing

僅適用於英文單字,控制「英文單字」間的距離

用法與 letter-spacing 有點類似,不同的是

word-spacing 控制的是單字(或段落)而非單一字母

letter-spacing 控制的則是單一字元間的距離。

word-spacing:2px;

 

其實除了文字之外,前端工程師都知道,在HTML5教學裡,當網頁的各個元素進行 CSS 格式設定時,會有一個 「盒子模型 (box model) 」 的概念:就是所有要被設定的元素,都會被視為一個盒子"<span>"或"<div>"。

 

而些盒子的內容都是被框 (border) 包著的,內容與框中間又有所謂的留白 (padding)。而這個框 (border )的粗細是可以調整的。今天HTML5教學做了以下範例:

該範例包含兩個大盒子 <div> 與 <div> ,而第一個<div>中又放了三個小盒子<span>,所以我們在<div>中設定的值,三個 <span> 內的文字也會同步被變更。而這三個<span>又可以分別獨立設定邊框大小與線條形式、顏色、粗細。(border的設定依據為粗細、樣式、顏色)。這是較簡單的區塊設定方法,如果要朝前端工程師邁進,一定得拜讀下一章。在下一章中,將會更進一步說明邊框的設定值,並說明如何用 CSS 設定邊框(CSS設定的邊框還可以導圓角喔)。

 

 

相關連結:

HTML5教學初學者必學:CSS基礎語法-區塊.邊框一把罩

HTML5教學的初學者看過來!你得從這兩樣東西開始!

開始踏上HTML5教學的道路,這東西讓你網站美觀又吸引人!

網路行銷課程的SEO教學說:SEO有黑帽和白帽,你知道嗎?

醫界領袖也對Python課程趨之若鶩

網路行銷課程教你辨別黑白帽SEO

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

arrow
arrow
    創作者介紹
    創作者 Uder.chain 的頭像
    Uder.chain

    娶了UI設計師的Python工程師-北歐生活

    Uder.chain 發表在 痞客邦 留言(0) 人氣()