學會 HTML & CSS （關於 CSS 的部份）

怎麼學習 CSS

• 利用 XMind 畫圖
  

CSS selector

p {
    margin: 10px;
    font-size: 16px;
}

基礎寫法

* 可以選到所有元素
tag div, body, etc...

• #id
• .class

CSS 的單位

color

RGBA

• (255, 255, 255, 0) 最後一個參數是不透明度

HEX

• HEX 色碼是以 16 進位值來代表不同色彩模式中的顏色的方式。 16 進位色碼的格式為 #RRGGBB，其中RR是紅色，GG 是綠色，而 BB 則是藍色。這些 16 進位整數可以落在 00 到 FF 的範圍內以指定顏色的強度。

HSL / HSLA

• H 為 hue (色相)、S 為 saturation (飽合度)、L 為 lightness (亮度)

units

px // 一個點的寬度
pt // 印表機在紙上的基本單位
% // 以父元素為主做百分比計算
em // 1em = 100px
rem // 參照底層的單位倍數

搭配使用

#header li // 選子孫
#nav > ul > .important // 選孩子
#target ~ p // 在它之後的 p 都會被選到
#target + p // 在它之後的那一個 p 都會被選到

連寫

#nav li.important // 既是 li 且也有 important 這個 class
div.bg-yellow

屬性

[target] // 用屬性選
[target="_blank"] // 用屬性選

次序

li:first-child // 第一個孩子
li:last-child // 最後一個孩子

• nth-chlid

  先看順序再看 class

  • li:nth-child(2) //指定第二個孩子
  • li:nth-child(odd) 奇數
  • li:nth-child(even) 偶數
  • li:nth-child(3n) 把 1 帶進去
  • li:nth-child(2n+1)//選奇數的孩子

Pseudo-classes 偽類

:active // 滑鼠按下的樣式
:focus // 鍵盤聚焦的樣式
:hover // 滑鼠滑過的樣式
:link // 還沒被訪問的樣式
:visited // 被訪問過的樣式

Pseudo-element 偽元素

::before
::after

用 CSS 把 HTML 的值抓出來

<div class="price" data-id="hello yoyoyo"

.price::after {
    content: attr(data-id);
    color: red
}

屬性與排版

Display:

• block 有自己的寬和高: div, h1, p
• inline 內容多寬就多寬，沒有自己的寬高，調寬高和上下邊距沒有用
• inline-block 有自己的寬跟高卻不會占據一整行 button input select
• none 不顯示

Position:

調整的位置跟起始點的關係

• static 靜止的，沒辦法改變位置，自然的文章流動
• relative 相對於它原本應該出現的位置，可調整位置，或是相當容器
• absolute 不管身邊的其他元素，找有設定過 position 的祖先當作依據，通常會搭配容器
• fixed 一直在可視畫面 viewport 上做位置的設定，調整位置就是以可視畫面來做計算
• sticky: 滾到設定的 top 會固定住成 fixed
• z-index: 10 你前面還是我前面

float & clear

• float left, right
• clear left, right
  插入一個空的 div 做清除浮動，才不會影響排版
  

CSS .clearfix { clear: both; } // 清除浮動

Box model

box-sizing 概念

• content-box // 以 content 為主調整 width
• border-box // 指定給邊框到邊框，從 border 開始算起，width 為 border + padding + content

Border

• border-width 寬度
• border-style 框線
• border-color 顏色
• border: 2px solid black // 簡寫
• border-radius: 弧度

Outline

• 外框線，不會影響到原本元素的寬高

margin & padding

• margin 是兩個物件之間的距離
• padding 是 content 與 border 之間的距離
• 簡寫為上右下左 ，缺的值會由對面的補起來
• margin: 10px 20px 20px 10px
• padding: 10px 20px 20px 10px

Background

background-color: #
rbga(255, 255, 255, 0.9) 最後一個參數是透明度
background-image: url()
height, width
backgound-repeat

• repeat (default) 自動重複背景
• no-repeat 不重複
• repeat-x 往 x 軸重複
• repeat-y 往 y 軸重複
  background-attachment
• scroll 背景跟內容一起滾動
• fixed 背景保持不動
  background-size
• cover 背景整個覆蓋在網頁上
• contain 整個背景都能顯示在網頁上
• px / % /auto 直接下數字，沒有設定的自動會設為 auto
  background-position
• top / bottom / left/ right/ center: left center
  只下一個值，另一個會補 center
• px / %
  沒有設定第二個值，會自動補 50%
  縮寫
  backgound: #ffffff url("img_tree.png") no-repeat right top;

Font

color:

• red
• rbg(255, 255, 255)

font-size:

• 20px
• 120%

line-height: n

• n 倍的字體大小當作行高
• 1.5 em 對應到字體的大小

font-weight:

• normal
• 100, 200, 300, 400 // normal: 400 bold: 700
• font-family:
• "Times New Roman", Georgia, serif
• 一般會設定好幾個字型，因為不是每個電腦都有該字型
• text 相關
• text-align: center / left / right 置中置左置右
• text-decoration
  • underline 底線
  • none 無底線
  • overline 上標線
  • line-through 刪除線
• letter-spacing 字距
• word-break:
  • break-all
  • break-word 按照字來換行
• whilte-space
  • nowrap 永遠放在同一行
• overflow
  • visible 爆掉會直接顯示出來
  • flow 不管有沒有超過，都會給 scroll bar
  • auto 沒超過不會給 scroll bar，超過就有 scroll bar
  • hidden 爆掉直接藏起來
• text-overflow
  • ellipsis
    要搭配 overflow: hidden 和 white-space: nowrap

list-style-type

disc
circle
square
none
漸變

• transition: all 1s linear

cursor: pointer

移上去的時候，滑鼠會變成手指的形狀

Transform

• scale 變大小
• rotate 旋轉
• translateX(50px) 移動
• transplate(50px, 60px)

display: inline, block 跟 inline-block 的差別是什麼？

1. block：和塊級元素一樣，有自己的寬跟高。
2. inline：內容多寬舊多寬，沒有自己的寬高。
3. inline-block：有自己的寬跟高卻不會占據一整行。

position: static, relative, absolute 跟 fixed 的差別是什麼？

1. static：靜止的，沒辦法改變位置，預設的自然文章流動。
2. relative：相對於它原本應該出現的位置，可調整位置，可用來當作容器，作為子層元素的定位參考點。
3. absolute：不管身邊的其他元素，找 position 不是 static 的上層元素當作定位依據。
4. fixed：在可視畫面上做位置的設定，調整位置就是以可視畫面來做計算。

CSS specificity 權重

• !important 10,000
• inline styles 1,000
• ids 100
• classes / attributes / pseudo-classes 10
• elements and pseudo-elements 1
• 新的蓋過舊的

Animation

如何建立動畫？

• 在 selector 中下 animation 來決定動畫的性質，並建立對應的 @keyframes 來決定動畫的內容
  參數

animation: name duration timing-function delay iteration-count direction fill-mode;
動畫名稱、播放時間、延遲時間、速度、次數、方向、填充模式

alternate 可以來回播放
infinite 可以無限次播放

.box1 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f00;
  animation: amos 2s;
    }

@keyframes amos {
    0%{ border-radius: 50%; }
    100%{ border-radius: 0%; }
}

@media 媒體查詢

用來為不同的媒體類型、設備應用不同的樣式，做 RWD 響應式設計，範例：

/* 當我的裝置是螢幕，而且大於等於 768px 的時候 */
    @media screen and (min-width: 768px) {
      .amos {
        width: 50%;
        float: left;
      }
    }