Django Girls 2015 CSSRandy Lien

Cascading Style Sheets

CSS不知道中⽂文怎麼翻譯

CSS

視覺呈現

認識 CSS 原理

.header {

font-size: 12px;

}

Selector

Property Value

Declaration

Rule

CSS 常⾒見的選擇器• 標籤選擇器 (Tag name selector)

• 類別名稱選擇器 (Class name selector)

<h1>網站名稱</h1> h1 { font-size: 36px; }

<h2 class='article-title'>⽂文章標題</h2> .article-title { font-size: 16px; }

CSS 常⽤用的屬性• color

• background-color

• background-image

• border

• height, width

CSS 屬性 - color • 常⾒見使⽤用的數值類型

RGB(A) ⾊色碼，16 進位⾊色碼，顏⾊色名稱

color: rgb(154, 205, 50);

color: rgba(240, 255, 240, 0.75);color: #9acd32;

color: yellowgreen;

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;

CSS 屬性 - background-image

• 會出現在 background-color 上⽅方常⾒見使⽤用的數值類型為 URI 網址，none

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

background-image: none;

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;

}

CSS 屬性 - height, width

p { height: 290px;

width: 505px; }

更多關於 CSS 的網站

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started

fin