css一些簡單的例子
阿新 • • 發佈：2017-11-09
加載 加載順序 http purple 20px adding expire sheet 傳輸協議 
1.http協議
1 一：HTTP協議：hypertext transport protocol(超文本傳輸協議) 2 特點： 3 1.請求與響應 4 2.無狀態的協議 5 請求協議： 6 請求首行： 7 請求頭信息： 8 Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 9 Accept-Encoding:gzip, deflate, brView Code10 Accept-Language:zh-CN,zh;q=0.9 11 Connection:keep-alive 12 Cookie:BAIDUID=47A6DD50BC3D91236FEE1906BD2DE0B6:FG=1; BIDUPSID=47A6DD50BC3D91236FEE1906BD2DE0B6; PSTM=1510046493; ispeed_lsm=10; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598 13 Host:www.baidu.com14 Upgrade-Insecure-Requests:1 15 User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36 16 空行： 17 請求體： 18 --如果是get方式提交，數據是存放在UTL後面；而post是放在請求體中。 19 響應： 20 Bdpagetype:1 21 Bdqid:0x8f6422cd00053969 22Bduserid:0 23 Cache-Control:private 24 Connection:Keep-Alive 25 Content-Encoding:gzip 26 Content-Type:text/html; charset=utf-8 27 Cxy_all:baidu+10365439d71d1527700dadaf75cc64b2 28 Date:Wed, 08 Nov 2017 10:05:53 GMT 29 Expires:Wed, 08 Nov 2017 10:05:32 GMT 30 Server:BWS/1.1 31 Set-Cookie:BDSVRTM=0; path=/ 32 Set-Cookie:BD_HOME=0; path=/ 33 Set-Cookie:H_PS_PSSID=1424_24866_24558_21107_24879_22159; path=/; domain=.baidu.com 34 Strict-Transport-Security:max-age=172800 35 Transfer-Encoding:chunked 36 Vary:Accept-Encoding 37 X-Powered-By:HPHP 38 X-Ua-Compatible:IE=Edge,chrome=1
2.css選擇器（標簽名，id,類，屬性，偽類）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css</title> 6 7 <style> 8 #div2{ 9 color:red; 10 background:gray 11 } 12 #div1{ 13 color:green; 14 background:blue 15 } 16 17 </style> 18 <!--註意這裏必須加上rel=‘stylesheet‘，外部文件才能生效，告訴瀏覽器是層疊樣式表--> 19 <!--在css選擇器中有一個加載順序，簡單說就是就近原則。作用域越小，優先級越高--> 20 <link type="text/css" rel="stylesheet" href="mycss.css" /> 21 </head> 22 <body> 23 <div id="div2">hello world</div> 24 <div id="div1">nihao</div> 25 <div id="div3">hellllll</div> 26 </body> 27 </html>View Code
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css選擇器</title> 6 <!--四種選擇器： 7 1.通用選擇器 8 2.標簽名選擇器 9 3.id選擇器（唯一值） 10 4.class類選擇器(可以有多個，這多個成為一類) 11 5.基本組合選擇器比如：#outer .c1{}---後代選擇器 12 #outer,.c1{}---並列選擇器 13 #outer>.c1>.c2{}---子代選擇器 14 #outer+.c1{}----相鄰標簽選擇器（必須是緊挨著才有用） 15 6.屬性選擇器： 16 --> 17 <style> 18 *{ 19 font-size:45px; 20 } 21 p{ 22 background-color:yellow; 23 } 24 div{ 25 color:green; 26 } 27 #p1{ 28 color:red; 29 } 30 .c1{ 31 color:gray; 32 background-color:#8ABCD8 33 } 34 </style> 35 </head> 36 <body> 37 <p >hello</p> 38 <div >hello div hello span</div> 39 <p id="p1">你好</p> 40 <div class="c1">我子啊</div> 41 <div class="c1" >你們</div> 42 </body> 43 </html>View Code
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>偽類選擇器</title> 6 7 <style > 8 a:link{ 9 color:red; 10 } 11 a:hover{ 12 color:yellow; 13 } 14 a:visited{ 15 color:purple; 16 } 17 a:active{ 18 color:green; 19 } 20 </style> 21 </head> 22 <body> 23 <a href="https://www.baidu.com">百度</a> 24 </body> 25 </html>View Code
3.外邊框和內邊距
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>內外邊距</title> 6 7 <style> 8 body{ 9 border:dashed 5px red; 10 11 } 12 .div1{ 13 border:dashed 2px black; 14 height:200px; 15 width:30%; 16 background-color:purple; 17 margin:10px; 18 padding:10px; 19 } 20 .div2{ 21 border:dashed 2px black; 22 height:200px; 23 width:20%; 24 background-color:green; 25 margin:20px; 26 padding:20px 27 } 28 .div3{ 29 border:dashed 2px black; 30 height:300px; 31 width:20%; 32 background-color:blue; 33 margin:30px; 34 padding:30px 35 } 36 </style> 37 </head> 38 <body> 39 <!--在css中一切都是盒子模型--> 40 <div class="div1">div1</div> 41 <div class="div2">div2</div> 42 <div class="div3">div3</div> 43 </body> 44 </html>View Code
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>練習</title> 6 <style> 7 body{ 8 margin:0px; 9 border:solid 2px 10 } 11 .div1{ 12 height:300px; 13 width:300px; 14 background-color:green; 15 border:1px solid black; 16 padding:20px; 17 } 18 .div2{ 19 height:100px; 20 width:100px; 21 background-color:red; 22 margin:100px 23 } 24 </style> 25 </head> 26 <body> 27 <!--練習：300px*300px的盒子裝著100px*100px的盒子，通過margin和padding設置小盒子移動到大盒子的中間--> 28 29 <div class="div1">11 30 <div class="div2"> 31 32 </div> 33 </div> 34 35 </body> 36 </html>View Code
css一些簡單的例子