1、設定文字顏色、大小、字體

2、設定區塊內距、外距

3、設定內容排版，靠左/置中/靠右

3、設計能符合網頁、平板、手機的畫面

4、設計畫面上的動態效果

 

1、HTML元素標籤名稱，例如：p、div、h1、h2

2、HTML元素屬性名稱，例如：id、name

3、HTML元素是有次序的

4、HTML元素是可以篩選的

5、HTML元素是可以顯示或隱藏的

 

1、寫在 <style>標籤中

<style>
    p{
        ...
    }
</style>

 

2、註解寫法是 /* ... */

<style>
    p{
        /* 這裡是註解 */
    }
</style>

 

3、CSS寫法是標籤名稱，加上成對大括號，裡面寫上屬性 : 值，每一行用分號結尾

<style>
    p{
        font-size: 2rem;    /*文字大小*/
        color: blue;        /*文字顏色*/
    }
</style>

 

4、CSS選擇器非常多：除了用HTML元素名稱，大部份會使用自訂的 id和 class

HTML顏色參考網站：https://htmlcolorcodes.com/zh/yanse-ming/

寬度：width : 200px; 設定為200像素寬。常用單位是 px、%

高度：height : 100px; 設定為100像素高。常用單位是 px、%

內容文字大小：font-size: 16px; 設定為16像素大小。常用單位是 px、rem

背景色：background-color: yellow; 設定背景色為yellow

範例：<button id="a" class="btns">按鈕a</button>
範例：<button id="b" class="btns">按鈕b</button>

<style>
.btns{
    width: 100px;       /*寬度*/
    height: 36px;       /*高度*/
    font-size: 2rem;    /*文字大小*/
}
#a{
    background-color: lime;     /*背景色：lime萊姆色*/
}
#b{
    background-color: yellow;   /*背景色：yellow黃色*/
}
</style>

按鈕a 按鈕b

 

CSS寫法是標籤名稱，加上成對大括號，裡面寫上屬性 : 值，每一行用分號結尾

寫在標籤內：1個
<p style="color: blue;">大家好</p>

寫在標籤內：多個
<p style="border: 3px solid #333;color: blue;background-color: yellow;padding: 60px;font-size: 5rem;">大家好</p>

分開如下：
<p style="
border: 3px solid #333;
color: blue;
background-color: yellow;
padding: 30px;
font-size: 3rem;
">大家好</p>

大家好

 

捉取HTML標籤名稱：例如：<p>，選擇器名稱寫 p{ ... }

捉取 id 名稱：例如：<p id="hello">，選擇器名稱寫 #hello{ ... }

捉取 class 名稱：例如：<p class="square">，選擇器名稱寫 .square{ ... }

<style>
/*捉取<p>*/
p{
    ...
}

/*捉取<id="map">*/
#map{
    ...
}

/*捉取<class="square">*/
.square{
    ...
}

/*捉取<div>中的<p>中的<img>圖片*/
div > p > img{
    ...
}
</style>

<div>
    <p>
        <img src="images/logo.png">
    </p>
</div>