重學前端之CSS(一)CSS介紹

時間 2020-04-04

標籤前端 css 介紹欄目 CSS 简体版

原文原文鏈接

這一系列文章主要是關於CSS內容部分,內容包括: CSS選擇器API、CSS權重、佈局、黏性佈局、BFC等內容。若是有哪些地方我寫的不對,請你們不吝賜教。若是你們以爲有什麼重要的內容我沒有提的話,能夠告訴我,謝謝。css

如何將CSS應用與HTML？

1) 外部樣式表 <link rel="stylesheet" href="index.css"> 或者在CSS中使用 @import url("index.css")
2) 內部樣式表將CSS放在<style></style>HTML內包含的元素<head>中
3) 內聯樣式在標籤上添加 style 屬性,而後在該屬性中設置CSS。除非必須須要,不然不要這樣作。html

CSS(層疊樣式表)的特色

CSS(層疊樣式表)的特色:
1) css是一門用於指定網頁文件如何展現給用戶的語言--包括網頁的樣式,佈局等等。
2) CSS是一門基於規則的語言,能夠定義網頁特定元素樣式的規則。git

CSS使用時的注意點

1) 給一個元素以百分比設置padding和margin時，它是根據body的寬度計算得出的。
2) 外邊距(margin)的值可正可負;內邊距(padding)的值必須爲0或正的值，不然無效。
3) 可使用HTML的contenteditable屬性來讓元素容許編輯。IE5.5支持。
4) 視口(瀏覽器頁面的可見區域)也具備大小。在CSS中，有和視口大小相關的vw單位(視口寬度)和vh單位(視口高度)。1vh等於視口高度的1%。IE9支持。github

CSS的頂層樣式表規則

1、定義
CSS的頂層樣式表規則: CSS的頂層樣式表規則由兩種規則組成的規則列表構成,一種被稱爲at-rule,也就是at規則,另外一種是qualified rule,也就是普通規則。
2、相關API
at-rule: 該規則是由一個@關鍵字和後續的一個區塊組成的,若是沒有區塊,則以分號結束。
qualified rule: 該規則是指普通的CSS規則,由選擇器和屬性指定構成的規則。
at-rule規則的關鍵字:
1) @charset: 指定樣式表中使用的字符編碼。它必須是樣式表中的第一個元素,且前面不能有任何字符。若是有多個@charset規則被聲明,只有第一個會被使用,且不能在HTML元素或HTML頁面的<style>元素內的樣式屬性中使用。瀏覽器在解析樣式表時，在開發人員沒有特定設置時，假設文檔是UTF-8格式。IE5.5支持。(@charset "UTF-8"; @charset "utf-8";)
2) @import: 用於從其餘樣式表導入樣式規則，@charset規則除外。該規則必定要寫在@charset外的任何CSS規則以前,若是位於其餘位置將會被瀏覽器忽略，並且@import以後若是存在其餘樣式,則@import以後的分號是必須書寫的，不可省略。IE5.5支持。(@import url("./index.css");)
3) @media: 媒體查詢,可根據一個或多個媒體查詢的結果應用樣式表的一部分。IE9支持。(@media only screen and (max-width: 1200px) { body {color: red;} })
4) @page: 用於在打印文檔時修改某些CSS屬性。你不能用@page規則來修改全部的CSS屬性，而是隻能修改margin,orphans,widow 和 page breaks of the document。對其餘屬性的修改是無效的。IE8支持。(@page {margin: 10%;})
5) @counter-style: 它讓開發者能夠自定義counter的樣式。一個 @counter-style規則定義瞭如何把一個計數器的值轉化爲字符串表示。只有firefox33支持。(@counter-style triangle { system: cyclic; symbols: ‣; suffix: " ";})
6) @keyframes: 經過在動畫序列中定義關鍵幀（或waypoints）的樣式來控制CSS動畫序列中的中間步驟。IE10支持。(@keyframes move { from {top: 50px;} to {top: 0;} })
7) @font-face: 指定一個用於顯示文本的自定義字體；字體能從遠程服務器或者用戶本地安裝的字體加載. 若是提供了local()函數，從用戶本地查找指定的字體名稱，而且找到了一個匹配項, 本地字體就會被使用. 不然, 字體就會使用url()函數下載的資源。IE4支持。( @font-face { font-family: "Open Sans"; src: url ("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff");} )
8) @support:關聯了一組嵌套的CSS語句, 由邏輯與,邏輯或,邏輯非組合而成. 這樣的條件語句稱爲支持條件。該語句能夠用來作特性查詢。只有firefox支持。(@supports (animation-name: test) {/* 若是支持不帶前綴的animation-name,則下面指定的CSS會生效 */ @keyframes {}})
9) @viewport: 讓咱們能夠對文檔的大小進行設置 viewport。IE10支持。(@viewport {width: 100vw;})
qualified rule: 由一個選擇器(selector)開頭,後面接着一對大括號{},在大括號內部定義一個或多個形式爲 屬性(prototype):值(value); 的聲明。值還能夠爲函數。
參考連接:
MDN上的@charset
MDN上的@charset
MDN上的@pageweb

