Post on 03-Aug-2015
transcript
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