★selector
EX:
selector{
property:value;
}
☆type selector : 根據類別,比如<h1>、<p>
EX:
p{
properties...
}
☆descendent selector:只選children
EX:
ul li{
properties...
}
☆pseudo:因應特殊情況
EX1:
a:hover{
properties...
}
EX2:
ol li:first-child{ //只改變第一個
properties
}
★css放哪裡:<style>!! (style在head裡)
<style >內容</style>
--十六進制顏色--
舉例#FFFF00,
前兩碼FF控制紅色、中間兩碼FF控制綠色、後面兩碼00控制藍色
--BoxModel--
★block-level:佔據整行的空間,像是<h1>、<p>等
★inline-level:非block-level,像是<a>、<img>、<input>、<label>等
★轉換
EX:
ul li{
display:inline //原為block
}
★box有4層:content area、padding、border、margin
★padding順序:上右下左(順時鐘)
EX:
h2{
padding: 5px 6px 7px 8px;
}
和
h2{
padding-top:5px;
padding-right:6px;
padding-bottom:7px;
padding-left:8px;
}
是一樣的
★border分成width、style、color三個部分
EX:
h2{
border:6px solid black;
}
和
h2{
border-width:6px;
border-style:solid;
border-color:black;
}
是一樣的
★margin的修改基本上和padding相同
★padding vs margin
padding 修改box的大小(不會更改到內容)
margin 修改box和box之間的空間
EX:
selector{
property:value;
}
☆type selector : 根據類別,比如<h1>、<p>
EX:
p{
properties...
}
☆descendent selector:只選children
EX:
ul li{
properties...
}
☆pseudo:因應特殊情況
EX1:
a:hover{
properties...
}
EX2:
ol li:first-child{ //只改變第一個
properties
}
★css放哪裡:<style>!! (style在head裡)
<style >內容</style>
--十六進制顏色--
舉例#FFFF00,
前兩碼FF控制紅色、中間兩碼FF控制綠色、後面兩碼00控制藍色
--BoxModel--
★block-level:佔據整行的空間,像是<h1>、<p>等
★inline-level:非block-level,像是<a>、<img>、<input>、<label>等
★轉換
EX:
ul li{
display:inline //原為block
}
★box有4層:content area、padding、border、margin
★padding順序:上右下左(順時鐘)
EX:
h2{
padding: 5px 6px 7px 8px;
}
和
h2{
padding-top:5px;
padding-right:6px;
padding-bottom:7px;
padding-left:8px;
}
是一樣的
★border分成width、style、color三個部分
EX:
h2{
border:6px solid black;
}
和
h2{
border-width:6px;
border-style:solid;
border-color:black;
}
是一樣的
★margin的修改基本上和padding相同
★padding vs margin
padding 修改box的大小(不會更改到內容)
margin 修改box和box之間的空間