【狂神說JAVA】CSS(通俗易懂版)
阿新 • • 發佈：2020-11-25
1、CSS的3種匯入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--內部樣式--> <style> h1{ color: green; } </style> <!--外部樣式--> <link rel="stylesheet" href="css/style.css" /> </head> <body> <!--優先順序：就近原則--> <!--行內樣式：在標籤元素中，編寫一個style屬性，編寫樣式即可--> <h1 style="color: red">這是標籤</h1> </body> </html>
2、選擇器
2.1基本選擇器
2.1.1標籤選擇器
選擇一類標籤 標籤{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: aqua; } </style> </head> <body> <h1>標籤1</h1> <h1>標籤2</h1> <h1>標籤3</h1> <h1>標籤4</h1> </body> </html>
2.1.2類選擇器(class)
選擇所有class一致的標籤，跨標籤，格式：.類名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*類選擇器的格式 .class的名稱{} 好處：可以多個標籤歸類，是同一個class，可以複用 */ .demo1{ color: blue; } .demo2{ color: red; } .demo3{ color: aqua; } </style> </head> <body> <h1 class ="demo1">類選擇器：demo1</h1> <h1 class="demo2">類選擇器：demo2</h1> <h1 class="demo3">類選擇器：demo3</h1> </body> </html>
2.1.3id 選擇器
全域性唯一，格式：#id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id選擇器：id必須保證全域性唯一
#id名稱{}
不遵循就近原則，優先順序是固定的
id選擇器 > 類選擇器 > 標籤選擇器
*/
#demo1{
color: aqua;
}
.demo2{
color: red;
}
#demo2{
color: orange;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1 id="demo1">id選擇器：demo1</h1>
<h1 class="demo2" id = "demo2">id選擇器：demo2</h1>
<h1 class="demo2">id選擇器：demo3</h1>
<h1>id選擇器：demo4</h1>
<h1>id選擇器：demo5</h1>
</body>
</html>
注意：優先順序：id > class > 標籤
2.2層次選擇器
2.2.1後代選擇器
在某個元素的後面
/*後代選擇器*/
<style>
body p{
background:red;
}
</style>
2.2.2子選擇器
子類一代
/*子選擇器*/
<style>
body>p{
background:orange;
}
</style>
2.2.3相鄰的兄弟選擇器
注意：同輩只有一個，相鄰（向下）
/*相鄰兄弟選擇器：只有一個，相鄰（向下）*/
<style>
.active+p{
background: red
}
</style>
<body>
<p class="active">p1<p>
<p>p2</p>
</body>
2.2.4通用選擇器
注意：當前選中元素的向下的所有兄弟元素
<style>
/*通用兄弟選擇器，當前選中元素的向下的所有兄弟元素*/
.active~p{
background:red;
}
</style>
<body>
<p class="active">p1<p>
<p>p2</p>
</body>
2.3結構偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul的第一個子元素*/
ul li:first-child{
background: aqua;
}
/*ul的最後一個子元素*/
ul li:last-child{
background: blue;
}
/*選中p1：定位到父元素，選擇當前的第一個元素
選擇當前p元素 的父級元素，選中父級元素的第一個，並且是當前元素才生效！
*/
p:nth-child(1){
background: orange;
}
/*選中父元素下的，第2個p元素*/
p:nth-of-type(2){
background: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>l1</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
</body>
</html>
2.4屬性選擇器（常用）
標籤[屬性名=屬性值(正則)]{}
正則：
=表示絕對等於
*=表示包含
^=表示以...開頭
$=表示以...結尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
display: block;
height: 50px;
width: 50px;
float:left;
border-radius: 10px;
background: blue;
text-align: center;
color: beige;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*屬性名，屬性名=屬性值（正則）
=表示絕對等於
*=表示包含
^=表示以...開頭
$=表示以...結尾
存在id屬性的元素 a[]{}
*/
/* a[id]{
background: red;
}*/
/*id=first的元素*/
/* a[id=first]{
background: aqua;
}*/
/*class中有links元素*/
/* a[class = "links item2 first2"]{
background: orange;
}*/
/*a[class*="links"]{
background: black ;
}*/
/*選中href中以http開頭的元素*/
a[href^="http"]{
background: orange;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="/adad/faf" class="links item2 first2" >2</a>
<a href="qwe123" class="links item3 first3" >3</a>
<a href="eweqe" class="links item4 first4" >4</a>
<a href="rrrrr" class="links item5 first5" >5</a>
<a href="ttt" class="links item6 first6" >6</a>
<a href="yyy" class="links item7 first7" >7</a>
</p>
</body>
</html>
3、美化網頁元素
3.1為什麼要美化網頁
- 有效的傳遞頁面資訊
- 美化網頁，頁面漂亮才能吸引客戶
- 凸顯頁面的主題
- 提高使用者的體驗
span標籤：重點要突出的字，使用span標籤套起來
font-family：字型
font-size：字型大小
font-weight：字型粗細
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#study{
font-size: 100px;
}
</style>
</head>
<body>
學習<span id="study">CSS</span>
</body>
</html>
3.2字型樣式
font-weight:bolder;/*也可以填px，但數值不能超過900,900相當於bloder*/
/*常用寫法：*/
font:oblique bloder 12px "楷體"
3.3文字樣式
- 顏色–>color
- 文字對齊方式–>text-align：center
- 首行縮排–>text-indent：2em
- 行高–>line-height：300px；
- 下劃線–>text-decoration
color:red;/*紅色*/
text-align: center;/*居中*/
text-decoration:underline/*下劃線*/
text-decoration:line-through/*中劃線*/
text-decoration:overline/*上劃線*/
text-decoration:none/*超連結去下劃線*/
圖片、文字水平對齊
img,span{vetical-align:middle}
3.4文字，陰影和超連結偽類
<style>
a{/*超連結有預設的顏色*/
text-decoration:none;/*下劃線設定為空*/
color:#000000;
}
a:hover{/*滑鼠懸浮的狀態*/
color:orange;
}
a:active{/*滑鼠按住未釋放的狀態*/
color:green
}
a:visited{/*點選之後的狀態*/
color:red
}
</style>
陰影：
/* 第一個引數：表示水平偏移
第二個引數：表示垂直偏移
第三個引數：表示模糊半徑
第四個引數：表示顏色
*/
text-shadow:5px 5px 5px 顏色
3.5列表ul li
/*list-style{
none:去掉原點
circle：空心圓
decimal：數字
square：正方形
}*/
ul li{
height:30px;
list-style:none;
text-indent:1em;
}
a{
text-decoration:none;
font-size:14px;
color:#000;
}
a:hover{
color:orange;
text-decoration:underline
}
/*放在div中，作為導航欄*/
<div id="nav"></div>
#nav{
width:300px;
}
3.6列表ul li
/*list-style{
none:去掉原點
circle：空心圓
decimal：數字
square：正方形
}*/
ul li{
height:30px;
list-style:none;
text-indent:1em;
}
a{
text-decoration:none;
font-size:14px;
color:#000;
}
a:hover{
color:orange;
text-decoration:underline
}
/*放在div中，作為導航欄*/
<div id="nav"></div>
#nav{
width:300px;
}
3.7背景
- 背景顏色：background
- 背景圖片
background-image:url("");/*預設是全部平鋪的*/
background-repeat:repeat-x/*水平平鋪*/
background-repeat:repeat-y/*垂直平鋪*/
background-repeat:no-repeat/*不平鋪*/
綜合使用
background:red url("圖片相對路勁") 270px 10px no-repeat
background-position：/*定位：背景位置*/
12
4、盒子模型
4.1什麼是盒子模型
- margin：外邊距
- padding：內邊距
- border：邊框
4.2邊框
border：粗細 樣式 顏色
-
邊框的粗細
-
邊框的樣式
-
邊框的顏色
測試程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav{
text-align: center;
width: 300px;
height: 200px;
border:1px solid red;
}
#user input{
border: 2px solid green;
}
</style>
</head>
<body>
<div id="nav">
<h1>會員登入</h1>
<form action="#">
<div id="user">
<span>使用者名稱：</span>
<input type="text">
</div>
<div>
<span>密碼：</span>
<input type="text">
</div>
<div>
<span>郵箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
4.3外邊距----妙用：居中
margin-left/right/top/bottom–>表示四邊，可分別設定，也可以同時設定如下
margin:0 0 0 0/*分別表示上、右、下、左；從上開始順時針*/
/*例1：居中*/
margin:0 auto /*auto表示左右自動*/
/*例2：*/
margin:4px/*表示上、右、下、左都為4px*/
/*例3*/
margin:10px 20px 30px/*表示上為10px，左右為20px，下為30px*/
1234567
盒子的計算方式：
margin+border+padding+內容的大小
總結：
body總有一個預設的外邊距 margin:0
常見操作：初始化
margin:0;
padding:0;
text-decoration:none;
123
4.4圓角邊框----border-radius
border-radius有四個引數（順時針），左上->右上->右下->左下
圓圈：圓角=半徑
5、浮動
5.1標準文件流
塊級元素：獨佔一行 h1~h6 、p、div、 列表…
行內元素：不獨佔一行 span、a、img、strong
注： 行內元素可以包含在塊級元素中，反之則不可以。
5.2、display（重要）
- block：塊元素
- inline：行內元素
- inline-block：是塊元素，但是可以內聯，在一行
這也是一種實現行內元素排列的方式，但是我們很多情況用float
- none：消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--block 塊元素
inline 行內元素
inline-block 是塊元素，但是可以內聯 ，在一行
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div塊元素</div>
<span>span行內元素</span>
</body>
</html>
5.3float：left/right左右浮動
clear：both
5.4overflow及父級邊框塌陷問題
clear：
right：右側不允許有浮動元素
left：左側不允許有浮動元素
both：兩側不允許有浮動元素
none：
解決塌陷問題方案：
方案一：增加父級元素的高度；
方案二：增加一個空的div標籤，清除浮動
<div class = "clear"></div>
<style>
.clear{
clear:both;
margin:0;
padding:0;
}
</style>
方案三：在父級元素中增加一個overflow：hidden
overflow:hidden/*隱藏*/
overflow：scoll/*滾動*/
方案四：父類新增一個偽類:after
#father:after{
content:'';
display:block;
clear:both;
}
小結：
- 浮動元素增加空div->簡單、程式碼儘量避免空div
- 設定父元素的高度->簡單，元素假設沒有了固定的高度，就會超出
- overflow->簡單，下拉的一些場景避免使用
- 父類新增一個偽類:after（推薦）->寫法稍微複雜，但是沒有副作用，推薦使用
5.5display與float對比
- display：方向不可以控制
- float：浮動起來的話會脫離標準文件流，所以要解決父級邊框塌陷的問題。
6、定位
6.1相對定位
相對定位：positon：relstive；
相對於原來的位置，進行指定的偏移，相對定位的話，它仍然在標準文件流中，原來的位置會被保留
top:-20px;
left:20px;
bottom:-10px;
right:20px;
6.2絕對定位-absolute
定位：基於xxx定位，上下左右~
1、沒有父級元素定位的前提下，相對於瀏覽器定位
2、假設父級元素存在定位，我們通常會相對於父級元素進行偏移
3、在父級元素範圍內移動
總結：相對一父級或瀏覽器的位置，進行指定的偏移，絕對定位的話，它不在標準文件流中，原來的位置不會被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
position: relative;
}
#first{
background-color: #a13d30;
border: 1px dashed #b27530;
}
#second{
background-color: green;
border: 1px dashed #0ece4f;
position: absolute;
right:30px;
top:30px
}
#third{
background-color: red;
border: 1px dashed #ff1b87;
}
</style>
</head>
<body>
<div id = "father">
<div id="first">第一個盒子</div>
<div id="second">第二個盒子</div>
<div id="third">第三個盒子</div>
</div>
</body>
</html>
6.3固定定位-fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){/*絕對定位：沒有相對的父級元素，所以相對於瀏覽器*/
width: 100px;
height: 100px;
background:red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
6.4、z-index
圖層z-index：預設是0，最高無限999
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/bg.jpg" alt=""></li>
<li class="tipText">學習微服務，找狂神</li>
<li class="tipBg"></li>
<li>時間：2099-01=01</li>
<li>地點：月球一號基地</li>
</ul>
</div>
</body>
</html>
#content{
width: 380;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid yellow;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父級元素相對定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 380px;
height: 25px;
top:216px
}
.tipText{
color: white;
z-index: 999;
}
.tipBg{
background: orange;
opacity: 0.5;/*背景透明度*/
filter: alpha(opacity=50);
}
7、css總結
自學習B站狂神學java,侵刪，僅作為筆記所用！