css基礎 1、 Css新建格式 Css語法： 選擇符{屬性名稱：屬性值；} 1、內部樣式表（嵌套到頁面中） 語法： <style type="text/css"> css語句 </style> 註：使用style標記創建樣式時，最好將該標記寫在<head></head>; 2、內聯樣式（行間樣式， ...
css基礎
1、 Css新建格式
Css語法：
選擇符{屬性名稱：屬性值；}
1、內部樣式表（嵌套到頁面中）
語法：
<style type="text/css">
css語句
</style>
註：使用style標記創建樣式時，最好將該標記寫在<head></head>;
2、內聯樣式（行間樣式，行內樣式，嵌入式樣式）
語法：
<div style="屬性1:值1;屬性2:值2;屬性3:值3;……"> </div>
3、引用外部樣式表文件
(1) 語法：
<link href="目標文件的路徑及文件名全稱"
rel="stylesheet" type="text/css" />
說明：使用link元素導入外部樣式表時，需將該元素寫在文檔頭部，即<head>與</head>之間。
href：css文件的路徑及文件名全稱
rel：用於定義文檔關聯，表示關聯樣式表；
type：定義文檔類型；
(2)、導入外部樣式表
<style type="text/css">
@import url("目標文件的路徑及文件名全稱");
</style>
說明：@和import之間沒有空格 url和小括弧之間也沒有空格；括弧內部加引號，必須結尾以分號結束；
4、css樣式表的優先順序
內聯樣式表的優先順序別最高
內部樣式表與外部樣式表的優先順序和書寫的順序有關，後書寫的優先順序別高。
2、css基礎語法
CSS語法由兩部分組成：選擇符、屬性
選擇符 {屬性: 屬性值 } p { color: #ff0000;font-size:12px}
6、CSS選擇符包括4大類：類型選擇符、id選擇符、class選擇符、和特殊選擇符；
常用的選擇符有十種左右,Css選擇符分類：
類型選擇符（標記選擇器）,類選擇符 （class選擇符）,ID選擇符 （id選擇器）,偽類選擇器,群組選擇符（集合選擇器）,通配符（*）,偽對象選擇符
包含選擇符（後代選擇器）
類型選擇符（標記選擇器）:類型選擇符就是以文檔對象類型的元素作為選擇符，即是用結構中元素名稱作為選擇符。例如body、div、p,img,em,strong,span......等。
類選擇符 （class選擇符）:類選擇器使用必須要引用才能生效,語法：.class名{屬性：屬性值;}
類別選擇器說明：
(1)當我們使用類選擇符時，應先為每個元素定義一個類名稱，
(2)類選擇符的語法格式：
如：<div class="top"></div>
用法：class選擇符更適合定義一類樣式；
ID選擇符:語法：#id名{屬性：屬性值;}
說明：
（1）可以給每個元素使用id選擇符，但id是元素的唯一標識符，不可出現重覆的id名；
如：<div id="top"></div>
（2）id選擇符的語法格式是“#”加上自定義的id名
如：#box{width:300px; height:300px;}
(3) 起名時要取英文名，不能用關鍵字：(所有的標記和屬性都是關鍵字)
如：head標記
(4)一個id名稱只能在文檔中出現一次，因為id是唯一的
(5) 最大的用處：創建網頁的外圍結構。
通配符（*）:語法：*{屬性：屬性值;}
說明：通配選擇符的寫法是“*”，其含義就是所有元素；表示該樣式適用所有網頁元素；
用法：常用來重置樣式。
群組選擇符（集合選擇器）:語法：選擇符1，選擇符2，選擇符3{屬性：屬性值;}
說明：當有多個選擇符應用相同的樣式時，可以將選擇符用“，”分隔的方式，合併為一組。 做頁面居中設置 ：選擇符{margin:0 auto;}
包含選擇器(後代選擇器):
語法：選擇符1 選擇符2{屬性：屬性值;}
選擇符父級 選擇符子級{屬性：屬性值;}
子代選擇器 語法: 選擇符父級>選擇符子級{屬性:屬性值;}(子代選擇器只能寫兩輩,多餘兩輩無效)
說明：選擇符1和選擇符2用空格隔開，含義就是選擇符1中包含的所有選擇符2;
偽類選擇器:
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 滑鼠移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
說明：
1）當這4個超鏈接偽類選擇符聯合使用時，應註意他們的順序，正常順序為：
a，a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超鏈接的樣式失效；
2）為了簡化代碼，可以把偽類選擇符中相同的聲明提出來放在a選擇符中；
例如：a{color:red;} a:hover{color:green;} 表示超鏈接的三種狀態都相同，只有滑鼠划過變顏色。
|
屬性 |
描述 |
CSS |
|
向被激活的元素添加樣式。 |
1 |
|
|
向擁有鍵盤輸入焦點的元素添加樣式。 |
2 |
|
|
當滑鼠懸浮在元素上方時，向元素添加樣式。 |
1 |
|
|
向未被訪問的鏈接添加樣式。 |
1 |
|
|
向已被訪問的鏈接添加樣式。 |
1 |
|
|
向元素的第一個子元素添加樣式。 |
2 |
|
|
向帶有指定 lang 屬性的元素添加樣式。 |
2 |
屬性選擇器:
語法: [屬性符]{屬性:屬性值;}
例如:[alt]{color:blue;} 或者:img[alt][id]{color:green;}或者img[alt][id=”type1”]{color:green;}
相鄰兄弟選擇器:
語法：td+td{屬性:屬性值;} 或者:.tag01+.tag02{屬性:屬性值}
7 選擇符的權重:
css中用四位數字表示權重，
權重規則：HTML標簽的權重是1，class的權重是10，id的權重是100。
權重的表達方式如：0，0，0，0；
類型選擇符的權重為0001
class選擇符的權重為0010
id選擇符的權重為0100
子選擇符的權重為0000
屬性選擇符的權重為0010
偽類選擇符的權重為0010
偽元素選擇符的權重為0010
包含選擇符的權重：為包含選擇符的權重之和
內聯樣式的權重為1000
繼承樣式的權重為0000
群組集合權重為他本身
當不同選擇符的樣式設置有衝突的時候，高權重選擇符的樣式會覆蓋低權重選擇符的樣式。
例如：b.demo的權重是1+10=11。
相同權重的選擇符，樣式遵循就近原則：哪個選擇符最後定義，就採用哪個選擇符樣式。（註意：是樣式中定義該選擇符的先後，而不是html中使用先後）
ps軟體學習
常用快捷鍵：
（1）c 裁剪、 m 選框、i 吸取、h 抓手、z 縮放、x 前景和背景切換、f 屏幕模式的切換、
（2）ctrl+s 保存、ctrl+shift+s 另存、 ctrl+z 返回上一步、 ctrl+t 自由變換、 ctrl+c 複製、ctrl+v 粘貼、ctrl+n 新建文件
8 css常用屬性
標簽:
字體{font-family:”宋體”,”黑體”;} 字體大小{font-size:px/cm/% ;}
字體加粗:{font-weight:bold;} 顏色{color: ;}
水平排列{text-align:center/left/right;}
縮進{text-indent:*px/*cm;}
行高{line-height:*px;}
邊框{border/border-bottom/border-top/border-left/border-right: ;solid(邊框形式): ;}
{border-color: ;border-width: ;border-style:solid/dashed/double;}
下劃線{text-decoration:none/underline/overline/line-through);}
超鏈接滑鼠放上去顏色改變a:hover{color: ;}
列表橫向排列{list-style-type:none;}
背景色{background-img:url(地址)}
背景平鋪屬性{backgroun-repeat:no-repaet/repaet-x/repaet-y;}
圖片不隨滾動軸滾動{backgroun-attachment:fixed/scroll;}
設定圖片位置{backgroun-position:top left/bottom left/center/left;}
註意:長度單位(length)有絕對單位cm/nm/in/pt/pc,相對單位em/ex/px
padding{上 右 下 左 }
HTML 塊元素 和 內聯元素
1、HTML 塊元素
大多數 HTML 元素被定義為塊級元素或內聯元素。
“塊級元素”譯為 block level element，Display:block;
“內聯元素”譯為 inline element。Display:inline;
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。
例子：div、H1、P、form、table、ul、pre
2、HTML 內聯元素
內聯元素在顯示時通常不會以新行開始。
例子：span,a,strong, em, input ,select,textarea, img ,br
3、CSS常用樣式
width：設置寬度，單位px像素
height：高度
line-height：行高
可用來設置垂直居中，單位為px/em/%，200%可簡寫為2，一般為1.5或者1.8
color：前景色，也就是文字的顏色
background-color：背景色
font-size:字體的大小
4、CSS 顏色
顏色的三種表達方式：
十六進位 如：color:#ff0000
顏色名稱 如：color:red
三原色單位 如：rgb(255,0,0)
一般最常用的是十六進位，三原色單位的原理【紅（r）,綠（g）,藍(b)】混合而成。每個值域在0－255之間。
5、CSS 長度
長度的三種表達方式：
px 如：width: 200px;（像素電腦屏幕上的一個點）
em 如：line-height: 2em;（2em 等於當前字體尺寸的兩倍）
rem 是相對於根元素大小 （移動端推薦使用）
6、圖片類型
網頁上常用的圖片格式（壓縮圖片）
1)jpg:有損壓縮格式，靠損失圖片本身的質量來減小圖片的體積，適用於顏色豐富的圖像;(像素點組成的，像素點越多會越清晰 )
2）gif：有損壓縮格式，靠損失圖片的色彩數量來減小圖片的體積，支持透明，支持動畫，適用於顏色數量較少的圖像;
3)png:有損壓縮格式，損失圖片的色彩數量來減小圖片的體積，支持透明，不支持動畫，是fireworks的 源文件格式，適用於顏色數量較少的圖像;
1、背景色（background-color）
2、背景圖像（background-image）
背景圖片的顯示原則
1）容器尺寸等於圖片尺寸，背景圖片正好顯示在容器中;
2）容器尺寸大於圖片尺寸，背景圖片將預設平鋪，直至鋪滿元素；
3）容器尺寸小於圖片尺寸，只顯示元素範圍以內的背景圖。
3、背景重覆（background-repeat）
在頁面上對背景圖像進行平鋪
|
值 |
描述 |
|
repeat |
預設。背景圖像將在垂直方向和水平方向重覆。 |
|
repeat-x |
背景圖像將在水平方向重覆。 |
|
repeat-y |
背景圖像將在垂直方向重覆。 |
|
no-repeat |
背景圖像將僅顯示一次。 |
4、背景定位（background-position）改變圖像在背景中的位置
值有三種方式：
A.關鍵字：
|
單一關鍵字 |
等價的關鍵字 |
|
center |
center center |
|
top |
top center 或 center top |
|
bottom |
bottom center 或 center bottom |
|
right |
right center 或 center right |
|
left |
left center 或 center left |
B.百分數值：
C.長度值：
設置值為 50px 100px，圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上：
4、背景關聯(background-attachment)
如果文檔比較長，那麼當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。
|
值 |
描述 |
|
scroll |
預設值。背景圖像會隨著頁面其餘部分的滾動而移動。 |
|
fixed |
當頁面的其餘部分滾動時，背景圖像不會移動。 |
5、背景尺寸（Background-size）
數值、百分比（根據高度覆蓋、易變形）、cover（根據高度覆蓋、不易變形）、contain（不變形、易留空白）
總結：CSS 背景屬性
|
屬性 |
描述 |
|
簡寫屬性，作用是將背景屬性設置在一個聲明中。 |
|
|
背景圖像是否固定或者隨著頁面的其餘部分滾動。 |
|
|
設置元素的背景顏色。 |
|
|
把圖像設置為背景。 |
|
|
設置背景圖像的起始位置。 |
|
|
設置背景圖像是否及如何重覆。 |
如何在一個聲明中設置所有背景屬性：
背景縮寫：
background: #0FF2F0 url(../img/7.jpg) no-repeat center;
7、CSS 字體
1、CSS 字體系列（font-family）
{ font-family: 字體1，字體2；}
body {font-family: "微軟雅黑","宋體";}
瀏覽器首先會尋找字體1、如存在就使用，如果不存在，則尋找字體2，如字體2也不存在則按系統預設字體顯示；
當字體是中文字體時，需加雙引號；
當英文字體中有空格時，需加雙引號如（“Times New Roman”）
當英文字體只有一個單片語成是不加雙引號；如：（Arial）；
Windows中文版本操作系統下，中文預設字體為宋體或者新宋體，英文字體預設為Arial，新推出的版本也預設為微軟雅黑。
2、字體風格( font-style )
最常用於規定斜體文本
該屬性有三個值：
normal - 文本正常顯示
italic - 文本斜體顯示
oblique - 文本傾斜顯示
italic和oblique都表示傾斜，不過oblique的幅度要大一點。但一般瀏覽器對它們的區分不是很明顯
3、字體加粗( font-weight )
設置文本的粗細
{ font-weight:bolder/bold/normal/100—900; }
bolder(更粗的)/bold（加粗）/normal（常規）
字體的粗細分為9個等級，分別為100——900，其中100對應最輕的字體變形，而900對應最重的字體變形，一般400常規字體，600-900加粗字體
4、字體大小( font-size )
設置文本的大小
a、使用像素來設置字體大小
b、使用em表示元素字體高度，em值是根據父元素值來確定。
5、字體顏色（color）
6、字體變形( font-variant )
可以設定小型大寫字母
{ font-variant:normal(正常的字體)/small-caps(小型的大寫字母字體)/inherit(規定繼承父元素屬性值) }
小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母採用不同大小的大寫字母。
字體屬性學習大綱
|
屬性 |
描述 |
|
設置字體系列。 |
|
|
設置字體的尺寸。 |
|
|
設置字體風格。 |
|
|
以小型大寫字體或者正常字體顯示文本。 |
|
|
設置字體的粗細。 |
8、CSS 文本
一、縮進文本（text-indent）
註意：一般來說，可以為所有塊級元素應用 text-indent，但無法將該屬性應用於行內元素。
1、單位em/px
2、使用負值
p.indent{text-indent: -2em;}
3、使用百分比值，百分數相對於縮進元素父元素的寬度。
4、繼承，該屬性可以繼承
二、水平對齊（text-align）
元素中的文本行互相之間的對齊方式
text-align: center; text-align: right;
按單詞換行
word-wrap: normal|break-word;
|
值 |
描述 |
|
normal |
只在允許的斷字點換行（瀏覽器保持預設處理）。 |
|
break-word |
在長單詞或 URL 地址內部進行換行。 |
word-wrap:break-word;
三、字間隔（word-spacing）
改變字（單詞）之間的標準間隔。其預設值 normal 與設置值為 0 是一樣的，只對英文有效，對中文無效。
四、字母間隔（letter-spacing）
字母間隔修改的是字元或字母之間的間隔，對英文和中文都有效。
五、字元轉換（text-transform）
屬性處理文本的大小寫。這個屬性有 4 個值：
- none uppercase（大寫） lowercase（小寫） capitalize （首字母大寫）
六、文本裝飾（text-decoration）
text-decoration 有 5 個值：
none underline overline line-through blink
七、處理空白符（white-space ）
|
值 |
空白符 |
換行符 |
自動換行 |
|
pre-line |
合併 |
保留 |
允許 |
|
normal |
合併 |
忽略 |
允許 |
|
nowrap |
合併 |
忽略 |
不允許 |
|
pre |
保留 |
保留 |
不允許 |
|
pre-wrap |
保留 |
保留 |
允許 |
四、CSS區塊、浮動、定位、溢出、滾動條
1、CSS區塊
|
屬性名稱 |
屬性值 |
說明 |
|
width |
像素/百分比 auto |
|
|
height |
像素/百分比 auto |
|
|
min-hieght |
像素/百分比 auto |
|
|
max-height |
像素/百分比 auto |
|
|
min-width |
像素/百分比 auto |
|
|
max-width |
像素/百分比 auto |
|
2、CSS中浮動的使用
1>、元素的浮動是指設置了浮動屬性的元素會脫離標準文檔流的控制，移動到其父元素中指定位置的過程。
在CSS中，通過float屬性來定義浮動，其基本語法格式如下：
選擇器{float:屬性值;}
|
屬性名稱 |
屬性值 |
說明 |
|
float |
none |
正常顯示 |
|
left |
左浮動 |
|
|
right |
右浮動 |
|
|
clear |
none |
允許兩邊浮動 |
|
left |
不允許左邊浮動 |
|
|
right |
不允許右邊浮動 |
|
|
both |
不允許兩邊浮動 |
2>、浮動的特性
1.浮動脫離標準流，不占位置，但會影響標準流。浮動只有左右浮動。
2. 浮動的元素A排列位置，跟上一個元素（塊級）有關係。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。
3.一個父盒子裡面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。
4.浮動根據元素書寫的位置來顯示相應的浮動。
5. 元素添加浮動後，如果沒有設置寬高的話，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者預設的內容多少。也就是具有了包裹性。
6.浮動具有破壞性，元素浮動後，破壞原來的正常流佈局，造成內容塌陷。如果一個標準流中的盒子所有的子元素都進行了浮動，而且盒子沒有設置高度，那麼父容器整個高度會塌陷。
3>、清除浮動
方法一：使用空標記清除浮動。
<div style=“height:0px; clear:both;”></div>
方法二：使用after偽對象清除浮動。 （推薦）
.clear:after{
content:””;
display:block;
clear:both;
height:0;
visibility:hidden;
}
.clearfix{
*zoom:1;
}
方法三、
overflow:hidden;
4>、overflow屬性的常用值
|
屬性名稱 |
屬性值 |
說明 |
|
overflow |
visible |
內容不會被修剪，會呈現在元素框之外（預設值） |
|
hidden |
溢出內容會被修剪，並且被修建的內容是不可見的 |
|
|
auto |
在需要時產生滾動條，即自適應所要顯示的內容 |
|
|
scroll |
總是顯示滾動條 |
|
|
overflow-x |
同上 |
|
|
overflow-y |
同上 |
|
5>、定位
在CSS中，position屬性用於定義元素的定位模式，其基本語法格式如下：
選擇器{position:屬性值；}
position屬性常用值
|
值 |
描述 |
|
static |
自動定位（預設） |
|
relative |
相對定位，相對於其源文檔流的位置進行定位 |
|
absolute |
絕對位置，相對於其上一個已經定位的父元素進行定位 |
|
fixed |
固定定位，相對於瀏覽器視窗進行定位 |
元素的定位屬性主要包括定位模式和邊偏移兩部分。
邊偏移
在CSS中，通過邊偏移屬性top、bottom、left或right，來精確定義定位元素的位置，其取值為不同單位的數值或百分比。
靜態定位是元素的預設定位方式，當position屬性的取值為static時，可以將元素定位於靜態位置。 所謂靜態位置就是各個元素在HTML文檔流中預設的位置。在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。
固定定位是絕對定位的一種特殊形式，它以瀏覽器視窗作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設置為固定定位。當對元素設置固定定位後，它將脫離標準文檔流的控制，始終依據瀏覽器視窗來定義自己的顯示位置。不管瀏覽器滾動條如何滾動，也不管瀏覽器視窗的大小如何變化，該元素都會始終顯示在瀏覽器視窗的固定位置。IE6瀏覽器不支持固定定位。
z-index層疊等級屬性
在CSS中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，其取值可為正整數、負整數和0。z-index的預設屬性值是0，取值越大，定位元素在層疊元素中越居上。定義靠後的，預設在之前的元素之上。不要濫用z-index;父容器的z-index會影響子元素的層級級別。
盒模型
所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。
CSS中邊框的使用
border-color、border-atyle、border-width
簡化方案：border:形態 長度 顏色;
border-color:上 右 下 左；
CSS邊界盒子模型
padding margin
行內元素不要給上下的margin 和padding,上下margin和padding會被忽略。左右margin和padding會起作用。
盒子的寬與高
使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。
width和height的屬性值可以為不同單位的數值或相對於父元素的百分比%，實際工作中最常用的是像素值。
大多數瀏覽器，如Firefox、IE6及以上版本都採用了W3C規範，符合CSS規範的盒子模型的總寬度和總高度的計算原則是：
盒子的總寬度= width+左右內邊距之和+左右邊框寬度之和+左右外邊距之和
盒子的總高度= height+上下內邊距之和+上下邊框寬度之和+上下外邊距之和
1、寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（<img />標記和<input />除外）。
2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的情況。
外邊距塌陷
相鄰塊元素垂直外邊距的合併
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下麵的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合併（也稱外邊距塌陷）。
相鄰塊元素垂直外邊距的合併
定位設置
1、元素定位 position
語法：語法：position：static /absolute/relative/fixed
取值：
1、static：預設值，無特殊定位，對象遵循HTML原則；
2、absolute：絕對定位，將對象從文檔流中拖離出來，使用left/right/top/bottom等屬性相對其最接近的一個並有定位設置的父元素進行絕對定位；如果不存在這樣的父對象，則依據body對象(瀏覽器)，而其層疊通過z-index屬性定義；
3、relative ：相對定位，對象不可層疊，將依據right，top，left，bottom（相對定位）等屬性在正常文檔流中偏移位置；
4、fixed：(固定定位)未支持，對象定位遵從絕對定位方式（absolute）；但是要遵守一些規範；
絕對定位和相對定位的區別：1、參照物不同，絕對定位的參照物是包含塊（父級），相對定位的參照物是元素本身位置；2、絕對定位將對象從文檔流中拖離出來因此不占據空間，相對定位不破壞正常的文檔流順序無論是否進行移動，元素仍然占據原來的空間。
包含塊的概念及作用
包含塊是絕對定位的基礎，包含塊就是為決定定位元素提供坐標，偏移和顯示範圍的參照物，即確定絕對定位的偏移起點和百分比 長度的參考；預設狀態下，body是一個大的包含塊。
定義元素為包含塊：給絕對定位元素的父元素添加聲明position：relative；
定位元素層疊屬性
z-index : auto |number； 檢索或設置對象的層疊順序。
auto：預設值。遵從其父對象 number:無單位的整數值。可為負數
1）較大 number 值的對象會覆蓋在較小 number 值的對象之上。如兩個絕對定位對象的此屬性具有同樣的
