HTML CSS高階學習摘錄(文字效果)(四)

2021-08-03 13:42:17 字數 1080 閱讀 2113

(1)"text-indent : 2em ;"實現段落首行縮排

(2)"text-indent: -9999 px ; " 隱藏標題h1內容,使用logo作為h1的背景。display:none 隱藏元素,搜尋引擎會直接忽略(搜尋引擎優化)。

text-align對文字、inline元素以及inline-block元素起作用,但對塊元素不起作用。img屬於inline-block元素。

對於塊元素,需使用"display: inline-block;"轉化後,"text-align: center;"才有效。

" text-align:center;"與 "margin: 0 auto;" 的區別

(1)" text-align:center;"實現的是文字、inline元素以及inline-block元素的水平居中。

(2)"margin: 0 auto;" 實現的是對塊元素的水平居中。

(3)" text-align:center;"在父元素中 定義,"margin: 0 auto;"在當前元素中定義。

行高(line-height)指的是兩行基線之間的垂直距離 。

(1)定義height和line-height這兩個屬性值相等 ,就可以實現單行文字的垂直居中。

(2)line-height取值為百分比值、em值

當前元素的行高是相對于父元素的font-size來計算的。

line-height = (父元素 font-size )* (百分比)

line-height = (父元素 font-size)*(em值 )

子元素會繼承父元素行高。

(3)line-height取值為無單位數字

line-height = (當前元素的font-size)*(無單位數字)

子元素會繼承父元素的係數。

(1)vertical-align 屬性用於定義「周圍的文字、inline元素以及inline-block元素」相對於該元素基線的垂直 對齊方式。

(2)vertical-align 對 table-cell型別元素有效。

(3)vertical-align取值 負值、百分比、關鍵字(top,middle,baseline,bottom)

HTML CSS高階學習摘錄(效能優化)(七)

1 盒模型縮寫 border padding margin 2 背景縮寫 3 字型縮寫 font 微軟雅黑 12px 1.5em bold 4 顏色值縮寫 color 000 1 空白符 2 結尾分號 3 url的引號 4 屬性值為0 可不新增單位 5 屬性值為以0開頭的小數 6 合併相同的定義 7...

高階視點 摘錄

突然發現能看的懂程式設計師雜誌了,有些文章 語言對自己似乎有所觸動和啟發,有種字字珠璣的感覺。摘錄部份文章片斷以做收藏。一 軟體不是 二 面向服務體系的理念 以上兩段摘於 soa 從應用開始 普元軟體公司創始人 董事 兼首席技術官 黃枊青 四 按照建立的價值高低及所造成的影響可分為三個層面 持續創新...

HTML CSS筆記 CSS高階

我們可以使用css樣式為網頁中的文字設定字型 字型大小 顏色等樣式屬性。語法 body 這裡注意不要設定不常用的字型,因為如果使用者本地電腦上如果沒有安裝你設定的字型,就會顯示瀏覽器預設的字型。因為使用者是否可以看到你設定的字型樣式取決於使用者本地電腦上是否安裝你設定的字型。現在一般網頁喜歡設定 微...