Django Girls 2015 - CSS

Django Girls Taipei 2015 training material

Transcript

1. Django Girls 2015
 CSS Randy Lien
2. Cascading Style Sheets
3. CSS 不知道中⽂文怎麼翻譯
4. CSS 視覺呈現
6. 認識 CSS 原理 .header { font-size: 12px; } Selector Property Value Declaration Rule
7. CSS 常⾒見的選擇器 • 標籤選擇器 (Tag name selector) • 類別名稱選擇器 (Class name selector) <h1>網站名稱</h1> h1 { font-size: 36px; } <h2 class='article-title'>⽂文章標題</h2> .article-title { font-size: 16px; }
8. CSS 常⽤用的屬性 • color • background-color • background-image • border • height, width
9. CSS 屬性 - color • 常⾒見使⽤用的數值類型
 RGB(A) ⾊色碼，16 進位⾊色碼，顏⾊色名稱 color: rgb(154, 205, 50);
 color: rgba(240, 255, 240, 0.75);
 
 color: #9acd32; color: yellowgreen;
10. 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;
11. CSS 屬性 - background-image • 會出現在 background-color 上⽅方
 常⾒見使⽤用的數值類型為 URI 網址，none background-image: url(https:// djangogirls.s3.amazonaws.com/event/ backgrounds/IMG_4689.jpg);
 background-image: none;

12. 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; }
13. CSS 屬性 - height, width p { height: 290px; width: 505px; }
14. 更多關於 CSS 的網站 • https://developer.mozilla.org/en-US/docs/Web/ Guide/CSS/Getting_started
15. fin