03、css樣式相關
阿新 • • 發佈：2020-09-06
一、高度寬度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 100px; width: 100px; background-color: pink; } span { height: 100px; width: 100px; background-color: green; } </style> </head> <body> <div> div1 </div> <span>span1</span> </body> </html>
""" width: 50%; 寬度高度可以設定百分比,會按照父級標籤的高度寬度來計算 但是如果給高度設定百分比，那麼必須要求父級標籤有固定高度才行 """
二、文字屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ /*所有單詞首字母大寫*/ text-transform: capitalize; /*單詞與單詞的間距*/ word-spacing: 20px; /*字元間距*/ letter-spacing: 10px; /*首行縮排*/ text-indent: 150px; height: 100px; background-color: aquamarine; /*文字居中*/ text-align: center; /*行高 讓文字佔div這麼多行*/ /*line-height: 100px;*/ } </style> </head> <body> <div>介紹文字屬性介紹文字屬性介紹文字屬性介紹文字屬性 介紹文字屬性 <div>hello world hello world hello world hello world </div> <p>hello</p> </div> </body> </html>
a標籤中文字裝飾
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ /*text-decoration: line-through;*/ /*text-decoration: overline;*/ /*text-decoration: underline;*/ } /* 記住，去除a標籤下劃線的時候使用 */ a{ text-decoration: none; } </style> </head> <body> <span>聞哥日行一善</span> <a href="">聞哥</a> </body> </html>
三、字型相關
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span { font-size: 20px; /* 字型大小 */ color: blue; /* 字型顏色 */ font-family: '楷體', '宋體'; /* 字型 */ font-weight: 100; /* 字重 字型粗細 100-900，預設是400 */ } </style> </head> <body> <div> 窗前明月光,地上鞋三雙! </div> </body> </html>
四、字型對齊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { font-size: 20px; /* 字型大小 */ color: blue; /* 字型顏色 */ font-family: '楷體', '宋體'; /* 字型 */ font-weight: 100; /* 字重 字型粗細 100-900，預設是400 */ height: 200px; width: 200px; border: 1px solid red; text-align: center; /* left左對齊，center水平居中，right右對齊 */ /*line-height: 200px;*/ /* 和height相等，文字內容就能垂直居中對齊 */ /*如果既有字型 又有圖片想要居中就不能用line-height了*/ /*彈性盒子做垂直居中效果*/ display: flex; aline-items: center; } </style> </head> <body> <div> 窗前明月光,地上鞋三雙! </div> </body> </html>
五、背景顏色設定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { /*三種方式:*/ /*background-color: red; 英文單詞*/ /*background-color: #7969d2; 16進位制數表示*/ background-color: rgb(92, 187, 138); /* rgb顏色表示方法 */ /*background-color: rgba(92, 187, 138,0.5); !* rgba加上了透明度，透明度的取值範圍0-1 *!*/ height: 100px; width: 100px; color: red; opacity: 0.2; /* 整個標籤設定透明度 */ } </style> </head> <body> <div> 窗前明月光,地上鞋三雙! </div> </body> </html>
六、背景圖片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 600px; width: 600px; /*background-color: red;*/ /*background-image: url("圖片路徑");*/ /*background-image: url("nbhlw.jpg");*/ /*background-repeat: no-repeat; !* 是否平鋪， 預設是鋪滿整個標籤，no-repeat不平鋪，repeat-y:縱向平鋪，repeat-x：橫向平鋪*!*/ /*background-position: left center ;*/ /*background-position: 50px 100px; !* 距離左邊的距離和距離上面的距離 *!*/ background: green url("111.png") no-repeat center center; /* 簡寫形式 */ border: 1px solid red; } </style> </head> <body> <div class="c1"> </div> </body> </html>
七、邊框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 600px; width: 600px; /*border: 1px dashed red; 下面三個簡寫形式*/ /*border-width: 10px;*/ /* 線寬 */ /*border-style: solid;*//* 線樣式 */ /*border-color: blue;*//* 線顏色 */ /* 四個方向單獨設定*/ border-left: 10px solid yellow; /* 單邊框的簡寫形式 */ /*border-left-width: 10px;*/ /*border-left-style: solid;*/ /*border-left-color: yellow;*/ /*border-right-width: 10px;*/ /*border-right-style: solid;*/ /*border-right-color: green;*/ } </style> </head> <body> <div class="c1"> </div> </body> </html>
八、列表屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ol,ul{ /*專案符號是 01 02 03*/ /*list-style: decimal-leading-zero*/ /*專案符號是 空心圓*/ /*list-style: circle;*/ /*專案符號是 實心方塊*/ /*list-style: square;*/ /*去掉專案符號*/ list-style: none; } </style> </head> <body> <ul> <li>111</li> <li>111</li> <li>111</li> </ul> <!--order list 有序列表 1 2 3--> <ol> <li>111</li> <li>111</li> <li>111</li> </ol> <dl> <dt>第一章</dt> <dd>第一節</dd> <dd>第二節</dd> <dd>第三節</dd> </dl> </body> </html>
九、盒子模型
""" margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制 元素周圍空間的間隔， 從而視覺角度上達到相互隔開的目的 padding：用於控制內容與邊框之間的距離 border（邊框）：圍繞在內邊距和內容外的邊框 content（內容）：盒子的內容，像是文字和影象 """
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { width: 100px; height: 100px; background-color: yellow; margin-bottom: 20px; } .c2 { width: 100px; height: 100px; /*padding: 4px 5px 2px 8px;*/ /* 上右下左 */ padding: 15px 10px; /* 上下、左右 */ /*padding-top: 10px;*/ border: 2px solid purple; margin-top: 40px; /*margin: 10px 15px 5px 8px; !* 上右下左 *!*/ /*margin: 10px 15px; !* 上下、左右 *!*/ } </style> </head> <body> <div class="c1"> </div> <div class="c2"> </div> </body> </html>
注意:如果兩個相鄰標籤都設定了margin兩者之間的距離，那麼不會累加，而是選最大值為兩者的距離
十、display屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { width: 100px; height: 100px; background-color: red; /*display: inline;!* 將塊級標籤改為內斂標籤 *!*/ /*display: inline-block;!* 將標籤改為具有內斂標籤和塊級標籤屬性效果的標籤，可以設定高度寬度，而且不獨佔一行 *!*/ display: none; /* 隱藏標籤,常用！ */ } span { width: 100px; height: 100px; background-color: blue; display: block; /* 將內斂標籤改為塊級標籤 */ } </style> </head> <body> <div class="c1"> 八戒 </div> <span class="c2"> 悟空 </span> <a href="">xxx</a> </body> </html>
十一、偽元素選擇器
# 可以用它來清除浮動，避免塌陷
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; border: 1px solid red; } /*div::after{*/ div:after{ content: '?'; } div:before{ content: '*'; } </style> </head> <body> <div> aaaaa </div> </body> </html>
十二、浮動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .main-left{ height: 100px; width: 100px; background-color: red; float: left; /* 浮動起來的元素，可以設定高度寬度，並且不獨佔一行 */ } .main-right{ height: 100px; width: 100px; background-color: green; float: right; } .content{ width: 100%; height: 200px; background-color: yellow; } /* 浮動的元素會脫離正常文件流，會造成父級標籤塌陷問題，解決塌陷問題有以下幾種方法 */ /* 方式1：給父級標籤加高度，不常用 */ /*.main{*/ /* height: 100px;*/ /*}*/ /* 方式2，清除浮動 */ /*.content{*/ /* clear: both; !* 我這標籤上面不能有浮動的元素蓋著我 *!*/ /*}*/ /* 方式3：常用 */ .clearfix:after{ content: ''; display: block; clear: both; } /* 方式4：常用 */ .main{ overflow: hidden; } </style> </head> <body> <!--<div class="main clearfix"> <!– class類值可以寫多個 –>--> <div class="main"> <!-- class類值可以寫多個 --> aaaaaa <div class="main-left"></div> <div class="main-right"></div> </div> <div class="content"></div> </body> </html>浮動
十三、偽類選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* a標籤未訪問時設定樣式 */ a:link{ color:gold; } /* 點選按下去之後，抬起之前顯示樣式 */ a:active{ color:red; } /* 網址被訪問過之後，顯示樣式 */ a:visited{ color:green; } /* 滑鼠懸浮時 設定樣式 */ a:hover{ color:purple; } .c1{ width: 200px; height: 200px; background-color: aqua; } .c1:hover{ background-color: orange; cursor: pointer; /* 滑鼠的小手效果 */ /*cursor: help;*/ } </style> </head> <body> <a href="http://www.4399.com">小遊戲</a> <div class="c1"> </div> </body> </html>
十四、定位
""" static 靜態定位,也就是標籤預設 relative: 相對定位,按照自己原來的位置進行移動 absolute: 絕對定位,按照父級標籤或者祖先輩兒標籤設定了相對定位的標籤位置進行移動,如果沒有找到相對定位標籤,會找到整個文件的位置進行移動 fixed: 固定定位, 按照瀏覽器視窗的位置進行移動 """
1、相對定位和絕對定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; padding: 0; } .c1{ height: 100px; width: 100px; background-color: red; } .c2{ height: 100px; width: 100px; background-color: green; /*position:relative;*/ /* top\left\right\bottm四個方向的值來控制標籤位置 */ /* 按照自己原來的位置進行移動 */ /* 標籤還佔據自己原來的空間 */ /* 脫離正常文件流，所以能夠覆蓋別的標籤 */ /*left:50px; !* 距離自己原來的位置左邊有100px距離 *!*/ /*top:-100px;*/ /* 絕對定位 */ /* 脫離正常文件流，並且不佔自己原來的空間 */ /*如果父級或者祖先輩標籤沒有設定相對定位，那麼絕對定位的元素會按照整個html文件的位置進行移動, 如果父級標籤或者祖先輩標籤設定了相對定位，那麼按照父級標籤或者祖先輩標籤的位置進行移動 */ position: absolute; left:50px; top:20px; } .cc{ position: relative; margin-left: 100px; } .c3{ height: 100px; width: 100px; background-color: pink; } .c4{ height: 100px; width: 100px; background-color: blue; } </style> </head> <body> <div class="c4"></div> <div class="cc"> <div class="c1"></div> <div class="c2"></div> </div> <div class="c3"></div> </body> </html>相對定位和絕對定位
2、固定定位
# 回到頂部示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; height: 800px; } .c2{ background-color: blue; height: 800px; } .c3{ /* 相對於瀏覽器視窗來設定位置 */ position: fixed; left:40px; bottom: 60px; height: 40px; width: 80px; background-color: aqua; text-align: center; line-height: 40px; border-radius: 50%; } .c3 a{ text-decoration: none; color:black; } </style> </head> <body> <div id="top">頂部位置</div> <div class="c1"></div> <div class="c2"></div> <span class="c3"> <a href="#top">回到頂部</a> </span> </body> </html>固定定位
例項：小米商城導航欄
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="xx.js"></script>--> <script> </script> <style> body{ margin: 0; padding: 0; } .nav{ height: 40px; background-color: #333; line-height: 40px; } .clearfix:after{ content:''; display: block; clear: both; } .nav-content{ margin-left: 5%; width: 90%; /*overflow: hidden;*/ position: relative; } .nav-content .nav-left{ float: left; height: 40px; } .nav-content .nav-right{ float: right; height: 40px; } .nav-content a{ color: #B0B0B0; text-decoration: none; font-size: 12px; } .nav-content .shugang{ color: #424242; } .nav-content a:hover{ color:#fff; } .cart-part .cart{ display: inline-block; height: 40px; width: 120px; background-color: #424242; text-align: center; } .cart-part .cart:hover{ color: #ff6700; background-color: white; } .cart_list{ height: 100px; width: 320px; position: absolute; right: 0; top:40px; background-color: red; } .cart-part{ float: right; } .cart-part:hover .cart_list{ display: block; } .hide{ display: none; } </style> </head> <body> <div class="nav" id="nav"> <div class="nav-content clearfix"> <div class="nav-left"> <a href="" class="nav-link">小米商城</a> <span class="shugang">|</span> <a href="" class="nav-link">小米</a> <span class="shugang">|</span> <a href="" class="nav-link">小商城</a> <span class="shugang">|</span> <a href="" class="nav-link">小城</a> <span class="shugang">|</span> <a href="" class="nav-link">城</a> <span class="shugang">|</span> <a href="" class="nav-link">小商城</a> <span class="shugang">|</span> <a href="" class="nav-link">商城</a> <span class="shugang">|</span> <a href="" class="nav-link">米商城</a> <span class="shugang">|</span> <a href="" class="nav-link">小米</a> <span class="shugang">|</span> <a href="" class="nav-link">小商城</a> <span class="shugang">|</span> <a href="" class="nav-link">小米商城</a> <span class="shugang">|</span> <a href="" class="nav-link">小米商城</a> <span class="shugang">|</span> <a href="" class="nav-link">小米商城</a> </div> <div class="cart-part"> <a href="" class="nav-link cart">購物車 (0)</a> <div class="cart_list hide"> </div> </div> <div class="nav-right"> <a href="" class="nav-link">登入</a> <span class="shugang">|</span> <a href="" class="nav-link">註冊</a> <span class="shugang">|</span> <a href="" class="nav-link">訊息通知</a> </div> </div> </div> </body> <!--<script src="xx.js"></script>--> <script> (function(){alert('該吃飯了！')})(); </script> </html>導航欄
十五、選擇器優先順序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color:red; } /* css繼承效果 -- 優先順序0 */ /*元素選擇器--優先順序是1*/ /*優先順序相同的，會優先顯示後面的*/ span{ color:blue; } /*span{*/ /* color:purple;*/ /*}*/ /*類值選擇器優先順序為10*/ .c1{ color:yellow; } .c2{ color: pink; } /*id選擇器優先順序為100*/ #d1{ color: aqua!important; } /*內斂樣式優先順序為1000*/ /* !important優先順序最高 */ /* 多級選擇器，優先順序累加，但是不進位，意思是11個類值選擇器也大不過一個id選擇器 */ /*.cc .c1{*/ /* */ /*}*/ </style> </head> <body> <div class="cc"> 低頭思姑娘 <span class="c1 c2" id="d1" style="color:orange;"> 少年不知什麼貴 </span> </div> </body> </html>選擇器優先順序