css中的字體樣式一般包含有就9中，常見的有7種。這7種依次為：
1.字體樣式：font-family；
2.字體大小：font-size；
3.字體加粗：font-weight；
4.字體斜體：font-style；
5.顏色：color；
6.文本裝飾線條：text-decoration；
7.文字陰影：text-shadow；
其中，
font-famil用於設置文字名稱，可以使用多個名稱，或者使用逗號 分隔，瀏覽器則按照先后順序依次使用可用字體。其使用方式如下
font-family：”family-name“；
例：
p { font-family:‘宋體'，'黑體', 'Arial’ }；
使用font-family之后，文字會根據相應的字體呈現出不同的效果。
font-size用於設置文字的尺寸大小。它的使用方法為：
font-size ： <length> | <percentage>；
如果用百分比作為單位，則是基於父元素字體的大小。
例：
p{font-szie：20px}
font-weight用於設置文字的粗細。
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
使用了font-weight之后，文字將會呈現出不同的粗細效果。
例：
p { font-weight:bold;}
p標簽中的文字將會以粗體的方式呈現。
font-style用於設置字體的樣式，主要體現在字體的傾斜上。
font-style : normal | italic | oblique
其默認的屬性值為normal，即正常顯示的字體樣式，其另外的兩個屬性值都講呈現斜體的效果哦。
例：
p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }
對於上面的四個文字屬性，我們可以簡寫，其簡寫的語法如下：
font : font-style || font-variant || font-weight || font-size || / line-height || font-family
例：
p { font:italic bold 14px/22px 宋體}
其結果等價於
p{ font-style:italic; font-weight:bold; font-size:14px; line-height:22px; font-family:宋體; }
剩下的color，text-decoration，text-shadow它們的語法分別為：
color：<color> text-decoration : none || underline || blink || overline || line-through text-shadow: h-shadow v-shadow blur color;
其中color的屬性值有三種表示方式：1英文字母描述，如p{color:red;}；2#后接6位十六進制數，如p{color:#ff0000}其中十六進制數如果每兩個相同可進行簡寫P{color:#f00}；3用rgba(0~255,0~255,0~255,0-1)，其中最后一個表示不透明度，可以省略，則默認值為1。rgb()。
text-decoration的屬性值顯示的效果為文本被線條穿過的位置，
例
p { text-decoration:overline;}
p { text-decoration:underline;}
p { text-decoration:line-through;}
這三個例子依次表現的是文本的上划線，下划線與中划線。
text-shadow是描述文本的陰影效果，它的前兩個屬性值為文字陰影的水平位移與垂直位移，后兩個屬性為陰影的模糊程度及陰影的顏色（可選）。
例：
h1{ text-shadow: 2px 2px #ff0000; }
表示的是h1標簽中的文本會產生水平2像素，垂直2像素的紅色陰影。
除上述的文本樣式外，還有@font-face，它能夠加載服務器端的字體文件，讓瀏覽器端可以顯示用戶電腦里沒有安裝的字體。該種樣式並不常用。
除了字體樣式外，元素樣式是我們經常見到與使用的css樣式了。它常見的樣式有包括width，height，margin，padding。
其中width和height表示的分別是元素的寬度和高度，其值一般為px。
例：
div{width:300px;height:300px}
表示的是一個長度為300像素，高低為300像素的盒子。
margin和padding則表示的是元素的外邊距和內邊距，其值可設一到四個不等：
margin: 上邊距 右邊距 下邊距 左邊距
margin: 上下邊距 左右邊距
margin: 上邊距 左右邊距 下邊距
padding的取值與margin類似。
注：以上四種元素的樣式只適用於塊級元素，若想在內聯元素中使其達到相同的效果，則應在內聯元素中加入樣式{display：block}。
以上四種元素樣式對於網頁布局有着十分重要的作用。