App下載

web前端開發(fā)初學(xué)者如何科學(xué)的快速學(xué)會(huì)CSS？

猿友 2021-01-22 16:01:01 瀏覽數(shù) (2457)
反饋

很多前端初學(xué)者對(duì) CSS 表示很頭大，咨詢w3cschool小獅妹”如何學(xué)習(xí) CSS “?？偨Y(jié)發(fā)現(xiàn)一部分原因是由于我們對(duì) CSS 沒有很好的認(rèn)識(shí)。雖然 CSS 只是前端工作的一小部分，但是它直接關(guān)系到網(wǎng)頁最終顯示效果，很值得我們?nèi)W(xué)習(xí)。

本文主要概述 CSS 的一些常見基礎(chǔ)知識(shí)，幫助大家更好的理解 CSS 。

什么是 CSS？

CSS（層疊樣式表）——英文 Cascading Style Sheets 的縮寫，是一種計(jì)算機(jī)標(biāo)記語言，用來表現(xiàn) HTML （標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或 XML （標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式。

CSS 知識(shí)點(diǎn)太多記不住？

CSS 知識(shí)點(diǎn)確實(shí)很多，我們只需要學(xué)習(xí)并理解它的基礎(chǔ)知識(shí)和原理，需要用到的時(shí)候再到w3cschool 查詢CSS參考手冊(cè) ，不需要學(xué)習(xí)完所有的屬性和值，但是學(xué)習(xí) CSS 要有一些前端基礎(chǔ)，如果沒有這些基礎(chǔ)，您將很難理解它，你可以先在W3Cschool上學(xué)習(xí)HTML 。 這樣可以節(jié)省大量時(shí)間、少走很多彎路。

認(rèn)識(shí)選擇器（SELECTORS）

HTML 頁面中的元素是通過 CSS 選擇器 來進(jìn)行控制的，可以實(shí)現(xiàn)一對(duì)一，一對(duì)多或者多對(duì)一的控制，學(xué)習(xí) CSS 首先要掌握的就是選擇器。一般使用 class 選擇器（程序中稱“類選擇器”），或直接在 body 中使用 HTML 元素(elements) （指的是從開始標(biāo)簽(start tag)到結(jié)束標(biāo)簽(end tag)的所有代碼。）來設(shè)置樣式(Style)，但是一些更復(fù)雜的操作就需要更高級(jí)的選擇器來實(shí)現(xiàn)了，如一些對(duì)象直接位于元素之后，或者是要選擇表格中的奇數(shù)行，就需要根據(jù)元素在文檔中的位置來選擇元素。

這些選擇器屬于 CSS3 規(guī)范的一部分（你可能聽說過它們被稱為 CSS3 選擇器）具有出色的瀏覽器支持。 有關(guān)可以使用的各種選擇器的詳細(xì)信息，請(qǐng)參閱W3Cschool的 CSS 選擇器 。

有些選擇器的行為就好像你已經(jīng)將“類”（ class） 應(yīng)用于文檔中的某些內(nèi)容一樣。 例如p:first-child就像你在第一個(gè)p元素中添加了一個(gè)“類”一樣，這些被稱為“偽對(duì)象選擇符”(Pseudo-Element Selectors)。 “偽對(duì)象選擇符”的作用類似于動(dòng)態(tài)插入元素，例如::first-line的作用與用span 包裹第一行文本類似。但是，如果該行的長(zhǎng)度發(fā)生變化，它將重新應(yīng)用，如果插入該元素，就不會(huì)出現(xiàn)這種情況。 現(xiàn)在你可能會(huì)覺得這些選擇器很復(fù)雜， 下面示例中是一個(gè)用偽類(Pseudo-class ) 的偽元素(Pseudo Element) 例子。 我們使用 :first-child 偽類定位第一個(gè) p 元素，然后 ::first-line 選擇器選擇該元素的第一行，就好像在第一行周圍添加了一個(gè)<span>以使其變粗并更改顏色一樣。

