當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端学习---css基本知识

發布時間：2023/12/2 HTML 20 豆豆

生活随笔收集整理的這篇文章主要介紹了前端学习---css基本知识小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

css基本知識

?我們先看一個小例子：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="background-color:#2459a2;height: 48px;">1</div><div style="background-color:red;">2</div><div style="background-color:green;">3</div> </body> </html>

我們可以看到我們在div中加了style,里面有background-color，height等屬性，這樣就使的原本什么都沒有的div添加了背景色高度等。

css的編寫

在標簽上設置style屬性：width,height,background.......
寫在head里面，寫一個<style>標簽中寫樣式：

<head>
<style>
#i1{background-color:red;height:48px }
</style>
</head>

?單獨創建一個.css格式的文件，在.css文件中寫入樣式，在html文件中的head標簽中引入該.css文件：

?css中的注釋：/**/

選擇器使用css

?1.標簽選擇器：

div{background-color:red; }?
<div > </div>

2.class選擇器：

.bd{background-color:red; }?
<div class='bd'> </div>?

3.id選擇器：

#idselect{background-color:red; }?
<div id='idselect' > </div>

4.關聯選擇器（空格）

#idselect p{background-color:red; }?
<div id='idselect' > <p> </p> </div>

5.組合選擇器：（逗號）

input,div,p{ background-color:red; }?

6.屬性選擇器：

input[type='text']{ width:100px; height:200px; }?

