CSS全覽_選擇符+特指+單位+字型
作者: https://www.cnblogs.com/xiaxiangx/
1. CSS樣式
CSS( Cascading Style Sheet)
-
CSS3由多個獨立的模組構成, 原因是各模組可以獨立演進, 這樣做的缺點是" CSS3規範 "不能涵蓋一切
-
CSS兩種形式: 置換元素和非置換元素, 詞如其名, 置換元素表示內容不由文件直接表示, 如img, input
-
元素的顯示方式: 常見三種, 塊級元素, 行內元素和行內塊元素, 還有其他的在display中
-
候選樣式表: 將rel屬性設為alternate stylesheet, 僅當使用者自己選擇, 文件才會使用候選樣式渲染
<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default"> <link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="title1"> <link rel="alternate stylesheet" type="text/css" href="sheet3.css" title="title2"> -
廠商字首
- -epub- 國際數字出版論壇制定的epub格式
- -moz- 基於Mozilla的瀏覽器( 如Firefox )
- -ms- 微軟Internet Explorer
- -o- 基於Opera的瀏覽器
- -webkit- 基於webkit的瀏覽器( 如safari 和 Chrome )
-
處理空白: 和HTML類似, 連續的空白會合併成一個空白
-
媒體查詢: @media all{body{color: red;}}
- 媒體型別: all, print, screen
- 媒體描述符: and, not, only
-
特性查詢: @support(color: black){body{color: black;}}
-
巢狀:
@supports(display: flex){@media screen{/*針對螢幕的樣式*/}}
-
2. 選擇符
2.1 元素選擇符: p{color: red;}
2.2 群組選擇符: h2, p{color: red;}
- 通用選擇符: *{color: red;}
- 在舊瀏覽器中使用新元素, 使用
document.createElement('main'), 執行這段程式碼後, 舊版瀏覽器就能識別新元素
2.3 類選擇符和ID選擇符
-
類選擇符: .class1{color: red;} 表示color屬性值會賦予class屬性包含class1的元素上
-
類選擇符+元素選擇符: p.class1{color: red;} 表示color屬性值會賦予class屬性包含class1的p元素上
-
id選擇符: #id1{color: red;} 將屬性值賦予id為id1的元素上
由於id唯一, 因此一般情況下, id選擇器不作為其他選擇器的字尾, 而是字首, 如#id1>li , 而li>#id1(除了提高權重, 沒有意義)
2.4 屬性選擇符
-
簡單屬性選擇符: h1[class], 選擇包含class的h1元素
-
精準屬性值選擇符: h1[class="class1"], 選擇class="class1"的h1元素, class="class1 class2"選擇不到
-
根據部分屬性值選擇
- [class|="class1"]: 選擇class屬性值以class1或者-class1開頭的
- [class~="class1"]: 選擇class屬性值包括class1的一組詞, 如class="class1 class2", 但clss="class12"不行
- [class*="class1"]: 選擇class屬性值包含字串class1的, 如class="class12", class="class1 class2"也行
- [class^="class1"]: 選擇class屬性值以class1開頭的, 如class="class123"
- [class$="class1"]: 選擇class屬性值以class1結尾的
-
不區分大小寫的識別符號
h1[class="class1" i], 之後可以選中class屬性值為Class1, cLAss1, ClasS1, 忽略其大小寫
2.5 根據文件結構選擇
- 後代選擇符, h1 p{color: red;}, h1下的孩子p元素, 包括兒子, 孫子, 重孫等
- 子元素選擇符, h1>p{color: red;}, h1下的兒子p元素, 不是孫子, 只有第一層
- 選擇緊鄰同胞元素, h1+p{color: red;}, h1下緊挨著的弟弟
- 選擇後續同胞, h1~p{color: red;}, h1下的弟弟, 不必緊挨
2.6 偽類選擇符
-
拼接偽類:
a:link:hover{color: red;}, 將偽類進行拼接, 注意, 相互排斥的偽類拼接沒有意義 -
結構偽類
-
選擇根元素 :root, 與html效果類似, 但是特指度不同
-
選擇空元素 :empty, 有換行或空格均不算, 註釋應先去掉再看
-
選擇唯一的子代 :only-child, img:only-child, 表示選中img的父親只有img一個孩子的img
-
選擇型別唯一的子代 :only-of-type, 與上一個不同的是, 父親可能有多個孩子, 但是在孩子中, 自己的型別(元素型別)只有自己有
-
選擇第一個和最後一個子代 :first-child, 選擇第一個子元素. :last-child, 選擇最後一個子元素
-
選擇第一個和最後一個某種元素 :first-of-type 和 :last-of-type
-
選擇每第n個子元素 :nth-child(n)
:nth-child(1), 第一個子元素, :nth-child(odd), 第奇數個子元素, :nth-child(odd), 第偶數個子元素, :nth-child(n), 從1到最後一個子元素, :nth-child(an+b), n從1到an+b越界的n, 代入計算
:nth-last-child(n)從後向前數
-
選擇每第n個某種元素 :nth-of-type()和nth-last-of-type()
-
動態偽類
:link :visited :focus :hover :active, 順序得一致, 否則會覆蓋樣式 -
UI狀態偽類
:enabled 指代啟用的使用者介面元素(例如表單元素)
:disabled 指代禁用的使用者介面元素(例如表單元素)
:checked 指代由使用者或文件預設選中的單選按鈕或核取方塊
:indeterminate 指代沒有確定的單選按鈕或核取方塊, 這個狀態只能由DOM指令碼設定, 使用者不能設定
:default 指代預設選中的單選按鈕, 核取方塊或選項
:valid 指代滿足所有資料有效性語義的輸入框
:invalid 指代不滿足所有有效性語義的輸入框
:in-range 指代輸入的值在最小值和最大值之間的輸入框
:out-of-range 指代輸入的值不在範圍內的輸入框
:required 指代必須輸入值的輸入框
:optional 指代無需一定輸入值的輸入框
:read-write 指代可由使用者編輯的輸入框
:read-only 指代不能由使用者編輯的輸入框
-
-
:target 偽類, 指向目標id的元素, 突出顯示, 例如 http://www.w3.org/TR/css3-selectors/#target-pseudo
-
:lang 偽類, 匹配方式上與 |= 類似, :lang偽類可以使用各種來源, 而屬性選擇器使用 |= 有限制
-
否定偽類, :not, 例子, .moreinfo:not(li){color: red;}, 選擇class為moreinfo但是不是li的元素, 可以拼接, 表示既不是, 也不是
-
偽元素選擇符只能出現在選擇符的最後, p::first-line em 是無效的
-
裝飾首字母, ::first-letter, 裝飾任何非行內元素的首字母, 或者開頭的標點符號和首字母
-
裝飾首行, ::first-line, 裝飾元素的首行文字, 也只能應用到塊級元素上
-
裝飾前置和後置內容元素, ::
-
::before, ::after{content: "";}
3. 特指度和層疊
當一個元素被多個選擇器選中, 應用哪一個, 這個問題由特指度和層疊解決
特指度由四個部分組成, 前面的部分總比後面的部分大, 特指度0,0,0,0; 兩個特指度, 一個0, 0, 1, 0, 總比0, 0, 0, 1000大.
- 選擇符的特指度
- id屬性值: 0,1,0,0
- 類屬性值, 屬性選擇或偽類: 0,0,1,0
- 元素和偽元素: 0,0,0,1
- 連結符和通用選擇符不增加特指度
- 宣告打散, 通用選擇符和連結符
- 宣告打散: 如 h1{color: red; background: black;}, color的特指度為h1, background的特指度也為h1
- 通用選擇符特指度為0,0,0,0
- 連結符的沒有特指度
- 行內樣式, 重要性
- 行內樣式的特指度為 1,0,0,0
- 重要的宣告 !important, 它對特指度沒有影響, 但是它有自己的比較範圍, 有!important與沒有的發生衝突時, 總是重要宣告勝出
- 繼承
- 多數盒模型屬性不繼承, 繼承的值沒有特指度, 通用選擇符0特指度能戰勝繼承的值
- 層疊規則
- 找到匹配特定元素的所有規則
- 按顯式權重排序應用到特定元素上的所有宣告. 以 !important 標記的規則比沒有這一標記的權重高
- 按來源應用到特定元素上的所有宣告. 宣告有三個來源: 創作人員, 讀者和使用者代理. 正常情況下, 創作人員編寫的樣式擊敗讀者提供的樣式; 讀者樣式中以 !important 標記的宣告比其他樣式權重高, 包括創作人員編寫的樣式中以 !important標記的宣告; 創作人員和讀者樣式覆蓋使用者代理的預設樣式
- 按特指度排序應用到特定元素上的所有宣告. 特指度高的宣告具有較高的權重
- 按宣告的前後位置排序應用到特定元素上的所有宣告. 樣式表或文件中靠後的宣告權重較高. 匯入的樣式表中的宣告放在當前樣式表中所有宣告的前面.
4. 值和單位
單位可以影響顏色, 距離和尺寸等一系列屬性, 可以幫助定義這些值.
樣式表中的一切都是文字, 但是有些型別的值表示的是字串本身, 而不是數字或顏色等.
-
關鍵字
-
none: 移除下劃線等, 不同屬性配上相同關鍵字可能有不一樣的效果, 具體情況具體說明
-
全域性關鍵字
inherit: 繼承, initial: 重設值, unset: 能繼承屬性就繼承, 不能就重設
all: 只接受inherit, initial, unset三個值, all: inherit, 表示出了不能繼承的都繼承
-
-
字串
- 字串值放在單引號或雙引號內的任意字元序列, 換行識別符號為 \A
-
URL(protocol://server/pathname)
-
影像
- url, 指向外部資源的URL識別符號
- image-set, 一系列影像, 根據值中的條件選擇. 行為接近picture元素的srcsest屬性. 幾乎所有瀏覽器都支援srcset, 很少支援image-set
- gradient, 線性漸變或徑向漸變影像, 可以是單個的, 也可以重複
-
識別符號
-
數字和百分數
-
彈性值, fr
-
絕對長度單位, in(英尺), cm(釐米), mm(毫米), q(四分之一毫米), pt(點), pc(派卡, 12點), px(畫素)
-
解析度單位, dpi(點每英寸), dpcm(點每釐米), dppx(點每畫素)
-
相對長度單位,
1em等於元素的 font-size 屬性值. 它是相當於父元素的字號而言.
1ex 指所用字型中小寫字母x的高度.
rem與em區別很小, rem相對於文件根的font-size.
ch(新增), 渲染0字形的進距.
vw(視區寬度單位), vh(視區高度單位), vmin(視區尺寸最小值單位, 寬高取小), vmax(視區尺寸最大值單位)
-
-
計算值
- calc(5em + 5em)
- calc(2 * 3em), calc(2em * 3)
- calc(30em / 3)
-
屬性值 attr(), width: attr(maxlenth em) 支援的瀏覽器較少
-
顏色
- 具名顏色
- rgb和rgba, rgb(100%, 100%, 100%), rgb(255, 255, 255), rgba中的a始終是0-1
- 十六進位制RGB, #ffffff 白色 , RGBA #000000FF
- HSL和HSLa(Hue色相, Saturation飽和度, Lightness明度)
- 顏色關鍵字, transparent完全透明的顏色, 元素背景色的預設值, currentColor, 當前color屬性計算得到的值
-
角度
- deg 度數, 完整的圓周是360度
- grad 百分度, 完整的圓周是400百分度
- rad 弧度, 完整的圓周是2π
- turn 圈數, 一個完整的圓周是一圈
-
時間和頻率 s, ms, Hz, kHz, 不區分大小寫
-
位置 用於指定影像在背景區域中的位置
-
自定義值
html{ --base-color: #369 } h1{color: var(--base-color);}
5. 字型
CSS2開始支援 @font-face 下載指定的自定義字型
-
字型族
- 襯線字型, 這種字型中的字形寬度各異, 並且有襯線
- 無襯線字型, 這種字型中的字形寬度各異, 而且無襯線
- 等寬字型, 等寬字型中的寬度一樣
- 草書字型, 這種字型嘗試模仿人類筆跡或手寫體
- 奇幻字型, 這種字型沒有什麼統一的特徵
-
使用字型族
- font-family: sans-serif(無襯線)
- font-family: wedgie, 'Karrank%', klingon, fantasy; 字型名稱中有空格或符合得用'', 在最後設定一個通用字型
-
自定義字型
-
@font-face{font-family: "SwitzeraADF"; src: url("SwiteraADF-Regular.otf");} -
惰性載入, 使用時載入. 瀏覽器是不管是否需要, 都會現行下載宣告的全部字形
-
必須的描述符, font-family和src
-
使用HTTP首部Access-Control-Allow-Origin設定伺服器, 允許跨域載入
-
format, 告訴客戶代理格式
@font-face{ font-family: "SwitzeraADF"; src: url("SwiteraADF-Regular.otf") format('opentype'), src: url("SwiteraADF-Regular.true") format('truetype'); } -
字型格式值
embedded-opentype EOT
opentype OTF
svg SVG(Scalable Vector Graphics)
truetype TTF
woff WOFF(Web Open Font Format)
-
local(已經安裝的字型),
src: local("Switzera-Regular") -
萬全之策
@font-face{ font-family: "SwitzeraADF"; src: url("SwitzeraADF-Regular.eot"); src: url("SwitzeraADF-Regular.eot?#iefix") format("embedded-opentype"), url("SwitzeraADF-Regular.woff") format("woff"), url("SwitzeraADF-Regular.ttf") format("truetype"), url("SwitzeraADF-Regular.svg#switzera_adf_regular") format("svg"); } -
其他字型描述符
描述符 預設值 說明 font-stype normal 區分常規, 斜體和傾斜字形 font-weight normal 區分不同的字重(例如加粗) font-stretch normal 區分不同的字元寬度(例如緊縮和加寬) font-variant normal 區分眾多字型變形(例如小號大寫字母) font-feature-setting normal 直接訪問OpenType的底層特性(例如啟用連字) unicode-range U+0-10FFFF 定義指定字型中可用的字元範圍
-
-
字重
- normal bold bolder lighter 100 200 --- 900
- 100最細, 900最粗, 正常400
-
字號
- xx-small x-small small medium large x-large xx-large smaller larger
- 沒有行距( line-height )的情況下兩條基線的距離
- 絕對大小, 14px
- 相對大小, 換算係數是1.2
- 字號的繼承會帶來問題, 渲染等寬字型尤為明顯, 解決方案, font-family: monospace, serif; font-size: 1em;
- 使用長度單位, 36pt, 3pc, 0.5in, 1.27cm...
- 由於不是所有瀏覽器都能輕易縮放畫素值設定的文字( 有事甚至不能縮放 ), 而且有時使用畫素值設定的文字在模仿全螢幕裝置的移動裝置中的實際字號特別小( 例如多款iPhone ), 但就這一點, 一般不推薦使用畫素值設定字號
- 自動調整字號, 有兩個因素影響字型是否清晰易辯: 字號和 x 高度. x高度除以字號得到的結果稱為高寬比值. 高寬比值越高, 字型越清晰, font-size-adjust用於修改, 取值none, auto
-
字形
- font-style, 取值normal, italic(斜體) 和 oblique (傾斜體)
- 斜體和傾斜體區別不大, 可以互相代替
-
字型拉伸
- font-stretch, 取值 normal ultra-condensed extra-condensed condensed semicondensed semi-expanded expanded extra-expanded ultraexpanded
-
字距調整
- font-kerning, 取值 auto normal none
- 對定義了字元之間相對位置的資料有效, 比如oc和ox兩個字距就可能不同
-
字型變形
- font-variant, 取值太多了, css1和2只有兩個取值normal, small-caps(小號大寫字母), 對中文沒效果
-
字型特性
-
font-feature-settings ,從底層控制OpenType字型
-
使用方法 font-feature-settings: "liga" on, "calt" on, "ccmp" 1, "clig"; on 1 預設都可以
-
預設情況下, OpenType字型啟用的特性
calt 根據上下文替換
ccmp 組合字元
clig 根據上下文連字
liga 標準連字
locl 本地化形式
mark 基本定位標記
mkmk 標記定位標記
rlig 必要的連字
-
-
字型合成
- font-synthesis, 取值 none, weight, style
- 作用: 使用者代理嘗試使用可用的字型合成所需的字形
-
font屬性
- 必須有font-size和字型
- 前三個值順序任意, font-style font-weight font-variant
- 可以加入行高, font-size/ling-height, 200%/1.2
- 使用font屬性時, 不寫的設成預設
-
使用系統字型
-
font: caption
-
可用的系統值
caption 用於說明文字的控制元件, 如按鈕
icon 標註圖示
menu 在選單欄中使用, 即下拉選單和選單列表
message-box 在對話方塊中使用
small-caption 用於標註小型控制元件
status-bar 用在視窗的狀態列中
-
-
字型匹配過程
- 使用者代理建立或者訪問字型屬性資料庫. 這個資料庫中有使用者代理能訪問的全部字型的各個CSS屬性. 通常, 裝置中的所有字型都在這裡, 不過可能還有其他字型( 例如, 使用者代理可能內建了字型 ). 如果使用者代理遇到兩個一樣的字型, 將會忽略掉其中一個
- 使用者代理把應用了字型屬性的元素摘出來, 構建顯示元素所需要的字型屬性列表. 首先, 使用者代理根據這個列表選擇使用哪個字型族顯示元素. 如果能找到完全匹配的字型, 使用者代理就使用那個字型; 否則, 還要做些額外的工作
- 匹配字型時先看font-stretch屬性
- 然後再看font-style屬性. 任何以"italic"或"oblique"標識的字型都能匹配 italic 關鍵字. 如果沒有這樣的字型, 匹配失敗
- 接下來匹配font-weight, 鑑於CSS對 font-weight 的處理方式, 這一匹配絕對不會失敗
- 然後處理font-size, 匹配字號時一定要有容差, 不過這個容器由使用者代理定義. 因此, 指定的字號和實際使用的字號在一個使用者代理中可能允許存在20%的容差, 而在另一個使用者代理中只允許10%的容差
- 如果第 2 步沒有找到匹配的字型, 使用者代理在同一個字型族中選擇替代字型. 找到後, 回到第 2 步.
- 假設找到一個基本匹配的字型, 而且所有替代字型都試過了, 使用者代理將選擇指定字型族中的預設字型, 力爭正確顯示元素.
此外, 使用者代理處理字型變形和特性的方式如下:
- 檢視預設啟用的字型特性, 包括指定文字的特性. 預設啟用的特性有"calt"...
- 如果是 @font-face 規則定義的字型, 檢查 @font-face 規則中 font-variant 描述符對應的特性. 然後檢查 @font-face規則中 font-variant 描述符對應的特性. 然後檢查 @font-face 規則中 font-feature-settings 描述符對應的特性
- 檢查由 font-variant 或 font-feature-settings 之外的屬性確定的特性設定( 例如, 把letter-spacing 屬性設為預設值之外的值時將禁用連字 )
- 檢查 font-variant 屬性及其子屬性 (例如 font-variant-ligatures) , 以及其他可能會呼叫 OpenType 特性的屬性( 例如 font-kerning ) 的值對應的特性
- 檢查 font-feature-setting 屬性的值對應的特性.