派迪科技做網(wǎng)站技術(shù)之-如何學(xué)習(xí)CSS？

我有很多人要求我向他們推薦CSS各個(gè)部分的教程，或者問如何學(xué)習(xí)CSS。我還看到很多人對(duì)CSS的某些部分感到困惑，部分原因是關(guān)于該語言的想法過時(shí)。鑒于最近幾年CSS發(fā)生了相當(dāng)大的變化，這是一個(gè)非常不錯(cuò)的時(shí)間來刷新您的知識(shí)。即使CSS只是您所做工作的一小部分（因?yàn)槟诙褩Ｖ械钠渌胤焦ぷ鳎?，CSS還是最終看起來像您希望在屏幕上顯示的樣子，因此值得進(jìn)行最新更新。

因此，本文旨在概述CSS的關(guān)鍵基礎(chǔ)知識(shí)和資源，以進(jìn)一步閱讀現(xiàn)代CSS開發(fā)的關(guān)鍵領(lǐng)域。其中很多東西都在Smashing Magazine上，但是我還選擇了其他一些資源，并且在CSS的關(guān)鍵領(lǐng)域也有很多人關(guān)注。它不是完整的初學(xué)者指南，也不打算涵蓋所有內(nèi)容。我的目標(biāo)是涵蓋一些關(guān)鍵領(lǐng)域，以涵蓋現(xiàn)代CSS的廣度，這將有助于為您解鎖其余語言。

語言基礎(chǔ)

對(duì)于大多數(shù)CSS，您不必?fù)?dān)心學(xué)習(xí)內(nèi)在屬性和值。您可以在需要時(shí)查詢它們。但是，該語言有一些關(guān)鍵基礎(chǔ)，如果沒有這些基礎(chǔ)，您將很難理解它。確實(shí)值得花一些時(shí)間來確保您了解這些事情，因?yàn)閺拈L遠(yuǎn)來看，它將節(jié)省大量時(shí)間和挫敗感。

選擇器，不僅僅是類

選擇器按照其提示進(jìn)行操作，它選擇了文檔的某些部分，以便可以對(duì)其應(yīng)用CSS規(guī)則。盡管大多數(shù)人都熟悉使用類或body直接對(duì)HTML元素進(jìn)行樣式設(shè)置，但是有許多更高級(jí)的選擇器可以根據(jù)元素在文檔中的位置來選擇元素，也許是因?yàn)樗鼈冎苯游挥谠刂?，或者是表中的奇?shù)行。

屬于Level 3規(guī)范的選擇器（您可能聽說過它們稱為Level 3選擇器）具有出色的瀏覽器支持。有關(guān)可使用的各種選擇器的詳細(xì)信息，請參見《 MDN參考》。

一些選擇器的作用就像您將類應(yīng)用于文檔中的某些內(nèi)容一樣。例如，p:first-child行為就像您將類添加到第一個(gè)p元素一樣，這些被稱為偽類選擇器。所述偽元素選擇器充當(dāng)如果一個(gè)元素被動(dòng)態(tài)插入的，例如::first-line以類似的方式給你包裝一作用span圍繞文本的第一行。但是，如果該行的長度發(fā)生更改，它將重新應(yīng)用，如果插入該元素，則不會(huì)發(fā)生這種情況。這些選擇器會(huì)使您變得相當(dāng)復(fù)雜。在下面的CodePen中是一個(gè)與偽類鏈接的偽元素的示例。我們p以:first-childpsuedo類定位第一個(gè)元素，然后::first-line 選擇器選擇該元素的第一行，就像在第一行周圍添加跨度以使其變粗并更改顏色一樣。

繼承與級(jí)聯(lián)

級(jí)聯(lián)定義了將多個(gè)規(guī)則應(yīng)用于一個(gè)元素時(shí)哪個(gè)規(guī)則獲勝。如果您曾經(jīng)遇到無法理解為什么某些CSS似乎沒有應(yīng)用的情況，那么級(jí)聯(lián)很可能會(huì)絆倒您。級(jí)聯(lián)與繼承緊密相關(guān)，后者定義了哪些屬性由應(yīng)用它們的元素的子元素繼承。它也與特異性相關(guān)；不同的選擇器具有不同的特異性，當(dāng)有多個(gè)選擇器可以應(yīng)用于一個(gè)元素時(shí)，該選擇器控制哪個(gè)獲勝。