css中的優先級

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.c1{background-color: red;color: white;}.c2{font-size: 58px;#color:black;}</style> </head> <body><div class="c1 c2">asdfas</div> </body> </html>

?上面我們設置了一個div有兩個class名稱，然后先設置了一個color:white,顯示的效果如下：

下面我們在.c2的css中把color:black的注釋去掉，顯示的效果如下：

我們再在<div>標簽中添加：style="color:blue"，那么顯示的效果如下：

這就涉及到了css樣式的優先級：（就近原則）

　　style--->c2----c1(這里c2,c1的優先級是看在css中誰的樣式寫在下面，如果上面head標簽的style標簽中兩個位置互換，那么就是c1的優先級大于c2)

常用的css中的樣式

?1.邊框

默認4個邊都加上：

　　?border:1px solid/dotted red (1像素，實線/虛線，紅色)：

只加左邊和右邊：

　　border-left-right:1px solid/dotted red?

?2.height,width,line-height,color,font-size,font-weight:

height,width:高度，寬度

　　height:48px;width:200px? ? ?or? ? ?height:48px;width:80%（可以用具體的值也可以用百分比）

text-align:center，水平方向居中

line-height行高：

　　如果我們想要把文字垂直居中就可以用這個屬性（行高像素==height像素）,即height:48px，line-height:48px，則字體就居中了。

font-size字體大小：font-size:12px;

font-weight字體的樣式：100-900,bold(加粗),bolder（更粗），inherit,initial,lighter,normal,unset

color字體顏色；

3.float屬性：浮動

如果我們寫了2個div,那這2個div就會每個各占一行，如果我們想讓一個div在左邊占20%，一個div在右邊80%，想要兩個div在一行對接起來，那就需要用到float

首先看看我們不用float的效果：

?如果我們讓這兩個div都向左浮動：

?兩個就重合在一起，并且一個站20%，一個占80%

如果我改成div1占20%往左浮動，div2占60%往右浮動：那么中間就會空出20%

?現在我們寫一個盒子，里面有一些div：

?我們可以發現用了float我們就可以做到類似很多前端頁面一塊一塊的樣式，我們最外面的div的高度是隨著里面小div不斷的增多而增多的。

但是有一個問題，我們可以看到上面有一個紅色的線，他是外層div的邊框，為什么父div的邊框沒有了呢，只有一個了呢？這個就是使用float之后會產生的問題。

解決方法：

在父div中的最后加上這么一段：<div style="clear:both;"></div>

這樣，父div的邊框就顯現了出來

4.display

首先我們看一段：

現在我們想要讓塊級標簽變成一個行內標簽：display:inline

我們想要讓span這個行內標簽變成塊級標簽：display:block;

********

行內標簽：無法設置高度，寬度，padding,margin

塊級標簽：可以設置高度，寬度，padding,margin

<span style="background-color: red;width:200px;height:48px;">span1</span> <a style="background-color: red;">chaolianjei</a>

?我們可以發現一點效果都沒有

display:inline-block;

　　具有inline，默認自己有多少占多少；

　　具有block，可以設置高度，寬度，padding,margin

<span style="background-color: red;width:200px;height:48px;display: inline-block;">span1</span> <a style="background-color: red;">chaolianjei</a>

?加了display:inline-block;之后，span就可以設置寬高了：

display:none;讓標簽消失：

5.padding margin(0 auto)內邊距，外邊距：

margin:

　　margin:0 auto;上下為0，左右居中

6.position:

fixed---->固定在頁面的某個位置，滾輪滾動，位置也不會變
absolute---->絕對定位，單用它，滾輪滾動時，位置會改變，要和relative一起使用
relative

fixed：

我們先看一串代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="width: 50px;height:50px;background-color: black;color:white">返回頂部</div><div style="height: 5000px;background-color: #dddddd"></div> </body> </html>

現在我們希望的是 “返回頂部” 這個div 固定在瀏覽器的右下角

?我在style中添加了

position:fixed;bottom:20px;right:20px;

?這樣我們就把那個div固定在右下角了。

我們再看一個例子：有的網站，它的菜單欄是一直在瀏覽器的上面的，即使是滾動條滾動，頭部的菜單欄也不會變，這個我們應該怎么做呢：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.pg-header{height:48px;background-color: black;color: #dddddd; position:fixed; top:0; right:0; left: 0;}.pg-body{background-color: #dddddd;height:5000px; margin-top:50px ;}</style> </head> <body><div class="pg-header">頭部</div><div class="pg-body">內容</div> </body> </html>

?其實只需要加上上面色的代碼就可以了，下面的margin-top是為了讓pg-body的能夠往下來一點，顯示出全部內容

?relative absolute:

我現在有3個div:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div1</div><div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div2</div><div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div3</div> </body> </html>

我想要在div1的左下角放一個黑色的小方框， div2的右下角放一個黑色的小方框，div3的左上角放一個黑色的小方框，應該怎么做：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div1<div style="width:50px;height:50px;background-color: black;position:absolute;left:0;bottom:0"></div></div><div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div2<div style="width:50px;height:50px;background-color: black;position:absolute;right:0;bottom:0"></div></div><div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div3<div style="width:50px;height:50px;background-color: black;position:absolute;left:0;top:0"></div></div> </body> </html>

只要relative 和 absolute 相配合，然后設置top,left,right,bottom的值就可以了，這個值可以是正數也可以是負數

還有一個場景：我們點一個按鈕，然后就會跳出一個小窗口，這個時候窗口以外的東西就沒有辦法進行操作了，如：我點擊了大模態框，之后跳出了large model，但是灰色的地方是沒有辦法進行操作的

這就是一個典型的三層模式：本身文本是一層，灰色的遮罩是一層，彈出的框是一層。那我們怎么實現這個呢？

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="width:400px;height:100px;background-color: white;position: fixed;top:50%;left: 50%;margin-top: -50px;margin-left:-200px;z-index:10;"></div><div style="position: fixed;background-color: black;top:0;bottom:0;right:0;left: 0; opacity: 0.6;z-index: 9;"></div><div style="height:5000px;background-color: green;"></div> </body> </html>

?效果如圖所示：下面有一個green的div，然后有一個black的div，只是設置了透明度，最上面有一個居中的白色div

分析：首先我們先說兩個新的屬性：

opcity:0.6;設置透明度，值為0-1

z-index:9，設置優先級，值越高優先級越大

我們先實現兩個div，一個是綠色的，一個是黑色的。這個很簡單。下面要再加上第三層。最關鍵的就是這上面兩個屬性，如果透明屬性沒有的話，在做兩層的時候，黑色的就會把綠色徹底覆蓋住，如果沒有優先級屬性的話，那么在做第三個div的時候就會不知道誰覆蓋了誰。

這里我們還要記錄的是居中方法：

position: fixed;top:50%;left: 50%;
margin-top: -50px;margin-left:-200px;

?設置50%，然后用margin返回寬高的一半，這樣就能夠讓一個div居中顯示

?7.overflow

?我們設置了一個div的寬度和高度，現在想要在這個div中放入一個圖片，那圖片有自己的高度和寬度。如果直接發放進去就會超出div的范圍顯示，那我們怎么辦呢？

在style中加入overflow屬性：

hidden：超出的部分隱藏
auto:超出的部分會給滾動條

8.hover

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.pg-header{position: fixed;top:0;right:0;left:0;height:48px;background-color: #2459a2;line-height:48px;}.pg-body{margin-top:50px;}.w{width:980px;margin:0 auto;}.pg-header .menu{display: inline-block;padding:0 10px;color:white;}/*當鼠標移動到當前標簽的時候，以下css屬性才會生效*/.pg-header .menu:hover{background-color: blue;}</style> </head> <body><div class="pg-header"><div class="w"><a class="logo">logo</a><a class="menu">全部</a><a class="menu">42區</a><a class="menu">段子</a><a class="menu">1024</a></div></div><div class="pg-body"><div class="w"></div></div> </body> </html>

?hover當鼠標移動到超鏈接的時候，就會對hover的css里的屬性生效

9.background

background-image:url('image/4.jpg')：背景是一個圖片，如果這個div比圖片的尺寸還要大的話，圖片就會一直重復著放

　　應用場景：漸變色的背景，我們只需要一個很窄的圖片，就可以利用這個屬性，讓整個背景都是這個漸變色的圖片

?background-repeat:no-repeat/repeat-x/repeat-y：改屬性設置圖片是否要重復，水平重復還是垂直重復

background-position:10px 10px 選取一張圖上的某一個位置進行顯示

　　應用場景：網站有的時候用一張圖上存儲了很多的圖標，要用哪個圖標就可以選哪個坐標

頁面布局

?一、主站布局：

<div class="pg-header"><div style="width:980px;margin:0 auto;">內容自動居中</div></div> <div class="pg-content"></div> <div class="pg-footer"></div>

?二、后臺管理布局

同樣都是三個部分，頭部，中間內容，和尾部：

我們先看看中間的變化：

一類是中間內容的菜單和內容都不動，右邊內容多的時候出現滾動條

我們用position:fixed做的話應該怎么做呢：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{margin:0 auto;}.left{float:left;}.right{float:right;}.pg-header{height:48px;background-color: #2459a2;color:white;}.pg-content .menu{position: fixed;top:48px;left:0;bottom:0;width:200px;background-color: #dddddd;}.pg-content .content{position: fixed;top:48px;bottom: 0;left:200px;right:0;background-color:purple;overflow: auto;}</style> </head> <body><div class="pg-header"></div><div class="pg-content"><div class="menu left">a</div><div class="content left"><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p></div></div><div class="pg-footer"></div> </body> </html> View Code

?我們通過用position:fixed實現了菜單欄和內容欄的固定，然后當內容過多的時候我們就可以用overflow：auto實現添加一個滾動條，從而實現了布局

還有一類是中間內容部分如果多了，我們讓左邊的菜單跟隨滾動條：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{margin:0 auto;}.left{float:left;}.right{float:right;}.pg-header{height:48px;background-color: #2459a2;color:white;}.pg-content .menu{position: absolute;top:48px;left:0;bottom:0;width:200px;background-color: #dddddd;}.pg-content .content{position: absolute;top:48px;bottom: 0;left:200px;right:0;min-width: 980px;/*background-color:purple;*//*overflow: auto;*/}</style> </head> <body><div class="pg-header"></div><div class="pg-content"><div class="menu left">a</div><div class="content left"><div style="background-color: purple"><p style="margin: 0;">afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p></div></div></div><div class="pg-footer"></div> </body> </html> View Code

那和第一類的區別就在于，我們用的是position:absolute進行定位：

postion:absolute這個屬性，可以在頁面一開始生成的時候進行初始定位，但是隨著你滾動滾動條的時候，定位就會改變，隨著滾動條一起滾動，所以我們就可以利用這特點進行操作。

如果想要背景也跟著一起的話，可以在用一個div把內容包住，然后在這個div里面設置一個background-color，這樣背景顏色就可以跟著內容一起增加。

如果我們要用absolute來實現第一類情況的話，我們也只要在第二類的基礎上加上overflow:auto，就可以變回第一種情況了，非常的方便。

當然我們考慮一種情況，如果我們的瀏覽器不斷的縮小，那個我們也要保證我們的內容要正常顯示，這個時候就需要左右滾動條，我們就可以設置一下內容div的最小寬度min-width:980px，當小于這個寬度的時候就出現滾動條，就ok了

我們再看看頭部的變化：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="fontawesome-free-5.0.8/web-fonts-with-css/css/fontawesome-all.min.css"><style>body{margin:0 auto;}.left{float:left;}.right{float:right;}.pg-header{height:48px;background-color: #2459a2;color:white;line-height: 48px;}.pg-header .logo{width:200px;background-color: cadetblue;text-align: center;}.pg-header .user{height:48px;position: relative;margin-right:60px;padding:0 20px;}.pg-header .user:hover{background-color: #204982;}.pg-header .user .a img{height:40px;width:40px;margin-top: 4px;border-radius:50%;}.pg-header .user .menu2{position:absolute;top:48px;right:-10px;background-color: white;width:100px;z-index:10;display: none;color:black;text-align:center;}.pg-header .user .menu2 a{display: block;border-bottom: 1px solid black;text-decoration:none;/*去掉超鏈接的下劃線*/}.pg-header .user:hover .menu2{display:block;}/* 未訪問的鏈接 */.pg-header .user .menu2 a:link{color:black;}.pg-header .user .menu2 a:hover{background-color: #dddddd;}.pg-header .icons{padding:0 20px;}.pg-header .icons:hover{background-color: #204982;}.pg-content .menu{position: absolute;top:48px;left:0;bottom:0;width:200px;background-color: #dddddd;}.pg-content .content{position: absolute;top:48px;bottom: 0;left:200px;right:0;min-width: 980px;/*background-color:purple;*/overflow: auto;z-index:9;}</style> </head> <body><div class="pg-header"><div class="logo left">logo圖標</div><div class="user right"><a class="a" href="#"><img src="1.jpg"></a><div class="menu2"><a href="#">我的資料</a><a href="#">注銷</a></div></div><div class="icons right"><i class="far fa-envelope"></i><span>5</span></div><div class="icons right"><i class="far fa-bell"></i><span>3</span></div></div><div class="pg-content"><div class="menu left">a</div><div class="content left"><div style="background-color: purple"><p style="margin: 0;">afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p></div></div></div><div class="pg-footer"></div> </body> </html> View Code

?顯示的效果圖就是如下效果：

需要知道的知識：

關于超鏈接的：

a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
text-decoration:none;/*去掉超鏈接的下劃線*/

關于邊框的：

border-radius:50%;/*把邊框變成橢圓*/

關于菜單欄的出現消失，不用js的做法：

.pg-header .user .menu2{
display: none;
} .pg-header .user:hover .menu2{
display:block;
}/*這樣做就能夠實現，當鼠標放在頭像上菜單欄自動出現，當鼠標移開的時候菜單欄自動隱藏*/

?關于菜單欄的圖標的：

　　到https://fontawesome.com/icons下載圖標包，然后導入css文件，并在網站上尋找相關的圖片的html，就可以顯示了：

總結

以上是生活随笔為你收集整理的前端学习---css基本知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： input复选框checkbox默认样式
下一篇：前端:css