HTML代碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>認(rèn)識(shí)CSS選擇器（SELECTORS）- 編程獅(w3cschool.cn)</title>
<style type="text/css">
@import url("style/style.css");
</style>
</head>


<body>
<div class="container">
    <p>大學(xué)之道，在明明德，在親民，在止于至善。</p>
    <p>知止而后有定，定而后能靜，靜而后能安，安而后能慮，慮而后能得。物有本末，事有終始。知所先后，則近道矣。</p>
    <p>古之欲明明德于天下者，先治其國；欲治其國者，先齊其家；欲齊其家者，先修其身；欲修其身者，先正其心；欲正其心者，先誠其意；欲誠其意者，先致其知。致知在格物。物格而后知至，知至而后意誠，意誠而后心正，心正而后身修，身修而后家齊，家齊而后國治，國治而后天下平。自天子以至于庶人，壹是皆以修身為本。</p>
<p>其本亂而末治者，否矣。其所厚者薄，而其所薄者厚，未之有也。</p>
</div>
</body>
</html>

CSS代碼：

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


* {box-sizing: border-box;}


p {
  margin: 0 0 1.7em 0;
}


.container {  
  border: 1px solid rgb(254,106,0);
  border-radius: .5em;
  padding: 20px;
  column-count: 1;
}


.container p:first-child::first-line {
  font-weight: bold;
  color: rgb(254,106,0);
}

效果：

繼承和層疊（INHERITANCE AND THE CASCADE）

層疊定義了一個(gè)元素應(yīng)用了多個(gè)樣式規(guī)則時(shí)，應(yīng)該哪個(gè)規(guī)則優(yōu)先應(yīng)用。 如果你無法理解為什么某些 CSS 似乎沒有應(yīng)用的情況，那可能是層疊沒有運(yùn)用好。 層疊與繼承緊密相關(guān)，繼承定義了子元素可以繼承父元素的樣式屬性。 它還與特異性有關(guān)，不同的選擇器具有不同的特異性，當(dāng)有幾個(gè)選擇器可以應(yīng)用于一個(gè)元素時(shí)，繼承可以決定應(yīng)用哪個(gè)規(guī)則。

注意：為了理解這些內(nèi)容，建議閱讀 W3Cschool 中的 CSS 樣式級(jí)聯(lián)。

如果你正在嘗試將一些 CSS 應(yīng)用于一個(gè)元素，那么你的瀏覽器開發(fā)者工具（DevTools）是最好的選擇?？纯聪旅孢@個(gè)例子，我用元素選擇器 h1 將 h1 標(biāo)題設(shè)置為橙色。同時(shí)，我也使用類選擇器將h1 標(biāo)題設(shè)置為紫色。 由于類的優(yōu)先級(jí)更高，因此h1標(biāo)題是紫色的。 在開發(fā)者工具中，您可以看到元素選擇器被劃掉了，因?yàn)樗鼪]有被應(yīng)用。 一旦你看到瀏覽器正在獲取你的 CSS（但其他東西已經(jīng)推翻了它），那么你可以開始找出原因了。

