CSS + DIV 使用方法總結，cssdiv

CSS + DIV 使用方法總結，cssdiv
（原文連結：http://blog.csdn.net/clementad/article/details/46953787）
CCS = Cascading Style Sheets
行間樣式表（不推薦）：<p style=""></p>
內部樣式表（不推薦）：<style type="text/css">    p{color:#F00;}    ……</style>
外部樣式表（一般在head的title下面）：<link href="style.css" rel="stylesheet" type="text/css" />
CSS書寫結構：<選取器>{    <屬性>: <屬性值><單位>;    ……}如：p {    color: #F00;    font-size: 12px;}
基本類型選取器：

• 標籤選取器：寫在<>裡面的標籤，如：p{}。選中所有這一標籤的內容。支援自訂標籤。
• class選取器：以“.”開頭，如：.30font{}，表示選取class為“30font”所有元素。
• id選取器：以“#”開頭。

複合類型選取器：

• 偽類別選取器：用“:”隔開，如針對於<a>的“a:link”、“a:hover”、“a:active”（滑鼠按下）、“a:visited”；或“.myClass:hover”
• 群組選取器：用“,”隔開，同時選擇幾個元素，如：“a,p,h3”
• 標籤指定選取器：如p.aa表示class="aa"的p標籤，p#aa表示id="aa"的p標籤
• 包含選取器：以空格隔開，表示A裡面的B，如“#top a”表示id="top"裡面的<a>標籤
• 兄弟相鄰選取器：以“+”隔開，如“h1+p”表示與<h1>相鄰的<p>標籤
• 屬性選取器：以“[]”隔開，如“p[align]”表示有align屬性的<p>標籤
• 萬用字元選取器：“*”，表示選擇所有的元素

字型和文字屬性：

• font-family：字型名稱
• font-size：字型大小，需要帶單位px
• font-weight：加粗。bold，bolder, lighter, 100, 200, ... 900 （表示百分之100, 200...）
• font-style：字型風格。normal, italic, oblique（也是斜體，只對一些特殊字型有效）
• font-variant：轉換英文字母為大寫。normal : 正常的字型，small-caps : 小型的大寫字母字型
• line-hight：行高
• text-transform：capitalize：首字母大寫，uppercase：全部大寫，lowercase：全部小寫，none：不變
• text-decoration：文本修飾。underline，overline, line-through, blink, none，可以多個，用空格隔開
• color：顏色
• text-indet：首行縮排（需要帶單位）
• text-align：文本對齊，left, right, center, justify（左右對齊）
• letter-spacing：字間隔（需要帶單位px）

背景屬性：

• background-color：背景顏色
• background-image：背景圖片（優先於背景顏色）
• background-repeat：是否平鋪背景圖片。repeat（預設）, no-repeat, repeat-x, repeat-y（橫向、縱向平鋪）
• background-attachment：是否跟隨捲軸移動。fixed：不移動，scroll：移動（預設）
• background-position：背景定位，背景圖片左上方原點座標(x,y)的相對位移，或right, left，top, bottom, center

背景屬性可以合寫，把屬性值羅列出來，用空格隔開，如：body{    background: #F00 url(images/bg.jpg) no-repeat fixed 50px 100px;}背景平鋪：repeat-x 或 repeat-y，把圖片按x軸或y軸（橫向或豎向）平鋪
優先順序排序：預設 < 標籤 < class < ID
框模型（或盒模型）：

• 內聯對象，按行顯示：display:inline，由line-hight決定行高。如<p>, <a>等
• 塊對象，按塊顯示：display:block，由width和height決定寬和高，預設佔一行。如<div>

• 內聯對象轉換為塊對象後，就可以使用width和height屬性了：a{display:block; width=10px; height:20px;}

• padding：內填充（分top, bottom, left, right）
• margin：外邊距（分top, bottom, left, right）
• border：邊框（分top, bottom, left, right）
• width：內容的寬度
• height：內容的高度

註：當兩個元素上下排列時，他們間的margin會自動合并（都不是float或絕對位置的情況下）
border的屬性（分top, bottom, left, right）：

• style：線條樣式（dotted, solid, double, 等）
• width：粗細（單位px）
• color：顏色

可以縮寫：border: solid 1px #FFF;單獨設定一條邊：

• border-bottom: solid 2px #00F;
• border-bottom-width: 2px;

（註：後面會覆蓋前面的）
margin和padding的設定:

• margin: 1px （上下左右）
• margin: 1px 2px 3px 4px; （上 右 下 左）
• margin: 1px 2px; （上下 左右）
• margin: 1px 2px 3px; （上 左右 下）

（註：padding的設定方法跟margin一樣）
浮動（float）：

• 浮動到普通流的上一層
• float: left，浮動後向左，直到左邊碰到邊界或碰到同一層元素的右邊界
• float: right，浮動後向右，直到右邊碰到邊界或碰到同一層元素的左邊界

清理（clear）：

• 使浮動層繼續在普通流保留佔位
• clear: both, left, right，應用於普通流，使普通流根據上一層的佔位情況來決定自己的位置

一般可以在浮動層和普通流直接加一個clear div來分隔排版，如：<div class="clear"></div><style type="text/css">    .clear{clear:both;}</style>
塊水平置中：

1. margin左右：auto（如：margin:0px auto;）
2. 塊要有具體的寬度值（width）

註：body預設有8px的margin，取消方法：body{margin:0px;} 塊垂直置中（較少用）：

1. width:500px; height:200px; position: absolute; top:50%; left:50%; margin-top:-100px; margin-left:-250px;

塊內文本置中：

1. 水平置中：text-align: center
2. 垂直置中：行高=框高, 如：height:200px; line-height:200px（一行撐滿整個div）

ul列表：

• 預設有padding和margin，取消的方法：ul{padding:0px; margin:0px;}
• list-style：列表的樣式（none, ）
• list-style-image:url(images/a.jpg);
• 橫排：li{float:left}
• 設定分割線：li{ background:url(images/1.png) no-repeat bottom center;} 

定位（通過position屬性）：

• static：預設的定位方式，按行、按塊顯示。
• relative：相對定位，元素位移某個距離（使用top, right, bottom, left定位相對於原來的位置，原來空間佔位不會釋放）
• absolute：元素從文檔流完全刪除（與float類似），並相對於其父框定位（使用top, right, bottom, left定位）。如：#aaa{position:absolute; top:100px; left:50px;}
• fixed：跟absolute類似，不同的是定位為和瀏覽器視窗的距離。（可以用來做浮動廣告）

註：如果重疊，可以用z-index屬性決定誰在上面，值大的在上。
尺寸：

• 固定值：如 width: 100px;
• 預設值：不填
• 百分比：占父框的百分之多少，如 width: 80%;
• min-height, min-width：元素的最小高度、寬度
• max-height, max-width：元素的最大高度、寬度

內容超出父框的處理：

• overflow:hidden：超出的內容被剪下
• overflow:scroll：總是顯示捲軸
• overflow:auto：當內容被剪下時，顯示捲軸（body和textarea的預設值為auto）
• overflow-x:hidden：禁止橫向捲軸
• overflow-y:scroll：總是顯示縱向捲軸

註：如果父框不設定height，則父框會被撐高，直到達到max-height為止。
瀏覽器捲軸設定：如：   html{    scrollbar-base-color:#F00;   }註：貌似只對IE有效。


Photoshop切圖過程：

1. 使用輔助線
2. 使用切片工具
3. 取消背景，使圖片透明 
4. 儲存為web所用格式...
5. 儲存：切片：所有使用者切片
6. 儲存
7. 重新命名

原創文章，轉載請註明