[HTML/CSS] 線上課程筆記(HTML與CSS差異、插入CSS、認識選擇器、CSS常見錯誤)

HTML與CSS差異

HTML是結構(例如標題、段落、列表ul/li)

CSS是樣式(顏色、大小、美化的工作)

如何插入CSS?

1.建立網頁

先儲存成index.html再按驚嘆號+TAB或是ENTER鍵

插入CSS>>熱鍵  link:css 

<link rel="stylesheet" href="style.css">

*rel 和 herf 分別表示 

2.建立CSS 

儲存成style.css後再撰寫

3.選擇器(挑選html標籤做設定) >>此處為html標籤選擇器

選擇器{

            屬性:設定值

            屬性:設定值

}

h1{

    Color: orange;

    font-size: 24px;

}

CSS常見錯誤

1.檢查小工具:使用chrome的檢查工具

(打開寫好的網頁，右鍵選擇檢查，觀看elememt)

可看見html和CSS間的結構關係是否正確

2.常見錯誤

單字拼錯(font拼成front...)

路徑錯誤(herf後所連結的路徑是錯的..)

格式錯誤(少了分號做中斷、或是少了大括號等等)

認識檢查工具可協助自己判斷、解決問題