CSS选择器

最新推荐文章于 2025-05-01 23:03:21 发布
pi5458
最新推荐文章于 2025-05-01 23:03:21 发布
阅读量96
点赞数
文章标签： html css
本文链接：https://blog.youkuaiyun.com/miaosanpi/article/details/108050892
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS样式</title>
		<link rel="stylesheet" href="css/index.css" />
		<style>
			span{
				color: blueviolet;
				font-family: "comic sans ms";
			}
		</style>
	</head>
	<body>
		<span>河南工业大学</span>
		<span>What are you doing?</span>
		<div id="hgd">河南工业大学</div>
		<div text-align: center; font-family: '楷体';>河南工业大学</div>
		<!--
			CSS定义位置:标签内部 style属性标签；style标签内部；CSS文件内部
			CSS语法：
				声明：color: red; 样式属性: 样式属性值;
			样式属性值：
				样式属性值有空格，需要使用引号或单引号
				样式属性值有多个，用逗号间隔
				样式属性值不区分大小写
		-->
		<!--
        	选择器：浏览器通过选择器为满足条件的HTML元素添加CSS样式
        	id选择器
        	class选择器
        	标签选择器
        -->
        
        <span class="wl">郑州轻工业大学</span>
        <b class="wl">河南工业大学</b>
        <i id="lw">郑州大学</i>
        <style>
        	/*
        	 *id选择器:以id标签属性的属性值为选择器(id标签属性值需要唯一)
        	 */
        	#hgd{
        		text-align: center; 
        		font-family: '楷体';
        	}
        	
        	/*
        	 *class选择器:以class标签属性的属性值为选择器
        	 */
        	/*.wl{
        		color: crimson;
        		font-family: "楷体";
        	}*/
        	
        	/*
        	 *标签选择器:以标签为选择器
        	 */
        	b{
        		font-size: 70px;
        	}
        	
        	/*
        	 *后代选择器：
        	 */
        	html body #hgd{
        		background-color: #8A2BE2;
        	}
        	
        	/*
        	 *分组选择器
        	 */
        	#lw,.wl{
        		color: crimson;
        		font-family: "楷体";
        	}
        	
        	/*
        	 *通配符选择器
        	 */
        	*{
        		margin: 0px;
        		padding: 0px;
        	}
        </style>
        
        
        <span>登&nbsp;&nbsp;&nbsp;&nbsp;录</span>
        <style>
        	span{
        		height: 31px;
        		width: 302px;
        		display: inline-block;
        		border: 1px solid #e85356;
        		text-align: center;
        		line-height: 31px;
        		background-color: #e4393c;
        		color: #fff;
        		font-size: 20px;
        		font-family: "microsoft yahei";
        		cursor: pointer;
				
				span:hover{
        			background-color: cadetblue;
        		}
        	}
			<br /><br /><br />
        
        <a href="http://17kanju.com/" target="_blank">17看剧</a>
        <!--<style>
        	a{
        		font-size: 14px;
        		font-family: "PingFang SC","Microsoft YaHei",arial,"Hiragino Sans GB","Hiragino Sans GB W3";
        		text-decoration: none;
        		color: #333;
        	}
        	a:hover{
        		text-decoration: underline;
        		color: blue;
        	}
        </style>-->
        
        <br /><br /><br />
        
        <a href="http://www.beqege.cc/">笔趣阁</a>
        <style>
        	a{
        		font-size: 14px;
        		font-family: "PingFang SC","Microsoft YaHei",arial,"Hiragino Sans GB","Hiragino Sans GB W3";
        		text-decoration: none;
        	}
        	a:link{
        		color: #333333;
        	}
        	a:visited{
        		color: aquamarine;
        	}
        	a:hover{
        		text-decoration: underline;
        		color: blue;
        	}
        	a:active{
        		background-color: yellow;
        	}
        </style>
        </style>
	</body>
</html>