關(guān)于CSS的知識

ysl_unh 發(fā)布于2019-04-23 13:14 / 326人閱讀

摘要：高度默認(rèn)是沒有的，但是可以設(shè)置。居中設(shè)置上下間隔是水平居中。可以根據(jù)需求多帶帶的設(shè)置上下左右的外邊距。此屬性是用來聲明元素的顯示級別的。利用定位可以寫出關(guān)于任何網(wǎng)頁界面的簡單分塊，利用之前學(xué)習(xí)的相關(guān)知識可以實(shí)現(xiàn)部分功能。

這兩天在學(xué)習(xí)關(guān)于HTML的知識，今天學(xué)習(xí)到CSS的知識，將自己所收獲的知識點(diǎn)歸納一下：

首先，

　　CSS聲明學(xué)習(xí):
?? ??? ??? ??? ? 1、在head標(biāo)簽中使用style標(biāo)簽聲明：
?? ??? ??? ??? ? ?? ??? ?作用：此聲明一般聲明當(dāng)前網(wǎng)頁的公共樣式或者給某個(gè)標(biāo)簽的多帶帶樣式
?? ??? ??? ??? ? 2、在標(biāo)簽上使用style屬性進(jìn)行聲明：
?? ??? ??? ??? ? ?? ??? ?作用：此聲明會(huì)將css樣式直接作用于當(dāng)前標(biāo)簽。
?? ??? ??? ??? ? 3、在head標(biāo)簽中使用link標(biāo)簽引入外部聲明好的css文件
?? ??? ??? ??? ??? ??? ?作用：此聲明相當(dāng)于調(diào)用,解決了不同網(wǎng)頁間樣式重復(fù)使用的問題
?? ??? ??? ??? ??? ??? ??? ?一次聲明，隨處使用
?? ??? ??? ?問題：
?? ??? ??? ??? ?不同的聲明給同一個(gè)標(biāo)簽操作了同一個(gè)樣式，會(huì)使用誰的？
?? ??? ??? ??? ?如果CSS的聲明全部在head標(biāo)簽中，則遵循就近原則，誰離標(biāo)簽近，誰就會(huì)被顯示。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CSS選擇器，常用的四種需要我們掌握

　　css的選擇器學(xué)習(xí)：
?? ??? ??? ??? ?標(biāo)簽選擇器：
?? ??? ??? ??? ??? ?標(biāo)簽名{樣式名1：樣式值1;……}
?? ??? ??? ??? ??? ?作用：會(huì)將當(dāng)前網(wǎng)頁內(nèi)的所有該標(biāo)簽增加相同的樣式
?? ??? ??? ??? ?id選擇器:
?? ??? ??? ??? ??? ?#標(biāo)簽的id屬性值{樣式名1：樣式值1;……}
?? ??? ??? ??? ??? ?作用：給某個(gè)指定的標(biāo)簽添加指定的樣式
?? ??? ??? ??? ?類選擇器：
?? ??? ??? ??? ??? ?.類選擇器名{樣式名1：樣式值1;……}
?? ??? ??? ??? ??? ?作用：給不同的標(biāo)簽添加相同的樣式
?? ??? ??? ??? ?全部選擇選擇器
?? ??? ??? ??? ??? ?*{樣式名1：樣式值1;……}
?? ??? ??? ??? ??? ?作用：選擇所有的HTML標(biāo)簽，并添加相同的樣式

CSS相關(guān)樣式的使用：

　　　　width、height、text-align、backgroundcolor、backgroundimage、color、font-size、font-family..........

然后就是我們css最重要的盒子模型：

