学习PHP过程记录（8）

最新推荐文章于 2026-01-05 11:04:12 发布

原创最新推荐文章于 2026-01-05 11:04:12 发布 · 486 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #php #stylesheet #标签

PHP学习专栏收录该内容

8 篇文章

订阅专栏

css各种样式选择器的学习

<head>
	<head>
		<title>样式选择器 </title>
		<link rel="stylesheet" type="text/css" href="mycss.css">
		<style>
			/*类选择器*/
			/*
			同一个选择器能有不同的类，因而允许同一个元素有不同的样式
			 */
			p{/*对标签<p>有用*/
				background-color:#112233;
			}
			p.cla1{/*对标签<p>中的cla1这个类有用*/
				color:red;
			}
			p.cla2{
				font-size:3cm;
			}
			.cla3{/*对所有的cla3类有效*/
				border:1px solid blue;				
			}
			
			/*ID选择器,一个HTML文件中只能有唯一的ID*/
			/*ID属性常常结合javascript结合使用*/
			#id1{
				color:#546576;
				background-color:white;
				border:10px solid black;
				font-size:5cm;
			}	

			/*关联选择器只是一个用空格隔开的两个或更多的单一选择器给成的字符串。因为层叠顺序的规则，它们的优先权比单一的选择符大。必须按关联关系使用，不能有反顺序。只要能保持关联关系就可以，不管是在多少层。			
			 */
			div #one .two p{
				color:green;
				font-size:3cm;
			}
			/*组合样式选择器*/
			/*为了减少样式表的重复声明，组合是允许的.只要使用英文逗号（,）隔开每个选择符就可以了 */

			/*伪元素选择器*/
			/*
			 伪元素选择器定义了HTML标签在不同状态下的表现形式
			只有a和p这两个HTML元素可以使用
			 */
			/*
			 使用语法：
			 标签[.类名]:伪元素
			 a:link     没有任何动作前的状态
			 a:hover    光标移到超链接上的状态
			 a:active   选择超链接的状态
			 a:visited  访问过超链接的状态

			 p:first-letter  一个段落中首个字母的状态
			 p:first-line   一段落中首行的状态
			 */
			 a:link{
			   	color:yellow;
				font-size:1cm;
			   }
			 a:hover{
				 color:green;
				 font-size:2cm;
			   }
			  a:active {
				  color:blue;
				  font-size:3cm;
			    }
			 a:visited {
			   	  color:red;
				  background-color:green;
				  font-size:4cm;
			   }
		
		   	   /*所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。 */
			   /*
			   优先级：
			   关联>ID选择器>CLASS选择器>HTML标签选择器*/
		</style>
	</head>
	
	<!-- 任何一个HTML标签都是样式选择器 -->

	<body>
		<h1>好好学习，天天向上！</h1>
		<h3>---Zedong Mao</h3>
		<p> aaaaaaaaaa <p>
		<p class="cla1"> abbbbbbbbbbbb </p>
		<p class="cla2 cla1"> ccccccccccccc </p>
		<p class="cla2 cla3"> dddddddddddddddd  </p>
		<p id="id1"> eeeeeeeeeeeeeeee </p>
	
		<div>
			<div id="one">
				<div class="two">
					<p>ffffffffffffffffffffffffffffffff</p>
				</div>
			</div>
		</div>

		<a href="http://www.baidu.com"> 百度 </a><br />
		<a href="http://www.jd.com"> 京东 </a><br />
		<a href="http://www.taobao.com"> 淘宝 </a><br />
			
	</body>

</head>

css文件

/*h1的样式设置*/
h1{
	background-color:grey;
	color:#F00;
	border:10px solid green;
	text-align:center;
}
/*h3的样式设置*/
h3{
	background-color:grey;
	color:#F00;
	border:10px solid green;
	text-align:right;	
}