前端——css的选择器学习（附有代码以及展示效果）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css选择器学习</title>
<!--
重要：
css的选择器学习：
标签选择器：
标签名{样式名1：样式值1；...}
作用：会将当前网页内的所有该标签增加相同的样式
id选择器：
#标签的id属性值{样式名1：样式值1；...}
作用：给某个指定的标签添加指定的样式
类选择器：
.类选择器名{样式名1：样式值1；...}
作用：给不同的标签添加相同的样式
全部选择选择器：
*{样式名1：样式值1；...}
作用：选择所有的HTML标签，并添加相同的样式
------------------------------------------------------------------------
了解：
组合选择器：
选择器1，选择器2，...{样式名1：样式值1；...}
作用：解决不同的选择器之间重复样式的问题
子标签选择器：
属性选择器：
标签名[属性名=属性值]{样式名1：样式值1；...}
作用：选择某标签指定具备某属性并且属性值为某属性值的标签
css的使用过程：
1：声明css代码域
2：使用选择器选择要添加样式的标签
根据需求来。
使用*选择器来给整个页面添加基础样式
使用类选择器给不同的标签添加基础样式
使用标签选择器给某类标签添加基础样式
使用id，属性选择器，style属性声明方式给某个标签添加个性化样式
3：书写样式单
边框设置:boder:solid 1px实线
字体设置：font-size:10px;设置字体大小
font-family:"黑体"；（设置字体的格式）
font-weight:bold;设置字体加粗
字体颜色设置
color:颜色；
背景颜色设置
background-color:颜色；
background-image: url(图片的相对路径）
background-repeat: no-repeat；设置图片不重复
background-size:cover;图片平铺整个页面
高和宽设置
浮动设置
float:left/right
行高设置
line-height:10;
字体颜色设置
背景颜色设置
背景图片设置
高和宽设置
浮动设置
行高设置
-->
<!--声明CSS代码域-->
<style type="text/css">
/*标签选择器*/
table{
width: 50%;
height: 100px;
border: solid 1px;
background: red;
color: blue;
}
/*id选择器*/
#t1{background: gold;}
/*类选择器*/
.commom{
color: red;
}
/*组合选择器*/
.common,table{
background: green;
}
/*子标签选择器*/
ul li a
/*ul下的li下的a标签*/
{
color: red;
}
#p1 a{
color: yellow;
}
/*属性选择器*/
input[type=text]{
background: red;
}
</style>
</head>
<body>
<h3>css选择器学习</h3>
<hr />
<hr />
<table id="t1" class="commom">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<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>
</table>
<b class="commom"> css</b>
<hr />
<!--子标签选择器-->
<ul>
<li><a href="">睡觉</a></li>
<li><a href="">吃饭</a></li>
<li><a href="">打游戏</a></li>
</ul>
<p id="p1">
<a href="">哈哈</a>
</p>
<p>
<a href="">嘻嘻</a>
</p>
<!--属性选择器-->
<input type="text" name="1" id="" value="" /><br />
<input type="password" name="2" id="" value="" />
</body>
</html>
效果：