注意：要了解所有這些內(nèi)容，建議您閱讀《 MDN CSS簡介》中的“層疊和繼承”。

如果您正在努力地將一些CSS應(yīng)用于元素，那么您的瀏覽器DevTools是最好的起點(diǎn)，請看下面的示例，在該示例中，我h1將元素選擇器作為目標(biāo)元素h1，并將標(biāo)題變?yōu)槌壬?/span>我也在使用一個(gè)類，將其設(shè)置h1為rebeccapurple。該類更具體，因此h1為紫色。在DevTools中，您可以看到元素選擇器被劃掉了，因?yàn)樗贿m用。一旦看到瀏覽器正在獲取您的CSS（但是其他原因否決了它），則可以開始找出原因。

盒子模型

CSS都是關(guān)于盒子的。屏幕上顯示的所有內(nèi)容都有一個(gè)框，“框模型”描述了框尺寸的計(jì)算方法（考慮了邊距，邊距和邊框）。標(biāo)準(zhǔn)CSS Box Model會(huì)采用您給定元素的寬度，然后在該寬度上添加填充和邊框-這意味著元素所占用的空間大于您給定的寬度。

最近，我們已經(jīng)能夠選擇使用備用框模型，該模型使用元素上的給定寬度作為屏幕上可見元素的寬度。任何填充或邊框都會(huì)從邊緣插入框的內(nèi)容。對(duì)于許多布局，這更有意義。

在下面的演示中，我有兩個(gè)框。兩者的寬度均為200像素，邊框?yàn)?像素，填充為20像素。第一個(gè)盒子使用標(biāo)準(zhǔn)盒子模型，因此占用了250個(gè)像素的總寬度。第二個(gè)使用備用框模型，因此實(shí)際上是200像素寬。

注意：在IE6之前，Internet Explorer使用備用Box Model，其中填充和邊框使內(nèi)容偏離給定寬度。所以有一段時(shí)間，瀏覽器使用了不同的Box型號(hào)！當(dāng)今天因互操作性問題而感到沮喪時(shí)，很高興事情已經(jīng)有所改善，因此我們不會(huì)與瀏覽器以不同方式計(jì)算事物的寬度。

CSS技巧上的Box模型和Box大小都有很好的解釋，此外，還介紹了在站點(diǎn)中全局使用替代Box模型的最佳方法。

正常流量

如果您的文檔帶有一些標(biāo)記內(nèi)容的HTML并可以在瀏覽器中查看，則希望該文檔可讀。標(biāo)題和段落將以新行開始，單詞顯示為句子，并且它們之間只有一個(gè)空格。用于格式化的標(biāo)簽（例如em）不會(huì)破壞句子流。該內(nèi)容以“ 正常流 ”或“塊流布局”顯示。內(nèi)容的每個(gè)部分都被描述為“進(jìn)行中”；它知道其余內(nèi)容，因此不會(huì)重疊。

如果您不反對(duì)這種行為而與之合作，那么您的生活就會(huì)變得更加輕松。這是為什么從一個(gè)正確標(biāo)記的HTML文檔開始很有意義的原因之一，由于正常的流程和瀏覽器所尊重的內(nèi)置樣式表，您的內(nèi)容從可讀的地方開始。

格式化上下文

擁有內(nèi)容正常流動(dòng)的文檔后，您可能需要更改某些內(nèi)容的外觀。您可以通過更改元素的格式設(shè)置上下文來實(shí)現(xiàn)。作為一個(gè)非常簡單的示例，如果希望所有段落一起運(yùn)行而不是從新行開始，則可以將p元素display: inline更改為將其從塊更改為內(nèi)聯(lián)格式設(shè)置上下文。

格式化上下文本質(zhì)上定義了外部和內(nèi)部類型。外部控制元素與頁面上其他元素的行為方式，內(nèi)部控制子項(xiàng)的外觀。因此，例如，當(dāng)您說display: flex要將外部設(shè)置為塊格式設(shè)置上下文，而將子級(jí)設(shè)置為flex格式設(shè)置上下文時(shí)。

注意：最新版本的顯示規(guī)范會(huì)更改的值display以顯式聲明內(nèi)部和外部值。因此，將來您可能會(huì)說display: block flex;（block是外部的，flex是內(nèi)部的）。

display 在MDN了解更多信息。

流入或流出

