- CSS語法格式
-
CSS選擇器
基本選擇器
(1)""選擇器：通配符
將匹配所有的ＨＴＭＬ標記，所有的標記都會改變的
語法：＊｛color:red;｝
注意：盡量少用虏肾，因為ＩＥ６不支持
（２）標簽選擇器（在一個ＨＴＭＬ要變樣式的情況下）
描述：將匹配指定的html標記
語法：h1{color:red;}
注意：選擇器的與ＨＴＭＬ的名稱一樣瞎访，但不能加尖括號
（３）class選擇器（類選擇器）（兩個ＨＴＭＬ標記要變成同一樣式的情況下赂弓，是使用頻率最高的）
- 描述：給一類ＨＴＭＬ標記加樣式胚股，這里所指的”一類“是：每個ＨＴＭＬ標記都會有一個class屬性纳决，且class的屬性一樣.class是 公共屬性猬腰， 际起，每個ｈｔｍｌ都有滓鸠。
- 類選擇器的名稱雁乡，必須以"."開頭，后跟HTML標記的class屬性的值糜俗。例如：.box{color:red}
- HTML標記的class屬性的值踱稍，不能以數字開頭。
id選擇器
描述：給指定id的元素添加樣式
注意：網頁中ＨＴＮＬ標記的id屬性的值悠抹，必須是唯一的珠月。
每一個ＨＴＭＬ標記都有一個id的公共屬性
注意：id屬性一般是給js用的，不是用來夾樣式的楔敌。Class屬性只能給CSS用啤挎，不能給JS用的,class屬性加樣式，id屬性加動畫-
id選擇器的名稱卵凑，必須以"#"開頭庆聘，后跟html標記的id屬性的值胜臊。
Paste_Image.png 組合選擇器
（１）多元素選擇器給多個元素加同一樣式，多個選擇器之間用逗號","隔開
舉例：h1,div,body{color:red;}
主要是因為網頁中有兩個＜ｐ＞標記伙判，所有使用了一個class做區(qū)別象对。
（２）后代元素選擇器（門戶網站用的多，最常用）
描述：給某個標簽的后代元素加樣式
舉例：div .title{color:red:}
想讓＜h1＞加背景色
另外一種
想讓＜ｈ１＞變黃色＜ｐ＞變棕色
代碼的效果如下
３ 子元素選擇器
描述：給某個元素的子元素添加樣式
舉例：div>h1.title{color:red;}
代碼效果如下：
Css尺寸屬性
width：元素屬性宴抚。一定要PX為單位
height:元素高度
CSS字體屬性
- font-size：字體大小
- font-family:字體
- font-syle：斜體勒魔，取值：italic;
- font-weight:粗體，取值：bold;
CSS文本屬性
- color：文本顏色
- text-decoration:文本修飾線:none(無)菇曲， underline(下劃線)冠绢，overline(上劃線) ，line-through(刪除線)
- text-align
- line-height：行高羊娃，可以固定值唐全，也可以百分比
- text-indent：首行縮進，如： text-indent：28PX
- letter-spacing:字間距
注意：1蕊玷、<div>是塊元素邮利，它不能裝在行內元素中，所以在行內元素內加用<span>垃帅。例如延届，<div>是夾在一個段落中，而<span>是在段落中贸诚，就是要對幾個字不足一段落加樣式方庭。
2、寫選擇器的時候要一層一層寫酱固，方便以后修改械念，快速找到所選取區(qū)域。
3运悲、class是為了讓相同的HTML的標記區(qū)分開來龄减。意思是說，只要同一級有兩個相同（或者多個）HTML（如div,span,h1,p標記）班眯，都應該用class重新命名希停。
4、子代選擇器：只對應用對象的直接相應子節(jié)點有效署隘。
后代選擇器：對應的對象內的所有相應子節(jié)點都有效宠能。（兒子div1，孫子div2磁餐，重孫div3）如：div1 div2{.}违崇，則，孫子，重孫都會變樣式亦歉。div1>div2(只是孫子變恤浪，重孫不變)
。肴楷。水由。。赛蔫。砂客。
。呵恢。鞠值。。渗钉。彤恶。
偽類選擇器（用的比較多）：給超鏈接加樣式（鏈接的不同狀態(tài)加樣式）
一個超鏈接，有四個狀態(tài)
（1）正常狀態(tài)(:link)：鼠標放上之前鏈接的樣式
（2）放上狀態(tài)(:hover)：鼠標放在連接上的樣式
（3）激活狀態(tài)(active) ：按住鼠標左鍵不松開的樣式鳄橘，這個狀態(tài)一般不用
（4）訪問過的狀態(tài)(visited)：按下鼠標左鍵声离，并彈起，這時的樣式效果瘫怜。在平常工作中會使用以下寫法术徊，來給鏈接加不同樣式：
a:link,a:visited{color :#444,text-decoration:none}//"將正常狀態(tài)和訪問過的狀態(tài)"合二為一。
a:hover{color:#990000;text-decoration:underline} //“”鼠標放上“”單做一個效果鲸湃。
效果如下
赠涮。
。
暗挑。
CSS列表屬性
笋除。
效果如下。炸裆。株憾。。晒衩。。墙歪。
听系。
。
CSS邊框屬性：每個元素都可以加邊框線
(1)border-left:左邊框線虹菲。
語法格式：border-left:粗細靠胜，線型，線的顏色
舉例：border-left:5px dashed red;
線型：none(無線),solid(實線),dashed(虛線),dotted(點狀線)
(2)border-right:右邊框線
(3)border-top:上邊框線
注意：行內元素沒有<height>,<width>屬性，塊元素才有浪漠。
.
效果如下
CSS內邊距屬性：邊框線到內容的距離
注意：平常我們所說的width和height屬性陕习，他們指內容的寬度和高度，不含內址愿、外邊距该镣、邊框線。
(1)Padding-left:左內填充距離响谓，左邊線到內容間的距離
(2)Padding-right:右內填充距離损合，右邊線到內容間的距離
(3)Padding-top:上內填充距離，上邊線到內容的距離
(4)Padding-bottom:下內填充距離娘纷，下邊線到內容的距離嫁审。
(5)縮寫形式：Padding:10px//表示四個邊的內填充都為10
Padding:10px 20px//上下內填充為10，左右內填充為20
Padding：5px 10px 20px//上內填充為5赖晶，左右為10律适，下為20
padding：5px,10px,15px,20px//上為5，右為10遏插，下為15捂贿，左為20（順時針排序）
效果如下：
.
.
CSS外邊距屬性：邊線往外的距離
概念
效果如下
- 我們可以把網頁中的每個元素，都可以看成是一個"盒子"
盒子有哪些特征：內容的寬度和高度涩堤，邊框線眷蜓，內填充，外邊距胎围。
吁系。
。
CSS背景屬性
background-color：背景顏色
background-image:背景圖片 如：background-image:url(image/bg.gif)
background-repeat:背景平鋪方式白魂，取值no-repeat(不平鋪),repeat-x(水平方向),repeat-y(垂直方向)
background-position:背景定位汽纤。background-position:left,center,right,top,center,bottom.
固定值定位：background-position:50px 50px/背景距離容器左邊50px,從起頂端50px。
用百分比表示：background-position:50% 50%//水平居中福荸，垂直居中
- 簡寫方式：
background:背景色 背景圖 平鋪方式 定位方式
舉例：background：#ccc url(imgages/bg.gif) no-repeat center;
綜合案例
效果如下：
套路
- /全局CSS設置/
(1)去除所有標記的內外填充蕴坪。padding=0,margin=0(div和span不用)
(2)項目符號ol,ul去掉符號：list-style:none
(3)全局鏈接：a:link,a:visited{color:blue;text-decoration:none;清除超鏈接的默認下劃線}
a:hover{color:red;}
(4)body{font-size:12px;color:#444，background-color:#ccc/灰色敬锐；是指body中的普通文字背传，不加鏈接的文字的大小和顏色//是指整個body網頁中的背景色/
大的div模塊
div{width:600px;
margin:40px auto;/div在網頁中居中顯示/
background-color:#fff; /白色，是指DIV大容器的背景色/}
下一級的div台夺，一般是h1.
h1{padding:10px,0,10px/上下填充10pX,左右不填充径玖，因為要標題居中/
text-align/居中/}
下一級的div，加入為p
p{line-height:150%颤介，/原來行高的1.5倍/
text-indent:36px;/首行縮進/
padding:14px 0;}
例如
效果如下
梳星；赞赖；CSS浮動與清除
Float:讓元素浮動，取值：left,right
clear:清除浮動冤灾，取值left(清除左浮動)前域、right(清除右浮動、both(同時清除)
-
1CSS浮動
浮動的元素韵吨，將向左或向右浮動匿垄，浮動到包圍元素的邊上，或上一個浮動元素的邊上為止学赛。
浮動的元素年堆，不再占空間了，浮動的元素的層級要高于普通元素盏浇。
浮動的元素变丧，一定是塊元素，無論他以前是什么是塊元素還是浮動元素
如果浮動的元素沒有指定寬度的話绢掰，浮動后它盡可能的變窄痒蓬。因此，浮動元素要定寬和高
一行的多個元素滴劲，要浮動一起浮動攻晒。 - 浮動的功能：可以實現多個塊元素并列排版
相當于三個DIV飛起來了，打的DIV沒有東西了
-
如何讓包圍元素包圍浮動元素班挖？
你就需要在浮動元素的下邊鲁捏，使用清除浮動元素
效果
- 2、CSS清除浮動
- CSS清楚浮動的功能（1）萧芙、可以使包圍元素從“”視覺上“”包住浮動元素给梅。在只有浮動元素中的情況下（2）清除之下的其他元素將恢復默認排版。有浮動元素和普通元素的情況下双揪，不清除浮動會影響普通元素的排版动羽。
- 有浮動就有清除
- 如果包圍元素指定了高度，那么可以不適用清除
效果如下
CSS繼承性
- CSS屬性繼承：外層元素的樣式最終會被內層元素繼承渔期。多個外層元素的樣式运吓，最終都會疊加到內層元素中。
- css文本屬性都能繼承：color疯趟，font-size拘哨，font-family,font-style,font-weight
text-align,text-decoration,text-indent,letter-spanning,line-height
提示：<body>中的CSS屬性，會被所有的子元素繼承信峻。
CSS的優(yōu)先級
（1）單個選擇器的優(yōu)先級
行內樣式>id選擇器>class選擇器>標簽選擇器
（2）
宅静。
。
站欺。
姨夹。
。
矾策。
效果如下：
2磷账、相對定位，position:relative;
- 相對定位贾虽，是相對于“原來的自己”進行定位逃糟。
- 相對定位，依然占空間蓬豁，層級高于普通元素绰咽。
- 如果不指定定位坐標的話，相對定位元素的位置原地不動地粪。
- 相對定位取募，原來是行內元素，定位也是行內元素蟆技；原來是塊元素玩敏，定位后也是塊元素。
提示：相對定位和絕對定位质礼，一般情況下是配合使用旺聚。
.
.
3、絕對定位position:absolute
（1）相對于祖先定位元素（相對定位眶蕉，絕對定位）砰粹，來進行定位的。
（2）絕對定位元素造挽，不占空間碱璃，層級要高于普通元素
（3）如果不指定坐標的話，絕對定位元素的位置原地不動刽宪。
（4）如果他的父元素沒有任何定位的話厘贼，再往上找定位元素。
實例
效果
圣拄。
嘴秸。
。
HTML引入CSS的方法
1庇谆、嵌入式
通過<style>標記岳掐，來引入CSS樣式。
語法格式：<style type="text/css"></style>
提示：<style>中的CSS樣式饭耳，只能給當前網頁來使用串述。
同一個網頁中，<style>標記可以用多次
2寞肖、外聯(lián)式
通過<link>標記纲酗，來引入一個外部的CSS文件（.css）衰腌，這樣的話，可以實現公共的CSS代碼被多個網頁共享觅赊。
<link rel="stylesheet" type="text/css" href="css/public.css"/>
右蕊。
。
3吮螺、行內式（主要用于JS控制元素的樣式饶囚，前面兩個主要用于前臺排版用）
每個HTML標記，都有一些公共的屬性：class,id,title,style
HTML標記中style屬性的值鸠补，與CSS中樣式一模一樣萝风。
提示：行內樣式中，CSS代碼不能寫的過多紫岩。
行內樣式中规惰，多個CSS屬性不能換行，需要一行寫完被因。
行內樣式優(yōu)先級是最高的
‘
’
CSS表格屬性
卿拴。
。
梨与。
盒子模型
我們可以把每一個html標記堕花，都看成是一個盒子
這個盒子有哪些特征：內容寬度或者高度、邊框線粥鞋、內填充缘挽、外邊距。
盒子的總寬度=內容的寬度+邊框寬度2+左填充2+左外邊距*2
注意：兩個盒子中間的距離是外邊距做成的呻粹，除此情況一般不用外邊距壕曼，大部分用內填充
上下外邊距合并問題（無法避免）
- 上下兩個塊元素，如果每個元素都指定了四個外邊距等浊，那么上下相鄰的那個外邊距會合并腮郊，取其中較大的外邊距。
‘
‘
排這張圖得到哪些啟發(fā)
1筹燕、一個class指定兩個類別轧飞。如contnet floatL和contengt floatR，這兩個模塊的.content下的CSS樣式一起用（豬樣可以省這部撒踪。）
針對兩個一模一樣的內容过咬，又需要float浮動。
2制妄、 圖中的1掸绞，2,3,4,5,6是利用背景圖片做的。背景圖片的高度就是<li>的行高耕捞。
3衔掸、圖片與段落文字間烫幕，如果圖片與整段文字要有距離，用padding具篇，如果只是第一行用text-indent.注意要設置段落的寬度纬霞，才能在圖片邊上，不然全在圖片下面驱显。
4、要想市文字在<li>中居上下的中間瞳抓，要用line-height:li的高度埃疫。
5、不是所有板塊中都用div孩哑，如本例中左右板塊沒用div栓霜，圖片與段落有的是img和p標記。
兼容性
（2）常用兼容性調試技巧
