CSS标签选择器→教你如何使用
一、css的選擇器學習：
?? ??? ??? ?1、標簽選擇器：
?? ??? ??? ?標簽名{樣式1；樣式2；........}
?? ??? ??? ?作用：會將當前網頁內的所有該標簽增加相同的樣式
?? ??? ??? ?2、id選擇器：
?? ??? ??? ?#標簽的id屬性值{樣式值1；.......}
?? ??? ??? ?作用：給某個指定的標簽添加指定的樣式
?? ??? ??? ?3、類選擇器：
?? ??? ??? ?.類選擇器名{樣式1........}
?? ??? ??? ?作用；給不同的標簽添加相同的樣式
?? ??? ??? ?4、全部選擇器：
?? ??? ??? ?*{樣式1....}
?? ??? ??? ?作用：選擇所有的html標簽。并添加相同的樣式
以上的4個標簽選擇器師最常用的，應重點掌握
?? ?-------------------------------------------------------------
?? ??? ??? ?5、組合選擇器：
?? ??? ??? ?選擇器1，選擇器2，....{樣式1.。。。?? ??? ??? ?}
?? ??? ??? ?作用：解決不同的選擇器之間重復的問題
?? ??? ??? ?6、子標簽選擇器：
?? ??? ?二、css的使用過程：
?? ??? ? ? ?1、聲明css代碼域
?? ??? ? ? ?2、使用選擇器選擇要添加的樣式的標簽
?? ??? ? ? ? ? ? 根據需求來選擇:
?? ??? ? ? ? ? ? ? ? ? ?使用*選擇器給整個頁面添加基礎樣式
?? ??? ? ? ? ? ? ? ? ? ?使用類選擇器給不同的標簽添加基礎樣式
?? ??? ? ? ? ? ? ? ? ? ?使用標簽選擇器給某類標簽添加基礎樣式
?? ??? ? ? ? ? ? ? ? ? ?使用id、屬性選擇器、style屬性聲明方式給個標簽添加個性化樣式
?? ??? ?三、書寫樣式單
?? ??? ? ? ?邊框設置>border:solid 1px;
?? ??? ? ? ?字體設置>font-size:10px;設置字體大小
?? ??? ? ? ? ? ? >font-family:"黑體"；設置字體的格式
?? ??? ? ? ? ? ? >font-weigt：bold；設置字體加粗
?? ??? ? ? ?字體顏色設置>background-color；顏色
?? ??? ? ? ?背景顏色設置>backround-img:url;圖片的相對路徑
?? ??? ? ? ? ? ? ? ? >bacground-repeate:no-repeate;設置圖片不重復
?? ??? ? ? ? ? ? ? ? >bacground-size；cover;圖片平鋪整個頁面
?? ??? ? ? ?高寬設置
?? ??? ? ? ?浮動設置>float:left|right
?? ??? ? ? ?行高設置>line-heft:10;
? ? ? ? ? ?四、一些CSS選擇器的格式如下：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css的選擇器學習</title><!--聲明css代碼--><style type="text/css">/*標簽選擇器*/table{width: 300px;height: 200px;border: solid 1px;background-color: red;}/*id選擇器*/#t1{background-color: gray;}/*類選擇器*/#t1{color: rgd;}/*組合選擇器*/.commom,table{background-color: blue;}/*子標簽選擇器*/ul li a{color: black;}</style></head><body><h3>css的選擇器學習</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學習</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樣式的使用，直接用代碼的形式展現給大家：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css的樣式使用</title><!--聲明css代碼域--><style type="text/css">/*添加網頁背景圖*/body{background-image: url(img/03.jpg);/*添加背景圖片*/background-repeat: no-repeat;/*設置圖片不重復*/background-size: cover;/*設置圖片平鋪*/}/*標簽選擇器*/table{}/*設置toble的行高*/tr{height: 40px;}/*設置寬度*/td{width: 100px;/*設置寬*/border: solid 1px red;/*添加邊款及其顏色和大小*/border-radius: 10px;/*設置表格的角度*/background-color: orange;/*設置背景顏色*/text-align: center;/*設置文本位置*/color: darkblue;/*設置文本顏色*/font-weight: bold;/*設置文本加粗*/letter-spacing: 10px;/*設置文本間距*/} /*-------------------------------------------------------------*/ul{}li{list-style: none;/*去除li的標簽識符*//*display: inline;*/float: left;/*設置菜單左懸浮*/}li a{color: black;text-decoration: none;/*設置下劃線*/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="">學術</a></li><li><a href="">詞典</a></li><li><a href="">地圖</a></li></ul></body> </html>?
總結
以上是生活随笔為你收集整理的CSS标签选择器→教你如何使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux用户登录指定目录
- 下一篇： 系统mysql数据库服务器,系统mysq