HTML代碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>繼承和層疊 - 編程獅(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>


<body>
<div class="container">
    <h1 class="greatlearning">大學(xué)</h1>
    <p>大學(xué)之道，在明明德，在親民，在止于至善。</p>
    <p>知止而后有定，定而后能靜，靜而后能安，安而后能慮，慮而后能得。物有本末，事有終始。知所先后，則近道矣。</p>
    <p>古之欲明明德于天下者，先治其國；欲治其國者，先齊其家；欲齊其家者，先修其身；欲修其身者，先正其心；欲正其心者，先誠其意；欲誠其意者，先致其知。致知在格物。物格而后知至，知至而后意誠，意誠而后心正，心正而后身修，身修而后家齊，家齊而后國治，國治而后天下平。自天子以至于庶人，壹是皆以修身為本。</p>
<p>其本亂而末治者，否矣。其所厚者薄，而其所薄者厚，未之有也。</p>
</div>
</body>
</html>

CSS代碼：

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


* {box-sizing: border-box;}


p {
  margin: 0 0 1.7em 0;
}


.container {  
  border: 1px solid rgb(254,106,0);
  border-radius: .5em;
  padding: 20px;
  column-count: 1;
}


.greatlearning {
  color: rebeccapurple;
}


h1 {
  color: orange;
}

效果：

盒模型（Box Model ）

css將html元素看作一個(gè)個(gè)盒子，來設(shè)計(jì)和布局。盒子有它們的屬性，盒子之間也可嵌套。標(biāo)準(zhǔn)的 CSS 盒模型 (CSS Box Model) 采用你給定元素的寬度，然后將內(nèi)邊框和邊框添加到該寬度上——這意味著元素占用的空間大于給定的寬度。

  • 屬性：margin、padding、border、content
  • 根據(jù)display屬性值的不同，如，block\\\\\\\\inline-block\\\\\\\\inline（默認(rèn)），可設(shè)置為塊模型\\\\\\\\內(nèi)聯(lián)塊模型\\\\\\\\內(nèi)聯(lián)模型
  • 分類：標(biāo)準(zhǔn)模型、IE模型（替代盒子模型）

除了標(biāo)準(zhǔn)盒子模型外還有一個(gè)盒子模型叫 IE 模型（替代盒子模型），盒子的寬度是頁面上可見框的寬度，因此內(nèi)容區(qū)域的寬度是該寬度減去填充和邊框的寬度。詳細(xì)請(qǐng)查閱W3Cschool上的CSS Box Model (盒子模型) 。

下面演示兩個(gè)盒子， 兩者的寬度均為200像素，邊框?yàn)?像素，內(nèi)邊距為20像素。 第一個(gè)框使用標(biāo)準(zhǔn)盒子模型，因此占用總寬度為 242 像素，第二個(gè)框使用替代盒子模型，因此實(shí)際上是 200 像素寬。

