目前在做ife的練習,初步學習到css內容,所以做了總結。
本博文主要分為兩部分,第一部分介紹css字型屬性,第二部分則介紹了文字常用屬性
s1 首先介紹一下什麼是字型系列:
所謂字型系列,我理解的就同一字型下 的不同風格的具體字型的集合。通俗模擬一下,我們知道楷書下有不同風格的字型,比如顏體、柳體、瘦金體等等,這些是具體的不同風格的字型。但是,他們都屬於楷體,只是具體的細節有差異。這裡的楷體,就可以看做
是乙個單獨的字型系列。
s2 接下來介紹,css預定義的5種通用字型系列
serif字型: 有修飾性的襯線(修飾線條),而且字元之間是成比例的(寬度不一致);
sans-serif字型: 沒有襯線,字元成比例;
monospace字型: 每個字元具有相同寬度的字型,通常用於**列表;
cursive字型: 模擬人類筆跡的字型,具有流動的連線筆畫;
fantasy字型: 裝飾性的各種 「浮誇」 字型
s3 定義字型系列的方法
使用font-family屬性
來定義字型系列
a1 可以指定乙個通用字型系列;
a2 可以指定乙個具體的字型系列,注意當該具體字型系列在客戶端不可用時,瀏覽器會使用預設設定字型顯示;
所以,最好的方法是,結合特定字型名和通用字型系列,以實現平穩退化原則
s4 特別注意
如果乙個字型名中有乙個/多個空格/特殊字元如#、$之類的,需要用引號宣告字型,如下**例子:
p
網頁安全字型
關於網頁安全字型的概念,參見mdn基本文字和字型樣式;
s1 首先介紹字型加粗屬性font-weight
a1 值是關鍵字/100~900的整百數值,
一般情況下,400≈normal / 700≈bold,
關於數值加粗的原理,詳情見 css權威指南p109 ,真正用的時候,一般直接用數值試一試即可
a2 具有繼承性
s2 bolder/lighter屬性值的原理
a1 確定繼承自父元素的font-weight值;
a2 選取比繼承的font-weight對應值 + 更粗一級數值中的 + 最小的數值;
a3 如果繼承的font-weight值 已經是 最大900/最小100,那麼bolder/lighter值保持不變
s1 首先介紹字型大小屬性font-size
a1 值可以是 關鍵字/ length / percentage / em / rem
關鍵字: 實際開發中很少使用
em/百分比: 根據父元素的字型大小計算, 1em = 當前元素的父元素上 設定的字型大小
因為具有繼承性,所以可能會導致縮放失控,比如:
a 祖先元素:12px;
b 父元素: 120%, 即 12 * 1.2 = 14.4px(可能會取整);
c 子元素: 135%, 即 14.4 * 1.35 = 19.44px
rem: 1rem 等於 html 中的根元素的字型大小,推薦使用
a2 具有繼承性
s2 明確乙個重要概念:
a1 每種字型的字元設計大小一般都等於小於 其模板框em框大小;
a2font-size
的作用就是設定給定字型的em框的大小,而不能保證實際顯示的字元大小
簡而言之,就是font-size負責的是模具的大小,而不是真正實際字元的大小
s1 字型風格屬性font-style
a1 值可以是 normal / italic/oblique (通常兩者效果是一樣的,都是斜體)
s2 字型變形屬性font-variant
a1 值可以是 small-caps, 用於建立 小型大寫字母文字(具體效果見css權威指南p124)
s3 字型拉伸屬性font-stretch
,了解即可
s4 字型大小調整屬性font-size-adjust
,了解即可
s1 所有字型屬性的 集合屬性font
a1 一般值是 font-style/font-weight/font-variant(可交換順序) + font-sieze + font-family
a2 值還可以是 line-height (不推薦合併寫,不利於維護)
a3 值還可以是 caption/icon/menu等系統字型設定,可以創造出和預設作業系統一樣的字型效果 (見p131)
s2 特別注意,所有未顯式賦值的font值,都會被瀏覽器自動賦予預設值
s1 具體過程了解即可,見p132-133
s1 文字縮排屬性text-indent
a1 值可以是 length / em/百分比 (相對於包含塊的寬度值)
其中,值的長度可以是負值,從而創造出「懸掛縮排的效果」
a2 應用於 塊級元素,無法應用於行內元素&替換元素(如果想要行內元素有縮排效果,可以使用左內邊距/外邊距)
a3 縮排只應用於乙個塊級元素的第一行內容
a4 具有繼承性
s2 文字水平對齊屬性text-align
a1 值可以是 left / center /right / justify
其中,justify表示兩端對齊文字 (p140)
a2 應用於 塊級元素
a3 具有繼承性
s1 什麼是line-height屬性
a1 指的是文字行之間的 最小基線距離,換言之,文字行間的距離可能比line-height值更大
a2 行間距 = line-height值 - font-size值
s2 理解行內元素高度如何確定(並不絕對精確,只是大概情況)
a1 font-size值, 確定了 內容區大小;
a2 line-height值,確定了 行內框高度;
a3 行框(從最高行內框的頂部 到 最低行內框的底部),確定了 一行行內元素的高度
s3 屬性特點
a1 值可能是 length / em / number / normal
normal值,通常情況下是字型大小的 1.2倍 (font-size * 1.2)
em/百分比,相對於的是 元素的字型大小(注意,不是父元素的字型大小,只有沒有顯式繼承該元素的fz,才會根據fz繼承性向上找
)
a2 可以應用於所有元素 (對於塊級元素和內聯元素的區別,詳見其他博文)
a3 可以繼承
因為具有繼承性,所以可能會有以下情況: 繼承的div元素的line-height值小於 顯式設定的fz值,導致擁擠
解決方法是,使用number作為「繼承因子」,這樣各個元素都會根據自己的fz值,來計算line-height值了
s1 文字垂直對齊屬性vertical-align
a1 值可以是 middle/bottom等關鍵字 length / em/百分比 (相對於該元素的line-height值)
a2 應用於 行內元素和替換元素(影象/表單等)
a3 不可以繼承
a4 注意,所有垂直對齊的元素都會影響行高,換句話說,一行元素的行高 會包含住垂直對齊的高度
s2 基線對齊情況
a1 對行內元素,基線對齊是指:元素的基線與其 父元素的基線 對齊;
a2 對替換元素,基線對齊是指:元素的底端與其 父元素的基線 對齊 (因為替換元素壓根就沒有基線)
這就會導致,可能影象下方會出現一段空白的問題
a3百分比/em 對齊情況
會把 行內元素的基線 /替換元素的底邊,相對于父元素的基線公升高/降低數值
s3 居中對齊情況
a1 對middle值,指的是: 元素行內框的中點 與其 父元素基線上方0.5ex處的乙個點對齊;
s4 頂端/底端對齊情況
a1 對bottom值,指的是: 元素行內框的底部 與其 所屬行框的底部對齊;
a2 對text-bottom值,指的是: 對行內元素的 行內文字內容區 對齊 + 對替換元素無效
s1 字間隔屬性word-spacing
a1 值可以是 length / em / normal
a2 應用於 所有元素
a3 用於修改字和字之間的距離,了解即可
s2 字母間隔屬性letter-spacing
a1 值可以是 length / em / normal
a2 應用於 所有元素
a3 可以用來製造出 突出強調的效果 (見p152)
s1 文字大小寫 轉換屬性text-transform
a1 值可以是 uppercase等關鍵字
a2 應用於 所有元素
s1 文字裝飾線 屬性text-decoration
a1 值可以是 underline等關鍵字
a2 應用於 所有元素
a3 不可以繼承,但可以 覆蓋下劃線樣式(p158)
s1 文字陰影 屬性text-shadow
a1 值可以是 color + 右偏移長度 + 下偏移長度 + [模糊半徑]
a2 應用於 所有元素
a3 不可以繼承
s2 可以實現多重陰影
s1 文字空白符和換行屬性white-space
a1 值可以是 pre / nowrap / pre-wrap / pre-line
值為pre時:保留html內容中的空格
值是nowrap: 阻止元素內的文字換行
a2 應用於 所有元素
a3 不可以繼承
a4 具體**見 p162
1 css權威指南;
2 mdn的 基本文字和字型樣式;
3 css 文字;
4 css 字型;
CSS字型和文字
字型是 文字的不同體式 或者 字的形體結構 對於英文而言,每種字型都是由一組具有獨特樣式的字母 數字和符號組成的。根據外觀,字型可以分為不同的類別 font collection 包括襯線字型 serif 無襯線字型 sans serif 和等寬字型 monospace 每一類字型可以分成不同的字型...
Css顏色和文字字型
顏色名表示,比如 red 紅色,gold 金色 16進製制數值表示,比如 ff0000 表示紅色,這種可以簡寫成 f00 rgb顏色 紅 r 綠 g 藍 b 三個顏色通道的變化 background color rgb 200,100,0 rgba顏色 紅 r 綠 g 藍 b 透明度 a backg...
CSS字型屬性和文字屬性
字型屬性 font size px 字型的大小 font weight 400 700 bold,表示加粗 400 lighter,不加粗 font family 字型 font style 字型為斜體或者正常字型字型的復合語法 選擇器文字屬性 color 文字顏色 text algin under...