Slide 1

Slide 1 text

Django Girls 2015  CSS Randy Lien

Slide 2

Slide 2 text

Cascading Style Sheets

Slide 3

Slide 3 text

CSS 不知道中⽂文怎麼翻譯

Slide 4

Slide 4 text

CSS 視覺呈現

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

認識 CSS 原理 .header { font-size: 12px; } Selector Property Value Declaration Rule

Slide 7

Slide 7 text

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

網站名稱

h1 { font-size: 36px; }

⽂文章標題

.article-title { font-size: 16px; }

Slide 8

Slide 8 text

CSS 常⽤用的屬性 • color • background-color • background-image • border • height, width

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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;

Slide 11

Slide 11 text

CSS 屬性 - background-image • 會出現在 background-color 上⽅方  常⾒見使⽤用的數值類型為 URI 網址，none background-image: url(https:// djangogirls.s3.amazonaws.com/event/ backgrounds/IMG_4689.jpg);  background-image: none; 

Slide 12

Slide 12 text

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; }

Slide 13

Slide 13 text

CSS 屬性 - height, width p { height: 290px; width: 505px; }

Slide 14

Slide 14 text

更多關於 CSS 的網站 • https://developer.mozilla.org/en-US/docs/Web/ Guide/CSS/Getting_started

Slide 15

Slide 15 text

fin