HTML代碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 盒模型 -編程獅(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>


<body>
<div class="box">
    我是標(biāo)準(zhǔn)盒子模型。
</div>


<div class="box box2">
    我是替代盒子模型。
</div>
</body>
</html>

CSS代碼：

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


p {
  margin: 0 0 1em 0;
}


.box {  
  border: 1px solid rgb(254,106,0);
  border-radius: .5em;
  padding: 20px;
  width: 200px;
  margin-bottom: 2em;
}


.box2 {
  box-sizing: border-box;
}

效果：

瀏覽器開發(fā)者工具(DevTools)可以再次幫助你了解正在使用的盒子模型。 在下圖中，我使用火狐瀏覽器的開發(fā)者工具使用默認(rèn)的 content-box盒模型工具。 工具告訴我這是正在使用的盒模型，我可以看到大小以及如何將邊框和內(nèi)邊框添加到指定的寬度。

DevTools可幫助您了解為什么盒具有一定大小以及所使用的盒模型

注意：在 IE8 以前，如果想要兼容的話，就需要用 W3C 標(biāo)準(zhǔn)，聲明。在 IE8+ ，瀏覽器中使用哪個(gè)盒模型可以由 box-sizing 控制，默認(rèn)值為 content-box，即標(biāo)準(zhǔn)盒模型。

在 W3Cschool的 CSS Box Model 中，有關(guān)于盒模型、盒子尺寸詳細(xì)說明。

常規(guī)流（normal flow）

也有人翻譯為“文檔流”，具體叫什么名字不重要，我們理解它的原理就行了。標(biāo)題和段落將以新行開始，單詞顯示為句子，并且它們之間只有一個(gè)空格。用于格式化的標(biāo)簽（例如em）不會(huì)破壞句子流。此內(nèi)容以“常規(guī)流(normal flow)”或“塊流布局(Block Flow Layout)”顯示。內(nèi)容的每個(gè)部分都被描述為“在流中(in flow)”；它知道其余內(nèi)容，因此不會(huì)重疊。

我們要接受這種行為，學(xué)起來才會(huì)變得更加輕松。這是為什么從一個(gè)正確標(biāo)記的HTML文檔開始很有意義的原因之一，由于瀏覽器遵守常規(guī)流和內(nèi)置樣式表，你的內(nèi)容從可讀的地方開始。

格式化上下文（FORMATTING CONTEXTS）

一旦文檔的內(nèi)容處于正常流程中，您可能希望更改其中一些內(nèi)容的外觀。 你可以通過更改元素的格式上下文來完成此操作。 舉個(gè)一個(gè)非常簡(jiǎn)單的示例，如果你希望所有段落連在一起而不是從新行開始，你可以設(shè)置 p 元素的樣式屬性display:inline ，將 p 元素由塊級(jí)元素變成內(nèi)聯(lián)元素。

本質(zhì)上，格式化上下文定義了外部和內(nèi)部類型。外部控制元素與頁面上其他元素的行為，內(nèi)部控制子元素的外觀。例如，當(dāng)你設(shè)置 display:flex ，你在設(shè)置外部為塊格式化上下文，設(shè)置子元素為 flex 格式化上下文。

注意：最新版本的 Display 規(guī)范改變了 display 的值，顯式聲明外部和內(nèi)部的類型。因此，將你可能會(huì)聲明 display:block flex; （外部為 block，內(nèi)部為 flex）。

在W3Cschool的 CSS display顯示 上閱讀更多關(guān)于 display的信息。

在流中或脫離流（BEING IN OR OUT OF FLOW）

CSS 中的元素被描述為“在流中(in flow)”或“脫離流(out of flow)”。流中的元素被賦予空間，并且空間被流中的其他元素所影響。 如果通過浮動(dòng)或定位元素使元素脫離流，則該元素的空間將不再受到其他流元素的影響。

對(duì)于絕對(duì)定位的元素，是最明顯的。 如果你設(shè)置一個(gè)元素 position: absolute ，該元素會(huì)從流中脫離，你需要確保這個(gè)元素不會(huì)與流中的元素重疊，且不影響你布局的其他部分的可讀性。

HTML代碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS flow - 編程獅(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>


<body>
<div class="container">

  
    <p>子曰：“學(xué)而時(shí)習(xí)之，不亦說乎？有朋自遠(yuǎn)方來，不亦樂乎？人不知而不慍，不亦君子乎？</p>
    <p>有子曰:“其為人也孝弟而好犯上者，鮮矣；不好犯上而好作亂者，未之有也。君子務(wù)本，本立而道生。孝弟也者，其為仁之本與!”</p>
    <p>子曰:“巧言令色，鮮矣仁！”</p>
    <p>曾子曰“吾日三省吾身:為人謀而不忠乎?與朋友交而不信乎?傳不習(xí)乎?”</p>
    <p>子曰:“道千乘之國,敬事而信，節(jié)用而愛人，使民以時(shí)?！?lt;/p>
    <p>子曰：“弟子入則孝，出則弟，謹(jǐn)而信，泛愛眾，而親仁。行有余力，則以學(xué)文?！?lt;/p>
    <p>子夏曰：“賢賢易色；事父母，能竭其力；事君，能致其身；與朋友交，言而有信。雖曰未學(xué)，吾必謂之學(xué)矣?！?lt;/p>
    <p>子曰：“君子不重則不威，學(xué)則不固。主忠信，無友不如己者，過則勿憚改?！?lt;/p>
    <p>曾子曰：“慎終追遠(yuǎn)，民德歸厚矣?！?lt;/p>
    <p>子禽問于子貢曰：“夫子至于是邦也，必聞其政，求之與，抑與之與？”子貢曰：“夫子溫、良、恭、儉、讓以得之。夫子之求之也，其諸異乎人之求之與？”</p>
    <p>子曰：“父在，觀其志。父沒，觀其行；三年無改于父之道，可謂孝矣。”</p>
    <p>有子曰：“禮之用，和為貴。先王之道，斯為美，小大由之。有所不行，知和而和，不以禮節(jié)之，亦不可行也?！?lt;/p>
    <p>有子曰：“信近于義，言可復(fù)也。恭近于禮，遠(yuǎn)恥辱也。因不失其親，亦可宗也。”</p>
    <p>子曰：“君子食無求飽，居無求安，敏于事而慎于言，就有道而正焉?？芍^好學(xué)也已?！?lt;/p>
    <p>子貢曰：“貧而無諂，富而無驕，何如？”子曰：“可也。未若貧而樂，富而好禮者也?！弊迂曉唬骸啊对姟吩疲骸缜腥绱瑁缱寥缒ァ渌怪^與？”子曰：“賜也，始可與言《詩》已矣，告諸往而知來者?！?lt;/p>
    <p>子曰：“不患人之不己知，患不知人也。”</p>

  
    <div class="item">絕對(duì)定位和脫離流。</div>
</div>
</body>
</html>

CSS代碼：

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


* {box-sizing: border-box;}


p {
  margin: 0 0 1em 0;
}


.container {  
  border: 1px solid rgb(254,106,0);
  border-radius: .5em;
  padding: 10px;
  column-count: 2;
  max-width: 400px;
  position: relative;
}


.item {
  border-radius:.5em;
  position: absolute;
  top: 10px;
  left: 20px;
  background-color: rgba(254,106,0,.9);
  color: #fff;
  padding: 20px;
  width: 200px;
}

效果：

然而，浮動(dòng)元素也會(huì)從流中脫離，但后面的元素的文本將環(huán)繞該浮動(dòng)元素。你可以設(shè)置后面元素的背景顏色，你會(huì)看到他們會(huì)上升并占用了原來浮動(dòng)元素原來的空間。

HTML代碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS flow - 編程獅(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>


<body>
<div class="container">


    <div class="item">浮動(dòng)和脫離流</div>  
    <p>子曰：“學(xué)而時(shí)習(xí)之，不亦說乎？有朋自遠(yuǎn)方來，不亦樂乎？人不知而不慍，不亦君子乎？</p>
    <p>有子曰:“其為人也孝弟而好犯上者，鮮矣；不好犯上而好作亂者，未之有也。君子務(wù)本，本立而道生。孝弟也者，其為仁之本與!”</p>
    <p>子曰:“巧言令色，鮮矣仁！”</p>
    <p>曾子曰“吾日三省吾身:為人謀而不忠乎?與朋友交而不信乎?傳不習(xí)乎?”</p>
    <p>子曰:“道千乘之國,敬事而信，節(jié)用而愛人，使民以時(shí)?！?lt;/p>
    <p>子曰：“弟子入則孝，出則弟，謹(jǐn)而信，泛愛眾，而親仁。行有余力，則以學(xué)文?！?lt;/p>
    <p>子夏曰：“賢賢易色；事父母，能竭其力；事君，能致其身；與朋友交，言而有信。雖曰未學(xué)，吾必謂之學(xué)矣?！?lt;/p>
    <p>子曰：“君子不重則不威，學(xué)則不固。主忠信，無友不如己者，過則勿憚改?！?lt;/p>
    <p>曾子曰：“慎終追遠(yuǎn)，民德歸厚矣。”</p>
    <p>子禽問于子貢曰：“夫子至于是邦也，必聞其政，求之與，抑與之與？”子貢曰：“夫子溫、良、恭、儉、讓以得之。夫子之求之也，其諸異乎人之求之與？”</p>
    <p>子曰：“父在，觀其志。父沒，觀其行；三年無改于父之道，可謂孝矣。”</p>
    <p>有子曰：“禮之用，和為貴。先王之道，斯為美，小大由之。有所不行，知和而和，不以禮節(jié)之，亦不可行也?！?lt;/p>
    <p>有子曰：“信近于義，言可復(fù)也。恭近于禮，遠(yuǎn)恥辱也。因不失其親，亦可宗也?！?lt;/p>
    <p>子曰：“君子食無求飽，居無求安，敏于事而慎于言，就有道而正焉?？芍^好學(xué)也已。”</p>
    <p>子貢曰：“貧而無諂，富而無驕，何如？”子曰：“可也。未若貧而樂，富而好禮者也。”子貢曰：“《詩》云：‘如切如磋，如琢如磨’，其斯之謂與？”子曰：“賜也，始可與言《詩》已矣，告諸往而知來者?！?lt;/p>
    <p>子曰：“不患人之不己知，患不知人也?！?lt;/p>

  
</div>
</body>
</html>

CSS代碼：

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


* {box-sizing: border-box;}


p {
  margin: 0 0 1em 0;
}


.container {  
  border: 1px solid rgb(254,106,0);
  border-radius: .5em;
  padding: 10px;
  max-width: 500px;
}


.item {
  border-radius:.5em;
  float: left;
   background-color: rgba(254,106,0,.9);
  color: #fff;
  padding: 20px;
  width: 100px;
  margin: 10px;
}


.container p:nth-of-type(1) {
  background-color: yellow;
}

效果：

注意： 需要記住的重要一點(diǎn)是，如果從流中取出一個(gè)元素，則需要自己管理重疊，因?yàn)閴K流布局的常規(guī)規(guī)則不再適用。

布局（Layout）

過去我們們?cè)?HTML 中一般使用 CSS 進(jìn)行布局，常見的布局有：?jiǎn)瘟胁季?、兩列自適應(yīng)布局、圣飛布局和雙飛翼布局、偽等高布局、粘連布局。重點(diǎn)介紹下 Flex 布局和 grid 布局：