CSS中的元素被描述為“流入”或“流出”。流動(dòng)中的元素具有給定的空間，而其他流動(dòng)中的元素則尊重該空間。如果通過浮動(dòng)或放置元素使元素脫離流動(dòng)，則該元素的空間將不再受到其他流動(dòng)項(xiàng)目的尊重。

對(duì)于絕對(duì)定位的項(xiàng)目，這最為明顯。如果提供的項(xiàng)目position: absolute已從流程中刪除，那么您將需要確保不會(huì)出現(xiàn)流出元素重疊并使布局的其他部分變得不可讀的情況。

您可以在MDN上了解更多有關(guān)流入和流出元素的信息。要記住的重要一點(diǎn)是，如果您將某個(gè)元素從流程中刪除，則您需要自己進(jìn)行重疊管理，因?yàn)槌Ｒ?guī)的塊流程布局規(guī)則不再適用。

布局

十五年來，我們一直在使用CSS進(jìn)行布局，而沒有為工作布局系統(tǒng)設(shè)計(jì)的布局。這已經(jīng)改變了。現(xiàn)在，我們有了功能完善的布局系統(tǒng)，其中包括Grid和Flexbox，還包括多列布局以及用于其實(shí)際用途的較舊的布局方法。如果您不知道CSS布局，請轉(zhuǎn)到MDN 學(xué)習(xí)布局教程，或在Smashing Magazine上閱讀我的文章CSS布局入門。

不要想象諸如grid和flexbox之類的方法會(huì)在某種程度上競爭。為了更好地使用Layout，您有時(shí)會(huì)發(fā)現(xiàn)最好將組件作為Flex組件，有時(shí)將其作為Grid。有時(shí)，您將需要multicol的列流動(dòng)行為。所有這些都是有效的選擇。如果您感覺自己正在與某種行為方式作斗爭，那通常就是一個(gè)很好的信號(hào)，表明可能值得退后一步，嘗試另一種方法。我們已經(jīng)習(xí)慣了使用CSS進(jìn)行修改以使其達(dá)到我們想要的效果，以至于我們可能會(huì)忘記我們還有很多其他選擇可以嘗試。

布局是我的主要專長領(lǐng)域，我在Smashing Magazine和其他地方寫了許多文章來嘗試幫助馴服新的Layout景觀。除了上述“布局”文章之外，我還介紹了有關(guān)Flexbox的整個(gè)系列文章-從創(chuàng)建Flexbox Flex容器時(shí)發(fā)生的情況開始。在Grid By Example上，我有一堆CSS Grid的小例子，以及一個(gè)視頻截屏教程。

此外，尤其是對(duì)于設(shè)計(jì)師而言，請查看Jen Simmons和她的Layout Land視頻系列。

對(duì)準(zhǔn)

我一般將Alignment與Layout分離開來，因?yàn)殡m然我們大多數(shù)人都是作為Flexbox的一部分介紹給Alignment的，但是這些屬性適用于所有布局方法，值得在這種情況下理解它們，而不是考慮“ Flexbox Alignment”或“ Flexbox Alignment” “ CSS網(wǎng)格對(duì)齊”。我們有一組“對(duì)齊”屬性，這些屬性會(huì)在可能的情況下以通用方式工作。然后，由于不同的布局方法的行為方式，它們會(huì)有一些差異。

在MDN上，您可以深入了解“ 框?qū)R”及其在網(wǎng)格，F(xiàn)lexbox，Multicol和“塊布局”中的實(shí)現(xiàn)方式。在Smashing Magazine的此處，我有一篇文章專門介紹Flexbox中的對(duì)齊方式：您需要了解的有關(guān)Flexbox中對(duì)齊的一切。

漿紗

我在2018年的大部分時(shí)間里都在談?wù)搩?nèi)部和外部大小調(diào)整規(guī)范，尤其是它與Grid和Flexbox的關(guān)系。在網(wǎng)上，我們習(xí)慣于設(shè)置長度或百分比的大小，因?yàn)檫@是我們能夠使用浮點(diǎn)數(shù)制作網(wǎng)格類型布局的方式。但是，如果我們允許的話，現(xiàn)代布局方法可以為我們做很多空間分配。了解Flexbox如何分配空間（或Grid fr單元工作）是值得您花費(fèi)的時(shí)間。

在《 Smashing》雜志的這里，我寫了關(guān)于布局大小調(diào)整的文章，也為Flexbox撰寫了《那個(gè)柔性盒子有多大？。

響應(yīng)式設(shè)計(jì)

