Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Django Girls 2015 - CSS

Django Girls 2015 - CSS

Django Girls Taipei 2015 training material

Randy Lien

May 30, 2015
Tweet

More Decks by Randy Lien

Other Decks in Programming

Transcript

  1. CSS 常⾒見的選擇器 • 標籤選擇器 (Tag name selector) • 類別名稱選擇器 (Class

    name selector) <h1>網站名稱</h1> h1 { font-size: 36px; } <h2 class='article-title'>⽂文章標題</h2> .article-title { font-size: 16px; }
  2. CSS 屬性 - color • 常⾒見使⽤用的數值類型
 RGB(A) ⾊色碼,16 進位⾊色碼,顏⾊色名稱 color:

    rgb(154, 205, 50);
 color: rgba(240, 255, 240, 0.75);
 
 color: #9acd32; color: yellowgreen;
  3. CSS 屬性 - background-color • 常⾒見使⽤用的數值類型
 RGB(A) ⾊色碼,16 進位⾊色碼,顏⾊色名稱, transparent

    background-color: rgb(154, 205, 50);
 background-color: rgba(240, 255, 240, 0.75);
 
 background-color: #9acd32; background-color: yellowgreen;
  4. CSS 屬性 - background-image • 會出現在 background-color 上⽅方
 常⾒見使⽤用的數值類型為 URI

    網址,none background-image: url(https:// djangogirls.s3.amazonaws.com/event/ backgrounds/IMG_4689.jpg);
 background-image: none;

  5. CSS 屬性 - border-* p { border-width: 10px; border-style: solid;

    //dotted, dashed, inset, outset border-color: white; background-color: rgb(16, 59, 120); border-radius: 30px; }
  6. fin