CSS課程講解2(偽類,盒子模型)
一.外聯樣式
通過link標籤引入外部css資料夾中的xxx.css檔案到head標籤中
例:
二.
1.組選擇器
選擇器名稱1,選擇器名稱2,選擇器名稱3,…{屬性:屬性值;屬性;屬性值}
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .div1,.div2,.div3,p,h1,h2{ width: 200px; height: 100px; } .div1,.div2,.div3{ background: green; } p,h1,h2{ background: red; } </style> </head> <body> <div class="div1">div1</div> <!--組合選擇器--> <!--設定該html文件流中所有的標籤 寬高一樣,背景顏色不一樣--> <div class="div2">div2</div> <div class="div3">div3</div> <p class="p1">p元素</p> <h1>標題1</h1> <h2>標題2</h2> <!--這個div和以上的所有div寬高不一樣--> <div></div> </body> </html>
2.偽類/偽元素選擇器
a::偽類提高瀏覽器的相容性
a:link 設定超連結未被訪問時的頁面顯示
a:visited 設定超連結已被訪問過時的頁面顯示
a:hover 設定滑鼠懸停在超連結時的頁面顯示
a:active 設定點選時的超連結頁面顯示
注意:它們四個書寫的順序很重要(link和visited必須寫到hover之前,active必須位於hover之後.)
3.返回頂部案例:通過name命名,超連結繫結
例:
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> a{ text-decoration: none; //去掉下劃線// font-family: 阿美簡體; font-size: 24px; color: black; } //a::偽類:提高瀏覽器的相容性// a:link{ //設定超連結未被訪問時的頁面顯示// color: red; } a:visited{ //設定超連結已被訪問過時的頁面顯示// color: green; } a:hover{ //設定滑鼠懸停在超連結時的頁面顯示// color: deeppink; } a:active{ //設定點選時的超連結頁面顯示// color: gold; } input:focus{ background: red; } body:hover{ background: grey; } div{ width: 200px; height: 200px; background: green; } div:hover{ width: 100px; height: 100px; background: url(img/bg2.jpg); background-repeat: no-repeat; //去掉圖片的重複性// background-size: 100% 100%; } </style> </head> <body> <div></div> <input type="text" /> <a href="#" name="mya">我的超連結</a> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <a href="#mya">返回頂部</a> </body>
4.圓角顯示邊框
border:none 無邊框
//border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;//
簡寫://border-radius: 50%;//
邊框的陰影:box-shadow: 20px 10px 60px 15px gray;(水平,垂直,模糊程度 ,陰影大小,顏色)
5.css三種樣式的優先順序
預設:行內>內嵌>外聯
css三種樣式的權重/改變優先順序:!important
6.偽類選擇的元素:nth-chid()
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
list-style: none;
float: left;
border: 1px solid aqua;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
}
div{
width: 450px;
height: 400px;
margin: 100px auto;
}
li:nth-child(7n){
background: red;
}
li:nth-child(6n){
background: green;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
</ul>
</div>
</body>
</html>
效果:
7.盒子模型
(1)重要的組成元素:
content(內容),padding(內邊距),border(邊框),margin(外邊距)
(2)margin
margin:100px auto;(100px 表示的是上下的外邊距 auto表示的左右水平居中)
margin:10px,20px,30px,40px;(上,右,下,左,)
margin;10px,20px,30px;(0px 表示上 20px表示左/右 30px表示下)
margin: 10px 20px;(10px表示上下 20px表示左右)
margin: 30px;(30px表示上右下左 都為這值)
(3)讓元素中的內容與元素邊框之間的距離增大,可以設定元素的內邊距
padding: 10px 20px 30px 40px;(上10px,右20px,下30px,左40px)
padding: 10px 20px 30px;(上 , 左/右 , 下)
8.margin-top塌陷問題
產生:一個元素中含有一個子元素,給子元素新增margin-top時,會發現將設定的值新增給父元素,導致子元素設定margin-top失效
解決方法:
(1)給父元素加overflow:hidden;
(2)給父元素加border邊框
(3) 偽元素
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 400px;
height: 200px;
background: red;
//會改變大小//
//padding: 30px;//
//第一種解決margin-top塌陷問題的方式//
//overflow: hidden;//
//第二種方法解決margin-top塌陷問題*/
//border: 10px solid black;//
}
//最常見的一個問題(bug): margin-top塌陷問題//
//margin-top: 100px;//
.div2{margin-top: 100px;
margin-left: 30px;
}
//第三種方法//
.div1:before{
content: "";
display: table;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">我愛學習學習使我快樂</div>
</div>
</body>
</html>
9.元素溢位
產生:元素溢位指一個元素中含有其他元素,而其他元素超出了這個元素(父元素),我們把這種情況稱之為元素溢位.
解決方法:
overflow:hidden;超出父元素的部分隱藏(剪下)不在可見
overflow: scroll;設定此屬性,內容會被裁剪, 但是會新增滾動條,以便顯示被裁剪的內容
overflow:visible;預設值,不會修剪,會呈現在元素框外
overflow-y:scroll;垂直滾動條
overflow-x:scroll;水平滾動條
overflow:auto;如果剪下了才顯示滾動條
10.佈局中常見的三種標籤
(1)塊元素/標籤:塊元素會佔據文件流的一行顯示,即便設定了寬高也會佔據一行顯示.
(2)內聯標籤/元素:內聯元素的大小是跟隨元素內容的改變而改變,設定了寬高,也不會改變元素的大小,同時不會佔據文件流的一行,從左往右編寫執行
(3)內聯塊標籤/元素:不佔據一行,且能設定寬高.
display屬性:
可以將內聯元素轉換成內聯塊元素/塊元素,同時也可以將內聯塊元素轉換成內聯元素/塊元素,還可以將塊元素轉換成內聯元素/內聯塊元素
display屬性值:
none:元素影藏不顯示
inline: 轉換成內聯元素
block:轉換成塊元素,並顯示元素
inline-block: 轉換成內聯塊元素