Bigger-Mai 養成計劃，前端基礎學習之CSS

在標籤上設置style屬性：
background-color: #2459a2;
height: 48px;
...

編寫css樣式：
1. 標籤的style屬性
2. 寫在head裏面 style標籤中寫樣式
- id選擇區
#i1{
background-color: #2459a2;
height: 48px;
}

- class選擇器 ******

.名稱{
...
}

<標籤 class='名稱'> </標籤>

- 標籤選擇器
div{
...
}


全部div設置上此樣式

- 層級選擇器（空格） ******
.c1 .c2 div{

}
- 組合選擇器（逗號） ******
#c1,.c2,div{

}

- 屬性選擇器 ******
對選擇到的標籤再經過屬性再進行一次篩選
.c1[n='alex']{ width:100px; height:200px; }

PS:
- 優先級，標籤上style優先，編寫順序，就近原則

2.5 css樣式也能夠寫在單獨文件中
<link rel="stylesheet" href="commons.css" />

三、註釋
/* */

四、邊框
- 寬度，樣式，顏色 (border: 4px dotted red;)
- border-left

五、
height， 高度 百分比
width， 寬度 像素，百分比
text-align:ceter, 水平方向居中
line-height，垂直方向根據標籤高度
color、 字體顏色
font-size、 字體大小
font-weight 字體加粗

六、float
讓標籤浪起來，塊級標籤也能夠堆疊
老子管不住：
<div style="clear: both;"></div>

七、display
display: none; -- 讓標籤消失
display: inline;
display: block;
display: inline-block;
具備inline,默認本身有多少佔多少
具備block，能夠設置沒法設置高度，寬度，padding margin
******
行內標籤：沒法設置高度，寬度，padding margin
塊級標籤：設置高度，寬度，padding margin


八、padding margin(0,auto)

九、position:
a. fiexd => 固定在頁面的某個位置

b. relative + absolute

<div style='position:relative;'>
<div style='position:absolute;top:0;left:0;'></div>
</div>

opcity: 0.5 透明度
z-index: 層級順序
overflow: hidden,auto
hover

十、background-image:url('image/4.gif'); # 默認，div大，圖片重複訪
background-repeat: repeat-y;
background-position-x:
background-position-y:

示例：輸入框