Flex布局

Flex布局，也叫彈性盒子布局，區(qū)區(qū)簡(jiǎn)單幾行代碼就可以實(shí)現(xiàn)各種頁面的的布局。

//html部分同上
.parent {
    display:flex;
}  
.right {
    margin-left:20px; 
    flex:1;
}

推薦W3Cschool上的的Flexbox布局基礎(chǔ)入門 ，可以更好的幫你掌握Flex。

grid布局

Grid 布局，是一個(gè)基于網(wǎng)格的二維布局系統(tǒng)，目的是用來優(yōu)化用戶界面設(shè)計(jì)。

//html部分同上
.parent {
    display:grid;
    grid-template-columns:auto 1fr;
    grid-gap:20px
}

對(duì)齊（Alignment）

大多數(shù)人都會(huì)把對(duì)齊（Alignment）當(dāng)作 Flexbox 的一部分，但是這些屬性適用于所有布局方法值得在這種情況下理解它們，而不是考慮“ Flexbox Alignment”或“ Flexbox Alignment” “ CSS網(wǎng)格對(duì)齊?！?我們有一組Alignment屬性，它們?cè)诳赡艿那闆r下可以以一種通用的方式工作。然后，由于不同的布局方法的行為方式，它們會(huì)有一些差異。

尺寸（Sizing）