我們新的Grid和Flexbox布局方法通常意味著，與以前的方法相比，我們可以減少媒體查詢的次數(shù)，這是因?yàn)樗鼈冹`活并且可以響應(yīng)視口或組件尺寸的變化，而無需更改元素的寬度。但是，在某些地方您需要添加一些斷點(diǎn)以進(jìn)一步增強(qiáng)設(shè)計(jì)。

以下是響應(yīng)式設(shè)計(jì)的一些簡單指南，對(duì)于媒體查詢，通常請查看我的文章2018年使用媒體查詢進(jìn)行響應(yīng)式設(shè)計(jì)。我看一下“媒體查詢”有什么用，并展示了規(guī)范第4級(jí)中“媒體查詢”的新功能。

字體和版式

與布局一起，去年網(wǎng)絡(luò)字體的使用發(fā)生了巨大變化。使單個(gè)字體文件具有無限變化的可變字體在這里。要大致了解它們是什么以及它們?nèi)绾喂ぷ?，請觀看Mandy Michael的精彩精彩簡短演講：可變字體和Web設(shè)計(jì)的未來。另外，我建議Jason Pamental 使用現(xiàn)代CSS和可變字體進(jìn)行動(dòng)態(tài)排版。

為了探索可變字體及其功能，Microsoft提供了一個(gè)有趣的演示，以及許多游樂場來試用可變字體-Axis Praxis是最著名的（我也喜歡Font Playground）。

一旦開始使用可變字體，那么有關(guān)MDN的指南將被證明非常有用。要了解如何為不支持可變字體的瀏覽器實(shí)現(xiàn)后備解決方案，請閱讀OliverSch?ndorfer的《使用后備Web字體實(shí)現(xiàn)可變字體》。在火狐DevTools字體編輯器還具有與可變字體工作支援。

變形和動(dòng)畫

我絕對(duì)需要了解CSS變換和動(dòng)畫。我不需要經(jīng)常使用它們，并且語法似乎在兩次使用之間跳了出來。值得慶幸的是，有關(guān)MDN的參考資料對(duì)我有所幫助，我建議從使用CSS變換和使用CSS動(dòng)畫的指南開始。Zell Liew也有一篇不錯(cuò)的文章，為CSS過渡提供了很好的解釋。

要發(fā)現(xiàn)可能發(fā)生的事情，請?jiān)L問Animista網(wǎng)站。

對(duì)于動(dòng)畫可能造成困惑的事情之一是采用哪種方法。除了CSS支持的功能外，您可能還需要使用JavaScript，SVG或Web動(dòng)畫API，并且這些東西往往會(huì)融合在一起。瓦爾·海德（Val Head）在演講中選擇了“在一個(gè)活動(dòng)分開錄制”中的“選擇您的動(dòng)畫冒險(xiǎn)”。

使用備忘單作為提醒而非學(xué)習(xí)工具

當(dāng)我提到Grid或Flexbox資源時(shí)，我經(jīng)?？吹酱饛?fù)說，如果沒有特定的備忘單，他們將無法使用 Flexbox。我沒有將作弊表作為查找語法的內(nèi)存助手的問題，并且已經(jīng)發(fā)表了一些自己的文章。完全依賴那些語法的問題是，您可能會(huì)錯(cuò)過復(fù)制語法時(shí)事情為什么起作用的原因。然后，當(dāng)您遇到該屬性似乎表現(xiàn)不同的情況時(shí)，這種明顯的不一致似乎令人困惑，或者是語言的錯(cuò)誤。

如果您發(fā)現(xiàn)CSS似乎在做一些非常奇怪的事情，請問為什么。創(chuàng)建一個(gè)簡化的測試用例，以突出問題所在，請更熟悉該規(guī)范的人咨詢。我被問到的許多CSS問題是因?yàn)樵撊苏J(rèn)為屬性的工作方式與現(xiàn)實(shí)中的工作方式不同。這就是為什么我經(jīng)常談?wù)搶?duì)齊和調(diào)整大小的原因，因?yàn)檫@些地方經(jīng)常會(huì)造成這種混亂。

是的，CSS中有些奇怪的事情。這是一種已經(jīng)發(fā)展了多年的語言，在它上面有些事情我們無法更改，直到我們發(fā)明了一種時(shí)光機(jī)。但是，一旦您掌握了一些基礎(chǔ)知識(shí)，并且理解了為什么事情會(huì)如此運(yùn)作，那么在棘手的地方您就會(huì)輕松得多。