欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS选择器（Html基础）6

程序员文章站 2022-04-25 11:17:43
...
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Html基础</title>
		<!-- Html中的样式标签style -->
		<style>
			/* 标签选择器 所有的p标签字体都加粗 */
			p{
				font-weight: bold;
			}
			/* id选择器 id为text的标签字体为楷体 */
			#text{
				font-family: 楷体;
			}
			/* 类选择器 class为text_2的标签字体颜色都为红色*/
			.text_2{
				color: red;
			}
			/* p标签内的font标签字体颜色为绿色 */
			p font{
				color: green;
			}
			/* 作用与上一致 */
			span>font{
				color: aqua;
			}
			/* a标签悬浮效果 */
			a:hover{
				color: #FF0000;
			}
			/* a标签点击时效果 */
			a:active{
				color: #0000FF;
			}
			/* a标签点击后效果 */
			a:visited{
				color: #008000;
				font-family: 楷体;
			}
			/* 儿子选择 */
			ol :nth-child(2){
				color: blue;
			}
			/* 还有其他的，这些基本够用 */
		</style>
	</head>
	<body>
		<p>P标签</p>
		<a>A标签</a>
		<p id="text">有ID的P标签<font>Font标签</font></p>
		<span>Span标签<font>Font标签</font></span>
		<p class="text_2">有class的P标签</p>
		<span>Span标签</span>
		<p class="text_2">有class的P标签</p>
		<font class="text_2">Font标签</font>
		
		<ol type="1" start="1">
			<li>AAAAAAA</li>
			<li>BBBBBBB</li>
			<li>CCCCCCC</li>
		</ol>
		
	</body>
</html>

 

相关标签： HTML基础 html css

上一篇： DIV布局（Html基础）8

下一篇： [Java EE 7] JSF 中的 Ajax

推荐阅读