整理一些CSS的知識

Ephemera發表於2019-06-04
CSS

最近在翻《CSS權威指南》，一些零散的知識點平時不太注意，這裡記錄一下。

CSS屬性display

display指定了元素的顯示型別，它包含兩類基礎特徵，用於指定元素怎樣生成盒模型——外部顯示型別定義了元素怎樣參與流式佈局的處理，內部顯示型別定義了元素內子元素的佈局方式。

<display-outside>（指定了元素的外部顯示型別，實際上就是其在流式佈局中的角色） = block | inline | run-in
<display-inside> （指定了元素的內部顯示型別，它們定義了元素內部內容的格式化上下文的型別）= flow | flow-root | table | flex | grid | ruby
<display-listitem> （元素的外部顯示型別變為 block 盒，並將內部顯示型別變為多個 list-item inline 盒）= <display-outside>? && [ flow | flow-root ]? && list-item
<display-internal> （用來定義這些“內部”顯示型別，只有在特定的佈局模型中才有意義）= table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
<display-box> （是否完全生成顯示盒）= contents | none
<display-legacy> （CSS 2 對於 display 屬性使用單關鍵字語法）= inline-block | inline-list-item | inline-table | inline-flex | inline-grid
複製程式碼

候選樣式表

<link rel="stylesheet" href="day.css" title="Default Day">
<link rel="alternate stylesheet" href="night.css" title="Night">
複製程式碼

rel（關係）中可以指定候選樣式表，預設使用第一個樣式表。剛好看到這篇文章link rel=alternate網站換膚功能最佳實現，自己實現了一下：

整理一些CSS的知識

屬性選擇符

  • [ foo|='bar' ] 選擇的元素有foo屬性，且其值以bar和一個英文破折號開頭，或者值就是bar本身
  • [ foo~='bar' ] 選擇的元素有foo屬性，且其值是包含bar這個詞的一組詞
  • [ foo*='bar' ] 選擇的元素有foo屬性，且其值包含子串bar
  • [ foo^='bar' ] 選擇的元素有foo屬性，且其值以bar開頭
  • [ foo$='bar' ] 選擇的元素有foo屬性，且其值以bar結尾

這裡的應用在於，如果我們在開發一個CSS框架或者模式庫，定義一個類'btn btn-small btn-arrow btn-active'顯得冗餘，我們可以直接使用'btn-small-arrow-active'

<button class="btn-small-arrow-active"></button>
*[class|="btn"][class*="-arrow"]:after {content: '▼'}
複製程式碼

特指度

一個元素可能被兩個或多個規則匹配，其中只有一個規則能勝出，特指度能夠解決衝突。一個特指度由四部分構成，比如0, 0, 0, 0

  • 選擇符的每個ID屬性值加0, 1, 0, 0
  • 選擇符的每個類屬性值、屬性選擇或偽類加0, 0, 1, 0
  • 選擇符中的每個元素和偽元素加0, 0, 0, 1
  • 連結符和通用選擇符不增加特指度
h1 {} /* 0, 0, 0, 1 */
p em {} /* 0, 0, 0, 2 */
.grape {} /* 0, 0, 1, 0 */
p.bright em.dark {} /* 0, 0, 2, 2 */
li#answer {} /* 0, 1, 0, 1 */
複製程式碼
  • !important重要規則始終勝出
  • 宣告衝突，按照特指度排序
  • 權重、來源和特指度一致，按照位置靠後權重更大

偽元素選擇器

el::first-letter {} /*裝飾首字母*/
el::first-line {} /*裝飾首行*/
el::before {} /*前置內容元素*/
el::after {} /*後置內容元素*/
複製程式碼

超連結偽類

a:link {}
a:visited {}
a:focus {}
a:hover {}
a:active {}
複製程式碼
  • 注意順序，因為這裡選擇符的特指度一致，所以最後一個匹配的規則將勝出。

屬性值

可以使用樣式對於的元素上的HTML屬性值（實際相容瀏覽器很少），例如：

<!--css-->
p::before {content: "[" attr(id) "]"}
<!--html-->
<p id="leadoff">This is the first paragraph</p>
<!--顯示結果-->
[leadoff]This is the first paragraph
複製程式碼

角度單位

  • deg 度數，完整圓周是360度
  • grad 百分度，完整圓周是400百分度
  • rad 弧度，完整圓周是2π
  • turn 全周，一個完整的圓周是一圈，在旋轉動畫中最有用

自定義值

:root {/* 或者html */
    --base-color: #639;
}
h1 {
    color: var(--base-color);
}
複製程式碼

文字

  • text-indent：<length> | <percentage>
    • 文字縮排，用於塊級元素，縮排將沿著行內方向展開
  • line-height： <number> | <length> | <percentage> | normal
    • em, ex, 百分比是相對與元素的font-size值計算
    • 從父元素繼承時根據父元素的字號計算，因此最好使用純數字進行係數換算
  • vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage>
    • 縱向對齊文字
    • 適用於行內元素和單元格
  • text-transform：uppercase | lowercase | capitalize | none
  • text-decoration：none | underline | overline | line-through | blink

邊框影象屬性

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

背景屬性

  • background-clip: border-box | padding-box | content-box | text
    <div class="bg-img">HELLO</div>
<!--css-->
.bg-img {
        width: 1500px;
        height: 400px;
        color: transparent;
        font-size: 300px;
        background-image: url('bg.jpg');
        background-size: contain;
        -webkit-background-clip: text;
        background-clip: text;
    }
複製程式碼

結果

  • background-repeat：repeat-x | repeat-y | [repeat | space | round]
    • space：確定沿某一軸能完全重複多少次，然後均勻排列影象
    • round：為了放下整個影象，有時會調整影象尺寸，利用round有時能實現一些有趣的效果，比如下面的平鋪效果
      整理一些CSS的知識
  • background-attachment: scroll | fixed | local
    • fixed 固定在視區
    • scroll 隨文件滾動
    • local 隨內容滾動
  • background-size：length | percentage | cover | contain | auto
    • auto 計算相應軸的固有尺寸
    • cover 自動覆蓋背景，保持固有高寬比 （無需考慮高寬）
    • contain 保持固有高寬比，相當於100% auto（如果元素高度比寬度大，反之為auto 100%）

未完待續

相關文章