CSS 學習筆記
CSS 常用幫助文檔
CSS：被用來同時控制多重網頁的樣式和布局。
HTML頁面中CSS樣式的寫法有3種：
1：標簽中寫入
<body style=‘margin o auto;‘>
2：head頭標簽內
<style>
body { margin:0 auto;}
</style>
3：head頭標簽內引入css文件
<link rel=‘stylesheet‘ href=‘commons.css‘ />
優先級：標簽上的style最高，編寫順序，就近原則
CSS註釋方法：/* ... */
CSS 選擇器有以下幾種：
第一種：id選擇器(#i1)
<標簽 id=‘i1‘>
#i1{
background-color: #00000;
height: 48px;
}
第二種：class選擇器
<標簽 class=‘c1‘></標簽>
.c1{
background-color: #00000;
height: 48px;
}
第三種: 標簽選擇器
<div></標簽>
div{
background-color: #00000;
height: 48px;
}
第四種：層級模式（可以多個層級）
<span><div>test</div></span>
span div{ ... } 表示span下的div標簽使用此樣式
.c1 div{...} 表示class為c1下的div標簽
第五種：組合選擇器
<div id=‘i1‘></div>
<div id=‘i2‘></div>
<div id=‘i3‘></div>
#i1,#i2,#i3{...}
.c1,.c2,.c3{...}
第六種：屬性選擇器，對選擇到的標簽再通過屬性進行一次賽選
<input type=‘text‘>
input[type=‘text‘]{width:100px;height:200px;}
以下主要介紹些常用的css樣式
border: 1px solid red; 邊框屬性依次為，邊框寬度，邊框樣式，邊框顏色
height：標簽高度
width：標簽寬度（像素，百分比）
min-height 設置元素的最小高度。
min-width 設置元素的最小寬度。
line-height：垂直方向根據標簽高度居中
text-aligh：center 水平方向居中
color：字體顏色
font-size：字體大小
font-weight：字體加粗
float：標簽進行漂移，也就是塊級標簽堆疊，（left 左漂，right 右漂），註意：如果將父級覆蓋，則在最後使用參數：<style=‘clear:both;‘>
display：可選參數如下
- block：將內聯標簽轉換為塊級標簽
- inline：將塊級標簽轉換為內聯標簽
- inline-block：同時具有塊級標簽和內聯標簽的屬性。（內聯標簽不具有padding,margin,高，寬等屬性設置）
- none：設置此屬性的標簽消失
padding：內邊距,元素邊框與元素內容之間的空間
margin：外邊距，定義元素周圍的空間，div整體居中（0,auto）
position：元素定位，參數如下
- fixed：固定元素在遊覽器窗口的指定位置，不隨頁面的滾動而移動。 舉例：（position:fixed,top:0,left:0,right:0)
- relative + absolute：這2個元素要一起使用，二者之間是相對定位
- Relative 定位：相對定位元素的定位是相對其正常位置。
- Absolute 定位：絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麽它的位置相對於<html>
舉例：
<div style=‘position:relative;‘>
<div style=‘position:absolute;top:0,left:0;‘></div>
</div>
這裏absolute的位置是相對於relative標簽的位置周邊定位
opcity：透明度，取值範圍（0 - 1）
z-index：層級順序，要結合opcity進行透明度設定。
2層寫法舉例：
<div style=‘z-index:10;position:fixed;top:50px;left:100px;background-color:white;‘>
# 這裏在引入一層，需要通過z-index:10值的高低來確定優先度，數字越大越在最上層。
<div style=‘z-index:9;position:fixed;background-color:black;top:0,bottom:0;right:0;left;0;opacity:0.5;></div> # 這個就是設置透明度(1就完全覆蓋）
<div style=‘height:5000px;background-color:green;‘>sdf</div>
overflow：設置當元素的內容溢出其區域時發生的事情,參數如下
- auto：當圖片大小超過設定的大小，則在設定的範圍出現滑輪。
- hidden：當圖片大小超過設定的大小，則只顯示設定大小的窗口。
hover：當鼠標移動到當前標簽上時，以下css屬性才生效，
寫法：.pg-header .menu:hover{ background-color:blue}
background-image：背景圖像。body {background-image:url(‘paper.gif‘);}
background-color：背景顏色，使用在body。 body {background-color:#b0c4de;}
background-repeat：背景圖像增加方式，參數如下：
- repeat-x： 只橫向增加
- repeat-y： 只縱向增加
- no-repeat： 不堆疊
background-position：改變圖像在背景中的位置，如：background-position:10px,10px；
實例：賬戶輸入框內最右側增加用戶名的圖片
<div style=‘height:35px;width:400px;position;relative;‘>
<input type=‘text‘ style=‘height:35px;width:370px;padding-right:30px;‘>
<span style=‘position:absolute;right:6px;top:10px;background-image:url(i_name.jpg);height:16px;width:16px;display:inline-block;‘></span>
</div>
技巧：
1：CSS重用功能
<style>
.c{ 共有}
.c1{ 獨有}
.c2{ 獨有}
</style>
<div class=‘c,c1‘></div>
<div class=‘c,c2‘></div>
2：默認圖片的外邊框是1px，去掉：img:{broder:0}
舉例：常用頁面的布局
1：主站的布局
<div class=‘pg-header‘>
<div style=‘width:980px;margin:0 auto;‘>頁面頭</div>
</div>
<div class=‘pg-content‘>
<div style=‘width:980px;margin:0 auto;‘>頁面體</div>
</div>
<div class=‘pg-footer‘>
<div style=‘width:980px;margin:0 auto;‘>頁面尾</div>
</div>
CSS 學習筆記