在 web 上，我們習(xí)慣用長(zhǎng)度或百分比來設(shè)置尺寸，這就是我們?nèi)绾问褂酶?dòng)來制作網(wǎng)格類型布局的方法。然而，現(xiàn)代的布局方法可以為我們做很多空間分配——如果我們?cè)试S的話。值得花時(shí)間去了解 Flexbox 如何分配空間(或 Grid fr 單元如何工作)。

響應(yīng)式設(shè)計(jì)（Responsive Design）

通常，新的 Grid 和 Flexbox 布局方法意味著我們可以使用比舊方法更少的媒體查詢，因?yàn)樗鼈兎浅ｌ`活，可以響應(yīng)視口或組件大小的變化，而無需我們更改元素的寬度。 但是，有些地方需要添加一些斷點(diǎn)來進(jìn)一步增強(qiáng)設(shè)計(jì)。

字體和排版

與布局一樣，網(wǎng)絡(luò)上的字體使用在發(fā)生了巨大的變化?，F(xiàn)在，可變字體，使單個(gè)字體文件具有無限的變化。 要了解它們是什么以及它們?nèi)绾喂ぷ?，?qǐng)觀看Mandy Michael的精彩簡(jiǎn)短演講：可變字體和網(wǎng)頁設(shè)計(jì)的未來。 另外，我會(huì)推薦Jason Pamental的動(dòng)態(tài)排版與現(xiàn)代CSS和可變字體。

為了探索可變字體和它們的功能，微軟提供了一個(gè)有趣的演示，以及一些嘗試可變字體的游樂場(chǎng) - Axis Praxis是最知名的（我也喜歡字體游樂場(chǎng)）。

MDN上的指南將證明一開始使用可變字體是非常有用的。要了解如何為不支持可變字體的瀏覽器實(shí)現(xiàn)回退解決方案，請(qǐng)閱讀 Oliver Schondorfer的《使用回退Web字體實(shí)現(xiàn)可變字體》Firefox DevTools字體編輯器還支持使用可變字體。

變形和動(dòng)畫

CSS轉(zhuǎn)換和動(dòng)畫絕對(duì)是我需要知道的基礎(chǔ)。 我不經(jīng)常需要使用它們，在使用時(shí)會(huì)忘記語法。 值得慶幸的是，MDN上的參考資料幫助了我，我建議從使用CSS變換和使用CSS3動(dòng)畫的指南開始。 Zell Liew也有一篇很好的文章，為CSS過渡提供了很好的解釋。

要發(fā)現(xiàn)一些可能的事情，請(qǐng)查看Animista網(wǎng)站。

關(guān)于動(dòng)畫可能令人困惑的事情之一是采取哪種方法。 除了 CSS 支持的內(nèi)容之外，你可能還需要涉及 JavaScript ，SVG 或 Web Animation API，而這些事情往往都會(huì)被混為一談。 在她的演講中，選擇你的動(dòng)畫冒險(xiǎn)記錄在事件中，Val Head解釋了這些選項(xiàng)。

使用參考手冊(cè)

在使用 Grid 或 Flexbox 很多人會(huì)很依賴w3cschool上的CSS參考手冊(cè) ，如果沒有參考手冊(cè)就沒法工作。這是沒有問題的，前面我們也提到可以合理的利用參考手冊(cè)來提升開發(fā)效率，但是前提是得先理解透原理。否則我們?cè)趶?fù)制語法時(shí)，可能會(huì)忽略為什么要這樣寫。然后，當(dāng)遇到該屬性似乎表現(xiàn)不同的情況時(shí)，這種明顯的不一致會(huì)令人困惑找不出問題出在哪。

CSS 是一門經(jīng)過多年進(jìn)化的語言，一直在更新，如果是把自己當(dāng)成學(xué)習(xí)者的心態(tài)來學(xué)習(xí)的話，永遠(yuǎn)也是學(xué)不完的。然而，一旦你把基礎(chǔ)知識(shí)及底層原理打牢了以后，你就可以很輕松的面對(duì)各種變化了。如果要系統(tǒng)的學(xué)習(xí)前端推薦學(xué)習(xí)W3Cschool上的從0基礎(chǔ)到前端開發(fā) 課程。

以上就是編程獅為你整理的關(guān)于web前端開發(fā)初學(xué)者如何科學(xué)的快速學(xué)會(huì)CSS？的全部?jī)?nèi)容，希望給對(duì)css望而生畏初學(xué)者有所幫助，如果你有更好的學(xué)習(xí)方法歡迎分享~

CSS

3 人點(diǎn)贊