關于CSS的知識

ysl_unh 發布于2019-04-23 13:14 / 328人閱讀

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

這兩天在學習關于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="">hao123a>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;}

利用定位知識我們可以把任何網頁分塊，知道內部結構，要想具體的事項所有的功能，自己還要繼續學習。

加油！！！！！！！

GPU云服務器云服務器關于網絡安全的知識關于網絡安全的小知識 HTML的知識關于樣式的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1625.html

關于Html+css階段學習總結

摘要：再之后，通過專業老師的指導，開始進行前端知識的全面及系統性的學習。而這篇文章便是對這次學習的一次階段性總結。的學習并不是太難，也可以說是很容易，但千里之行，這才剛剛開始，熟練的掌握，還需要不斷的練習。一、學習經歷進入大學不久，就加入了社團，從而對前端有了一個初步的了解，之后也做過一些學校的官網，積累了一些微小的經驗。到了大二的時候，學校開設了專門的html+css課程，從中也學到...

CoXie 2019-08-30 14:21 評論0 收藏0
關于Html+css階段學習總結

摘要：再之后，通過專業老師的指導，開始進行前端知識的全面及系統性的學習。而這篇文章便是對這次學習的一次階段性總結。的學習并不是太難，也可以說是很容易，但千里之行，這才剛剛開始，熟練的掌握，還需要不斷的練習。一、學習經歷進入大學不久，就加入了社團，從而對前端有了一個初步的了解，之后也做過一些學校的官網，積累了一些微小的經驗。到了大二的時候，學校開設了專門的html+css課程，從中也學到...

Rindia 2019-08-02 10:06 評論0 收藏0
關于CSS你應該知道的基礎知識 - 選擇器篇

摘要：但只使用框架提供的默認樣式，不能滿足全部需求，還是要知道一些基礎知識，才能做更好的使用框架。最近剛好有時間學習一下的基礎知識，寫一系列文章記錄下來。選擇是后面相鄰的元素，所有選中的元素都是的直接子元素。作為一個長時間來做后端服務的程序員，一直對如何展現漂亮的UI感到苦惱。好在現在很多流行的CSS框架，如Bootstarp, Bluma, Foundation, Uikit 可以幫助后...

LdhAndroid 2019-08-30 14:23 評論0 收藏0
關于CSS你應該知道的基礎知識 - 樣式應用篇

摘要：我是紅色這種引用代碼的方式在一定程度上解決了所有代碼都分散寫在各個元素上的問題，但是不利于代碼的整體重用。需要詳盡選定該元素來設置具體的樣式。子元素會繼承父元素的樣式，等除外。上一篇簡單總結了一下選擇器，如果一個元素被多個選擇器選中，元素的樣式就會以級聯方式被應用到。要搞清最終那個樣式被應用到元素上了，首先要明白引用CSS代碼的幾種方式。 CSS代碼引用方式如何應用CSS代碼到Ht...

fxp 2019-08-30 14:24 評論0 收藏0
關于CSS你應該知道的基礎知識 - 樣式應用篇

摘要：我是紅色這種引用代碼的方式在一定程度上解決了所有代碼都分散寫在各個元素上的問題，但是不利于代碼的整體重用。需要詳盡選定該元素來設置具體的樣式。子元素會繼承父元素的樣式，等除外。上一篇簡單總結了一下選擇器，如果一個元素被多個選擇器選中，元素的樣式就會以級聯方式被應用到。要搞清最終那個樣式被應用到元素上了，首先要明白引用CSS代碼的幾種方式。 CSS代碼引用方式如何應用CSS代碼到Ht...

Michael_Lin 2019-08-02 10:10 評論0 收藏0