【CSS全解01】CSS基礎-體系化學CSS

時間 2020-01-05

標籤 CSS全解01 css 基礎體系化學欄目 CSS 简体版

原文原文鏈接

大綱

基礎部分學習佔比：HTML 1%`CSS 19%Javascript 80%`(`基礎部分 ?%框架？%`項目？%)
CSS歷史
Acid Test for browser
CSS是藝術（非邏輯，用測試經驗來學，空間感，所見即所學）
CSS版本（CSS4* 分模塊升級模塊版本level 搜css spec）
體系化學習？CSS mdn參考
文檔流（Normal Flow）
盒模型（[Content | Border] Box）

xx層疊？樣式表（進行樣式聲明）css

樣式重疊（屢次對同一選擇器）
選擇器重疊（用不一樣選擇器對同一元素）
文件重疊（多個文件）

樣式層疊覆蓋，CSS極度靈活（不正交屬性、樣式不一一對應肯定）

瀏覽器相關的幾個網站(兼容性caniuse.com|市場份額tongji.baidu.com)
瀏覽器內核(csstriggers.com)

瀏覽器業界毒瘤（QQ、百度），扛把子UC，新星夸克html

CanIUse 看數據時不用翻譯，看註釋時用

Edge 對 calc() within grid 支持很差

Safari 仍然不支持intrinsic and extrinsic sizing with grid 的屬性 grid-template-rows

開源 Web 技術示例#CSS

體系化學CSS？若不自*，也可成功

googlecss specweb

TL,DR 在CSS新知識到來的時候，立刻學會

寫CSS必須學會先

語法（寫代碼）
調試（哪寫錯）
查資料（爲了抄）
標準制定者

CRM學習法以外的在線臨時調試playground：chrome

codesandboxcodepenJSBinjsFiddlesegmentfault

CSS語法一：樣式語法

selectors-list {
  properties-list
}

選擇器{
    屬性名:屬性值;
    /* 只有註釋 */
}

selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list]
properties-list ::= [property : value] [; properties-list]瀏覽器

eg.框架

.a,
#b,
[c="d"]>e f,
g+h,
i~j{
    border:1px red solid;
}
strong {
  color: red;
}
div.menu-bar li:hover > ul {
  display: block;
}

注意事項

全部符號都是英文符號，IDE只開英語輸入，中文從記事本里粘貼進來（開不一樣應用不一樣輸入法：both Win & Mac）；標點寫錯，瀏覽器會警告，但不報錯
區分大小寫，a 和 A 不一樣
沒有//註釋，只是把選擇器拼錯不生效而已
最後一個分號建議不要省略
任何地方寫錯了，都不報錯，瀏覽器會直接忽略，繼續渲染，只給警告⚠️
怎麼糾錯？調試看下文

注意，規則定義中的任何CSS語法錯誤都將使整個規則無效。無效的規則將被瀏覽器忽略。
注意CSS定義徹底是基於文本(ASCII)的。ide

eg.工具

p{
    /* 正確 */
    color:red;
    /* 不正規的「註釋」：拼錯 */
    xcolor:red;
    //color:red;
    /* 註釋 */
    /* color:red; */
}

CSS語法二：經常使用@語法

@charset "UTF-8"; /* 必須放在第一行；必須以分號`;`結尾 */
@import url(2.css); /* 導入另外一個CSS文件；必須以分號`;`結尾 */
@media (min-width:100px) and (max-width:200px){
    /* 語法一：樣式語法 */
}