二、CSS 常用語法

1. CSS 標籤選擇器 - 插入 CSS 檔案，讓文字變大變顏色吧！

  • 在 <head></head> 裡連結 css

  • 加入 <link rel="stylesheet" href="css/style.css">

CSS 的寫法

選擇器 { 屬性: 設定值; 屬性: 設定值; }

h1 {
    color:blue;
    font-size: 99px;
}

p {
    color: red;
}

2. 套用第一個 Sublime Plugin，利用 emmet 提昇寫 HTML、CSS 效率

寫程式碼好麻煩啊 ~ 有辦法提昇效率嗎

sublime package

  • google 搜尋 sublime package

  • 右上角有 Installation，貼到「view」「console」

  • 按 ctrl + shift + P 打開控制版

  • install emmet

emmet

  • ! + tab，自動產生 html 架構

  • 懶得打的標籤就按 tab

  • link:css rel 和 href 都用好了

  • 為什麼不先講？因為要先知道原理，直接用工具會本末倒置

  • p*3

  • ul>li*3

3. CSS 類別選擇器 - 如何透過 Class 來指定 HTML 樣式

  • 先在 .html 裡的標籤加上屬性 class=""

  • 再到 .css 增加 .xx {屬性: 值;}

4. CSS 擬態選擇器 - 設計 a 連結動作觸發樣式

希望滑過連結時，顏色會變成灰色

a:hover {
    color: gray;
}

a:active {
    color: yellow;
}

: 是偽類別， :: 是偽元素

5. 使用 CSS 設定優化文字排版

  • lorem20 新增假字

  • 這麼多設定值，怎麼背？只交比較實務的

  • font-family

  • font-size

  • line-height

  • text-align: left, center, left

  • text-indent

  • text-decoration: underline, line-through

6. 在 HTML 標籤上加上線條 (border)

  • border: 1px solid(dashed, dotted) black;

  • 值移動沒關係，但遵循古法比較好

  • 只用 CSS 設計畫面，會比較省流量

  • border-right

7. 作業：優化第一節作業吧！

麻煩老師過目我的 HW2-16 作業練習了，謝謝老師

觀察與心得

  1. 在 CodePen 好像不需要用 <link> 連結 css 檔案，所以我就先註解掉了

順便想請問老師

  1. 在實務中，網頁上的文字排版，會用 em 還是 px 呢？或是兩個使用的情境不同？我印象中 1em 就是 1 個字的寬度，1px 就是對應螢幕上的 1 個像素點

觀察很仔細 其實 Codepen 不需要 html, head, link, script:src 等標籤喔 :D

作業做得很好 沒有任何問題 至於你問到的文字排版會使用何者 建議前期都使用 px，少用 em 到了 Bootstrap 會提到另一個單位稱為 rem 現在主流也是以此為主喔

先前問答會影片介紹到的 rem, em, px https://www.youtube.com/watch?v=sKrVyhaeZqU

8. 第二章測驗

Previous一、網頁編輯器、HTML 基礎教學Next三、使用 CSS 變更 HTML 標籤特性

Last updated