CSS从入门到精通——基础知识
第1關：初識CSS：豐富多彩的網頁樣式
任務描述
本關任務：通過編寫CSS給網頁添加基本的樣式。顯示效果如下：
為了完成本關的任務，請大家認真閱讀相關知識
相關知識
CSS基本概念
CSS(Cascading Style Sheets)即層疊樣式表，它是一種用來為結構化文檔（例如HTML文檔或XML應用）添加樣式的計算機語言，目前由W3C定義和維護。
在前端網頁開發中，我們使用CSS來定義網頁元素的樣式，例如背景顏色、字體展示、元素位置、動畫效果等等。
所以，HTML 與 CSS 結合，將網頁的內容與樣式分離，有利于提高開發效率。
基本的CSS語法如同積木一般，通過各種變換設計，構成了豐富多彩的網頁世界。
例如，
使用CSS排版清晰的網站：
包含豐富多媒體的網站：
自如運用CSS動畫的網站：
一個簡單的實例
首先，我們來下一個簡單的實例：
顯示效果如下：
我們在HTML文檔的<head>元素中，加入了<style>元素，設置其屬性type為text/css，表示此處內容為CSS。
我們在此CSS代碼中，指定了：
-
body背景顏色為藍綠色(teal)；
-
h1標題的字體顏色為白色(white)，字體大小為36px并且在網頁中居中對齊。
CSS基礎語法
一般而言，CSS要如何指定HTML元素樣式呢？CSS的基礎語法是什么的呢？
由上面的實例，我們可以看出CSS語法主要包括兩部分：選擇器和聲明。
基本格式如下：
選擇器
選擇器是什么呢？
選擇器用于指定我們要修改的HTML元素。例如，在上述實例中，body和h1就是選擇器。在之后的實訓中，我們也會學習使用多種更復雜的選擇器。
聲明
聲明是什么呢？
通過聲明，我們定義要改變的元素樣式。聲明由屬性和值構成，包含在花括號中，基本格式如下：
例如，在上述實例中：
這一聲明，指定了body元素的背景顏色為藍綠色(teal)。
同樣的，我們對h1添加了多行聲明：
在平時開發網站時，建議每個聲明通常單獨列為一行，有助于閱讀。當網站發布時，可以使用工具壓縮，將多行聲明寫在一行，使得CSS文件大小更小，加載速度更快。
提示：
- 語句最后的分號可以不寫。如果多個聲明寫在一行，就必須書寫。一般情況下，建議都書寫。
編程要求
在右側編輯器中，補全Begin至end中間的部分，選擇index.html文件，設置其CSS樣式為：
-
修改h1標題的text-align為居中顯示，字體大小為40px；
-
p段落的顏色為灰色:grey,字體大小為18px。
測試說明
在右側編輯器左上方，點擊代碼文件，就可以在多個文件直接進行切換。例如，在關卡中含有實例 example.html，你可以點擊 example.html 切換到該文件。然后在編輯器中修改任意內容，效果顯示便會更新。
具體演示如下：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Hello World</title><style type="text/css">body {text-align: center;}h1 {/* ********** BEGIN ********** */text-align: center;font-size:40px;/************ END ********** */color: #62A8CB;}img {height: 250px;}p {/* ********** BEGIN ********** */color:grey; font-size:18px;/* ********** END ********** */}</style></head><body><h1>CSS讓網頁樣式更豐富</h1><img src="https://www.educoder.net/attachments/download/189467"><p>使用CSS(Cascading Style Sheets)，可以使網頁樣式更加的豐富多彩，它解決內容與表現分離的問題，提高了工作效率。</p></body> </html>?第2關：CSS樣式引入方式
任務描述
本關任務：在上一關中，我們了解了CSS的基礎概念。這一關中，我們將要理解CSS繼承和多種樣式引入方式。
本關任務完成之后的效果圖如下：
為了完成本關任務，請大家認真閱讀相關知識。
相關知識
樣式引入方式
CSS樣式有三種引入方式：
內部樣式表：如同之前實例中所示，在文檔頭部中引入；
外部樣式表：通過外部文件引入；
內聯樣式：直接在特定元素中引入。
下面，我們將為大家一一介紹這三種引入方式。
內部樣式表
首先，對于內部樣式表，書寫的方式是直接在HTML文件的頭部，添加<style type="text/css"> </style>元素。
具體舉例如下：
在之前的實例中，為了方便大家同時看到HTML和CSS代碼，我們都是使用的這一種方式。
外部樣式表
第二種方式，是將CSS單獨書寫在文件后綴名為.css的文件中。然后在HTML的<head>中添加CSS文件鏈接。
屬性rel的值stylesheet代表樣式表，通常不變。href屬性值，代表文件的位置。與圖像路徑的鏈接方式類似，href屬性值的書寫方式要根據具體的CSS文件位置。
例如，當HTML文件與要引入的CSS文件不在同一文件夾時：
可以如下書寫：
在實際的項目中，推薦將樣式表統一放在CSS文件夾中，使得項目結構更清晰，資源管理更容易。
內聯樣式
內聯樣式是指直接在標簽內添加樣式屬性。
舉例如下：
顯示如下：
通用的書寫格式：
使用哪一種樣式表？
在實際開發過程中，通常建議使用第二種外聯樣式表的方式。
主要優點如下：
內容與樣式分離；
易于開發和維護樣式。
樣式易于復用；
可在多個HTML文件中引入相同的樣式文件。
加載更快。
如果在不同的頁面中引入相同的樣式文件。通常瀏覽器會直接從緩存中讀取，而不再需要再一次訪問服務器資源。
樣式的優先級順序
三種樣式引入的優先級順序是：
外部樣式< 內部樣式 < 內聯樣式
也就是說，如果同時有三種樣式的方式作用于同一元素，會優先的使用內聯樣式。
編程要求
選擇index.html文件，完成：
-
引入外部樣式表 style.css， 引入的路徑為step2/CSS/style.css；(注意路徑中CSS是大寫)
-
設置 h1 元素內聯樣式的字體顏色(color)為cornflowerblue；
-
修改 samll 元素內聯樣式：設置字體大小(font-size)為10px; 顏色(color)為lightslategray。
選擇style.css 文件，完成：
- 設置?p?元素的?font-weight?為 粗體(bold)；
測試說明
在右側編輯器左上方，點擊代碼文件，就可以在多個文件直接進行切換。例如，在關卡中含有實例 example.html，你可以點擊 example.html 切換到該文件。然后在編輯器中修改任意內容，效果顯示便會更新。
具體演示如下：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>O Captain! My Captain!</title><!-- ********** BEGIN ********** --><link rel="stylesheet" href="step2/CSS/style.css"><!-- ********** END ********** --><style type="text/css">h1 {color:darkblue;}img {float: left;margin-right: 1em;}</style> </head><body><div><!-- ********** BEGIN ********** --><h1 style="color:cornflowerblue;" >O Captain! My Captain!</h1><!-- ********** END ********** --><img src="https://www.educoder.net/attachments/download/170157" width="300" height="175" alt="Blue Flax (Linum lewisii)" /><p>O Captain! my Captain! our fearful trip is done, The ship has weather’d every rack, the prize we sought is won, The port is near, the bells I hear, the people all exulting, While follow eyes the <em>steady keel</em>, the vessel grim and daring;</p><!-- ********** BEGIN ********** --><p><small style="font-size=10px;color=lightslategray;">© Walt Whitman</small></p><!-- ********** END ********** --></div> </body></html>?
body {font-family: 'Times New Roman', Times, serif; }div {border: 1px solid #000;overflow: hidden;padding: 0 1em .25em; }h1 {color: green; }p {/* ********** BEGIN ********** */ font-weight:bold;/* ********** END ********** */ }總結
以上是生活随笔為你收集整理的CSS从入门到精通——基础知识的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 机器学习之最大似然估计（MLE）和最大后
- 下一篇： mybatis foreach map_