當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css详解1

發(fā)布時間：2025/3/18 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 css详解1 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1、css的三種引入方式：

1.1、行內(nèi)引入

<div style="color:red;">魔降風云變</div>

<html> <head><meta charset="UTF-8"></head> <body> <div style="color:red;">魔降風云變</div> </body> </html>

用的是行內(nèi)的

<html> <head><meta charset="UTF-8"></head> <style>#box{color:gold;}</style> <body><div id="box" style="color:red;">魔降風云變</div> </body> </html>

沒有找到它的樣式

1.2內(nèi)嵌式：

head中寫 <style>#box{background-color: gold;}</style> <head><meta charset="UTF-8"></head><style>#box{ background-color: gold;}</style> <body><div id="box" style="color:red;">魔降風云變</div> </body>

換了就有了，不能覆蓋，優(yōu)先級沒它高

1.3外接式：

外接式是定義在head標簽中，并且不在style中。

?index.css文件

#box{background-color: black; } <html> <head><meta charset="UTF-8"></head><style>#box{background-color: gold;}</style><link rel="stylesheet" href="css/index.css"> <body><div id="box" style="color:red;">魔降風云變</div> </body> </html>

1.4、三種樣式的優(yōu)先級

行內(nèi)樣式>內(nèi)嵌式和外接式
內(nèi)嵌式和外接要看誰在后面，在后面的優(yōu)先級高，會覆蓋前面的。

2、基礎選擇器

2.1、id選擇器

唯一的

#xxx

?id選擇器就是在標簽里面加個id,可以和class同名? #id名字{css}

<html> <head><meta charset="UTF-8"></head><style>.box{width: 200px;height: 200px;background-color: yellow;}.active{border-radius: 4px;} #box{color:blue;}</style><body><div class="box active" id="box">小馬過河</div><hr><div class="box"></div><hr><div class="box"></div> </body> </html>

2.2、類選擇器

可以重復，歸類，類也可以設置多個

.xxx <html> <head><meta charset="UTF-8"></head><style>.box{width: 200px;height: 200px;background-color: yellow;}.active{border-radius: 200px;}</style><body><div class="box active"></div><div class="box"></div><hr><div class="box"></div> </body> </html>

