CSS3全覽_選擇符+特指+單位+字體

時間 2020-12-09

標籤 css html css3 web 數據庫跨域瀏覽器服務器 ide svg 欄目 CSS 简体版

原文原文鏈接

CSS全覽_選擇符+特指+單位+字體

CSS全覽_選擇符+特指+單位+字體

做者: https://www.cnblogs.com/xiaxiangx/css

1. CSS樣式

CSS( Cascading Style Sheet)html

CSS3由多個獨立的模塊構成, 緣由是各模塊能夠獨立演進, 這樣作的缺點是" CSS3規範 "不能涵蓋一切css3
CSS兩種形式: 置換元素和非置換元素, 詞如其名, 置換元素表示內容不禁文檔直接表示, 如img, inputweb
元素的顯示方式: 常見三種, 塊級元素, 行內元素和行內塊元素, 還有其餘的在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;}}ide
- 媒體類型: all, print, screen
- 媒體描述符: and, not, only
特性查詢: @support(color: black){body{color: black;}}svg
- 嵌套:
  
  @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"選擇不到
根據部分屬性值選擇
1. [class|="class1"]: 選擇class屬性值以class1或者-class1開頭的
2. [class~="class1"]: 選擇class屬性值包括class1的一組詞, 如class="class1 class2", 但clss="class12"不行
3. [class*="class1"]: 選擇class屬性值包含字串class1的, 如class="class12", class="class1 class2"也行
4. [class^="class1"]: 選擇class屬性值以class1開頭的, 如class="class123"
5. [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特指度能打敗繼承的值
- 層疊規則
  1. 找到匹配特定元素的全部規則
  2. 按顯式權重排序應用到特定元素上的全部聲明. 以 !important 標記的規則比沒有這一標記的權重高
  3. 按來源應用到特定元素上的全部聲明. 聲明有三個來源: 創做人員, 讀者和用戶代理. 正常狀況下, 創做人員編寫的樣式擊敗讀者提供的樣式; 讀者樣式中以 !important 標記的聲明比其餘樣式權重高, 包括創做人員編寫的樣式中以 !important標記的聲明; 創做人員和讀者樣式覆蓋用戶代理的默認樣式
  4. 按特指度排序應用到特定元素上的全部聲明. 特指度高的聲明具備較高的權重
  5. 按聲明的先後位置排序應用到特定元素上的全部聲明. 樣式表或文檔中靠後的聲明權重較高. 導入的樣式表中的聲明放在當前樣式表中全部聲明的前面.

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 用在窗口的狀態欄中
字體匹配過程
1. 用戶代理建立或者訪問字體屬性數據庫. 這個數據庫中有用戶代理能訪問的所有字體的各個CSS屬性. 一般, 設備中的全部字體都在這裏, 不過可能還有其餘字體( 例如, 用戶代理可能內置了字體 ). 若是用戶代理遇到兩個同樣的字體, 將會忽略掉其中一個
2. 用戶代理把應用了字體屬性的元素摘出來, 構建顯示元素所須要的字體屬性列表. 首先, 用戶代理根據這個列表選擇使用哪一個字體族顯示元素. 若是能找到徹底匹配的字體, 用戶代理就使用那個字體; 不然, 還要作些額外的工做
3. 匹配字體時先看font-stretch屬性
4. 而後再看font-style屬性. 任何以"italic"或"oblique"標識的字體都能匹配 italic 關鍵字. 若是沒有這樣的字體, 匹配失敗
5. 接下來匹配font-weight, 鑑於CSS對 font-weight 的處理方式, 這一匹配絕對不會失敗
6. 而後處理font-size, 匹配字號時必定要有容差, 不過這個容器由用戶代理定義. 所以, 指定的字號和實際使用的字號在一個用戶代理中可能容許存在20%的容差, 而在另外一個用戶代理中只容許10%的容差
7. 若是第 2 步沒有找到匹配的字體, 用戶代理在同一個字體族中選擇替代字體. 找到後, 回到第 2 步.
8. 假設找到一個基本匹配的字體, 並且全部替代字體都試過了, 用戶代理將選擇指定字體族中的默認字體, 力爭正確顯示元素.
此外, 用戶代理處理字體變形和特性的方式以下:
1. 查看默認啓用的字體特性, 包括指定文本的特性. 默認啓用的特性有"calt"...
2. 若是是 @font-face 規則定義的字體, 檢查 @font-face 規則中 font-variant 描述符對應的特性. 而後檢查 @font-face規則中 font-variant 描述符對應的特性. 而後檢查 @font-face 規則中 font-feature-settings 描述符對應的特性
3. 檢查由 font-variant 或 font-feature-settings 以外的屬性肯定的特性設置( 例如, 把letter-spacing 屬性設爲默認值以外的值時將禁用連字 )
4. 檢查 font-variant 屬性及其子屬性 (例如 font-variant-ligatures) , 以及其餘可能會調用 OpenType 特性的屬性( 例如 font-kerning ) 的值對應的特性
5. 檢查 font-feature-setting 屬性的值對應的特性.