在HTML中引入css方式總共有三種：javascript
- 行內樣式
- 內接樣式
- 外接樣式
3.1 連接式css
3.1 導入式html
css介紹
如今的互聯網前端分三層：前端
- HTML：超文本標記語言。從語義的角度描述頁面結構。
- CSS：層疊樣式表。從審美的角度負責頁面樣式。
- JS：JavaScript 。從交互的角度描述頁面行爲
CSS：Cascading Style Sheet，層疊樣式表。CSS的做用就是給HTML頁面標籤添加各類樣式，定義網頁的顯示效果。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提升了顯示功能。java
css的最新版本是css3，咱們目前學習的是css2.1css3
接下來咱們要講一下爲何要使用CSS。瀏覽器
HTML的缺陷：
- 不可以適應多種設備
- 要求瀏覽器必須智能化足夠龐大
- 數據和顯示沒有分開
- 功能不夠強大
CSS 優勢：
- 使數據和顯示分開
- 下降網絡流量
- 使整個網站視覺效果一致
- 使開發效率提升了（耦合性下降，一我的負責寫html，一我的負責寫css）
好比說，有一個樣式須要在一百個頁面上顯示，若是是html來實現，那要寫一百遍，如今有了css，只要寫一遍。如今，html只提供數據和一些控件，徹底交給css提供各類各樣的樣式。網絡
行內樣式
1 <div> 2 <p style="color: green">我是一個段落</p> 3 </div>
內接樣式
<style type="text/css"> /*寫咱們的css代碼*/ span{ color: yellow; } </style>
外接樣式-連接式
<link rel="stylesheet" href="./index.css">
外接樣式-導入式
<style type="text/css"> @import url('./index.css'); </style>
02-css的選擇器
css的選擇器：1.基本選擇器 2.高級選擇器前端工程師
基本選擇器包含：ide
1.標籤選擇器
標籤選擇器能夠選中全部的標籤元素，好比div，ul，li ，p等等，無論標籤藏的多深，都能選中，選中的是全部的，而不是某一個，因此說 "共性" 而不是 」特性「
body{ color:gray; font-size: 12px; } /*標籤選擇器*/ p{ color: red; font-size: 20px; } span{ color: yellow; }
2.id選擇器
# 選中id
同一個頁面中id不能重複。
任何的標籤均可以設置id
id命名規範 要以字母 能夠有數字 下劃線 - 大小寫嚴格區分 aa和AA是兩個不同的屬性值
1 #box{ 2 background:green; 3 } 4 5 #s1{ 6 color: red; 7 } 8 9 #s2{ 10 font-size: 30px; 11 }
3.類選擇器
3.1 所謂類 就是class . class與id很是類似 任何的標籤均可以加類可是類是能夠重複,屬於歸類的概念。
3.2 同一個標籤中能夠攜帶多個類，用空格隔開
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*選中body中相關標籤*/ /*#box{ color: red; }*/ .box{ color: red; } .active{ font-size: 30px; } .ttt{ background-color: green; text-decoration: underline; } .lv{ color: green; } .bg{ font-size: 30px } .u{ text-decoration: underline; } .lv:hover{ color: red; font-size: 32px; } .box:hover{ color: yellow; } div{ color: red; } .ppp{ color: purple; } </style> </head> <body> <!-- --> <!-- <p class="box active ttt" id="box" >猜猜個人顏色</p> --> <!-- <div class="box"> alex </div> --> <!-- 段落1:綠色 30px 段落2:綠色 下劃線 段落3: 30px 下劃線 --> <p class="lv bg">段落1</p> <p class="lv u">段落2</p> <p class="bg u">段落3</p> <div id="a"> <div id="b"> <div> <div> <div> <div> <div class="ppp"> 哈哈哈哈 </div> </div> </div> </div> </div> </div> </div> </body> </html>
類的使用，可以決定前端工程師的css水平到底有多牛逼？
答案：必定要有」公共類「的概念
1 .lv{ 2 color: green; 3 4 } 5 .big{ 6 font-size: 40px; 7 } 8 .line{ 9 text-decoration: underline; 10 }
1 <!-- 公共類 共有的屬性 --> 2 <div> 3 <p class="lv big">段落1</p> 4 <p class="lv line">段落2</p> 5 <p class="line big">段落3</p> 6 </div>
總結：
- 不要去試圖用一個類將咱們的頁面寫完。這個標籤要攜帶多個類，共同設置樣式
- 每一個類要儘量的小，有公共的概念，可以讓更多的標籤使用
玩好了類 就等於玩好了css中的1/2
到底使用id仍是用class？
答案：儘量的用class。除非一些特殊狀況能夠用id
緣由：id通常是用在js的。也就是說 js是經過id來獲取到標籤
03-高級選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /**/ /**{ padding: 0; margin: 0; }*/ html,body,div,p,ul,li,ol,dl,span,a{ padding: 0; margin: 0; } ul{ list-style: none; } /*重置樣式*/ #box,.wrap2{ width: 200px; height: 200px; background-color: red; } /*h3,p,a,span{ font-size: 14px; color: #999 }*/ p{ font-size: 20px; color: red; } /*交集選擇器*/ p.active{ background-color: rgb(248,115,0); } /*屬性選擇器*/ input[name='user']{ font-size: 20px; } input[type='password']{ font-size: 20px; } </style> </head> <body> <div id="box" class="wrap"></div> <div class="wrap2"></div> <h3>哈哈哈</h3> <p >哈哈哈1</p> <p class="active">哈哈哈2</p> <p >哈哈哈3</p> <a href="#">哈哈哈</a> <span>哈哈哈</span> <ul> <li>111</li> </ul> <input type="text" name="user" id="" class=""> <input type="password"> <!-- js --> <script type="text/javascript"> /* 1.找東西 */ var oDiv = document.getElementById('box'); // 2.事件 oDiv.onclick = function() { oDiv.style.backgroundColor = 'green'; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*後代選擇器的用法*/ /*.box .list{ color: red; } .box a{ color: yellow; } /*.box .list a img 絕對選中img標籤*/ /*.box img{ width: 200px; }*/ /*子代選擇器*/ div > p{ color: yellow; background-color: red; } </style> </head> <body> <!-- <ul class="box"> <li class="list"> <a href="#"> <img src="../day45/timg.jpg" alt="adadad"> </a> </li> <li> 李四 </li> <li>王二麻</li> </ul> --> <div> <p>哈哈哈</p> <ul> <li> <p>嘿嘿嘿</p> </li> </ul> </div> </body> </html>
高級選擇器分爲：後代選擇器、子代選擇器、並集選擇器、交集選擇器
後代選擇器
使用空格表示後代選擇器。顧名思義，父元素的後代（包括兒子，孫子，重孫子）
1 .container p{ 2 color: red; 3 } 4 .container .item p{ 5 color: yellow; 6 }
子代選擇器
使用>表示子代選擇器。好比div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。
1 .container>p{ 2 color: yellowgreen; 3 }
並集選擇器
多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標籤。一些共性的元素，可使用並集選擇器
1 /*並集選擇器*/ 2 h3,a{ 3 color: #008000; 4 text-decoration: none; 5 6 }
好比像百度首頁使用並集選擇器。
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
/*使用此並集選擇器選中頁面中全部的標籤，頁面佈局的時候會使用*/
交集選擇器
使用.表示交集選擇器。第一個標籤必須是標籤選擇器，第二個標籤必須是類選擇器 語法：div.active
好比有一個<h4 class='active'></h4>這樣的標籤。
那麼
1 h4{ 2 width: 100px; 3 font-size: 14px; 4 } 5 .active{ 6 color: red; 7 text-decoration: underline; 8 } 9 /* 交集選擇器 */ 10 h4.active{ 11 background: #00BFFF; 12 }
它表示二者選中以後元素共有的特性。