網頁製作css代碼「html字體樣式代碼大全」

前兩篇文章介紹了創建html文件及常用的標籤，今天我們來了解一下常用的樣式屬性。

廢話不多說，跟著橙先生學起來吧！記得要動手操作試試看哦，不能只是看看，當時記住了，也許實際操作時還是不會。

像你家的房間都有大小、功能之分，標籤的樣式也是同樣的。

這裡我不講行內樣式、內部樣式和外部樣式的區別

直接用行內樣式做演示，這樣比較清楚，待進一步學習後再了解也不遲！

只是書寫的方式不同罷了，樣式還是那些樣式！

我們直接用最具代表性的div標籤來做介紹

<div style=”width: 300px; height: 300px;”>這是一個div標籤</div>

如上，我們直接在div標籤中添加樣式，書寫形式style=””

所有樣式都寫在引號中，屬性加冒號加值並以分號結束（如width: 300px;）

以下面的實例來一一介紹

<div

style=”

width: 300px;

height: 300px;

border: 5px solid #000000;

background-color: #ffa500;

color: #0000ff;

font-size: 20px;

text-align: center;

font-weight: 700;

line-height: 300px;

“>

這是是一個div標籤,以下是橙先生為你做的各個屬性介紹

</div>

樣式效果

width:是用來定義標籤的寬度，單位常用px（像素）

height:用來定義標籤的高度，同樣常用px單位

border:用來定義標籤的邊框，如上的5px代表邊框的寬度，solid表示是實線（常用的，其他線型不做介紹，自己百度了解），#000000是顏色的十六進位值（這部分也請自行了解）

background-color:用來定義標籤的背景顏色，同樣用顏色的十六進位值表示

color:用來定義文字的顏色，也是用顏色的十六進位值表示，默認是黑色字

font-size:用來定義字體的大小，常以px為單位

text-align:用來定義文字的水平對齊方式（居中center、左對齊left、右對齊right）

font-weight:用來定義字體的粗細，默認為normal、bold加粗(常用，或700)、bolder更粗、lighter更細，100、200、300、至900定義由粗到細的字元。400 等同於 normal，而 700 等同於 bold。

line-height:如果數值和height的值相同時，是垂直居中對齊

以上樣式都了解了嗎？動動手試試吧！相信你會有更深刻且不一樣的認識，今天就介紹到這裡，每天進步一點點！下一篇我們進一步介紹其他標籤的特殊樣式屬性！