常見的CSS計算函數

常見的CSS計算函數:
1) calc(): 能夠在聲明CSS屬性值時執行一些計算。IE9支持。(.border { width: calc(100% - 80px); })
2) max(): 用在CSS屬性值中,能夠從逗號分隔的表達式中取出最大的值來設置。IE、Edge、Firefox都不支持。(.logo {width: max(50vw, 300px);})
3) min(): 用在CSS屬性值中,能夠從逗號分隔的表達式中取出最小的值來設置。IE、Edge、Firefox都不支持。(.logo {width: min(50vw, 300px);})
4) clamp(): 容許在定義的最小值和最大值之間的值範圍內選擇中間值。它有三個參數,分別是最小值、首選值、最大容許值。Edge、Firefox、IE、Safari都不支持。(.box {width: clamp(10px, 4em, 80px);} /* 當前em的值若是在10px和80px之間,則寬爲4em */)
5) attr(): 用來獲取選擇到的元素的某一HTML屬性值，並用於其樣式。它也能夠用於僞元素，屬性值採用僞元素所依附的元素。IE8支持。(.msg::before { content: attr(data-word) " "; })瀏覽器

CSS命名規則

1) 類名使用小寫字母，以中劃線分隔（.element-content {}）
2) id採用駝峯式命名（#myDialog {}）
3) scss中的變量、函數、混合採用駝峯式命名 ( @mixin centerBlock {} )
來源: 騰訊AlloyTeam代碼書寫習慣服務器

CSS特色

1) 在CSS中,屬性和值均區分大小寫。若是屬性未知,或者對於給定屬性值無效,則聲明被視爲無效,而且瀏覽器的CSS引擎將徹底忽略該聲明。
2) 與HTML同樣,瀏覽器傾向於忽略CSS內部的大部分空白,大量空白只是爲了提升可讀性。
3) 瀏覽器解析CSS時,若是遇到它不理解的屬性或值,它將忽略它並繼續進行下一個聲明。若是拼寫了錯誤的屬性或值,或者該屬性或值太新而且瀏覽器尚且不支持它,它將執行此操做。一樣，若是瀏覽器遇到一個沒法理解的選擇器，它將忽略整個規則並繼續執行下一個規則。(如h1, ..test{}將被忽略)
4) CSS的選擇器解析的時候是從右到左的,對於瀏覽器來講,ID選擇器是最快的,其次是class選擇器、html元素選擇器。當有多個選擇器時, 如 .layout span {} 會先找到全部的 span 節點,對於每個span,向上尋找 class="layout" 的節點。
5) CSS的執行順序是從上到下,在相同權重、相同的規則下,後面的規則覆蓋前面的規則。
6) CSS中定義的樣式,權重不一樣時,權重高的決定元素的樣式ide

CSS註釋書寫方式: `/* 這是CSS註釋,能夠是多行的 */`。

CSS權重

