html5學習記錄08 認識css樣式文字排版

2021-07-09 13:44:37 字數 1405 閱讀 6386

我們可以使用css樣式為網頁中的文字設定字型、字型大小、顏色等樣式屬性。

body

這裡注意不要設定不常用的字型,因為如果使用者本地電腦上如果沒有安裝你設定的字型,就會顯示瀏覽器預設的字型。(因為使用者是否可以看到你設定的字型樣式取決於使用者本地電腦上是否安裝你設定的字型。)

現在一般網頁喜歡設定「微軟雅黑」,如下**:

body

body
注意:第一種方法比第二種方法相容性更好一些。

可以使用下面**設定網頁中文字的字型大小為12畫素,並把字型顏色設定為#666(灰色):

body

我們還可以使用css樣式來改變文字的樣式:粗體、斜體、下劃線、刪除線

p span
取值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

p a
p a
.oldprice
px是絕對單位,不支援ie的縮放。

em是相對單位,網頁中的文字能放大和縮小。將行距(line-height),和縱向高度的單位都用em。保證縮放時候的整體性。

任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算,需要在css中的body選擇器中宣告 font-size=62.5%,這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10,然後換上em作為單位就行了。

em有如下特點:

1. em的值並不是固定的;

2. em會繼續父級元素的字型大小。

所以我們在寫css的時候,需要注意:

1. body選擇器中宣告font-size=62.5%;(font-size=63%;用於ie6相容)

2. 將你的原來的px數值除以10,然後換上em作為單位;

3. 重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。

p
p

h1

單詞間距設定

如果我想設定英文單詞之間的間距呢?可以使用word-spacing來實現。如下**:

h1

h1

Html5學習記錄

br 換行符 1 超連結 a a 屬性 href 鏈結位址 target blank 建立新頁 self 重新整理本頁 2 粗體 b b 3 斜體 i i 4 下劃線 u u 5 刪除線 s s 6 強調 em em 1 table table 2 普通行 tr tr 3 標題行 th th 4 單...

HTML5學習記錄(二)

1 網頁就是使用純文字寫的 1 標籤需要有開始和結束。例如 文字內容 2 根標籤 有且只有乙個,網頁所有的內容都要寫到根標籤裡面 3 子標籤 兩個同級 4 head標籤不會在網頁中直接顯示,只是用於設定一些資訊給瀏覽器使用,幫助瀏覽器解析頁面的 5 body網頁主體,需要展示的內容要寫到這個裡面,網...

html5學習記錄06 認識CSS樣式3中形式

css 樣式由選擇符和宣告組成,而宣告又由屬性和值組成,如下圖所示 選擇符 又稱選擇器,指明網頁中要應用樣式規則的元素,如本例中是網頁中所有的段 p 的文字將變成藍色,而其他的元素 如ol 不會受到影響。宣告 在英文大括號 中的的就是宣告,屬性和值之間用英文冒號 分隔。當有多條宣告時,中間可以英文分...