　　　　css的盒子模型學(xué)習(xí)：
?? ??? ??? ??? ?div標(biāo)簽：
?? ??? ??? ??? ??? ?塊級標(biāo)簽，主要是用來進(jìn)行網(wǎng)頁布局的，會(huì)將其中的子元素內(nèi)容作為一個(gè)獨(dú)立的整體存在。
?? ??? ??? ??? ??? ?特點(diǎn)：
?? ??? ??? ??? ??? ??? ?默認(rèn)寬度是頁面的寬度，但是可以設(shè)置。
?? ??? ??? ??? ??? ??? ?高度默認(rèn)是沒有的，但是可以設(shè)置。(可以頂開)
?? ??? ??? ??? ??? ??? ?如果子元素設(shè)置了百分比的高或者寬，占據(jù)的是div的百分比，不是頁面的。
?? ??? ??? ??? ?盒子模型：
?? ??? ??? ??? ??? ?外邊距:margin
?? ??? ??? ??? ??? ??? ?作用：用來設(shè)置元素和元素之間的間隔。
?? ??? ??? ??? ??? ??? ?居中設(shè)置:margin:0px auto;上下間隔是0px,水平居中。
?? ??? ??? ??? ??? ??? ?可以根據(jù)需求多帶帶的設(shè)置上下左右的外邊距。
?? ??? ??? ??? ??? ?邊框：border
?? ??? ??? ??? ??? ??? ?作用：用來設(shè)置元素的邊框大小
?? ??? ??? ??? ??? ??? ???? 可以多帶帶設(shè)置上下左右
?? ??? ??? ??? ??? ?內(nèi)邊距：padding
?? ??? ??? ??? ??? ??? ?作用：設(shè)置內(nèi)容和邊框之間的距離
?? ??? ??? ??? ??? ??? ?注意：內(nèi)邊距不會(huì)改變內(nèi)容區(qū)域的大小
?? ??? ??? ??? ??? ??? ?可以多帶帶的設(shè)置上下左右的內(nèi)邊距
?? ??? ??? ??? ??? ?內(nèi)容區(qū)域：
?? ??? ??? ??? ??? ??? ?作用：改變內(nèi)容區(qū)域的大小。
?? ??? ??? ??? ??? ??? ?設(shè)置寬和高即可改變內(nèi)容區(qū)域的大小。

利用盒子模型我們可以實(shí)現(xiàn)簡單的界面分塊：

簡單的代碼效果如下（附代碼）：

代碼如下：

 1 <html>
 2     <head>
 3         <title>盒子模型的布局學(xué)習(xí)title>
 4         <meta charset="UTF-8"/>
 5         <style type="text/css">
 6             div{
 7                 width: 300px;
 8                 height: 300px;
 9             }
10             /*設(shè)置首部和尾部的長度范圍*/
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>

還有就是我所學(xué)的CSS的定位：

　css的定位學(xué)習(xí)：
?? ??? ??? ??? ?position
?? ??? ??? ??? ??? ?相對定位:relative
?? ??? ??? ??? ??? ??? ?作用：相對元素原有位置移動(dòng)指定的距離(相對的自己的原有位置)
?? ??? ??? ??? ??? ??? ??? ?可以使用top,left,right,bottom來進(jìn)行設(shè)置。
?? ??? ??? ??? ??? ??? ?注意：
?? ??? ??? ??? ??? ??? ??? ?其他元素的位置是不改變的。
?? ??? ??? ??? ??? ?絕對定位:absolute
?? ??? ??? ??? ??? ??? ?作用：可以使用元素參照界面或者相對父元素來進(jìn)行移動(dòng) ?? ?
?? ??? ??? ??? ??? ??? ?注意：
?? ??? ??? ??? ??? ??? ??? ?如果父級元素成為參照元素，必須使用相對定位屬性
?? ??? ??? ??? ??? ??? ??? ?默認(rèn)情況下是以界面為基準(zhǔn)進(jìn)行移動(dòng)的。
?? ??? ??? ??? ??? ?固定定位:fixed
?? ??? ??? ??? ??? ??? ?作用：將元素固定現(xiàn)在頁面的指定位置，不會(huì)隨著滾動(dòng)條的移動(dòng)而改變位置。
?? ??? ??? ??? ??? ?以上定位都可以使用top,left,right,bottom來進(jìn)行移動(dòng)。
?? ??? ??? ??? ?z-index:此屬性是用來聲明元素的顯示級別的。

?利用CSS定位可以寫出關(guān)于任何網(wǎng)頁界面的簡單分塊，利用之前學(xué)習(xí)的html相關(guān)知識可以實(shí)現(xiàn)部分功能。

貼出模擬百度網(wǎng)頁代碼：

 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="">hao123a>li>
13                 <li><a href="">地圖a>li>
14                 <li><a href="">視頻a>li>
15                 <li><a href="">貼吧a>li>
16                 <li><a href="">學(xué)術(shù)a>li>
17                 <li><a href="">登錄a>li>
18                 <li><a href="">設(shè)置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;}