今天把之前上課筆記整理一下

希望能幫助新手更快上手喔

網頁編輯器

除了常用的 vs clde外不只一個編輯器，如：ATOM、Sublime等等都大受歡迎及喜愛。

css 小筆記

• CSS要做樣式設定要選擇所需要的標籤

• 設定長度寬度距設定單位，如px

• 寫標籤快速的方法如：h1{重要的標題}*2會等於
  <h1>重要的標題</h1> <h1>重要的標題</h1>

• 同一個標籤設定css會同時被設定，如果不想改變全部的那就要在標籤加「分類」，也就是class，後面可以自已取名稱。
  <h1 class="important-title">重要的標題</h1>

  1.只要看到 class 就要想到點「.」這個符號
  2.寫法：

.important-title{
    color: red;
    text-align:center;
}

• 空格的功能是為了區別不同的class，如：

<h1 class="important-title t-center">

• 文字陰影：x y blur color:左右 上下 模糊程度 顏色
  text-shadow: 2px 2px 0px black;

小小新觀念

css 可以把它當作工具箱，可以先寫要的css 在去html標籤給class，範例code如下：

<h1 class="important-title">重要靠左的標題</h1>
<h1 class="important-title t-center  t-shadow" >重要置中的標題</h1>
<h1 class="important-title t-right">重要靠右的標題</h1>

.important-title {
    color: orange;
    /* text-align: center; */
    font-size: 42px;
}

.t-shadow{
   /* 文字陰影: x y blur color; */
   text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.392);
}

.t-center{
    text-align: center;
}
.t-right{
    text-align:right;
}

插入圖片及寫法注意事項

src= 圖片來源 alt=圖片敘述，圖片發生問題才會出現替代文字

• 插入圖片方法：
• 改變圖片寬度：
  <img width="300px" src="./images/image1.jpg" alt="">
  只要改變圖片寬度，高度會自動調整，盡量別調整高度會影響原本圖片的比例會失真

反之，改變圖片高度，寬度也會自動調整

img 不會換行，除非空間不夠

filter= 濾鏡
filter: grayscale(0%);灰階化

滑鼠游標點到此圖的時候改變樣式：
g-100:hover {}