CSS是層疊樣式表的縮寫，是網(wǎng)頁設(shè)計師的重要工具。在CSS簡介中，我們將介紹您對該語言應(yīng)該了解的重點。但是在開始之前，您應(yīng)該知道開發(fā)人員在CSS之前經(jīng)歷的痛苦。過去，我們直接在標(biāo)記中設(shè)置應(yīng)用程序的樣式，這很難維護(hù)。這是CSS旨在解決的第一個問題：通過將樣式與內(nèi)容分離，我們可以一次更新許多頁面的演示文稿。
早期，CSS充斥著各種漏洞，以解決渲染引擎中的錯誤并以CSS規(guī)范的不一致實現(xiàn)來支持各種瀏覽器。這導(dǎo)致CSS作為hacky，legacy和奧術(shù)語言的聲譽很差。
CSS Web應(yīng)用程序?qū)?/div>
Web應(yīng)用程序的四層。
每次瀏覽器請求網(wǎng)頁時，業(yè)務(wù)邏輯都會向下發(fā)送HTML，我們將其稱為內(nèi)容。此內(nèi)容此時是白色背景上的無樣式黑色文本。
加載HTML時，瀏覽器將加載更多資產(chǎn)，例如圖像和視頻，但更重要的是JavaScript和CSS。
JavaScript是一門通用的編程語言，因此可以做很多偉大的事情。作為核心，在Web瀏覽器中，JavaScript用于處理用戶交互。例如，如果用戶單擊一個按鈕，則會發(fā)生某些情況。從提交表單到更改HTML文檔，這一切都是“事”。
CSS使用HTML的結(jié)構(gòu)來設(shè)置網(wǎng)頁樣式。讀取CSS代碼后，內(nèi)容將從白色背景上的黑色文本轉(zhuǎn)換為樣式集描述的任何創(chuàng)作。
要查看CSS原始功能的一些示例，請瀏覽CSS Zen Garden上的示例。
通過Shopify合作伙伴計劃發(fā)展您的業(yè)務(wù)
無論您提供市場營銷，定制服務(wù)還是網(wǎng)站設(shè)計和開發(fā)服務(wù)，Shopify合作伙伴計劃都將助您成功。免費加入并獲得收益分享機會，發(fā)展業(yè)務(wù)的工具以及充滿激情的商業(yè)社區(qū)。
在CSS的幕后
為我們的Web應(yīng)用程序編寫可伸縮CSS的基礎(chǔ)是規(guī)則集。規(guī)則集包含一個或多個選擇器以及一個帶有聲明集合的聲明塊。聲明包含鍵/值對語法中的屬性和值。
CSS規(guī)則集
CSS中規(guī)則集的細(xì)分。
選擇器是CSS用于將規(guī)則集與HTML文檔中的元素進(jìn)行匹配的接口。多個選擇器和規(guī)則集可能適用于同一元素，這就是CSS的“層疊”部分起作用的地方。
級聯(lián)是裁判，它根據(jù)選擇器的特殊性和可能的繼承屬性來確定將哪些屬性應(yīng)用于給定元素。如果規(guī)則沖突，我們需要一名裁判來確定哪種樣式優(yōu)先。
根據(jù)經(jīng)驗，級聯(lián)決定按以下順序應(yīng)用哪些屬性：
選擇器特異性水平
規(guī)則集的源順序
繼承值
有關(guān)級聯(lián)的深入方法，請查看有關(guān)級聯(lián)和繼承的MDN文章，或者更進(jìn)一步，請閱讀有關(guān)級聯(lián)和繼承的最新規(guī)范。
對于僅關(guān)于特異性的介紹，CSS Tricks撰寫了一篇很棒的文章，稱為CSS特異性的Specifics。
知識登記
至此，您應(yīng)該對CSS，它在Web應(yīng)用程序中的作用以及瀏覽器如何將樣式應(yīng)用到元素上有一個高級的了解。您可能想知道的是如何實際設(shè)置內(nèi)容樣式。在CSS簡介的下一部分中，您將了解一些屬性以及它們?nèi)绾螏椭鷺?gòu)建網(wǎng)頁的出色視覺體驗。
您可能還會喜歡： CSS Pt的現(xiàn)代方法。1：工具和組織。
Web應(yīng)用程序樣式的基礎(chǔ)
在介紹更復(fù)雜的CSS概念之前，讓我們介紹一些樣式和呈現(xiàn)內(nèi)容的基本知識。
1.矩形的概念
在對內(nèi)容進(jìn)行樣式設(shè)置時，需要牢記一些注意事項，以幫助構(gòu)建關(guān)于如何呈現(xiàn)內(nèi)容的可靠思維模型：
一切都是矩形。即使它看起來不像矩形，也受一個邊界限制。
每個矩形都以某種方式與另一個矩形相關(guān)。
默認(rèn)情況下，嵌套（子）矩形在其包含（父）矩形上方。
設(shè)置這些準(zhǔn)則將在您布置網(wǎng)頁時為您提供幫助。
2. display財產(chǎn)
在CSS簡介中，我們應(yīng)該了解的第一個屬性是該display屬性。有許多不同的值display，下面我們將介紹其中的一些，但是我們現(xiàn)在應(yīng)該知道的兩個是block和inline。默認(rèn)情況下，所有HTML元素都將具有這兩個值之一。
塊級元素將從其父矩形的頂部到底部呈現(xiàn)，每個塊級同級從上一個元素的下方開始。
考慮一個標(biāo)題，然后是一個段落，另一個標(biāo)題，然后是最后一個段落。我們從上到下查看這些元素。
CSS塊和內(nèi)聯(lián)元素
CSS中的塊和內(nèi)聯(lián)元素。
內(nèi)聯(lián)元素將從左向右呈現(xiàn)（對于本機閱讀的語言，則是從右向左呈現(xiàn)），其內(nèi)容將包裹到下一行，并且其下一個內(nèi)聯(lián)同級元素將在上一個內(nèi)容之后開始。
考慮一些粗體文本，然后是帶下劃線的文本，一個鏈接，然后是一些普通文本。我們在閱讀方向上然后從上到下查看這些元素。
您可以在Mozilla的網(wǎng)絡(luò)文檔中閱讀有關(guān)塊級元素和內(nèi)聯(lián)元素的更多信息。在每個頁面的底部，是所有元素的列表以及它們各自的默認(rèn)顯示屬性。
3.文件流程
文檔流的基礎(chǔ)是如何呈現(xiàn)塊級和內(nèi)聯(lián)元素。要知道的重要一點是，對于每種顯示類型，矩形分別從上到下或沿讀取方向放置。
但是，有時候我們不希望我們的內(nèi)容遵循這種直接的文檔流方法，因此CSS提供了不同的方式來操縱它。稍后我們將介紹這些細(xì)節(jié)，但是現(xiàn)在，僅意識到這種可能性就足夠了。
為了更好地理解文檔流，您可以閱讀有關(guān)流入和流出的文章。
4.版式
網(wǎng)絡(luò)的基礎(chǔ)是內(nèi)容，而最簡單的內(nèi)容形式是文本。在網(wǎng)絡(luò)上使用排版時，要記住一些要使您的設(shè)計實用且有吸引力的事情。
為了提高可讀性和可訪問性，我們需要考慮文本顏色與背景顏色的對比度以及字體大?。ㄈQ于字體系列）。對于像素完美，重要的是要知道line-height在font-size影響較小的同時控制行距。
相關(guān)屬性
這是要熟悉的相關(guān)屬性的列表：
font-family：字體的優(yōu)先列表，將使用第一個可用字體
color：文字的顏色
text-align：元素中文本的對齊方式
font-size：文字本身的高度
line-height：文字行的高度，其中不可見空間基于該文字和 font-size
font-weight：文字的粗細(xì)，例如粗體
font-style：文字樣式，例如斜體
text-decoration：文字的裝飾，如帶下劃線的
letter-spacing：字母之間的空格
word-spacing：單詞之間的間隔
text-shadow：文字周圍的陰影效果
注意：所有這些與排版相關(guān)的屬性都將繼承，這意味著，如果我們將它們設(shè)置在父規(guī)則集上，則它們將應(yīng)用于所有后代。
5.盒子模型
矩形樣式最基本的方面是框模型，它與每個矩形相關(guān)的屬性有關(guān)?？蚰Ｐ偷暮诵氖莾?nèi)容，它可以是子矩形或空矩形。內(nèi)容周圍是填充，接著是邊框，最后是邊距，就像更多矩形中的矩形一樣?，F(xiàn)在，我們將介紹該模型的更多細(xì)節(jié)。
box-sizing
該box-sizing屬性控制框模型的計算方式。有兩個主要值box-sizing：content-box和border-box。content-box是所有元素的默認(rèn)值。
content-box通過在內(nèi)容的寬度和高度上添加填充和邊框來計算矩形的盒子模型。content-box對于許多人來說是一個陷阱，因為由于填充，邊框和邊距，它允許寬度為100％的元素變得大于100％。
border-box通過吸收邊框的寬度和高度的元素填充來計算盒模型。因此，寬度為100％的元素將包括填充和邊框在內(nèi)為100％，但是邊距仍會使元素大于100％的寬度。如果邊距使元素溢出，則應(yīng)考慮向父級添加填充或邊距。
相關(guān)屬性
這是Box模型的幾個相關(guān)屬性：
width：元素的寬度*
height：元素的高度*
max-width：元素的最大寬度*
max-height：元素的最大高度*
padding：元素內(nèi)容周圍的空間（注意：設(shè)置背景會繪制元素的填充空間）
border：圍繞元素填充空間的邊界
border-radius：元素任何給定角的圓度
margin：元素周圍的空白區(qū)域
outline：其他不影響文檔流或框模型大小的類似邊框的屬性
outline-offset：從元素邊界到輪廓起點的距離
box-shadow：元素中或元素周圍的陰影效果
*關(guān)于箱型
盒子模型的挑戰(zhàn)
更新與箱模型相關(guān)的屬性時，應(yīng)牢記兩個主要挑戰(zhàn)：
內(nèi)聯(lián)元素忽略邊距。
元素之間共享的頂部和/或底部邊距可以“折疊”并僅使用最大值。您可以閱讀更多有關(guān)保證金崩潰的信息，以了解原因。
6.布局
掌握了盒模型之后，我們在CSS入門中的下一步就是構(gòu)建布局。兩種最實用的布局方法是使用Flexbox（Flex）或Grid，它們都是顯示屬性。雙方flex并grid影響子元素的定位，同時也有兩者之間有很多相似之處，他們的目的不同。
兩者本身都是非常深入的主題，因此最好的學(xué)習(xí)方法是通過實驗。Flexbox Froggy是一款通過將青蛙放在lilypads上來學(xué)習(xí)Flexbox的游戲，而Grid Garden通過在花園上工作來幫助教授CSS Grid。
除了Grid和Flex，還值得一提的方向和編寫模式。方向控制是應(yīng)從左向右還是從右向左書寫文本，這是內(nèi)聯(lián)方向。寫入模式更進(jìn)一步，可以控制塊的流動方向和行內(nèi)方向。有關(guān)CSS寫作模式的更多信息，請參見本文。
您可能還會喜歡： 使用HTML和CSS擁抱本地化和多語言內(nèi)容。
相關(guān)屬性
這是布局時要牢記的幾個重要的相關(guān)屬性：
display：確定元素及其子元素的塊格式化上下文
place-content：設(shè)置內(nèi)容之間及其周圍的空間
place-items：place-self為所有直系子女設(shè)置屬性
place-self：相對于其各自的軸定位內(nèi)容
gap：設(shè)置行和列之間的裝訂線
overflow：控制應(yīng)如何處理大于元素的內(nèi)容
direction：設(shè)置文本的流動方向，例如從左到右（LTR）或從右到左（RTL）
writing-mode：控制塊和內(nèi)聯(lián)內(nèi)容方向
注意： place- *屬性用于Flex和Grid，但對于其他display值將被忽略。
7.堆疊
除了所有內(nèi)容都遵循標(biāo)準(zhǔn)文檔流程的布局之外，還可以將元素彼此堆疊。它的基礎(chǔ)是Stacking Context，它在元素具有某些屬性（例如靜態(tài)以外的位置值或網(wǎng)格或flex容器的子代）時形成。
相關(guān)屬性
這里是一些重要的相關(guān)屬性，請記?。?/div>
position:：確定可以在其中放置元素的上下文
top，right，bottom，left：適用有關(guān)當(dāng)前堆疊內(nèi)容輕推的位置
z-index：指定沿z軸的堆疊層，較高的值位于較低的值之上
mix-blend-mode：混合堆疊的圖層與復(fù)合照明效果
注意：z-index元素的值僅在其各自的堆棧上下文中起作用，而并非在所有堆棧上下文中都有作用。這意味著有時較高的z-index值將低于較低的值，因為它在不同的堆疊上下文中。
8.多媒體
當(dāng)使用
![]()
和
到尺寸的圖像或相對于其容器視頻，object-fit提供了類似的值background-size，而cover與contain兩個保持縱橫比。cover會用對象填充容器，并沿較大的尺寸進(jìn)行裁剪，而contain沿較小的尺寸顯示整個對象的空白區(qū)域。
相關(guān)屬性
這是多媒體要記住的一些重要的相關(guān)屬性：
float： 從文檔流中刪除一個元素，從而允許內(nèi)容在其周圍流動
clear：忽略先前設(shè)置的浮動
object-fit：確定媒體對象應(yīng)如何適合其包含元素
background：設(shè)置元素的背景圖像或顏色
background-size：確定背景應(yīng)如何適合其元素
clip-path：允許掩蓋元素的內(nèi)容
shape-outside：允許自定義形狀綁定元素
9.轉(zhuǎn)變
在掌握了布局和堆棧之后，在CSS入門中，下一步的轉(zhuǎn)換非常有用。它們使我們能夠以各種方式操縱內(nèi)容，而無需更改其在文檔流中的位置。例如，當(dāng)通過將不透明度更改為0隱藏元素時，它仍然存在，但完全不可見。
transform允許元素平移，傾斜，旋轉(zhuǎn)和縮放。它還使元素可以在三個維度（3D）中進(jìn)行轉(zhuǎn)換。這要求父元素具有perspective屬性集，該屬性集實際上是3D空間的視口。
相關(guān)屬性
在進(jìn)行轉(zhuǎn)換時，請牢記一些重要的相關(guān)屬性：
opacity： 控制元素及其子元素的透明度
transform：修改CSS 視覺格式模型的坐標(biāo)空間
transform-origin：設(shè)置要應(yīng)用的轉(zhuǎn)換點
transform-style：控制3D元素是否應(yīng)該重疊或相交
perspective：啟用3D元素的觀看并設(shè)置觀看距離
perspective-origin：更改3D元素的消失點
backface-visibility：允許元素的背面可見和鏡像
注意： opacity和transform是最活躍的動畫屬性。有關(guān)此問題的一些信息可以在有關(guān)渲染性能的本文中找到，有用的備忘單是CSS Triggers。
10.過渡和動畫
為了獲得流暢的用戶體驗，動畫可以為您的網(wǎng)站添加微妙而優(yōu)美的效果。動畫也可以在一組屬性中一起使用，因此可以和諧地轉(zhuǎn)換，縮放和淡化內(nèi)容。
另一方面，過渡對于將屬性從一個值過渡到另一個值很有用，例如當(dāng)用戶將鼠標(biāo)懸停在按鈕上時，按鈕的背景會變暗。
動畫是使用@keyframe語法構(gòu)建的，該語法允許我們使用百分比添加規(guī)則集。使用該animate屬性應(yīng)用動畫時，將根據(jù)持續(xù)時間依次觸發(fā)每個規(guī)則集。
相關(guān)屬性
在過渡和動畫方面，請牢記一些重要的相關(guān)屬性：
transition：控制屬性在其值更新時應(yīng)如何更改
transition-delay：控制過渡開始之前的延遲
transition-duration：控制過渡的時間長度
transition-property：控制要轉(zhuǎn)換的屬性
transition-timing-function：控制用于過渡的緩動功能
animation：將微調(diào)的關(guān)鍵幀動畫應(yīng)用于規(guī)則集
animation-delay：控制動畫開始之前的延遲
animation-direction：控制動畫如何遍歷關(guān)鍵幀
animation-duration：控制動畫的時間長度
animation-fill-mode：控制完成后動畫應(yīng)停在的位置
animation-iteration-count：控制動畫應(yīng)重復(fù)多少次
animation-name：控制使用聲明的動畫的名稱 @keyframes
animation-play-state：控制動畫是暫停還是運行
animation-timing-function：控制用于動畫的緩動功能
11.條件設(shè)計
盡管CSS不像其他編程語言那樣具有典型的控制流，但它確實具有一些有條件的“規(guī)則”。這些功能使您可以指定在滿足給定條件的情況下要應(yīng)用的嵌套CSS規(guī)則集。兩個示例是：
@media：關(guān)于響應(yīng)式設(shè)計，我們有@media，它使我們能夠檢查瀏覽器的窗口大小，屏幕像素密度，寬高比以及設(shè)備的媒體類型。
@supports：由于CSS是一種不斷發(fā)展的語言，因此并非所有瀏覽器都支持最新的CSS功能。如果瀏覽器無法理解新屬性，CSS不會破壞它們，但是我們可以將相關(guān)規(guī)則集包裝到@supports中，以檢查是否存在使我們的代碼更加明確和井井有條的功能。
通過Shopify合作伙伴計劃發(fā)展您的業(yè)務(wù)
無論您提供市場營銷，定制服務(wù)還是網(wǎng)站設(shè)計和開發(fā)服務(wù)，Shopify合作伙伴計劃都將助您成功。免費加入并獲得收益分享機會，發(fā)展業(yè)務(wù)的工具以及充滿激情的商業(yè)社區(qū)。
從基礎(chǔ)到精通
首先，我只想感謝您的跟隨。我知道這篇文章在技術(shù)上是很密集的，但是您已經(jīng)讀完了，現(xiàn)在在CSS中有了堅實的基礎(chǔ)。我們已經(jīng)介紹了樣式Web應(yīng)用程序的最常見屬性，更重要的是，這些樣式的作用。
盡管有更多的屬性，更多的工具和更多的創(chuàng)新正在不斷開發(fā)中，但是如果您迷路了并且需要對CSS的核心主題進(jìn)行復(fù)習(xí)，則可以隨時參考本文。
如果您在CSS入門中研究了所有這些概念并嘗試了自己的項目，那么您很快就會成為CSS向?qū)А?/div>
