昨日內容回顧
選擇器
基本選擇器
1 元素選擇器 p{color:red;} 2 id選擇器 #d1{color:red;} 3 類選擇器 .c1{color:red;} 4 5 通用選擇器 *{} 6 組合選擇器 7 後代選擇器 選擇器 選擇器{} 8 兒子選擇器 選擇器>選擇器{} 9 毗鄰選擇器 選擇器+選擇器{} 10 弟弟選擇器 選擇器~選擇器{} 11 屬性選擇器 12 [屬性名] --- [title] 13 [屬性名=屬性值] --- [title=xxx] 14 僞類選擇器 15 a:hover{} 鼠標懸浮 16 a:link{} 爲未問的a標籤 17 a:active{} 點擊瞬間設置的效果 18 a:visited{} 已訪問鏈接設置效果 19 input:focus{} 獲取焦點時設置的樣式 20 僞元素選擇器 21 選擇器:first-letter 首字母 22 選擇器:before 選擇器對應標籤內部前面插入一些內容 23 選擇器:after 選擇器對應標籤內部後面插入一些內容 24 分組選擇器 選擇器,選擇器,選擇器....{} 25 26 選擇器優先級 27 繼承 0 28 元素 1 29 類 10 30 id 100 31 內斂 1000 32 最牛逼 !important color:red!important; 33 34
css屬性相關
字體屬性
1 字體 font-family:'宋體' 2 字體大小 font-size:48px; 默認16px 3 字體顏色 color:red; 4 color:#ffffff 5 color:rgb(0,0,0) 6 color:rgba(0,0,0,0.3) 0.3透明度 7 子重 font-weight:bold; 100-900的數字 8 字體對齊 text-align:left;right;center 9 文字裝飾:text-decoration:none;underline;overline;line-through; 10 首行縮進:text-indent:32px; 16px 11
背景屬性
1 背景顏色 2 背景圖片 background-image:url('圖片路徑') 3 背景平鋪 background-repeat:no-repeat; 4 圖片位置 background-position:100px 50px; 距離左100px,距離上50px; 5 圖片位置 background-position:right bottom; 6 簡寫:background:red url('路徑') no-repeat 100px 50px; 7 ###background-attachment:fixed; 固定在屏幕的某個位置上
今日內容
邊框
1 div{ 2 3 width: 200px; 4 height: 200px; 5 /*border-style: solid;*/ 邊框樣式 6 /*border-color: red;*/ 邊框顏色 7 /*border-width: 10px;*/ 邊框寬度 8 /*border:10px solid red;*/ 簡寫方式 9 10 11 12 /*border-left-style: solid;*/ 13 /*border-left-width: 10px;*/ 14 15 /*border-right-style: dashed;*/ 16 /*border-top-style: dashed;*/ 17 /*border-bottom-style: dashed;*/ 18 /*border-right-width: 5px;*/ 19 border-left:10px solid red; 單獨設置邊框的簡寫方式 20 21 } 22 23 控制圓角 24 border-radius: 50%;
display屬性
1 div{ 2 width: 100px; 3 height: 100px; 4 border: 1px solid red; 5 /*display: inline; !* 將標籤設置爲內斂標籤 *!*/ 6 /*display: inline-block; !* 將標籤設置爲同時具有內斂和塊級標籤的一些特性,好比能夠設置高度寬度,可是不獨佔一行 *!*/ 7 /*display: none; !* 隱藏標籤 ,而且不佔用本身以前的空間*!*/ 8 9 } 10 span{ 11 border: 2px solid blue; 12 13 } 14 15 .c1{ 16 width: 200px; 17 height: 200px; 18 /*display: inline-block;*/ 19 display: block; /* 將內斂標籤設置爲塊級標籤 */ 20 } 21 22 值 意義 23 display:"none" HTML文檔中元素存在，可是在瀏覽器中不顯示。通常用於配合JavaScript代碼使用。 24 display:"block" 默認佔滿整個頁面寬度，若是設置了指定寬度，則會用margin填充剩下的部分。 25 display:"inline" 按行內元素顯示，此時再設置元素的width、height、margin-top、margin- bottom和float屬性都不會有什麼影響。 26 display:"inline-block" 使元素同時具備行內元素和塊級元素的特色。 27 28 29 隱藏標籤 30 visibility: hidden; /* 隱藏標籤,可是標籤還佔用原來的空間 */ 31 /*display: none; !* 隱藏標籤 ,而且不佔用本身以前的空間*!*/ 32
css盒子模型
1 content內容區域 2 padding 內邊距 3 border 邊框寬度 4 div{ 5 width: 200px; 6 height: 100px; 7 border: 2px solid deeppink; 8 /*padding-top: 10px;*/ 9 /*padding-left: 5px;*/ 10 /*padding-right: 2px;*/ 11 /*padding-bottom: 4px;*/ 12 /*padding: 10px 20px; !* 10px上下內邊距 ,20px左右內邊距 *!*/ 13 /*padding: 10px 20px 5px 2px; !* 10px上下內邊距 ,20px左右內邊距 *!*/ 14 padding: 10px 20px 5px 0; /* 10px上下內邊距 ,20px左右內邊距 */ 15 16 } 17 18 margin 外邊距 19 top距離上面標籤的距離 20 bottom距離下面標籤的距離 21 left 距離左邊標籤的距離 22 rigth 距離右邊標籤的距離 23 24 .d1 { 25 width: 200px; 26 height: 100px; 27 border: 2px solid deeppink; 28 margin-bottom: 200px; 29 } 30 .d2{ 31 margin-top: 100px; 32 border: 2px solid blue; 33 34 } 35 36 兩個簡寫的方式 37 /*margin: 10px 20px;*/ 38 margin: 10px 5px 6px 3px; 39 40 兩個狀況: 41 垂直方向若是上下兩個標籤都設置了margin外邊距,那麼取二者的最大的值 42 水平方法,兩個標籤都設這外邊距,取二者的邊距之和 43 44
浮動float
1 .c1{ 2 background-color: red; 3 height: 100px; 4 width: 100px; 5 float: left; 6 } 7 .c2{ 8 background-color: blue; 9 height: 100px; 10 width: 100px; 11 float: right; 12 } 13 14 浮動會形成父級標籤塌陷問題 15 解決方法: 16 1 父級標籤設置高度 17 2 僞元素選擇器清除浮動,給父級標籤加上下面這個類值 18 .clearfix:after{ 19 content: ''; 20 display: block; 21 clear: both; 清除浮動clear 22 } 23 24 clear的值和描述 25 值 描述 26 left 在左側不容許浮動元素。 27 right 在右側不容許浮動元素。 28 both 在左右兩側均不容許浮動元素。
overflow溢出屬性
1 .c1{ 2 width: 200px; 3 height: 200px; 4 border: 1px solid red; 5 /*overflow: hidden;*/ 6 overflow: auto; 7 } 8 <div class="c1"> 9 總結一下：爲何要有浮動啊，是想作頁面佈局，可是浮動有反作用，父級標籤塌陷，因此要想辦法去掉這個反作用，使用了clear來清除浮動帶來的反作用，咱們固然也能夠經過設置標籤爲inline-block來實現這種佈局效果，可是把一個塊級標籤變成一個相似內斂標籤的感受，很差操控，容易混亂，因此通常都用浮動來進行佈局。 10 </div> 11 12 值 描述 13 visible 默認值。內容不會被修剪，會呈如今元素框以外。 14 hidden 內容會被修剪，而且其他內容是不可見的。 15 scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。 16 auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
圓形頭像示例css
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>圓形的頭像示例</title> 8 <style> 9 10 .header-img { 11 width: 150px; 12 height: 150px; 13 border: 3px solid white; 14 border-radius: 50%; 15 overflow: hidden; 16 } 17 18 .header-img>img { 19 width: 100%; #讓img標籤按照外層div標籤的寬度來顯示 20 21 } 22 </style> 23 </head> 24 <body> 25 26 <div class="header-img"> 27 <img src="meinv.png" alt=""> 28 </div> 29 30 </body> 31 </html>
總結一點:width寬度設置的時候,直接能夠寫100px,30%這種百分比的寫法,它的寬度按照父級標籤的寬度的百分比來計算.html
定位position:相對定位和絕對定位瀏覽器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1{ 8 background-color: red; 9 height: 100px; 10 width: 100px; 11 } 12 .c2{ 13 background-color: blue; 14 height: 100px; 15 width: 100px; 16 /*position: relative; !*相對定位,保留原來的空間位置,相對本身原來的位置移動,以左上角爲基準*!*/ 17 18 /*top: 20px; 往下移20px,距離原來位置的上邊框20px */ 19 /*top: -20px;*/ 20 /*left: 20px;*/ 21 /*right: ;*/ 22 /*bottom: ;*/ 23 24 position: absolute; /* 絕對定位,不保留本身原來的位置,按照父級標籤或者祖先級標籤..設置了position爲 relative的標籤的位置進行移動,若是一直找不到設置了設個屬性的標籤,那麼按照body標籤來移動 */ 25 26 top: 20px; 27 left: 20px; 28 } 29 .c3{ 30 background-color: green; 31 height: 100px; 32 width: 100px; 33 } 34 .ccc{ 35 height: 100px; 36 width: 200px; 37 background-color: purple; 38 } 39 .cc{ 40 position: relative; 41 left: 200px; 42 } 43 </style> 44 </head> 45 <body> 46 <div class="ccc"></div> 47 <div class="cc"> 48 <div class="c1"></div> 49 <div class="c2"></div> 50 <div class="c3"></div> 51 </div> 52 53 </body> 54 </html>
回到頂部示例:position爲fixed固定定位,經過相對於瀏覽器窗口的距離來設置位置.佈局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1{ 8 background-color: red; 9 height: 500px; 10 width: 200px; 11 } 12 .c2{ 13 background-color: green; 14 height: 500px; 15 width: 200px; 16 } 17 18 .s1{ 19 position: fixed; /*固定定位,位置是根據瀏覽器窗口來的*/ 20 /*top:20px;*/ 21 left: 20px; 22 bottom: 20px; 23 background-color: blue; 24 height: 40px; 25 width: 80px; 26 text-align: center; 27 28 line-height: 40px; /* 和標籤高度一致,標籤內容就垂直居中 */ 29 30 } 31 .s1 a{ 32 color: white; 33 text-decoration: none; 34 } 35 </style> 36 </head> 37 <body> 38 39 <!--<a name="top">這裏是頂部,親愛的</a>--> <!-- 錨點 --> 40 <div id="top">這是頂部</div> <!-- 錨點 --> 41 42 <div class="c1"></div> 43 <div class="c2"></div> 44 45 <span class="s1"> 46 <a href="#top">回到頂部</a> <!-- 觸發錨點 --> 47 </span> 48 49 </body> 50 </html> 51 52 53 錨點設置的兩種方式 54 <!--<a name="top">這裏是頂部,親愛的</a>--> <!-- 錨點 --> 55 <div id="top">這是頂部</div> <!-- 錨點 --> 56 觸發錨點的a標籤寫法 57 <a href="#top">回到頂部</a> <!-- 觸發錨點 -->
z-index控制層級
模態對話框示例:字體
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .shadow{ 8 position: fixed; 9 top:0; 10 bottom: 0; 11 left: 0; 12 right: 0; 13 background-color: rgba(0,0,0,0.5); 14 z-index: 99; 15 } 16 .mode{ 17 position: fixed; 18 height: 400px; 19 width: 300px; 20 background-color: white; 21 z-index: 100; /* 數值越大越在上層顯示 */ 22 left: 50%; /* 按照窗口寬度的50%來移動 */ 23 top:50%; /* 按照窗口高度的50%來移動 */ 24 margin-left: -150px; 25 margin-top: -200px; 26 27 } 28 29 </style> 30 </head> 31 <body> 32 33 <div> 34 <h1> 35 22期,吳老闆唱歌 36 </h1> 37 </div> 38 39 40 <div class="mode"> 41 42 </div> 43 44 <div class="shadow"> 45 46 </div> 47 48 49 </body> 50 </html>
opacity透明度
1 .c1{ 2 background-color: rgba(255,0,0,0.3); /* 背景顏色或者字體顏色等單獨的透明度 */ 3 height: 100px; 4 width: 100px; 5 } 6 .c2{ 7 background-color: rgb(255,0,0); 8 height: 100px; 9 width: 100px; 10 opacity: 0.3; /* 整個標籤透明度 */ 11 } 12 <div class="c1"> 13 你好 14 </div> 15 <div class="c2"> 16 我好 17 </div>