在開始CSS之前，那麼我們先來說一下 CSS 和 HTML 之間的關係以及什麼是CSS吧。
HTML與CSS的聯繫
HTML的主要功能是編寫網頁的整體框架以及主要的內容。但是根據我們前面所學到的HTML知識不難看出如果只有HTML編寫的網頁是比較枯燥甚至可以說整體外觀較醜。。。那麼我們怎麼能讓它變得炫酷一些呢？
這時候 CSS 就該出場了，CSS英文全稱 **Cascading Style Sheets 意思是 層疊樣式表 它的主要作用是就是修飾網頁。也就是**CSS可以靜態的修飾HTML編寫的網頁，可以根據需求或者個人喜好對網頁進行美化。如果想要深入瞭解學習CSS知識的話，可以去
菜鳥教程
W3C
等專業網站學習。由於我是立志要做後端軟件工程師的男人，對於前端的網頁設計等內容也就淺嘗輒止啦，我今天給大家分享的是 CSS的代碼編寫思路 和 怎麼用CSS來修飾HTML網頁。鹹話不多說，我們開始衝浪吧~
CSS的編寫思路
首先，在編寫CSS的語法中我們需要了解它的語法結構：
- html中每一個標籤都有一個 style 屬性，將CSS代碼直接寫到style屬性值中就可以實現對html的修飾，但缺點是隻能對一個標籤進行修飾，不能實現代碼的複用。如：
<h1 style="font-size: 20px; color: red">你好!</h1>即可實現對<h1></h1> 標籤的修飾字體大小，字體顏色等。
2.第二種就比較厲害，它既可以實現對多組標籤進行修飾也可以對單個標籤進行修飾。 我們可以在 Hbiulder 的 Web 項目 中的 CSS 目錄 下新建一個 CSS文件 進行編寫。但修飾HTML時需要引入到HTML文件頭部中。如何引入下文細說。編寫CSS文件如圖：
語法結構如下:
選擇器{
屬性；屬性值；
屬性；屬性值：
...}選擇器我們會在下文細說。
另外，我們也可以在編寫好的 HTML文件頭部 中編寫CSS代碼，此時就不用在html文件頭部引入CSS文件。
<style type="text/css">...</style> 是在html文件中編寫CSS代碼的標籤。
具體實例如下：
選擇器
所謂選擇器就是一種模式，功能就是選擇需要進行修飾的元素（說白了就是進行選擇作用）。在CSS中最主要的選擇器有3種：
- 標籤選擇器
標籤選擇器以HTML文件中定義的標籤名爲選擇器名，其語法如下：
標籤名{
屬性；屬性值；
屬性；屬性值；
...}注意：在css代碼中樣式屬性與屬性值之間用； 隔離。樣式屬性與樣式屬性之間也是用； 隔離。如果一個樣式屬性有多個屬性值，則屬性值與屬性值之間用， 分隔。
- 類選擇器
類選擇器以標籤中class（基本html中每一個標籤都有class屬性）標籤屬性的屬性值爲選擇器名，其語法如下：
.class屬性的屬性值{
屬性；屬性值；
屬性；屬性值；
...}注意：代碼前面的. 一定得有，這是類選擇器的標誌。
3.ID選擇器
id選擇器以標籤中id標籤屬性的屬性值爲選擇器名，其語法如下：
#id屬性的屬性值{
屬性；屬性值；
屬性；屬性值；
...}注意：代碼開頭的# 不能省略，是id選擇器的標誌。
除了主要的3種選擇器以外，還有一些其他選擇器，如：
後代選擇器，分組選擇器，通配符選擇器等等。
那麼具體的 屬性 和 屬性值 就不再多說了都是很固定的代碼，可以去專業的網站學習哦~如果你想成爲一個專業的web前端設計工程師，那麼這些是必須掌握的哦，可不能像我一樣的淺顯哈。
如何將編寫好的css代碼適用於HTML
在這裏我只針對第一種CSS編寫方法做討論，第二種就像上文提到的，直接在標籤內添加style 元素和 屬性；屬性值；就可以。不多說了，那麼怎樣將編寫好的CSS文件引入HTML文件中呢？
我們只需要在HTML文件的頭部<head></head> 中添加一行代碼：
<kink href="編寫好的CSS文件名" rel="stylesheet" />即可，意思就是將編寫好的CSS文件適用於此HTML文件。
當然這些只是進行CSS編寫的時候的一些思路，方法。真正能讓你的靜態網頁更爲美觀的還是那些繁瑣的CSS屬性代碼以及你的創造力啦，如果想要動態的效果就需要用到JAVAscript嘍~以後會給大家分享的哦~在這裏給大家分享一個菜鳥教程的CSS參考手冊，
CSS參考手冊
那麼今天就到這了，明天見哦~