前言：
1.HTML5的發(fā)展非常迅速灯节，可以說已經是前端開發(fā)人員的標配汁掠，在電商類型的APP中更是運用廣泛，這個系列的文章是本人自己整理魂务，盡量將開發(fā)中不常用到的剔除曼验，將經常使用的拿出來，使需要的朋友能夠真正快速入門粘姜，如果有哪些不清楚的地方或者錯誤鬓照，歡迎聯(lián)系我
2.更新時間沒有規(guī)律，一般會在3天左右更新一篇（全系列預計會有12篇）因為需要工作孤紧，所以只能在閑暇之余整理豺裆，如果有喜歡的朋友可以關注我，將會第一時間獲得更新信息
3.如果有需要Reactive Native + H5跨平臺開發(fā)的朋友号显，可以聯(lián)系我臭猜，在本系列結束之前會根據需求的程度決定是否繼續(xù)
4.全系列文章最后盡可能地附上綜合實例，幫助朋友更好地理解
5.此系列會涉及到HTML押蚤、CSS蔑歌、JavaScript等
CSS簡介
CSS(Cascading Style Sheets)：層疊樣式表，它用來控制HTML標簽的樣式揽碘，在美化網頁中起到非常重要的作用
-
CSS的編寫格式是鍵值對的形式
- 格式：屬性名 : 屬性值
color:blue; background-color:green; font-size:15px; - 格式：屬性名 : 屬性值
CSS的3種使用形式
-
行內樣式（內聯(lián)樣式）：在標簽的style屬性中書寫（標簽都有style屬性）
<!-- 行內樣式 --> <!-- 字體大小為25,顏色綠色,背景色亮灰 --> <div style="font-size: 25px; color: green; background-color: lightgrey;">div容器</div> <!-- 字體顏色藍色,邊框寬度為1且為黑色 --> <h2 style="color: blue;border: 1px double black;">Cascading Style Sheets</h2>
效果：
行內樣式.png
-
業(yè)內樣式：在本網頁的style標簽中書寫（因為body標簽用來描述內容和結構次屠，其它東西都放到head中,所以將業(yè)內樣式寫在head標簽內）
<head> <meta charset="UTF-8"> <title>CSS頁內樣式</title> <!-- 頁內樣式 --> <style> /* 標簽選擇器 */ /* div文字顏色為藍色,字體大小25,邊框為紅色單邊框 */ div{ color: blue; font-size: 25px; border:2px solid red; } /* p文字顏色為橘色,字體17,邊框為紫色雙邊框寬度為5 */ p{ color: orange; font-size: 17px; border:5px double blueviolet; } </style> </head> <body> <div>div容器div容器div容器div容器div容器</div> <div>div容器div容器div容器div容器div容器</div> <div>div容器div容器div容器div容器div容器</div> <div>div容器div容器div容器div容器div容器</div> <div>div容器div容器div容器div容器div容器</div> <p>段落段落段落段落段落段落段落段落</p> <p>段落段落段落段落段落段落段落段落</p> <p>段落段落段落段落段落段落段落段落</p> <p>段落段落段落段落段落段落段落段落</p> <p>段落段落段落段落段落段落段落段落</p> </body>
效果：
業(yè)內樣式.png
-
外部樣式：在單獨的CSS文件中書寫，然后在網頁中用link標簽進行引用
- 先新建一個css文件钾菊，在css文件內書寫我們需要的樣式
``` div{ color: blue; font-size: 25px; border:2px solid red; } p{ color: orange; font-size: 17px; border:5px double blueviolet; } ``` - 然后引入外部樣式 <br><br> ``` <head> <meta charset="UTF-8"> <title>CSS外部樣式</title> <!-- 引入外部樣式 --> <link rel="stylesheet" href="css/index.css"> </head> <body> <div>div容器div容器div容器div容器div容器</div> <div>div容器div容器div容器div容器div容器</div> <div>div容器div容器div容器div容器div容器</div> <div>div容器div容器div容器div容器div容器</div> <div>div容器div容器div容器div容器div容器</div> <p>段落段落段落段落段落段落段落段落</p> <p>段落段落段落段落段落段落段落段落</p> <p>段落段落段落段落段落段落段落段落</p> <p>段落段落段落段落段落段落段落段落</p> <p>段落段落段落段落段落段落段落段落</p> </body> ```
效果：
外部樣式.png
注意：開發(fā)中帅矗，一般都使用外部樣式,結構比較清晰
CSS常用選擇器
屬性：通過屬性的復雜疊加，才能做出漂亮的網頁
-
選擇器：通過選擇器找到對應的標簽設置樣式
- 標簽選擇器：根據標簽名找到對應的標簽
<style> /* 標簽選擇器 */ /* div文字顏色為藍色,字體大小25,邊框為紅色單邊框 */ div{ color: blue; font-size: 25px; border:2px solid red; } </style>使用場景：一次性設置對應標簽的時候
類選擇器
/* 類選擇器 */ .test1{ color: red; font-size: 30px; border:5px double green; }- 使用
<div class="test1">類選擇器</div> <p class="test1">類選擇器</p>使用場景：讓需要它的標簽主動去使用它
id選擇器
/* ID選擇器 */ #main{ font-size: 50px; }- 使用：
<div id="main">id選擇器</div>使用場景：全局只讓一個標簽占有（獨一無二）
并列選擇器（可以理解為或）
/* 并列選擇器(或) */ #main, .test1{ border:10px solid orange; }使用場景：只要有其中一個選擇器就可以使用選擇器內的樣式
復合選擇器（可以理解為且）
/* 復合選擇器(且,前面不可以是ID選擇器) */ p.test1{ color: yellow; }使用場景：同時擁有2個選擇器的標簽便可以使用選擇器內的樣式
后代選擇器
/* 后代選擇器 前面為父標簽煞烫，后面為子標簽 */ div a{ color: darkgray; }使用場景：設置父標簽內的所有子標簽（包括子標簽內的相同標簽的子標簽）的時候
直接后代選擇器
/* 直接后代選擇器 */ div > p{ font-size: 90px; }使用場景：設置父標簽的子標簽的時候
偽類
input:focus{ /* 獲得焦點 */ }使用場景：當標簽激活焦點的時候觸發(fā)
偽元素：和偽類使用相似
div.test1:first-letter{ } - 標簽選擇器：根據標簽名找到對應的標簽
CSS不常用選擇器
- 相鄰兄弟選擇器：與標簽上下相鄰的同一級標簽
div + p{
}
注意條件：相鄰浑此，且同一級
- 屬性選擇器：可以將其看成數組（一維/二維數組）
div[name]{
}
div[name="Tom"]{
}
div[name][age]{
}
- 通配符：設置所有標簽
*{
}
選擇器的優(yōu)先級與權值的關系
- 相同級別的選擇器遵循：就近原則 > 疊加原則
- 不同類型的選擇器：選擇器的針對性越強，它的優(yōu)先級就越高滞详，這里涉及到權值的問題凛俱，先來看下面的表
| 選擇器類型 | 權值 |
|---|---|
| 通配選擇符 | 0 |
| 標簽選擇器 | 1 |
| 類選擇器 | 10 |
| 屬性選擇器 | 10 |
| 偽類 | 10 |
| 偽元素 | 1 |
| id選擇器 | 100 |
| important | 1000 |
- 原則：選擇器的權值累計越高紊馏，優(yōu)先級越高，如果權值相同蒲犬，后定義的優(yōu)先（就近原則）
- 優(yōu)先級排序：important > 內聯(lián) > id選擇器 > 類選擇器 > 標簽選擇器|偽類|屬性選擇 > 偽元素 > 通配符 > 繼承
HTML標簽類型
-
HTML有N多標簽朱监，根據顯示的類型，主要分為三大類
- 塊級標簽：獨占一行原叮，能隨時設置寬度和高度（如：div赫编、p、h1…h(huán)6奋隶、ul擂送、li）
<style> /* div標簽選擇器 */ div{ /*背景色*/ background-color: yellow; } </style> <body> <div>我是div容器</div> <div>我是div容器</div> <div>我是div容器</div> </body>效果：
塊級標簽.png- 行內標簽（內聯(lián)標簽）：多個行內標簽能同時顯示在一行，寬度高度取決于內容尺寸（如：span唯欣、a嘹吨、label）
<style> /* span標簽選擇器 */ span{ /*背景色*/ background-color: red; } </style> <body> <span>我是span容器</span> <span>我是span容器</span> <span>我是span容器</span> <span>我是span容器</span> </body>效果：
行內標簽.png- 行內-塊級標簽（內聯(lián)-塊級標簽）：多個行內-塊級標簽可顯示在同一行，能隨時設置寬度和高度（如：input境氢、button）
- 塊級標簽：獨占一行原叮，能隨時設置寬度和高度（如：div赫编、p、h1…h(huán)6奋隶、ul擂送、li）
![Uploading Snip20160614_7_103697.png . . .]
```
<style>
/* input標簽選擇器 */
input{
/*背景色*/
background-color: yellow;
}
</style>
<body>
<input type="text">
<input type="date">
<input type="text">
<input type="date">
</body>
```
效果：
行內-塊級標簽.png
修改標簽的顯示類型 —— display/visibility
在開發(fā)中蟀拷，我們經常需要將各種類型的標簽拼湊在一起，而如果按照上面標簽的類型來看萍聊，顯然塊級標簽后就沒辦法再添加其他標簽问芬，這樣也就大大降低了靈活性。這個時候我們就需要來看看`display屬性脐区，它們可以用來修改標簽的顯示類型愈诚，提高標簽之間拼湊時的靈活性
-
display屬性有4個值
- none：隱藏標簽（同時隱藏內容和占位，也可以說同時隱藏結構）
- block：讓標簽變?yōu)閴K級標簽
- inline：讓標簽變?yōu)樾袃葮撕?/li>
- inline-block：讓標簽變?yōu)樾袃?塊級標簽（內聯(lián)-塊級標簽）
div{ /*設置背景色*/ background-color: red; } /* 隱藏 */ .noneDiv{ display: none; /*設置背景色*/ background-color: yellow; } /* 塊級 */ .blockInput{ display: block; /*設置背景色*/ background-color:orange; } /* 行內 */ .inlineDiv{ display: inline; /*設置背景色*/ background-color: green; } /* 行內-塊級 */ .inline-blockDiv{ display: inline-block; /*設置背景色*/ background-color: gray; } </style> <body> <div>默認的div</div> <div class="noneDiv">隱藏div標簽</div> <div class="inlineDiv">變成行內標簽的div</div> <div class="inline-blockDiv">變成行內-塊級標簽的div</div><br><br> <!--默認的input--> <input type="text"> <input type="text"> <!--變成塊級標簽的input--> <input class="blockInput" type="text"> <input class="blockInput" type="text"> </body>效果：
display使用.png -
visibility屬性有4個值
- visible：顯示標簽（默認）
- hidden：隱藏標簽（只隱藏內容牛隅，但是依舊占位）
- collapse：這個屬性主要用在表格中炕柔，它可以刪除一行或一列，但不會影響表格的布局媒佣，而且被行或列占據的空間會留給其他內容匕累，如果用在其他標簽，則呈現hidden的效果
- inherit：規(guī)定應該從父標簽繼承visibility屬性的值
<style> div{ /*高*/ height:100px; /*背景色*/ background-color: yellow; } /* 隱藏 */ .hiddenDiv{ visibility: hidden; } </style> <body> <div>div</div> <div class="hiddenDiv">隱藏的div</div> <div>div</div> </body>效果：
visibility使用.png
CSS屬性分類
-
CSS有很多屬性默伍，如果根據繼承性劃分欢嘿，主要分為兩大類
- 可繼承屬性：父標簽的屬性值會傳遞給子標簽（一般是文字控制屬性）
- 所有標簽可繼承（visibility、 cursor）
- 繼承（letter-spacing也糊、word-spacing炼蹦、white-space、
line-height狸剃、color掐隐、font-family、font-size、font-style虑省、font-variant匿刮、font-weight、text-decoration探颈、text-transform熟丸、direction） - 塊級標簽可繼承（
text-indent、text-align） - 列表標簽可繼承（
list-style伪节、list-style-type光羞、list-style-position、list-style-image）
<style> /* 文字控制類 */ body{ color:red; font-size:25px; } </style>- 不可繼承屬性：父標簽的屬性值不會傳遞給子標簽（一般是區(qū)塊控制屬性）
<style> /* 區(qū)塊控制類 */ div{ color:red; font-size:25px; } </style> - 可繼承屬性：父標簽的屬性值會傳遞給子標簽（一般是文字控制屬性）
總結：一般如果是大小怀大、形狀之類的一般都不可繼承的
盒子模型
-
先來看看盒子里面的結構 —— 盒子由內容狞山、內邊距、邊框叉寂、外邊距構成
參考盒子模型.png -
標準的盒子模型標準是這樣的
標準盒子模型.png -
如果所有瀏覽器都遵循這樣的規(guī)則，那么就不會產生適配等問題总珠，但是偏偏有個頑皮的熊老人（這個攪屎棍→ →）搞了自己的模型標準
IE盒子模型.png -
也就是說網頁上的每一個標簽都是盒子屏鳍，每個盒子都有4個屬性
- content（內容）：盒子里面裝的東西（網頁中通常是指文字和圖片）
- height：設置元素高度
- max-height:設置元素最大高度
- max-width：設置元素的最大寬度
- width：設置元素寬度
- min-height：設置元素最小高度
- min-width：設置元素最小寬度
- padding（填充，內邊距）
- padding：在一個聲明中設置所有內邊距屬性
- padding-top:設置元素的上內邊距
- padding-right：設置元素的右內邊距
- padding-bottom：設置元素的下內邊距
- padding-lfet：設置元素的左內邊距
<style> div{ /*這邊直接使用復合屬性padding:屬性順序為上\右\下\左(順時針)如果只設置2個值,那么第一個值指上下,第二個值指左右*/ padding: 25px 20px; /*背景顏色*/ background-color: blue; } </style> <body> <div>div標簽div標簽</div> </body>效果：
內邊距使用.png- margin（外邊距）：讓盒子與盒子之間保留一定空隙
- margin：在一個聲明中設置所有外邊距屬性
- margin-top:設置元素的上外邊距
- margin-right：設置元素的外邊邊距
- margin-bottom：設置元素的下外邊距
- margin-lfet：設置元素的左外邊距
<style> div{ /*外邊距和內邊距相似*/ margin: 30px 40px; /*背景顏色*/ background-color: darkmagenta; } </style> <body> <div>div標簽div標簽</div> </body>效果：
外邊距使用.png- border（邊框）：盒子本身
- border是個復合屬性局服，屬性的順序是（border-width钓瞭，border-style，border-color）
- border是個復合屬性局服，屬性的順序是（border-width钓瞭，border-style，border-color）
<style> div{ /*邊框設置 寬21px 雙框 紅色*/ border: 20px double red; } </style> <body> <div>div標簽div標簽</div> </body>效果：
邊框設置.png - content（內容）：盒子里面裝的東西（網頁中通常是指文字和圖片）
CSS3新特性
- RGBA透明度：RGB(紅色R+綠色G+藍色B),RGBA則在其基礎上增加了Alpha通道淫奔，用來設置透明值
<style>
div{
/*設置寬高*/
width: 200px;
height: 50px;
}
.test1{
background-color: rgba(123,0,0,1.0);
}
.test2{
background-color: rgba(123,0,0,0.8);
}
.test3{
background-color: rgba(123,0,0,0.0);
}
.test4{
background-color: rgba(123,0,0,0.6);
}
.test5{
background-color: rgba(123,0,0,0.4);
}
.test6{
background-color: rgba(123,0,0,0.2);
}
</style>
<body>
<div class="test1">div1.0</div>
<div class="test2">div0.8</div>
<div class="test3">div0.0</div>
<div class="test4">div0.6</div>
<div class="test5">div0.4</div>
<div class="test6">div0.2</div>
</body>
效果：
CSS3.0透明度新特征.png
補充：既然有透明度山涡，那么就有不透明度（最簡單的蒙版效果）
<style>
div {
/*設置寬高*/
width: 200px;
height: 50px;
/*設置背景色*/
background-color: red;
/*設置不透明度*/
opacity:0.35;
}
</style>
<body>
<div>div1.0</div>
</body>
效果：
不透明度設置.png
-
塊陰影和圓角陰影：box-shadow text-shadow
值描述.png
<style>
div {
/*設置寬高*/
width: 200px;
height: 50px;
/*設置背景色*/
background-color: red;
/*設置外邊距*/
margin: 20px;
/*設置塊陰影
參數一:水平偏移
參數二:垂直偏移
參數三:模糊距離
參數四:陰影顏色
*/
box-shadow: 10px 10px 10px blue;
}
</style>
<body>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
</body>
效果：
塊陰影效果.png
- 圓角：border-radius
<style>
div {
/*設置寬高*/
width: 200px;
height: 50px;
/*設置背景色*/
background-color: red;
/*設置外邊距*/
margin: 20px;
}
.test1{
/*底部左邊*/
border-bottom-left-radius: 30px;
}
.test2{
/*頂部右邊*/
border-top-right-radius: 30px;
}
.test3{
/*底部右邊*/
border-bottom-right-radius: 30px;
}
.test4{
/*頂部左邊*/
border-top-left-radius: 30px;
}
.test5{
/*四個角*/
border-radius: 10px;
}
</style>
<body>
<div class="test1">div</div>
<div class="test2">div</div>
<div class="test3">div</div>
<div class="test4">div</div>
<div class="test5">div</div>
</body>
效果：
圓角的使用.png
- 邊框圖片：border-image(不常用，用到再說)
- 形變：transform: none | <transform-function>[<transform-fuction>]（后面結合實例唆迁，便于理解）
CSS布局
默認情況下鸭丛，所有網頁標簽都在標準流布局中（從上往下，從左往右唐责，相互依賴）
脫離標準流（就是固定在一個地方）鳞溉，脫離標準流主要的兩種方式有兩種
-
注意：標簽只要一浮動，它的類型就會被強制轉為行內塊級標簽
- float屬性：讓標簽浮動在父標簽的左邊和右邊（顯然不夠靈活）
- left：浮動在父標簽的最左邊
- right：浮動在父標簽的最右邊
<style> #main{ background-color: yellow; width: 350px; height: 200px; } .test1{ background-color: red; float: left; } .test2{ background-color: blue; float: right; } </style> <body> <div id="main"> <div class="test1">左</div> <div class="test2">右</div> </div> </body>效果：
float使用.png- position屬性：結合left鼠哥、right熟菲、top、bottom屬性就不一樣了（顯然這個比較厲害）
- 注意：他的位置是相對于瀏覽器窗口來決定的
position值描述.png
<style> #main{ background-color: yellow; width: 350px; height: 200px; } .test1{ background-color: red; position: absolute; top: 20px; left: 20px; } .test2{ background-color: blue; position: absolute; bottom: 20px; right: 20px; } </style> <body> <div id="main"> <div class="test1">左</div> <div class="test2">右</div> </div> </body>效果：
position使用.png - float屬性：讓標簽浮動在父標簽的左邊和右邊（顯然不夠靈活）
居中
-
水平居中
- 如果是行內朴恳、行內塊級標簽抄罕，設置text-align: center;
<style> #main{ background-color: yellow; width: 350px; height: 200px; /*設置內容水平居中(可繼承)*/ text-align: center; } span{ background-color: blue; } </style> <body> <div id="main"> <span>行內標簽</span> </div> </body>效果：
行內標簽水平居中.png- 如果是塊級標簽，則需設置 margin: 0 auto;
<style> #main{ background-color: yellow; width: 350px; height: 200px; /*設置內容水平居中(可繼承)*/ text-align: center; } .test1{ width: 200px; background-color: blue; text-align: center; margin-left: auto; margin-right: auto; /*或者*/ /*margin: 0 auto;*/ } </style> <body> <div id="main"> <div class="test1">塊級標簽</div> </div> </body>效果：
塊級標簽水平居中.png - 如果是行內朴恳、行內塊級標簽抄罕，設置text-align: center;
-
垂直居中
- 如果是行內于颖、行內塊級標簽呆贿，設置line-height:總高度;
<style> #main{ background-color: yellow; width: 350px; height: 200px; /*設置內容水平居中(可繼承)*/ text-align: center; } .test1{ width: 350px; height: 30px; background-color: blue; /*設置垂直居中,讓它等于父標簽的高度*/ line-height: 200px; } </style> <body> <div id="main"> <span class="test1">行內標簽</span> </div> </body>效果：
行內標簽垂直居中.png- 如果是塊級標簽，需要通過定位來做（一般不會將塊級標簽做垂直居中操作）
<style> #main{ background-color: yellow; width: 350px; height: 200px; /*設置內容水平居中(可繼承)*/ text-align: center; /*告訴父標簽使用絕對定位*/ position: relative; } .test1{ width: 200px; height: 30px; background-color: blue; /*重寫,設置內容居中*/ line-height: 30px; margin: 0 auto; /*設置相對路徑*/ position: absolute; top:50%; left:50%; /*平移使其與父標簽居中顯示*/ transform: translate(-50%, -50%); } </style> <body> <div id="main"> <span class="test1">行內標簽</span> </div> </body>效果：
塊級標簽垂直居中.png - 如果是行內于颖、行內塊級標簽呆贿，設置line-height:總高度;
昨晚的文章不完整恍飘，這個才是第二篇的完整版榨崩，對造成的不便感到抱歉谴垫，綜合實例單獨做一篇吧！
