溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么快速學會CSS”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“怎么快速學會CSS”文章能幫助大家解決問題。
CSS（層疊樣式表）——英文 Cascading Style Sheets 的縮寫，是一種計算機標記語言，用來表現 HTML （標準通用標記語言的一個應用）或 XML （標準通用標記語言的一個子集）等文件樣式。
CSS 知識點確實很多，我們只需要學習并理解它的基礎知識和原理，需要用到的時候再到w3cschool 查詢CSS參考手冊 ，不需要學習完所有的屬性和值，但是學習 CSS 要有一些前端基礎，如果沒有這些基礎，您將很難理解它，你可以先在W3Cschool上學習HTML 。 這樣可以節省大量時間、少走很多彎路。
HTML 頁面中的元素是通過 CSS 選擇器 來進行控制的，可以實現一對一，一對多或者多對一的控制，學習 CSS 首先要掌握的就是選擇器。一般使用 class 選擇器（程序中稱“類選擇器”），或直接在 body 中使用 HTML 元素(elements) （指的是從開始標簽(start tag)到結束標簽(end tag)的所有代碼。）來設置樣式(Style)，但是一些更復雜的操作就需要更高級的選擇器來實現了，如一些對象直接位于元素之后，或者是要選擇表格中的奇數行，就需要根據元素在文檔中的位置來選擇元素。
這些選擇器屬于 CSS3 規范的一部分（你可能聽說過它們被稱為 CSS3 選擇器）具有出色的瀏覽器支持。 有關可以使用的各種選擇器的詳細信息，請參閱W3Cschool的 CSS 選擇器 。
有些選擇器的行為就好像你已經將“類”（ class） 應用于文檔中的某些內容一樣。 例如p:first-child就像你在第一個p元素中添加了一個“類”一樣，這些被稱為“偽對象選擇符”(Pseudo-Element Selectors)。 “偽對象選擇符”的作用類似于動態插入元素，例如::first-line的作用與用span 包裹第一行文本類似。但是，如果該行的長度發生變化，它將重新應用，如果插入該元素，就不會出現這種情況。 現在你可能會覺得這些選擇器很復雜， 下面示例中是一個用偽類(Pseudo-class ) 的偽元素(Pseudo Element) 例子。 我們使用 :first-child 偽類定位第一個 p 元素，然后 ::first-line 選擇器選擇該元素的第一行，就好像在第一行周圍添加了一個<span>以使其變粗并更改顏色一樣。
HTML代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>認識CSS選擇器（SELECTORS）- 億速云(yisu.com)</title>
<style type="text/css">
@import url("style/style.css");
</style>
</head>
<body>
<div class="container">
<p>大學之道，在明明德，在親民，在止于至善。</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);
}層疊定義了一個元素應用了多個樣式規則時，應該哪個規則優先應用。 如果你無法理解為什么某些 CSS 似乎沒有應用的情況，那可能是層疊沒有運用好。 層疊與繼承緊密相關，繼承定義了子元素可以繼承父元素的樣式屬性。 它還與特異性有關，不同的選擇器具有不同的特異性，當有幾個選擇器可以應用于一個元素時，繼承可以決定應用哪個規則。
注意：為了理解這些內容，建議閱讀 W3Cschool 中的 CSS 樣式級聯。
如果你正在嘗試將一些 CSS 應用于一個元素，那么你的瀏覽器開發者工具（DevTools）是最好的選擇。看看下面這個例子，我用元素選擇器 h2 將 h2 標題設置為橙色。同時，我也使用類選擇器將h2 標題設置為紫色。 由于類的優先級更高，因此h2標題是紫色的。 在開發者工具中，您可以看到元素選擇器被劃掉了，因為它沒有被應用。 一旦你看到瀏覽器正在獲取你的 CSS（但其他東西已經推翻了它），那么你可以開始找出原因了。
HTML代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>繼承和層疊 - 億速云(yisu.com)</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="container"> <h2 class="greatlearning">大學</h2> <p>大學之道，在明明德，在親民，在止于至善。</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;
}
h2 {
color: orange;
}css將html元素看作一個個盒子，來設計和布局。盒子有它們的屬性，盒子之間也可嵌套。標準的 CSS 盒模型 (CSS Box Model) 采用你給定元素的寬度，然后將內邊框和邊框添加到該寬度上——這意味著元素占用的空間大于給定的寬度。
屬性：margin、padding、border、content
根據display屬性值的不同，如，block\\\\\\\\inline-block\\\\\\\\inline（默認），可設置為塊模型\\\\\\\\內聯塊模型\\\\\\\\內聯模型
分類：標準模型、IE模型（替代盒子模型）
除了標準盒子模型外還有一個盒子模型叫 IE 模型（替代盒子模型），盒子的寬度是頁面上可見框的寬度，因此內容區域的寬度是該寬度減去填充和邊框的寬度。詳細請查閱W3Cschool上的CSS Box Model (盒子模型) 。
下面演示兩個盒子， 兩者的寬度均為200像素，邊框為1像素，內邊距為20像素。 第一個框使用標準盒子模型，因此占用總寬度為 242 像素，第二個框使用替代盒子模型，因此實際上是 200 像素寬。
HTML代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS 盒模型 -億速云(yisu.com)</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="box"> 我是標準盒子模型。 </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;
}瀏覽器開發者工具(DevTools)可以再次幫助你了解正在使用的盒子模型。 在下圖中，我使用火狐瀏覽器的開發者工具使用默認的 content-box盒模型工具。 工具告訴我這是正在使用的盒模型，我可以看到大小以及如何將邊框和內邊框添加到指定的寬度。
DevTools可幫助您了解為什么盒具有一定大小以及所使用的盒模型
注意：在 IE8 以前，如果想要兼容的話，就需要用 W3C 標準，聲明。在 IE8+ ，瀏覽器中使用哪個盒模型可以由 box-sizing 控制，默認值為 content-box，即標準盒模型。
在 W3Cschool的 CSS Box Model 中，有關于盒模型、盒子尺寸詳細說明。
也有人翻譯為“文檔流”，具體叫什么名字不重要，我們理解它的原理就行了。標題和段落將以新行開始，單詞顯示為句子，并且它們之間只有一個空格。用于格式化的標簽（例如em）不會破壞句子流。此內容以“常規流(normal flow)”或“塊流布局(Block Flow Layout)”顯示。內容的每個部分都被描述為“在流中(in flow)”；它知道其余內容，因此不會重疊。
我們要接受這種行為，學起來才會變得更加輕松。這是為什么從一個正確標記的HTML文檔開始很有意義的原因之一，由于瀏覽器遵守常規流和內置樣式表，你的內容從可讀的地方開始。
一旦文檔的內容處于正常流程中，您可能希望更改其中一些內容的外觀。 你可以通過更改元素的格式上下文來完成此操作。 舉個一個非常簡單的示例，如果你希望所有段落連在一起而不是從新行開始，你可以設置 p 元素的樣式屬性display:inline ，將 p 元素由塊級元素變成內聯元素。
本質上，格式化上下文定義了外部和內部類型。外部控制元素與頁面上其他元素的行為，內部控制子元素的外觀。例如，當你設置 display:flex ，你在設置外部為塊格式化上下文，設置子元素為 flex 格式化上下文。
注意：最新版本的 Display 規范改變了
display的值，顯式聲明外部和內部的類型。因此，將你可能會聲明display:block flex;（外部為block，內部為flex）。
在W3Cschool的 CSS display顯示 上閱讀更多關于 display的信息。
CSS 中的元素被描述為“在流中(in flow)”或“脫離流(out of flow)”。流中的元素被賦予空間，并且空間被流中的其他元素所影響。 如果通過浮動或定位元素使元素脫離流，則該元素的空間將不再受到其他流元素的影響。
對于絕對定位的元素，是最明顯的。 如果你設置一個元素 position: absolute ，該元素會從流中脫離，你需要確保這個元素不會與流中的元素重疊，且不影響你布局的其他部分的可讀性。
HTML代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS flow - 億速云(yisu.com)</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="container"> <p>子曰：“學而時習之，不亦說乎？有朋自遠方來，不亦樂乎？人不知而不慍，不亦君子乎？</p> <p>有子曰:“其為人也孝弟而好犯上者，鮮矣；不好犯上而好作亂者，未之有也。君子務本，本立而道生。孝弟也者，其為仁之本與!”</p> <p>子曰:“巧言令色，鮮矣仁！”</p> <p>曾子曰“吾日三省吾身:為人謀而不忠乎?與朋友交而不信乎?傳不習乎?”</p> <p>子曰:“道千乘之國,敬事而信，節用而愛人，使民以時。”</p> <p>子曰：“弟子入則孝，出則弟，謹而信，泛愛眾，而親仁。行有余力，則以學文。”</p> <p>子夏曰：“賢賢易色；事父母，能竭其力；事君，能致其身；與朋友交，言而有信。雖曰未學，吾必謂之學矣。”</p> <p>子曰：“君子不重則不威，學則不固。主忠信，無友不如己者，過則勿憚改。”</p> <p>曾子曰：“慎終追遠，民德歸厚矣。”</p> <p>子禽問于子貢曰：“夫子至于是邦也，必聞其政，求之與，抑與之與？”子貢曰：“夫子溫、良、恭、儉、讓以得之。夫子之求之也，其諸異乎人之求之與？”</p> <p>子曰：“父在，觀其志。父沒，觀其行；三年無改于父之道，可謂孝矣。”</p> <p>有子曰：“禮之用，和為貴。先王之道，斯為美，小大由之。有所不行，知和而和，不以禮節之，亦不可行也。”</p> <p>有子曰：“信近于義，言可復也。恭近于禮，遠恥辱也。因不失其親，亦可宗也。”</p> <p>子曰：“君子食無求飽，居無求安，敏于事而慎于言，就有道而正焉。可謂好學也已。”</p> <p>子貢曰：“貧而無諂，富而無驕，何如？”子曰：“可也。未若貧而樂，富而好禮者也。”子貢曰：“《詩》云：‘如切如磋，如琢如磨’，其斯之謂與？”子曰：“賜也，始可與言《詩》已矣，告諸往而知來者。”</p> <p>子曰：“不患人之不己知，患不知人也。”</p> <div class="item">絕對定位和脫離流。</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;
}然而，浮動元素也會從流中脫離，但后面的元素的文本將環繞該浮動元素。你可以設置后面元素的背景顏色，你會看到他們會上升并占用了原來浮動元素原來的空間。
HTML代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS flow - 億速云(yisu.com)</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="container"> <div class="item">浮動和脫離流</div> <p>子曰：“學而時習之，不亦說乎？有朋自遠方來，不亦樂乎？人不知而不慍，不亦君子乎？</p> <p>有子曰:“其為人也孝弟而好犯上者，鮮矣；不好犯上而好作亂者，未之有也。君子務本，本立而道生。孝弟也者，其為仁之本與!”</p> <p>子曰:“巧言令色，鮮矣仁！”</p> <p>曾子曰“吾日三省吾身:為人謀而不忠乎?與朋友交而不信乎?傳不習乎?”</p> <p>子曰:“道千乘之國,敬事而信，節用而愛人，使民以時。”</p> <p>子曰：“弟子入則孝，出則弟，謹而信，泛愛眾，而親仁。行有余力，則以學文。”</p> <p>子夏曰：“賢賢易色；事父母，能竭其力；事君，能致其身；與朋友交，言而有信。雖曰未學，吾必謂之學矣。”</p> <p>子曰：“君子不重則不威，學則不固。主忠信，無友不如己者，過則勿憚改。”</p> <p>曾子曰：“慎終追遠，民德歸厚矣。”</p> <p>子禽問于子貢曰：“夫子至于是邦也，必聞其政，求之與，抑與之與？”子貢曰：“夫子溫、良、恭、儉、讓以得之。夫子之求之也，其諸異乎人之求之與？”</p> <p>子曰：“父在，觀其志。父沒，觀其行；三年無改于父之道，可謂孝矣。”</p> <p>有子曰：“禮之用，和為貴。先王之道，斯為美，小大由之。有所不行，知和而和，不以禮節之，亦不可行也。”</p> <p>有子曰：“信近于義，言可復也。恭近于禮，遠恥辱也。因不失其親，亦可宗也。”</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 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;
}注意： 需要記住的重要一點是，如果從流中取出一個元素，則需要自己管理重疊，因為塊流布局的常規規則不再適用。
過去我們們在 HTML 中一般使用 CSS 進行布局，常見的布局有：單列布局、兩列自適應布局、圣飛布局和雙飛翼布局、偽等高布局、粘連布局。重點介紹下 Flex 布局和 grid 布局：
Flex布局
Flex布局，也叫彈性盒子布局，區區簡單幾行代碼就可以實現各種頁面的的布局。
//html部分同上
.parent {
display:flex;
}
.right {
margin-left:20px;
flex:1;
}推薦W3Cschool上的的Flexbox布局基礎入門 ，可以更好的幫你掌握Flex。
grid布局
Grid 布局，是一個基于網格的二維布局系統，目的是用來優化用戶界面設計。
//html部分同上
.parent {
display:grid;
grid-template-columns:auto 1fr;
grid-gap:20px
}大多數人都會把對齊（Alignment）當作 Flexbox 的一部分，但是這些屬性適用于所有布局方法值得在這種情況下理解它們，而不是考慮“ Flexbox Alignment”或“ Flexbox Alignment” “ CSS網格對齊。” 我們有一組Alignment屬性，它們在可能的情況下可以以一種通用的方式工作。然后，由于不同的布局方法的行為方式，它們會有一些差異。
在 web 上，我們習慣用長度或百分比來設置尺寸，這就是我們如何使用浮動來制作網格類型布局的方法。然而，現代的布局方法可以為我們做很多空間分配——如果我們允許的話。值得花時間去了解 Flexbox 如何分配空間(或 Grid fr 單元如何工作)。
通常，新的 Grid 和 Flexbox 布局方法意味著我們可以使用比舊方法更少的媒體查詢，因為它們非常靈活，可以響應視口或組件大小的變化，而無需我們更改元素的寬度。 但是，有些地方需要添加一些斷點來進一步增強設計。
與布局一樣，網絡上的字體使用在發生了巨大的變化。現在，可變字體，使單個字體文件具有無限的變化。 要了解它們是什么以及它們如何工作，請觀看Mandy Michael的精彩簡短演講：可變字體和網頁設計的未來。 另外，我會推薦Jason Pamental的動態排版與現代CSS和可變字體。
為了探索可變字體和它們的功能，微軟提供了一個有趣的演示，以及一些嘗試可變字體的游樂場 - Axis Praxis是最知名的（我也喜歡字體游樂場）。
MDN上的指南將證明一開始使用可變字體是非常有用的。Firefox DevTools字體編輯器還支持使用可變字體。
CSS轉換和動畫絕對是我需要知道的基礎。 我不經常需要使用它們，在使用時會忘記語法。 值得慶幸的是，MDN上的參考資料幫助了我，我建議從使用CSS變換和使用CSS3動畫的指南開始。 Zell Liew也有一篇很好的文章，為CSS過渡提供了很好的解釋。
要發現一些可能的事情，請查看Animista網站。
關于動畫可能令人困惑的事情之一是采取哪種方法。 除了 CSS 支持的內容之外，你可能還需要涉及 JavaScript ，SVG 或 Web Animation API，而這些事情往往都會被混為一談。 在她的演講中，選擇你的動畫冒險記錄在事件中，Val Head解釋了這些選項。
關于“怎么快速學會CSS”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
