iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

我的網頁前端小小小教室系列 第 11

Day11 CSS基本說明

講完了那麼多的Html,接下來要進入到CSS環節的部分了,身為網頁裝潢師的它,我們先從怎麼使用它開始講起。

第一種方式我們直接在你的html檔案中,head標籤裡面加入style屬性。

你就可以在style裡面加入你想要調整html的顏色、排版、間距等等。

像是這張圖片的例子,我調整了標題的顏色跟超連結不要有底線。

就能成功的設定CSS屬性!


第二種方式是透過link連結CSS檔案。

我們要先建立一個test.css的檔案在根目錄中,然後利用link連結它

接著在CSS檔案裡去做屬性的撰寫,可以達成一樣的效果!

你說,這兩種方式結果不是一樣,那為甚麼還要分呢?接下來就讓我來為你解釋。

我們在做專案時,會遇到不同的情況,所以通常會視你與客戶間的需求,去調整要寫在內部,還是獨立出來一個檔案,而獨立出來一個檔案的好處是當你需要做修改的時候,你可能有很多的html分頁檔案,當客戶跟你說,我不喜歡這個背景顏色或標題顏色時,你就可以省去要一個一個改css的時間!


CSS寫法規則

要想要設定CSS,我們得先了解寫的規則是什麼,才能讓瀏覽器知道你改變的CSS。

首先我們看到這張圖

我們會把要設定的html元素給抓出來,然後給他一個大括號。裡面第一個會是屬性,後面就是屬性要設定的值。這張圖片想把段落p設定成紅色,翻譯成中文的話就會是

選取器{                   段落{              
    屬性: 屬性要設定的值;       顏色: 紅色;  
}                        }

相信轉換成中文大家都很好理解!


上一篇
Day10 Html常用標籤_5
下一篇
Day12 CSS基礎設定介紹_1
系列文
我的網頁前端小小小教室30

尚未有邦友留言

立即登入留言