# 網頁設計-輸入數字判別大小

網頁設計，學習如何用 Javascript 邏輯判斷網頁元素中的數值

> [name= html_css_intro]
> [time=Thu, May 30, 2019 AM]

  #demo-area-01-show    /*  CSS ID 設定 大小寫有差*/
  {
    font-size: 60px; /*  字體大小設定 單位有 px em % */

    
    /*!important時，多條CSS語句互相衝突時
      具有!important的語法將覆蓋其他聲明*/
      
  }

## CSS網路資源
##### Codepen: https://codepen.io/
##### Treehouse: https://www.codecademy.com/
##### Codecademy: https://www.codecademy.com/

# CSS範例

https://codepen.io/mrwang01/pen/LogyKE

> 範例簡要說明

<style>
            .db5 { /*要設定之class ID*/
                font-size: 24px;
                outline: none;/* 邊界外面的線
                預設是none ;hidden(基本上效果跟none一樣) 
                dotted點點、dashed大點點、solid固體、double雙層、                   （groove、ridge、inset、outset這些很難解釋下面有圖示
                ）*/
                margin: 0 10px 10px 0;/*依序 上 右 下 左*/
                pointer-events: auto!important;
                 /*跟優先級相關使用 !important時，將覆蓋任何其他聲明*/
            }
            button:hover {
                box-shadow: 2px 2px 5px #888;
            }
 </style>

CSS指令語法| 說明 |
|:------ |:----------- |
| button:hover | 游標碰到該物件(按鈕)時 |
| box-shadow | 產生陰影(依序輸入：X座標之偏移/Y座標之偏移/模糊程度/顏色) |

# 錄影畫面

<iframe height="465" style="width: 100%;" src="https://www.youtube-nocookie.com/embed/XwAkhdLqcBg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>