CSS標籤選擇器→教你如何使用
阿新 • • 發佈：2018-12-05
一、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>