這兩天在學習關於HTML的知識，今天學習到CSS的知識，將自己所收穫的知識點歸納一下： 首先， CSS聲明學習: 1、在head標簽中使用style標簽聲明： 作用：此聲明一般聲明當前網頁的公共樣式或者給某個標簽的單獨樣式 2、在標簽上使用style屬性進行聲明： 作用：此聲明會將css樣式直接作用 ...
這兩天在學習關於HTML的知識，今天學習到CSS的知識，將自己所收穫的知識點歸納一下：
首先，
CSS聲明學習:
1、在head標簽中使用style標簽聲明：
作用：此聲明一般聲明當前網頁的公共樣式或者給某個標簽的單獨樣式
2、在標簽上使用style屬性進行聲明：
作用：此聲明會將css樣式直接作用於當前標簽。
3、在head標簽中使用link標簽引入外部聲明好的css文件
作用：此聲明相當於調用,解決了不同網頁間樣式重覆使用的問題
一次聲明，隨處使用
問題：
不同的聲明給同一個標簽操作了同一個樣式，會使用誰的？
如果CSS的聲明全部在head標簽中，則遵循就近原則，誰離標簽近，誰就會被顯示。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
CSS選擇器，常用的四種需要我們掌握
css的選擇器學習：
標簽選擇器：
標簽名{樣式名1：樣式值1;……}
作用：會將當前網頁內的所有該標簽增加相同的樣式
id選擇器:
#標簽的id屬性值{樣式名1：樣式值1;……}
作用：給某個指定的標簽添加指定的樣式
類選擇器：
.類選擇器名{樣式名1：樣式值1;……}
作用：給不同的標簽添加相同的樣式
全部選擇選擇器
*{樣式名1：樣式值1;……}
作用：選擇所有的HTML標簽，並添加相同的樣式
CSS相關樣式的使用：
width、height、text-align、backgroundcolor、backgroundimage、color、font-size、font-family..........
然後就是我們css最重要的盒子模型：
css的盒子模型學習：
div標簽：
塊級標簽，主要是用來進行網頁佈局的，會將其中的子元素內容作為一個獨立的整體存在。
特點：
預設寬度是頁面的寬度，但是可以設置。
高度預設是沒有的，但是可以設置。(可以頂開)
如果子元素設置了百分比的高或者寬，占據的是div的百分比，不是頁面的。
盒子模型：
外邊距:margin
作用：用來設置元素和元素之間的間隔。
居中設置:margin:0px auto;上下間隔是0px,水平居中。
可以根據需求單獨的設置上下左右的外邊距。
邊框：border
作用：用來設置元素的邊框大小
可以單獨設置上下左右
內邊距：padding
作用：設置內容和邊框之間的距離
註意：內邊距不會改變內容區域的大小
可以單獨的設置上下左右的內邊距
內容區域：
作用：改變內容區域的大小。
設置寬和高即可改變內容區域的大小。
利用盒子模型我們可以實現簡單的界面分塊：
簡單的代碼效果如下（附代碼）：
代碼如下：
1 <html> 2 <head> 3 <title>盒子模型的佈局學習</title> 4 <meta charset="UTF-8"/> 5 <style type="text/css"> 6 div{ 7 width: 300px; 8 height: 300px; 9 } 10 /*設置首部和尾部的長度範圍*/ 11 #header,#footer{ 12 width: 624px; 13 margin: auto; 14 margin-top: 20px; 15 } 16 #div01{ 17 border: solid 1px orange; 18 float: left; 19 20 } 21 #div02{ 22 border: solid 1px #8A2BE2; 23 float: left; 24 margin-left: 20px; 25 } 26 #div03{ 27 border: solid 1px #DC143C; 28 float: left; 29 } 30 #div04{ 31 border: solid 1px #FF7F50; 32 float: left; 33 margin-left: 20px; 34 } 35 </style> 36 </head> 37 <body> 38 <div id="header"> 39 <div id="div01"> 40 我是div01 41 </div> 42 <div id="div02"> 43 我是div02 44 </div> 45 </div> 46 47 <div id="footer"> 48 <div id="div03"> 49 我是div03 50 </div> 51 <div id="div04"> 52 我是div04 53 </div> 54 </div> 55 </body> 56 </html>
還有就是我所學的CSS的定位：
css的定位學習：
position
相對定位:relative
作用：相對元素原有位置移動指定的距離(相對的自己的原有位置)
可以使用top,left,right,bottom來進行設置。
註意：
其他元素的位置是不改變的。
絕對定位:absolute
作用：可以使用元素參照界面或者相對父元素來進行移動
註意：
如果父級元素成為參照元素，必須使用相對定位屬性
預設情況下是以界面為基準進行移動的。
固定定位:fixed
作用：將元素固定現在頁面的指定位置，不會隨著滾動條的移動而改變位置。
以上定位都可以使用top,left,right,bottom來進行移動。
z-index:此屬性是用來聲明元素的顯示級別的。
利用CSS定位可以寫出關於任何網頁界面的簡單分塊，利用之前學習的html相關知識可以實現部分功能。
貼出模擬百度網頁代碼：
1 /*此為html代碼*/ 2 <html> 3 <head> 4 <title>百度一下，你就知道了</title> 5 <meta charset="UTF-8"/> 6 <link rel="stylesheet" type="text/css" href="css/baidu.css"/> 7 </head> 8 <body> 9 <div id="header"> 10 <ul id="header_nav"> 11 <li><a href="">新聞</a></li> 12 <li><a href="">hao123</a></li> 13 <li><a href="">地圖</a></li> 14 <li><a href="">視頻</a></li> 15 <li><a href="">貼吧</a></li> 16 <li><a href="">學術</a></li> 17 <li><a href="">登錄</a></li> 18 <li><a href="">設置</a></li> 19 </ul> 20 </div> 21 <div id="main"> 22 <img id="img_logo" src="img/bd_logo1.png" width="270px" height="129"/> 23 <br /> 24 <input type="text" name="" id="" value="" /> 25 <input type="submit" name="" id="" value="百度一下" /> 26 </div> 27 <div id="footer"> 28 <img id="img_logo2" src="img/buttom.png" width=""/> 29 </div> 30 </body> 31 </html>
1 /*此為CSS代碼*/ 2 *{margin: 0px;padding: 0px;} 3 #header{width: 100%; height: 36px;/*background-color: #DC143C;*/} 4 #header_nav{position: absolute;right:66px; top: 14px;} 5 #header_nav li{float: left;list-style-type: none;margin-left: 10px;} 6 #header_nav li a{color: #333;font-weight: 700;line-height: 24px;margin-left: 20px;font-size: 13px; 7 text-decoration: underline;} 8 9 #main{width: 100%; height: 191.5px;/*background-color: #8A2BE2;*/text-align: center;margin-bottom: 171.5px;} 10 #img_logo{margin-bottom: 26.5px;} 11 input[type=text]{height:36px;width: 540px;border: solid 1px #4992FF;background-repeat: no-repeat;background-image: url(../img/camera.png);background-position-x: 500px;background-position-y: 3px;} 12 input[type=submit]{height:36px;width:100px;font-size=15px; color: white; border: solid 1px #2d78f4;background-color: #3385ff;letter-spacing: 1px;position: relative;right: 5px;} 13 14 #footer{width: 100%;text-align: center;} 15 #header li a:hover{color: blue;}
利用定位知識我們可以把任何網頁分塊，知道內部結構，要想具體的事項所有的功能，自己還要繼續學習。
加油！！！！！！！
