【前端】CSS基礎
阿新 • • 發佈：2018-09-29
isp eat jpg over css優先級 地方 margin pin lar
1.CSS選擇器
1 1、id選擇器 2 3 2、class選擇器 4 5 3、標簽選擇器 6 7 4、層級選擇器（空格） 8 9 5、組合選擇器（逗號） 10 11 6、屬性選擇器（中括號） 12 13 <!DOCTYPE html> 14 15 <html lang="en"> 16 17 <head> 18 19 <meta charset="UTF-8"> 20 21 <title>Title</title> 22 23 <style> 24 25 /* id選擇器 --> */ 26 27 #i1{ 28 29 height: 48px; 30 31 background-color: red; 32 33 } 34 35 /* class選擇器 最常用 */ 36 37 .div{ 38 39 height: 48px; 40 41 background-color: aqua; 42 43 } 44 45 /* 標簽選擇器 */ 4647 span{ 48 49 color: red; 50 51 background-color: blue; 52 53 } 54 55 56 57 /* 層級選擇器 組合選擇器 span標簽下面所有div標簽顏色改變 層級通過空格*/ 58 59 span div{ 60 61 color: aqua; 62 63 background-color: red; 64 65 } 66 67 68 69 /* class 層級選擇器 層級通過空格*/ 7071 .c1 div{ 72 73 background-color: #336699; 74 75 height: 48px; 76 77 } 78 79 80 81 /* id 層級選擇器 層級通過空格*/ 82 83 #i2 div{ 84 85 background-color: black; 86 87 height: 48px; 88 89 } 90 91 92 93 /* 組合選擇器 id z1 z2 z3 共用一套css樣式 組合 通過逗號*/ 94 95 #z1,#z2,#z3{ 96 97 background-color: chocolate; 98 99 height: 48px; 100 101 } 102 103 104 105 /* 組合選擇器 class s1 s2 s3 共用一套css樣式 組合 通過逗號*/ 106 107 .s1,.s2,.s3{ 108 109 background-color: darkmagenta; 110 111 height:48px; 112 113 } 114 115 116 117 /* 屬性選擇器 對選擇到的標簽 在通過屬性進行篩選 可以和層級選擇器連用*/ 118 119 div[s=‘dsx‘]{ 120 121 background-color: darkred; 122 123 height: 48px; 124 125 } 126 127 </style> 128 129 </head> 130 131 <body> 132 133 <!-- css style: 裏面的寫的就叫做css 每一個樣式的間隔用； 全部相同的時候引用class--> 134 135 <div style="height: 48px;background-color: #6699CC"></div> 136 137 <div style="height: 48px;background-color: #6699CC"></div> 138 139 <div style="height: 48px;background-color: #6699CC"></div> 140 141 142 143 <!-- css class引用--> 144 145 <div id="i1"></div> 146 147 <div class="div"></div> 148 149 <div class="div"></div> 150 151 152 153 <!-- 全局標簽選擇器 --> 154 155 <span>標簽選擇器</span> 156 157 158 159 <!-- 層級選擇器 組合標簽選擇器 --> 160 161 <span> 162 163 <div>組合標簽選擇器</div> 164 165 </span> 166 167 168 169 <!--層級選擇器 class選擇器下的div標簽 --> 170 171 <div class="c1"> 172 173 <div></div> 174 175 </div> 176 177 178 179 <!--層級選擇器 id選擇器下的div標簽--> 180 181 <div id="i2"> 182 183 <div></div> 184 185 </div> 186 187 188 189 <!-- id組合選擇器 --> 190 191 <div id="z1"></div> 192 193 <div id="z2"></div> 194 195 <div id="z3"></div> 196 197 198 199 <!-- class組合選擇器 --> 200 201 <div class="s1"></div> 202 203 <div class="s2"></div> 204 205 <div class="s3"></div> 206 207 208 209 <!-- 屬性選擇器 --> 210 211 <div s="dsx"></div> 212 213 <div name="nn"></div> 214 215 </body> 216 217 </html>
2.CSS優先級
標簽中style優先級最高，其次在代碼中就近找，也就是重下往上找
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <!--第三種引入css樣式表--> 8 <link rel="stylesheet" href="s.css"> 9 10 <!--head中style是第一處寫css樣式的地方--> 11 <style> 12 .c1{ 13 background-color: red; 14 } 15 </style> 16 </head> 17 <body> 18 <!--第二種通過屬性的方式對標簽增加css樣式--> 19 <div class="c1" style="background-color: black">1</div> 20 <!--優先級--> 21 <!--由內而外 由近到遠--> 22 23 </body> 24 </html>
優先級如下
3.常見屬性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 </style> 8 </head> 9 <body> 10 <!--font-size 大小 font-weight 粗細--> 11 <div style="font-size: xx-large;font-weight: bolder">金牛座</div> 12 13 <!--浮動--> 14 <div class="f1" style="background-color: black">沒有float</div> 15 <div class="f1" style="background-color: green;float: right">float元素的浮動</div> 16 17 <!--寬度可以使用百分比的方式 高度 不可以 寫百分比--> 18 <div style="width: 30%;height: 48px;background-color:red"></div> 19 20 <!--display 可以讓標簽在行內 和 塊級之間 自由轉換 21 塊轉行內display: inline 顯示為內聯元素，元素前後沒有換行符; 22 行內轉塊display: block 顯示為塊級元素，此元素前後會帶有換行符; 23 即是塊 又是 行內display:inline-block; 24 --> 25 <div style="display: inline;">金牛座inline</div> 26 <span style="display: block;">金牛座block</span> 27 28 <!--行內標簽不可以應用 寬、高 外邊距 內邊距的樣式--> 29 <span style="width: 100px;height: 100px">123</span> 30 <span style="background-color: red;display:inline-block;width: 100px;height: 100px;">456</span> 31 <div style="display:none;border:1px red solid;width:100px;height: 100px;">789</div> 32 33 <!--外邊距 34 不改變自身，針對外側進行像素移動 margin、margin-bottom、margin-left、margin-right、margin-top 35 --> 36 <div style="width: 100%;height: 100px;border: 1px red solid"> 37 <div style="margin-top:30px;width: 100%;height: 48px;background-color: blue"></div> 38 </div> 39 40 <!--內邊距 41 改變自身 padding、padding-bottom、padding-left、padding-right、padding-top 42 --> 43 <div style="width: 100%;height: 100px;border: 1px red solid"> 44 <div style="padding-top:30px;width: 100%;height: 48px;background-color: blue"></div> 45 </div> 46 47 <!-- cursor 光標樣式 --> 48 <input type="button" value="登錄" style="cursor: pointer"> 49 50 <!--overflow滾動條 51 overflow: hidden 當圖片或內容大於外層div時，自動 截取左上角圖片 52 overflow: auto 當內容或圖片小於外層div則自動隱藏滾動條 53 overflow: scroll 無論大小 都在增加滾動條 54 --> 55 56 <div style="overflow: scroll;border: 1px black solid;width: 200px;height: 200px"> 57 <img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg"> 58 </div> 59 <div style="overflow: auto;border: 1px black solid;width: 200px;height: 200px"> 60 <img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg"> 61 </div> 62 <div style="overflow: hidden;border: 1px black solid;width: 200px;height: 200px"> 63 <img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg"> 64 </div> 65 66 <!-- background-repeat 設置是否及如何重復背景圖像 --> 67 <div style="background-image: url(‘http://ui.imdsx.cn/static/image/dsx_Small.jpg‘);background-repeat:repeat-y;width: 200px;height: 200px;border: 1px black solid"></div> 68 <!--background-position 屬性設置背景圖像的起始位置 --> 69 <div style="background-position: 1px 1px;background-repeat: no-repeat;background-image: url(‘http://ui.imdsx.cn/static/image/icon.png‘);width: 20px;height: 20px;border: 1px red solid;"></div> 70 71 </body> 72 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1{ 8 height: 48px; 9 background-color: green; 10 position: fixed; 11 top:0; 12 left: 0; 13 right: 0; 14 } 15 </style> 16 </head> 17 18 <!--postion 分層 fixed 絕對定位--> 19 <!--position: fixed 絕對定位 相對於瀏覽器窗口進行定位，元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定--> 20 <!-- margin 外邊距 top right bottom left --> 21 <body style="margin: 0"> 22 <div class="c1">position: fixed</div> 23 <div style="background-color: black;height: 48px;width: 48px;position: fixed;right: 0;bottom: 0;"></div> 24 <!-- margin-top 上外邊距 --> 25 <div style="margin-top:48px;height: 100px;width: 100%;border: 1px red solid;background-color: pink"> 26 金牛座 真厲害 27 </div> 28 <!--position：absolute 絕對定位 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定，不會隨瀏覽器的窗口變化--> 29 <!--position：relative 相對定位 定位的層總是相對於其最近的父元素，對於其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素--> 30 <div style="position: relative;width:500px;height:500px;border:1px black solid;"> 31 <div style="position: absolute;width: 100px;height: 100px;background-color: red"></div> 32 <div style="position: absolute;width: 100px;height: 100px;background-color: black"></div> 33 <div style="position: absolute;width: 100px;height: 100px;background-color: blue"></div> 34 <div style="right: 0;bottom:0;position: absolute;width: 100px;height: 100px;background-color: pink"></div> 35 </div> 36 <!--z-index 層次分級，數值大的顯示在上層--> 37 <div style="position: relative;width: 200px;height: 200px;border: 1px red solid"> 38 <div style="z-index: 10;position: absolute;width: 200px;height: 200px;background-color: red"></div> 39 <div style="z-index: 9;position: absolute;width: 200px;height: 200px;background-color: blue"></div> 40 </div> 41 42 </body> 43 </html>
4.快速查看標簽、id、類
Chrome查看標簽、id、class
【前端】CSS基礎