HTML CSS筆記 CSS高階

2022-08-26 04:36:13 字數 2104 閱讀 1743

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

語法:

body

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

現在一般網頁喜歡設定「

微軟雅黑

」關於字型的問題可以參考阮一峰的經典文章:

另外對於英文襯線體和非襯線體還有一篇文章

:語法:

body

or:

body

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

因為這種字型即美觀又可以在客戶端安全的顯示出來(使用者本地一般都是預設安裝的)。

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

語法:

body

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

語法:

p span

如果想為文字設定粗體是有單獨的css樣式來實現的,再不用為了實現粗體樣式而使用h1-h6或strong標籤了

語法:

p a三年級時,我還是乙個

膽小如鼠

的小女孩。

有些情況下想為文字設定為下劃線樣式,這樣可以在視覺上強調文字

語法:

p a三年級時,我還是乙個

膽小如鼠

的小女孩。

如果想在網頁上設定刪除線怎麼辦,這個樣式在電商**上常會見到:

語法:

.oldprice

中文文字中的段前習慣空兩個文字的空白

語法:

p2023年的春天,乙個想要成名名叫尼克卡拉威(托比?馬奎爾tobey maguire 飾)的作家,離開了美國中西部,來到了紐約。那是乙個道德感漸失,爵士樂流行,走私為王,**飛漲的時代。為了追尋他的美國夢,他搬入紐約附近一海灣居住。

注意:2em的意思就是文字的2倍大小

另乙個在段落排版中起重要作用的行間距(行高)屬性(line-height)

語法:

p菲茨杰拉德,二十世紀美國文學巨擘之一,兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗輓歌,其詩人和夢想家的氣質亦為那個奢靡年代的不二註解。

上面設定了行間距是1.5倍

如果想在網頁排版中設定文字間隔或者字母間隔就可以使用    

letter-spacing來實現

語法:

h1...

注意:這個樣式使用在英文單詞時,是設定

字母與字母

之間的間距。

單詞間距設定:

語法:

h1...

想為塊狀元素中的文字、設定居中樣式嗎?可以使用text-align

塊狀元素包括了 div, hx...

語法:

h1

當然也可以設定居左

語法:

h1

還可以設定居右

語法:

h1

來自為知筆記(wiz)

HTMLCSS學習筆記(十一) CSS統籌

css層疊指的是樣式的優先順序,當產生衝突時以優先順序高的為準。css的乙個主要特徵就是繼承,它是依賴於祖先 後代的關係的。繼承是一種機制,它允許樣式不僅可以應用於某個特定的元素,還可以應用於它的後代。整站裡相同的css樣式提取到乙個樣式表裡,各個頁面呼叫相同的樣式檔案即可。較大的情況下一般會把 的...

CSS高階學習筆記

1 div與span標記 簡單而言是乙個區塊容器的標記。即.之間相當於乙個容器,可以容納段落 標題 乃至章節 摘要和備註等各種html元素。span標記也是乙個容器標記。div與span的卻別 div標記類似與p標記,不同的div會換行。span標記是行內標記,不同的span不會換行顯示。2 盒子模...

HTML CSS 學習筆記三 CSS選擇器

div span p.center center center 段落居中 兩個選擇器之間不加空格或符號 選擇器1選擇器2選擇器3 被選中的元素需要同時滿足所有選擇器 選擇器1,選擇器2,選擇器3 只要符合其中乙個選擇器就會被選中 兩個選擇器之間用空格隔開 祖先元素 後代元素 後代元素 直接後代選擇器...