CSS -selectors&colors&box model
層疊樣式表(Cascading Style Sheets，簡寫CSS)，在網頁中我們常會使用CSS來調整我們的版面CSS selectors
<head>
<style="text/css">
ul{
color:black;
}
</style>
</head>
這段表示將所有的<ul></ul>tag中的文字顏色改為黑色，當然也可以指定套用特定項目
<head>
<style="text/css">
ul li{
color:black;
}
</style>
</head>
這段是指將所有<ul>裡的<li>中的文字顏色改為黑色，如果我們只要改第一個項目
<head>
<style="text/css">
ul li:first-child{
color:black;
}
</style>
</head>
CSS Hexadecimal colors
在上面我們是使用預設的顏色，有時候我們會希望能使用更多的顏色，CSS也提供以十六進制指定RGB顏色<head>
<style="text/css">
ul li:first-child{
color:#000000;
}
</style>
</head>
同樣是黑色，但在這裡以十六進制指定RGB顏色，指定顏色要在前面加上#，#後面要加上6個位數，這裡的6位數是有意義的，每兩個位數代表RGB的數值，如#1A3B5C表示R是1A、G是3B、B是5C，R是紅色Red、G是綠色Green、B是藍色Blue，又這裡的數值是以十六進制表示，通常我們使用十進制
57=5X10+7X1
而這裡使用的是十六禁制
10=A,11=B,12=C,13=D,14=E,15=F
1A=16+10,3B=16*3+11,5C=5*16+12
依據不同的組合可以產生各種顏色
如果都是零就是黑色(#000000)，相反則是白色(#FFFFFF)
CSS The Box Model
在排版中我們通常會用到Box Model 的觀念，藉由Padding、Border、Margin來建造自己所想要的版面，下面三個屬性的設定方式
h2{
padding-top:6px; --設定上方寬度
padding-right:4px; --設定右方寬度
padding-bottom:0; --設定下方寬度
padding-left0; --設定左方寬度
border-width:4px; --邊框寬度
border-style:solid; --邊框類型(實線)
border-color:black; --邊框顏色
margin-top:7px; --設定上方寬度
margin-right:0; --設定右方寬度
margin-bottom:7px; --設定下方寬度
margin-left0; --設定左方寬度
}
也可以寫成
h2{
padding:6px 4px 0 0; --依序設定上右左下寬度
border:4px solid black;--依序設定邊框框度、類型、顏色
margin:7px 0 7px 0; --依序設定上右左下寬度
}
padding-top:6px; --設定上方寬度
padding-right:4px; --設定右方寬度
padding-bottom:0; --設定下方寬度
padding-left0; --設定左方寬度
border-width:4px; --邊框寬度
border-style:solid; --邊框類型(實線)
border-color:black; --邊框顏色
margin-top:7px; --設定上方寬度
margin-right:0; --設定右方寬度
margin-bottom:7px; --設定下方寬度
margin-left0; --設定左方寬度
}
也可以寫成
h2{
padding:6px 4px 0 0; --依序設定上右左下寬度
border:4px solid black;--依序設定邊框框度、類型、顏色
margin:7px 0 7px 0; --依序設定上右左下寬度
}
沒有留言:
張貼留言