CSS進階內容
在學習了CSS基本知識之後,我們需要進一步瞭解CSS,因此寫下了這篇文章
當然如果沒有學習之前的知識,可以到我的主頁中檢視之前的文章:秋落雨微涼 - 部落格園
CSS三大特性
首先我們先來了解CSS的三大特點,以便於我們下面知識點的講解
CSS三大特性包括:
- 層疊性
- 繼承性
- 優先順序
層疊性
當相同的選擇器設定相同的樣式,卻含有不同的樣式值時,此時一個樣式就會覆蓋掉另一個衝突的樣式,層疊性就是為了解決這個問題
層疊性原理:
- 樣式衝突,遵循的原則是就近原則,哪個樣式離結構近,就執行哪個樣式
- 當樣式不衝突時,不發生層疊性
下面給出程式碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>層疊性</title>
<!-- 對於下方div我們給出兩個div的css設定 -->
<style>
/* 下面這種情況,顏色就出現了層疊性,因就近原則,這裡div呈blue色 */
/* 同時,font-size因未發生衝突,不產生層疊性 */
div{
color: black;
}
div{
color: blue;
font-size: 12px;
}
</style>
</head>
<body>
<div>123</div>
</body>
</html>
繼承性
CSS中的繼承:
- 當子類未設定對應屬性時,子類繼承成父類的某些樣式(例如:字型顏色,字型大小等)
- 恰當使用可以簡化程式碼,降低css複雜性
- 子元素只能夠繼承父類的某些樣式(text-,font-,line-這些元素開頭的,以及color屬性)
下面給出程式碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>繼承性</title>
<!-- 當我們不設定p屬性僅設定div屬性時,p會繼承div的屬性 -->
<style>
div{
color: pink;
}
</style>
</head>
<body>
<div>
<p>123321</p>
</div>
</body>
</html>
繼承中的特殊屬性-行高:
- 當繼承行高時,可以採用font:字型大小/字型行高
- 這裡的行高可以不帶畫素px,而直接寫2或1.5表示是字型大小的2倍或1.5倍
- 這樣我們就可以根據自己的字型大小來調整行高
下面給出程式碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>繼承性</title>
<!-- 我們可以直接設定行高為字型大小的倍數,以便於後來的開發 -->
<style>
div{
color: pink;
font: 12px/1.5;
}
</style>
</head>
<body>
<div>
<p>123321</p>
<p>123321</p>
</div>
</body>
</html>
優先順序
當一個元素指向多種選擇器時,會產生優先順序
每種選擇器都具有一定的權重:
選擇器 | 選擇器權重 |
---|---|
繼承或* | 0.0.0.0 |
元素選擇器 | 0.0.0.1 |
類選擇器,偽類選擇器 | 0.0.1.0 |
ID選擇器 | 0.1.0.0 |
行內樣式 | 1.0.0.0 |
!important 重要的 | 無窮大 |
注意:
- 權重由四組數決定,無法進位
- 從前往後比較
- a連結預設制定樣式,若修改需要對a改變
權重疊加:
- 當採用複合選擇器時,把所有選擇器權重相加
- !!!注意:不可進位
盒子模型
盒子模型是我們網路佈局的最基礎元素
網路佈局過程:
- 先準備相關網頁元素,網頁元素基本都是盒子Box
- 利用css設計好盒子樣式,並擺放到相應位置
- 往盒子裡裝內容
盒子模型組成部分
盒子模型由四部分組成:
- 邊框 border
- 內容 content
- 內邊距 padding
- 外邊距 margin
邊框(border)
邊框border可以設定元素的邊框,邊框由三部分組成:邊框寬度,邊框樣式,邊框顏色
語法:
border-color:邊框顏色
border-width:邊框寬度
border-style:邊框款式(solid實線,dashed虛線)
border:顏色 寬度 款式(可以簡化一起設定)
邊框是可以分別設定的:
border-top:上邊框
border-bottom:下邊框
border-left:左邊框
border-right:右邊框
當我們只希望改變一條邊框時,可以先定義全邊框,再定義特別邊框,這樣css就會利用層疊性實現效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子邊框</title>
<style>
div {
height: 30px;
width: 50px;
/* 我們先定義全邊框 */
border: 1px black dashed;
/* 隨後定義特殊邊框,採用層疊性覆蓋所需邊框的原本邊框設計 */
border-top: 2px red solid;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
注意:當兩側都具有邊框時,邊框會匯聚在一起導致邊框效果大打折扣
所以css提供了border-collapse:collapse來合併邊框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小說排名案例</title>
<!-- 接下來我們對錶格進行邊框設計 -->
<style>
table{
/* 對table設定一個範圍大小 */
height: 240px;
width: 500px;
}
table,th,td {
/* 對全部設定一個邊框以及字型設定 */
border: 1px solid black;
/*
合併相鄰的邊框
當兩側都具有邊框時,中間邊框會變成兩側邊框之和(邊框相聚)
我們需要採用border-collapse: collapse來合併邊框
*/
border-collapse: collapse;
/* 我們稍微設定一下字型以及對齊 */
font-size: 12px;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<th>排名</th>
<th>關鍵詞</th>
<th>趨勢</th>
<th>進入搜尋</th>
<th>最近七日</th>
<th>相關連結</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹燈</td>
<td>上升</td>
<td>456</td>
<td>123</td>
<td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹燈</td>
<td>上升</td>
<td>456</td>
<td>123</td>
<td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹燈</td>
<td>上升</td>
<td>456</td>
<td>123</td>
<td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹燈</td>
<td>上升</td>
<td>456</td>
<td>123</td>
<td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td>
</tr>
</tbody>
</table>
</body>
</html>
注意:邊框會影響盒子實際大小
所以我們在設計盒子時需要保留邊框粗細大小
例如:
- 當我們需要一個總體積為20*20的盒子,且需要邊框2px
- 那麼我們div的height和width只需設計到18px,然後我們再加上border-width:2px即可
內邊距(padding)
padding屬性用來設計內邊距,即邊框與內容之間的距離
主要分為四個內邊距:
- padding-top 上內邊距
- padding-bottom 下內邊距
- padding-left 左內邊距
- padding-right 右內邊距
內邊距也存在簡寫方法:
/* 全部內邊距 */
padding: 5px
/* 上下和左右 */
padding: 5px 10px
/* 上和左右和下 */
padding: 5px 10px 15px
/* 上和右和下和左 */
padding: 5px 10px 15px 20px
注意:padding也會影響盒子的大小
當存在padding時,盒子大小也會相應增加相對大小
所以我們在設計盒子時,同樣也需要留下padding距離的大小
案例:巧妙利用padding設計導航欄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>padding應用於導航欄</title>
<style>
.nav {
/* 首先給大導航欄設計好高度和邊框和底板顏色,設定line-height使文字始終居中 */
height: 41px;
border-top: 3px orange solid;
border-bottom: 1px #edeefe solid;
background-color: #edeefea2;
line-height: 41px;
}
a{
/* 需要先變成行內塊元素才可以具有高度,我們需要高度來形成一個框架,使整個框架都是超連結 */
display: inline-block;
height: 41px;
font-size: 12px;
text-decoration: none;
color:#4c4c4c;
/* 我們採用padding方法控制超連結之間的距離,使其相隔一段距離且不受字型長短影響 */
padding: 0 20px;
}
a:hover{
/* 我們希望在滑鼠滑動在連結上時有明顯顯示 */
background-color: bisque;
color:red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">設為首頁</a>
<a href="#">新浪客戶端</a>
<a href="#">微博</a>
<a href="#">關注我</a>
</div>
</body>
</html>
特定情況:當盒子沒有設定height或者width時,padding不會撐開盒子
外邊距(margin)
margin用來設定外邊距,即控制盒子與盒子之間的距離
主要分為四個外邊距:
- margin-top 上外邊距
- margin-bottom 下外邊距
- margin-left 左外邊距
- margin-right 右外邊距
外邊距和內邊距的簡寫方法也與padding完全相同:
/* 全部內邊距 */
margin: 5px
/* 上下和左右 */
margin: 5px 10px
/* 上和左右和下 */
margin: 5px 10px 15px
/* 上和右和下和左 */
margin: 5px 10px 15px 20px
外邊距典型應用:使塊級盒子水平居中
要求:
- 盒子具有寬度width,高度height
- 盒子內設定margin: 0 auto;(只要保證左右margin是auto就確保居中)
下面給出程式碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>塊級元素居中</title>
<!-- 給盒子設定寬度且盒子的左右margin為auto -->
<style>
.nav{
background-color: pink;
height: 200px;
width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="nav"></div>
</body>
</html>
接下來我們也稍微介紹一下對於行內塊/行內元素居中的方法:
- 使其對應的父類元素加上text-align:center即可
- 因為對於父類來說,行內塊/行內元素屬於父類的內部元素,所以將父類的內部元素居中即可實現行內塊/行內元素居中
下面給出程式碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>塊級元素居中</title>
<!-- 給盒子設定寬度且盒子的左右margin為auto -->
<style>
.nav{
background-color: pink;
height: 200px;
width: 500px;
margin: 0 auto;
/* 在這裡設定text-align即可使內部元素居中 */
text-align: center;
}
</style>
</head>
<body>
<div class="nav">
<span>123</span>
</div>
</body>
</html>
巢狀塊元素垂直外邊距塌陷問題:
- 當出現巢狀關係(父子關係)時,父元素和子元素同時有外邊距時,此時父元素會塌陷較大的外邊距值
解決方案:
- 為父元素定義一個上邊框:border:1px solid transparent
- 為父元素定義一個內邊距:padding:1px
- 為父親新增overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外邊距塌陷問題</title>
<!-- 當父類和子類都具有外邊距時,父類會以較大的外邊距為主進行移動 -->
<!-- 如下所示,父親的外邊距為100px,兒子仍舊緊貼父親 -->
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
}
.son {
width: 200px;
height: 200px;
background-color: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
注意:因為網頁很多元素都帶有內外邊距,且在各瀏覽器中標準不同,所以我們通常清除內外邊距
我們常常把這行程式碼作為css內容的第一行
* {
padding: 0;
margin: 0;
}
稍微提一句:行內元素儘量只設定左右內外邊距
案例:BOX模組案例
讓我們通過HTML和CSS還原下面這個網頁排版
圖片:
程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例</title>
<!-- 正常情況來說,我們分HTML和CSS兩部分書寫,但為了講解簡單,我們放在同一HTML中書寫 -->
<style>
/* 第一步,去除內外邊距 */
* {
padding: 0;
margin: 0;
}
/* 第二步,設定框架大盒子 */
.box {
/* 資料都是採用PS測量,以後你們做專案時也會給出相應值或自己測量 */
height: 415px;
width: 298px;
background-color: rgba(255, 255, 255, 0);
/* 我們希望把盒子居中顯示 */
margin: 100px auto;
}
/* 第三步:我們設定圖片和盒子一樣寬 */
.box img {
width: 100%;
}
/* 第四步:設定第一行小字 */
.review {
font-family: 微軟雅黑;
font-size: 14px;
/* 注意:設定整體高度,使無論多少文字,底部都是對齊的 */
height: 70px;
padding: 0 28px;
margin-top: 30px;
}
/* 第五步:設定第二行小字 */
.appraise {
font-family: 微軟雅黑;
font-size: 12px;
color: #b0b0b0;
padding: 0 28px;
margin-top: 28px;
}
/* 第六步:設定最後一行小字,我們分幾部分設定 */
.info {
font-size: 14px;
padding: 0 28px;
margin-top: 15px;
}
.info em {
font-style: normal;
color: #ebe4e0;
margin: 0 6px 0 15px;
}
.info .price {
color: #ff6700;
}
</style>
</head>
<body>
<div class="box">
<!-- 首先我們放入照片 -->
<img src="案例照片/1.png" alt="圖片">
<!-- 放入第一行文字 -->
<p class="review">快遞牛,整體不錯,藍芽都可以秒連</p>
<!-- 放入第二行文字 -->
<p class="appraise">來自1923134的評價</p>
<!-- 最後一行文字 -->
<p class="info"><span class="name">Redmi AirDots真無線藍...</span><em>|</em><span class="price">99.9元</span></p>
</div>
</body>
</html>
在這裡插上一句:(因為我自己第一次做時出現了問題所以想向你們提醒一下)
- 有幾個特殊的塊級元素只能包含內嵌元素,不能再包含塊級元素,這幾個特殊的標籤是:h1、h2、h3、h4、h5、h6、p、dt
- 這裡例如最後一行p,我們不能插入h標題元素
平面佈局改善
除了正常的佈局改善,我們也可以通過其他方法獲得好看的圖形樣式
例如圓角邊框和陰影,就會為我們的Web頁面起到美化的作用
圓角邊框
border-radius就是用來控制圖形四角的曲度
div {
/*
border-radius:length;裡面設定的邊角圓的半徑,也可也設定百分比
如果你想獲得一個圓形,需要把高度寬度設定一致且length設定成圖形直徑的一半即可();
如果你想獲得一個圓角矩形,只需把length設定為高度的一半即可
注意:這裡的角仍舊可以單獨設定
當兩個值時順序分別是左上和右下,右上和左下
當四個值時順序分別是左上,右上,右下,左下
*/
border-radius:length;
}
盒子陰影
box-shadow用來設定盒子陰影
box-shadow通常有六個內部設定,一般直接簡寫:
- box-shadow: 水平陰影(px) 垂直陰影(px) 模糊距離(px) 陰影尺寸(px) 顏色(color) 內部/外部(insert/outset)
- 我們一般常用設定為box-shadow: 10px 10px 10px -4px rbga(0,0,0,0.3)
- 注意:不可以寫outset,outset是預設的,如果寫了會導致陰影失效
- 注意:陰影不佔用盒子大小
下面我們給出程式碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子陰影</title>
<style>
/* 可以直接設定框架 */
div {
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
margin: 100px auto;
}
/*
也可以設定在當移動上才可顯示
div:hover {
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
margin: 100px auto;
}
*/
</style>
</head>
<body>
<div></div>
</body>
</html>
文字陰影
text-shadow用來設定盒子陰影
box-shadow通常有四個內部設定,一般直接簡寫:
- box-shadow: 水平陰影(px) 垂直陰影(px) 模糊距離(px) 顏色(color)
- 使用不多,瞭解即可
結束語
好的,CSS進階內容—盒子和陰影我們就講到這裡,你是否全部瞭解了呢?
下面我會介紹浮動定位,敬請期待哦~