你不需要記住每個(gè)CSS屬性和值，因?yàn)榫W(wǎng)上有很多地方可以查找它們，各種手冊(cè)完整且簡(jiǎn)單易學(xué)。
語(yǔ)言基礎(chǔ)知識(shí)
對(duì)于CSS的大部分內(nèi)容，你不必?fù)?dān)心學(xué)習(xí)屬性和值，你可以在需要時(shí)再查找它們。但是，語(yǔ)言要有關(guān)鍵的基礎(chǔ)，如果沒(méi)有基礎(chǔ)，你將難以理解它。真的值得花一些時(shí)間來(lái)確保你理解CSS基礎(chǔ)知識(shí)，因?yàn)閺拈L(zhǎng)遠(yuǎn)來(lái)看它會(huì)節(jié)省你很多時(shí)間和少走更多的彎路。
選擇器
大多數(shù)人都熟悉使用類或body直接設(shè)置HTML元素樣式，但是有大量更高級(jí)的選擇器可以根據(jù)文檔中的位置選擇元素，可能是因?yàn)樗鼈冎苯游挥谠刂螅蛘呤潜碇械钠鏀?shù)行。
作為L(zhǎng)evel3規(guī)范一部分的選擇器（可能聽(tīng)說(shuō)過(guò)它們被稱為L(zhǎng)evel3選擇器）具有出色的瀏覽器支持。有些選擇器的作用就好像您已經(jīng)將類應(yīng)用于文檔中的某些內(nèi)容。例如，p:first-child表現(xiàn)就好像你向第一個(gè)p元素添加了一個(gè)類，這些類稱為偽類選擇器。所述偽元素選擇器充當(dāng)如果一個(gè)元素被動(dòng)態(tài)插入的，例如::first-line以類似的方式給你包裝一作用span圍繞文本的第一行。但是，如果該行的長(zhǎng)度發(fā)生變化，它將重新應(yīng)用，如果插入該元素則不會(huì)出現(xiàn)這種情況。這些選擇器可能會(huì)相當(dāng)復(fù)雜。在下面的CodePen中是一個(gè)用偽類鏈接的偽元素的例子。我們p用:first-childpsuedo-class定位第一個(gè)元素，然后是::first-lineselector選擇該元素的第一行，就好像在第一行周圍添加了一個(gè)span，以使其變?yōu)榇煮w并更改顏色。
繼承
如果你正在努力將一些CSS應(yīng)用于一個(gè)元素，那么你的瀏覽器DevTools是最好的起點(diǎn)，看一下下面的例子，其中我有一個(gè)h1元素選擇器所針對(duì)的元素h1并使標(biāo)題變?yōu)槌壬?。我也在使用一個(gè)類來(lái)設(shè)置h1rebeccapurple。這個(gè)課程更具體，因此h1是紫色的。在DevTools中，可以看到元素選擇器被刪除，因?yàn)樗贿m用。
盒子模型
CSS就是盒子。屏幕上顯示的所有內(nèi)容都有一個(gè)框，Box模型描述了如何計(jì)算該框的大小-考慮邊距，填充和邊框。標(biāo)準(zhǔn)的CSSBox模型采用給定元素的寬度，然后將填充和邊框添加到該寬度上-這意味著元素占用的空間大于給出的寬度。
在下面的演示中，我有兩個(gè)盒子。兩者的寬度均為200像素，邊框?yàn)?像素，填充為20像素。第一個(gè)框使用標(biāo)準(zhǔn)框模型，因此總寬度為250像素。第二個(gè)使用備用盒模型，因此實(shí)際上是200像素寬。
瀏覽器DevTools可以幫助了解正在使用的盒子模型。在下圖中，我使用FirefoxDevTools使用默認(rèn)的content-box
盒子模型檢查盒子。工具告訴我這是正在使用的Box模型，我可以看到大小以及如何將邊框和填充添加到我指定的寬度。
除了以上談到的內(nèi)容之外，我們還要學(xué)習(xí)響應(yīng)式布局，其中涉及定位移動(dòng)問(wèn)題，字體與排版，變形與動(dòng)畫(huà)等，在開(kāi)發(fā)中，我們要擅長(zhǎng)使用瀏覽器的開(kāi)發(fā)工具輔助我們調(diào)試以便提高開(kāi)發(fā)速度。
以上就是長(zhǎng)沙一度軟件培訓(xùn)Java培訓(xùn)機(jī)構(gòu)小編介紹的“學(xué)習(xí)css：先了解開(kāi)發(fā)基礎(chǔ)知識(shí)”的內(nèi)容，希望對(duì)大家有幫助，如有疑問(wèn)，請(qǐng)?jiān)诰€咨詢，有專業(yè)老師隨時(shí)為你服務(wù)。
Java基礎(chǔ)學(xué)習(xí)
