CSS标签选择器→教你如何使用

最新推荐文章于 2024-09-20 02:44:07 发布

码农渔夫

最新推荐文章于 2024-09-20 02:44:07 发布

阅读量2.1w

点赞数 6

本文链接：https://blog.csdn.net/realize_dream/article/details/83592538

版权

一、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>