1、定義
CSS權重: 權重決定了CSS規則怎樣被瀏覽器解析直到生效。CSS權重是由每一個選擇器相加計算而來的。
2、基本規則
權重的基本規則:
1) 權重相同時，之後面出現的選擇器爲最後規則
2) 權重不一樣時，權重值高則生效
3、權重級別
權重級別:
1) 0 : 通配符選擇器(*)的權重0
2) 1 : 一個元素或者僞元素的權重爲1，僞元素選擇器有::before 、::after 、::first-letter 、::first-line 、::selection等。
3) 10 : 一個屬性選擇器/class或者僞類的權重爲10
4) 100 : 一個ID選擇器的權重爲100
5) 1000 : 行內樣式的權重爲1000
6) 最高 : 在樣式的屬性值後面加上 ##!important## 表示該樣式權重最高，只能被後面相同屬性且屬性值後面帶有 ##!important##所覆蓋
4、權重計算案例
權重計算案例:函數

01. *{}                         ====》0
02. li{}                        ====》1(一個元素)
03. li:first-line{}             ====》2(一個元素，一個僞元素)
04. ul li {}                    ====》2（兩個元素）
05. ul ol+li{}                  ====》3（三個元素）
06. h1+ *[rel=up] {}            ====》11（一個屬性選擇器，一個         元素）
07. ul ol li.red{}              ====》13（一個類，三個元素）
08. li.red.level{}              ====》21（兩個類，一個元素）
09. style=""                    ====》1000(一個行內樣式)
10. p {}                        ====》1（一個元素）
11. div p {}                    ====》2（兩個元素）
12. .sith {}                    ====》10（一個類）
13. div p.sith{}                ====》12（一個類，兩個元素）
14. #sith{}                     ====》100（一個ID選擇器）
15. body #darkside .sith p {}   ====》112(1+100+10+1,一個Id選擇器，一個類，兩個元素)

參考連接:
MDN上的僞元素
 你應該知道的一些事情——CSS權重佈局

CSS盒模型

標準盒模型: 盒子的總寬/高 = width/height + margin + padding + border。瀏覽器默認使用標準盒模型。
怪異(IE)盒模型: 盒子的總寬/高 = width/height + margin。(即width/height已經包含了padding和border值)。若是想要使用怪異盒模型，須要設置.box {box-sizing: border-box;}。

字體大小單位

1) px(像素): 這是一個絕對單位，它致使在任何狀況下，頁面上的文本所計算出來的像素值都是同樣的。
2) em: 1em等於當前元素的父元素上設置的字體的大小。
3) rem: 1rem等於HTML中的根元素的字體大小，而不是父元素的。IE8及如下版本不支持。

處理不一樣的文字方向

1、定義及模式的API
CSS中的書寫模式(writing-mode): 指的是文本是水平放置仍是垂直放置。
該writing-mode屬性的三個可能值是:
1) horizontal-tb：從上到下的塊流動方向。句子水平排列。這是默認狀況下。
2) vertical-rl：從右到左的塊流動方向。句子垂直排列。
3) vertical-lr：從左到右的塊流動方向。句子垂直排列。

上圖爲水平書寫模式下的兩種維度(horizontal-tb)

上圖爲縱向書寫模式下的兩種維度(vertical-rl、vertical-lr)

以writing-mode的值horizontal-tb爲例，在該書寫模式下，block爲垂直方向，inline爲水平方向。

2、相關屬性
inline-size: 定義元素塊的水平或垂直大小，具體取決於元素的寫入模式。它對應於width和height屬性，具體取決於寫入模式的值。在writing-mode的值爲horizontal-tb下是寬的尺寸。IE、Edge都不支持。
block-size: 定義元素塊的水平或垂直大小，具體取決於元素的寫入模式。它對應於width和height屬性，具體取決於寫入模式的值。在writing-mode的值爲horizontal-tb下是高的尺寸。IE、Edge都不支持。
參見: MDN上的處理不一樣方向的文本

以上內容若有不對,但願你們指出,謝謝。