CSS学习之选择器学习

最新推荐文章于 2024-05-07 10:23:16 发布

playboy-jordan

最新推荐文章于 2024-05-07 10:23:16 发布

阅读量155

点赞数

分类专栏： # CSS教程文章标签： javascript css vue.js html html5

本文链接：https://blog.csdn.net/weixin_44853669/article/details/106772742

版权

CSS教程专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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：样式值1;……}
				属性选择器：
					标签名[属性名=属性值]{样式名1：样式值1;……}
					作用：选择某标签指定具备某属性并且属性值为某属性值的标签
			css的使用过程：
				1、声明css代码域
				2、使用选择器选择要添加样式的标签
					根据需求来。
						使用*选择器来给整个页面添加基础样式
						使用类选择器给不同的标签添加基础样式
						使用标签选择器给某类标签添加基础样式
						使用id、属性选择器、style属性声明方式给某个标签添加个性化样式。
				3、书写样式单
					边框设置
						border:solid 1px;
					字体设置:
						font-size:10px;设置字体大小
						font-family:"黑体";(设置字体的格式)
						font-weight：bold;设置字体加粗
					字体颜色设置
						color:颜色;
					背景颜色设置
						background-color:颜色;
					背景图片设置
						background-img:url(图片的相对路径);
						background-repeate:no-repeate;设置图片不重复
						bacground-size:cover;图片平铺整个页面
					高和宽设置
					浮动设置
						float:left|right
					行高设置
						line-height:10;
		-->
		<!--声明css代码域-->
		<style type="text/css">
			/*标签选择器*/
			table{
				width: 300px;
				height: 200px;
				border: solid 1px;
				background-color: red;
			}
			b{
				width: 300px;
				height: 200px;
				border: solid 1px;
				background-color: red;
			}
			/*id选择器*/
			#t1{
				background-color: gray;
			}
			/*类选择器*/
			.common{
				color: red;
			}
			/*组合选择器*/
			.common,table{
				background-color: blue;
			}	
			/*子标签选择器*/
			ul li a{
				color: black;
			}
			#p1 a{
				color: yellow;
			}
			input[type=text]{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<h3>css的选择器学习</h3>
		<hr />
		<hr />
		<table id="t1" class="common">
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</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>
		<b class="common">css学习</b>
		<hr />
		<!--子选择器-->
		<ul id="u">
			<li><a href="">哈哈</a></li>
			<li><a href="">呵呵</a></li>
			<li><a href="">嘿嘿</a></li>
		</ul>
		<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>
		<a href="">嘻嘻</a>
		<hr />
		<input type="text" name="" id="" value="" /><br />
		<input type="password" name="" id="" value="" />
	</body>
</html>

在这里插入图片描述

playboy-jordan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习之选择器学习

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>css的选择器学习</title> <!-- css的选择器学习：标签选择器：标签名{样式名1：样式值1;……} 作用：会将当前网页内的所有该标签增加相同的样式 id选择器: #标签的id属性值{样式名1：样式值1;……} 作用：给某
复制链接

扫一扫