CSS标签选择器→教你如何使用
一、css的選擇器學(xué)習(xí)：
?? ??? ??? ?1、標(biāo)簽選擇器：
?? ??? ??? ?標(biāo)簽名{樣式1；樣式2；........}
?? ??? ??? ?作用：會(huì)將當(dāng)前網(wǎng)頁(yè)內(nèi)的所有該標(biāo)簽增加相同的樣式
?? ??? ??? ?2、id選擇器：
?? ??? ??? ?#標(biāo)簽的id屬性值{樣式值1；.......}
?? ??? ??? ?作用：給某個(gè)指定的標(biāo)簽添加指定的樣式
?? ??? ??? ?3、類選擇器：
?? ??? ??? ?.類選擇器名{樣式1........}
?? ??? ??? ?作用；給不同的標(biāo)簽添加相同的樣式
?? ??? ??? ?4、全部選擇器：
?? ??? ??? ?*{樣式1....}
?? ??? ??? ?作用：選擇所有的html標(biāo)簽。并添加相同的樣式
以上的4個(gè)標(biāo)簽選擇器師最常用的，應(yīng)重點(diǎn)掌握
?? ?-------------------------------------------------------------
?? ??? ??? ?5、組合選擇器：
?? ??? ??? ?選擇器1，選擇器2，....{樣式1.。。。?? ??? ??? ?}
?? ??? ??? ?作用：解決不同的選擇器之間重復(fù)的問題
?? ??? ??? ?6、子標(biāo)簽選擇器：
?? ??? ?二、css的使用過程：
?? ??? ? ? ?1、聲明css代碼域
?? ??? ? ? ?2、使用選擇器選擇要添加的樣式的標(biāo)簽
?? ??? ? ? ? ? ? 根據(jù)需求來選擇:
?? ??? ? ? ? ? ? ? ? ? ?使用*選擇器給整個(gè)頁(yè)面添加基礎(chǔ)樣式
?? ??? ? ? ? ? ? ? ? ? ?使用類選擇器給不同的標(biāo)簽添加基礎(chǔ)樣式
?? ??? ? ? ? ? ? ? ? ? ?使用標(biāo)簽選擇器給某類標(biāo)簽添加基礎(chǔ)樣式
?? ??? ? ? ? ? ? ? ? ? ?使用id、屬性選擇器、style屬性聲明方式給個(gè)標(biāo)簽添加個(gè)性化樣式
?? ??? ?三、書寫樣式單
?? ??? ? ? ?邊框設(shè)置>border:solid 1px;
?? ??? ? ? ?字體設(shè)置>font-size:10px;設(shè)置字體大小
?? ??? ? ? ? ? ? >font-family:"黑體"；設(shè)置字體的格式
?? ??? ? ? ? ? ? >font-weigt：bold；設(shè)置字體加粗
?? ??? ? ? ?字體顏色設(shè)置>background-color；顏色
?? ??? ? ? ?背景顏色設(shè)置>backround-img:url;圖片的相對(duì)路徑
?? ??? ? ? ? ? ? ? ? >bacground-repeate:no-repeate;設(shè)置圖片不重復(fù)
?? ??? ? ? ? ? ? ? ? >bacground-size；cover;圖片平鋪整個(gè)頁(yè)面
?? ??? ? ? ?高寬設(shè)置
?? ??? ? ? ?浮動(dòng)設(shè)置>float:left|right
?? ??? ? ? ?行高設(shè)置>line-heft:10;
? ? ? ? ? ?四、一些CSS選擇器的格式如下：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css的選擇器學(xué)習(xí)</title><!--聲明css代碼--><style type="text/css">/*標(biāo)簽選擇器*/table{width: 300px;height: 200px;border: solid 1px;background-color: red;}/*id選擇器*/#t1{background-color: gray;}/*類選擇器*/#t1{color: rgd;}/*組合選擇器*/.commom,table{background-color: blue;}/*子標(biāo)簽選擇器*/ul li a{color: black;}</style></head><body><h3>css的選擇器學(xué)習(xí)</h3><hr /><hr /><table id=t1 class="commom"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table><table><tr><td>10</td><td>11</td><td>12</td></tr><tr><td>13</td><td>14</td><td>15</td></tr><tr><td>16</td><td>17</td><td>18</td></tr></table><b>css學(xué)習(xí)</b><hr /><ul><li><a href="">安徽</a></li><li><a href="">浙江</a></li><li><a href="">上海</a></li></ul><a href="">哈哈</a></body> </html>五、一些css樣式的使用，直接用代碼的形式展現(xiàn)給大家：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css的樣式使用</title><!--聲明css代碼域--><style type="text/css">/*添加網(wǎng)頁(yè)背景圖*/body{background-image: url(img/03.jpg);/*添加背景圖片*/background-repeat: no-repeat;/*設(shè)置圖片不重復(fù)*/background-size: cover;/*設(shè)置圖片平鋪*/}/*標(biāo)簽選擇器*/table{}/*設(shè)置toble的行高*/tr{height: 40px;}/*設(shè)置寬度*/td{width: 100px;/*設(shè)置寬*/border: solid 1px red;/*添加邊款及其顏色和大小*/border-radius: 10px;/*設(shè)置表格的角度*/background-color: orange;/*設(shè)置背景顏色*/text-align: center;/*設(shè)置文本位置*/color: darkblue;/*設(shè)置文本顏色*/font-weight: bold;/*設(shè)置文本加粗*/letter-spacing: 10px;/*設(shè)置文本間距*/} /*-------------------------------------------------------------*/ul{}li{list-style: none;/*去除li的標(biāo)簽識(shí)符*//*display: inline;*/float: left;/*設(shè)置菜單左懸浮*/}li a{color: black;text-decoration: none;/*設(shè)置下劃線*/font-weight: bold;font-size: 20px;margin-left: 20px;}</style></head><body><h3>css的樣式使用</h3><hr /><table><tr><td>姓名</td><td>性別</td><td>愛好</td></tr><tr><td>張三</td><td>男</td><td>跳舞</td></tr><tr><td>李四</td><td>男</td><td>打球</td></tr></table><hr /><ul><li><a href="">圖片</a></li><li><a href="">視頻</a></li><li><a href="">學(xué)術(shù)</a></li><li><a href="">詞典</a></li><li><a href="">地圖</a></li></ul></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的CSS标签选择器→教你如何使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux用户登录指定目录
- 下一篇： CSS 基本样式