border-radius邊框圓角，似乎當邊框圓角和正方形div的寬高一致的時候就會成圓形 .active{ border-radius: 40px; #將200改為40}

?2.3標簽選擇器

標簽{css}
div{} p{}

?作用于多個相同標簽

<html> <head><meta charset="UTF-8"></head><style>.box{width: 200px;height: 200px;background-color: yellow;}.active{border-radius: 4px;}#box{color:blue;} div{border: 1px solid #000;}</style><body><div class="box active" id="box">小馬過河</div><hr><div class="box"></div><hr><div class="box"></div> </body> </html>

使用場景一（a標簽）：

取消所有a標簽的默認下劃線

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><style>a{text-decoration: none;}</style> </head> <body> <a href="www.baidu.com">百度</a><a href="www.baidu.com">百度</a><a href="www.baidu.com">百度</a><a href="www.baidu.com">百度</a><a href="www.baidu.com">百度</a> </body> </html>

使用場景二（重新設置邊框）：

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"> </head> <body>用戶名：<input type="text"> </body> </html>

添加標簽選擇器，取消邊框

<html lang="en"> <head><meta charset="UTF-8"> <style>input{border: none;}</style> </head> <body>用戶名：<input type="text"> </body> </html>

鼠標放到那個位置點擊一下，又出現(xiàn)藍色框，這個被叫做外線：

去掉外線，這樣默認的線都沒了，可以重新設置邊框：

input{border: none;outline: none;}

重新設置邊框：

<html lang="en"> <head><meta charset="UTF-8"><style>input{border: none;outline: none;}#mcw{border:9px solid #0000cc ;}</style> </head> <body>用戶名：<input id="mcw" type="text"> </body> </html>

#mcw{border:9px solid #0000cc ;height: 60px;}

給邊框加個高度，字體的高度還是沒有變化　　?

?將字體設置大點：

#mcw{border:9px solid #0000cc ;height: 60px;font-size: 30px;}

?和別人的框比起來，別人的框文字在左右不能到邊，下面設置一下

#mcw{border:9px solid #0000cc ;height: 60px;font-size: 30px;padding: 0 100px; #第一個表示上下，第二個表示左右，內(nèi)部填充，邊框長度也加了，}

3、盒模型

3.1、

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><style>#box{width: 200px;height:200px;background-color: red;</style> </head> <body><div id="box" class="box" >魔降風云變</div> </body> </html>

盒模型200*200

3.2、pading設置一個值，上下左右。

pading設置上下左右各50px內(nèi)邊距，一個值。盒子大小變成300*300

如果我在div中加些字，如果不設置pading。默認內(nèi)部子元素都在左上角開始顯示，。所以通過pading可以調(diào)整內(nèi)部子元素的位置。一個元素也叫一個標簽。

再添加一個邊界? border? ? ，盒子加鎖邊框大小變成了308*308

如果我想保持盒子大小，那么我要調(diào)整pading，border，和盒子高度寬度的大小。

302*302

#box{width: 200px;height:200px;background-color: red;padding: 50px;border: 1px solid #000;}

3.3pading兩個值，表示上下和左右

#box{width: 200px;height:200px;background-color: red; padding: 0 20px; #上下0，左右20.0px可以省略pxborder: 1px solid #000;}

3.4、pading三個值，表示上左右下

#box{width: 200px;height:200px;background-color: red;padding: 0 20px 30px; /* 0上 20左右 30下border: 1px solid #000;}

?3.5、pading四個值，表示上右? 下左，

#box{width: 200px;height:200px;background-color: red;padding: 10px 20px 30px 40px; /*上右下左順時針*/border: 1px solid #000;}

3.6、pading單獨設置一個方向?

#box{width: 200px;height:200px;background-color: red;padding-top: 20px;border: 1px solid #000;}

單獨設置pading-top ,文字在盒子里往下擠了。單獨左邊增加，文字往右走；? 此外還有其他

pading

pading-top

pading-bottom

pading-left

pading-right

3.7盒子設置magin

#box{width: 200px;height:200px;background-color: red;padding-top: 20px; margin-left: 30px;border: 1px solid #000;}

?左邊加個30的margin，盒子邊框整體右移。

盒子body本身還有8px的大小

4、標簽嵌套關(guān)系

4.1標簽的嵌套關(guān)系之塊級標簽

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><style>.box{ width: 200px;height:200px;background-color: yellow;}</style> </head> <body><div class="box" ></div> </body> </html>

塊級標簽特點：獨占一行，可以設置寬高，如果不設置寬，默認是父標簽的100%寬度。

塊級標簽屬性：display

p標簽的使用這個樣式，p標簽上下還有16的margin。

body 上下左右瀏覽器默認設置8px的margin

塊級標簽，比如div。塊級標簽display的屬性值默認是block，瀏覽器內(nèi)置的，默認給div設置的。

塊級標簽可以將display修改掉，將它修改為inline。

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><style>.box{width: 200px;height:200px;background-color: yellow; display: inline;}</style> </head> <body><div class="box" ></div> <p class="box"></p> </body> </html>

沒有顯示東西：

因為么有添加內(nèi)容呢

<body><div class="box" >魔降風云變</div><p class="box">小馬過河</p> </body>

就像將它們變成了span標簽一樣，不好使

4.2、標簽的嵌套關(guān)系之行內(nèi)標簽

行內(nèi)標簽特點：1、在一行內(nèi)顯示 2、不可以設置寬高，如果不設置寬高，默認是字體大小?

如果div標簽，p標簽都和 a標簽和span標簽都在一行內(nèi)顯示，證明塊標簽轉(zhuǎn)行內(nèi)標簽是沒有問題的。這里塊轉(zhuǎn)行內(nèi)標簽了。塊轉(zhuǎn)行內(nèi)用的不多，但是行內(nèi)轉(zhuǎn)塊用的比較多。

如果我給行內(nèi)標簽加個寬度和高度，沒有生效的。

行內(nèi)標簽不能設置寬高

如果我想要設置行內(nèi)標簽的寬度和高度，那么把行內(nèi)標簽改成塊標簽

a{width: 100px;height: 40px;background-color: red; display: block;}

再給a標簽設置一下

a{width: 100px;height: 40px;background-color: red;display: block; /*顯示方式 block 顯示塊 inline 顯示行內(nèi) inline-block 行內(nèi)塊*/ text-align: center; /*水平文本排列方式：左中右顯示*/line-height: 40px; /*行高：一行的高度。當行高=盒子模型高度的時候，實現(xiàn)垂直居中*/text-decoration: none; /*文本修飾： none 無修飾 underline 下劃線 line-through 有點像刪除線 */color: #333333;}

給a標簽水平居中，垂直居中，去下劃線，設置顏色

修改一下測試text-decoration: line-through; 有點像刪除線

放大點看

用標簽del實現(xiàn)刪除線效果：

<body><a href="www.baidu.com">百度一下</a><del>小馬過河</del><span >小郭吹雪</span> </body>

4.3行內(nèi)標簽之行內(nèi)塊標簽

?行內(nèi)塊標簽特點：1、在一行內(nèi)顯示 2、可以設置寬高

input{width: 40px;height: 60px;}</style>

給input添加寬和高之后，也可以變高，變寬，因為它是行內(nèi)塊，這樣看來行內(nèi)塊也是可以設置寬度和高度的。

行內(nèi)塊使用演示

兩個行內(nèi)標簽span結(jié)果：

</style> #s1{height: 40px;display: block;background-color: #d33333;} </style>

如上設置為塊則會換行

如果設置為行內(nèi)塊則同行顯示。當同行中某部分要設置寬度、高度且不換行的時候可以設置為行內(nèi)塊

#s1{height: 40px;display: inline-block;background-color: #d33333;}

#s1{width: 60px;height: 40px;display: inline-block;background-color: #d33333;}

當再添加寬度的時候，寬度不夠，這個是換行了嗎？但是其它內(nèi)容還是跟它在同行，

?問題：行內(nèi)標簽能包裹一個塊么？比如? a標簽不能設置寬高，包一個塊標簽能撐起來么？是撐不起來的。行內(nèi)標簽不能放塊，有個別例外的。也可以把塊變成行內(nèi)塊，行內(nèi)塊是放到行內(nèi)的。塊里面可以包行內(nèi)。div里面可以包div，可以包a標簽。a里面可以包image，因為image是行內(nèi)塊，是行內(nèi)的，可以先把a標簽轉(zhuǎn)成塊的。

比如如下栗子：

<html lang="en"> <head><meta charset="UTF-8"><style>#tu{width: 200px;height: 100px;}</style> </head> <body> <a href=""><img src="dongwu.jpg" alt="" id="tu"></a> </body> </html>

行內(nèi)標簽a包行內(nèi)塊image，可以包著，但是難以撐起來。但是點擊圖片任一部位還是可以跳轉(zhuǎn)的。

可以給a標簽變成塊

a{width: 200px;height: 100px;display: block;}

4.4嵌套關(guān)系總結(jié)：

　　塊級標簽可以嵌套塊級標簽、行內(nèi)標簽和行內(nèi)塊

　　p標簽不要嵌套div，也不要嵌套p，

　　　　p里可以放 a img 表單控件

　　行內(nèi)標簽盡量不要嵌套塊級標簽

比如例外的p標簽

<body><p>小馬過河<div>魔降風云變</div></p> </body>

瀏覽器修改掉了：

所有不要p包div，可以用div去包p。

?網(wǎng)頁大多是圖片和文字，所以一般最內(nèi)層的標簽大都是a標簽和span這些標簽

?5、高級選擇器

5.1、后代選擇器

<html lang="en"> <head><meta charset="UTF-8"><style>#box p{color: red}</style> </head> <body><div id="box"><div><div><div><p>魔降風云變</p></div></div></div></div> </body> </html>

后代選擇器和單獨用p標簽的區(qū)別：后代選擇器限定了選擇區(qū)間，哪個div下的哪個標簽。限定了獨立的邏輯區(qū) 。

一般嵌套也不能嵌套太多層，一般是不超過8層，超過8層寫代碼都費勁。

如果我修改一下#box p{color: red} 為#box p a{color: red} ，p下的a標簽也可以的

p內(nèi)包一個a標簽<p><a href="">魔降風云變</a></p> #box p a{color: red}

5.2、子代選擇器

<html lang="en"> <head><meta charset="UTF-8"><style>#box>p{color: red} /*子代選擇器*/</style> </head> <body> <div id="box"><div><div><div> <p>魔降風云變</p></div></div></div> <p>小馬過河</p></div> </body> </html>

?子代選擇器只能作用于它本身下的那一層。魔降風云變不是子代，所以子代選擇器不能作用于魔降風云變。

<html lang="en"> <head><meta charset="UTF-8"><style>#box>p>a{color: red}</style> </head> <body> <div id="box"><div><div><div> <p><a href="">魔降風云變</a></p></div></div></div> <p><a href="">小馬過河</a></p></div> </body> </html>

子代選擇器也可以連續(xù)>，但是不宜太多

5.3組合選擇器

很多標簽都有margin。

<html lang="en"> <head><meta charset="UTF-8"><style>#box{color: red}</style> </head> <body><div id="box"><p><a href="">小馬過河</a></p> <ul><li>鋤禾</li><li>當午</li><li>千門萬戶曈曈日</li></ul></div> </body> </html>

ul標簽有margin和pading，ol也有。body有8pxmargin，p標簽也有margin。

很多標簽都有margin，你不確定它是多少呀，這樣的話布局不好計算，那就把它們都去掉。

我添加個組合選擇器，我們已經(jīng)這些p,ul,ol,body都有margin，那就都選中，讓這些標簽組合起來共用一套樣式。把這幾個設置為0然后后面重新設置被叫做重置樣式

去掉之后都定格寫了

可以重置樣式的有：也可以把a標簽的下劃線重置樣式。

p,ul,ol,body{margin: 0;padding: 0;}input,textarea{border: none;outline: 0;}

重置樣式，去掉所有的margin和padding。然后在畫布上按照自己的想法去畫。常用。

比如小米的網(wǎng)站重置margin

?5.4、交集選擇器

兩個選擇器作用于同樣的內(nèi)容

<html lang="en"> <head><meta charset="UTF-8"><style>span{color: #d33333}.active{font-size: 20px}</style> </head> <body><p>正常字體</p> <span class="active">小馬過河</span> </body> </html>

<html lang="en"> <head><meta charset="UTF-8"><style>span{color: #d33333}.active{font-size: 20px} span.active{background-color: gold;}</style> </head> <body><p>正常字體</p><span class="active">小馬過河</span><span class="active">小馬過河2</span><span >魔降風云變1</span><a href="" class="active">魔降風云變2</a></body> </html>

?交集span.active{}，既是span標簽，又有類active的可以被選中。中間不要隔開，隔開就不生效了

6、css的繼承

?6.1繼承實例演示

<html lang="en"> <head><meta charset="UTF-8"><style>p{color: red}</style> </head> <body><div id="box"> <p class="active">魔降風云變</p></div> </body> </html>

這樣字體肯定是紅色的

但是如果裝飾的是父的呢？字體也是紅的么？同樣是紅的。#box{}作用的是div，但是p標簽也變紅了。

看開發(fā)工具可看見p標簽的繼承來自哪里：

那么還有沒有其他的可以被繼承的屬性呢

#box{color: red;height: 40px;text-align: center;}

可以看到height是淺紅色，沒有繼承過來。高是盒子模型的屬性，不能繼承

行高不是盒子屬性，那么行高可以被繼承么？

#box{color: red;height: 40px;text-align: center;line-height: 80px;}

可以繼承行高

繼承性：在css有某些屬性是可以繼承下來，color,text-xxx,line-height,font-xxx是可以繼承下來

如下：

<html lang="en"> <head><meta charset="UTF-8"><style>#box{ color: red;height: 40px;text-align: center;line-height: 30px;background-color: yellow;font-size: 26px;}p{ background-color: red;color: greenyellow;}</style> </head> <body><div id="box"> <p class="active">魔降風云變</p></div> </body> </html>

繼承來的字體是26px。bgc不能被繼承過來，自己設置了紅色背景，給p標簽。p標簽繼承來的行高30，div的高是40，所以黃色漏出10px高度。

<html lang="en"> <head><meta charset="UTF-8"><style>body{font-size: 14px}#box{color: red;height: 40px;text-align: center;line-height: 30px;background-color: yellow; font-size: 26px;}p{background-color: red;color: greenyellow;}</style> </head> <body><div id="box"> <p class="active">魔降風云變</p></div> <a href="">小馬過河</a> </body> </html>

body14，box26,繼承了box的26.

用的p標簽自己的，沒用

沒用那幾個繼承的，用的p標簽自己的。

<html lang="en"> <head><meta charset="UTF-8"><style>body{font-size: 14px}#box{color: red;height: 40px;text-align: center;line-height: 30px;background-color: yellow;font-size: 26px;}#box p{background-color: red;color: greenyellow; font-size: 20px;}</style> </head> <body><div id="box"><p class="active">魔降風云變</p></div><a href="">小馬過河</a> </body> </html>

由下圖可知，用的#box p{}裝飾的。這里盡量用#box p{}指定哪里p標簽。而不是其它div下的p標簽。body和box可以繼承過來，但是我需要單獨給它寫，就選中它單獨為它賦值，覆蓋掉父的屬性。這里用的是后代選擇器。因為有繼承關(guān)系，那么我們就應該給body設置一個樣式作為默認樣式。當某一部分需要單獨設置，那么選中這一部分單獨設置。于是，就出現(xiàn)了一個問題，就是繼承的順序是什么？

?6.2繼承順序問題

?下面程序，看看結(jié)果是繼承哪個的呢？

<html lang="en"> <head><meta charset="UTF-8"><style></style> </head> <body><div id="box1" class="wrap1"><div id="box2" class="wrap2"><div id="box3" class="wrap3"><p id="active" class="active" >魔降風云變</p></div></div></div> </body> </html>

首先是：<p class="active">魔降風云變</p> ，style 直接寫在行內(nèi)的優(yōu)先級最高，那么這里只研究內(nèi)嵌中的繼承順序。

樣式如下的時候結(jié)果是紅色：

樣式有了重疊性。當標簽選擇器和類選擇器同時在的時候，類選擇器覆蓋了標簽選擇器的：

?是類選擇器和標簽選擇器放的位置先后導致的么？那么我調(diào)換順序試試：

結(jié)果還是現(xiàn)實類選擇器的。由上可知，內(nèi)嵌樣式中，繼承的順序是類選擇器優(yōu)先于標簽選擇器，實際類選擇器權(quán)重10，標簽選擇器權(quán)重1

當標簽選擇器，類選擇器，id選擇器都在時，顯示的是id選擇器里的。 #id選擇器的權(quán)重實際上是100，權(quán)重更大些。在行內(nèi)寫的style是1000

上面三個里id選擇器權(quán)重最大，優(yōu)先級高，那我用它再來做比較：

結(jié)果是下面那個優(yōu)先。類選擇器#active{}是100,　#box1 p{}類選擇器是100+1=101的權(quán)重，優(yōu)先于單獨的類選擇器。　

再看下面的優(yōu)先級：

先比id,之前id選擇器沒有的把它去除掉了；然后再看id選擇器后面的選項，結(jié)果是下面那個優(yōu)先

再看下面的：

結(jié)果還是gold。gold和green對比：它們都有id選擇器。繼承來的權(quán)重為0#box1 #box2 {color: green}，如果選中p標簽了的，就按這個規(guī)則來，如果沒有選中，那就看繼承不繼承，跟繼承沒關(guān)系那就忽略掉。繼承的權(quán)值為0，那么如果是同時繼承來的怎么辦呢？

看下面這個

越接近的權(quán)值越大

6.3繼承總結(jié)

綜上

繼承性：在css有某些屬性是可以繼承下來，color,text-xxx,line-height,font-xxx是可以繼承下來

權(quán)重比較規(guī)則：

繼承來的屬性權(quán)重為0

前提是選中了標簽權(quán)重比較；

　　1.數(shù)選擇器數(shù)量： id 類標簽誰大它的優(yōu)先級越高，如果一樣大，后面的會覆蓋掉前面的屬

　　2.選中的標簽的屬性優(yōu)先級用于大于繼承來的屬性，它們是沒有可比性

　　3.同是繼承來的屬性

　　　　3.1 誰描述的近，誰的優(yōu)先級越高

　　　　3.1 描述的一樣近，這個時候才回歸到數(shù)選擇器的數(shù)量

?6.4其它繼承栗子

1）

2）

在這種情況下誰在下面就是誰

?4）數(shù)選擇器兩個優(yōu)先級高的id選擇器

?5）！importent不常用，大多調(diào)試

6）即使!important也比不過行內(nèi)的

?調(diào)試的話可以用行內(nèi)的來調(diào)試

轉(zhuǎn)載于:https://www.cnblogs.com/machangwei-8/p/10940449.html

總結(jié)

以上是生活随笔為你收集整理的css详解1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

css
详解

上一篇： Python学习教程（Python学习路
下一篇： Helm V3 新版本发布