CSS样式之外部样式——CSS选择器

321嘎嘣脆

已于 2022-08-07 16:50:15 修改

阅读量391

点赞数

分类专栏： HTLML标签文章标签： css 前端 html

于 2022-08-07 16:19:00 首次发布

本文链接：https://blog.csdn.net/qq_49070817/article/details/126212123

版权

HTLML标签专栏收录该内容

2 篇文章 0 订阅

订阅专栏

标签选择器

ID选择器

class选择器（类选择器）

群组选择器

包含选择器

通配符（*）—表示选择所有元素

动态伪类选择器—针对a标签

1、标签选择器：
           标签名{
              属性名：属性值；
              属性名：属性值；
              ...
           }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				color: red;//设置文字颜色
				background: wheat;//设置背景颜色
			}
			p{
				color: red;//为p标签设置文字颜色	
			}	
		</style>
	</head>	
	<body>
		<div>
			一个div
		</div>
		<p>一个段落</p>		
	</body>
</html>

2、ID选择器：（一般情况下ID唯一，默认ID只能唯一）
           #id值{
              属性：属性值；
           }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
            #div1{
				color: plum;
			}
        </style>
	</head>
    <body>
		<div id="div1">
			一个div1，带有ID属性的
		</div>
	</body>
</html>

3、class选择器（类选择器）
           * 多个相同样式的模块可使用class
           .class{
              属性：属性值;
           }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        <style>
			.p1{
				color: green;
			}
		</style>
	</head>
	<body>
		<p class="p1">一个段落p1，带有class属性</p>
        <p class="p1">一个段落p2，带有class属性</p>
		<p class="p1">一个段落p3，带有class属性</p>
	</body>
</html>

4、群组选择器：
           标签名，标签名，..{
              属性名：属性名；
           }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1,.p1,span{
				color: brown;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			一个div1，带有ID属性的
		</div>
		<p class="p1">一个段落p1，带有class属性</p>
		<span >
			span1
		</span>
	</body>
</html>

5、包含选择器：
           外标签内标签{
           属性名：属性值；
           }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div p{
				color: cadetblue;//为p标签设置文字颜色
			}
		</style>
	</head>
	<body>
		<!--包含选择器例子-->
		<div>
			<p>p in div </p>
		</div>
	</body>
</html>

6、通配符（）：表示选择所有元素
           {
           属性名：属性值；
           }

<style>  
     *{
         /*使得整个模块贴边/清除默认边距*/
          padding: 0;/*内边距*/
          margin: 0;/*外边距*/
       }
</style>

7、动态伪类选择器,针对a标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a:link{
				/*默认状态下的属性情况*/
				color: red;
			}
			a:visited{
				color: black;
				/*访问过的属性情况*/
			}
			a:hover{
				color: blue;
				/*鼠标放上时属性情况*/
			}
			a:active{
				color: brown;
				/*鼠标点击不放时属性情况*/
			}
		</style>
	</head>
	<body>
		<a href="#">未访问的</a><br />
		<a href="#">基本标签</a>
	</body>
</html>

权重： ID>class>标签选择器

CSS中的字体样式（大小、粗细、斜体、字体颜色等）

对a标签的文本修饰（上划线、下划线、删除线）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				color: red;
			}
			/*字体样式*/
			.div1{
				/*字体大小：
				 默认16px，1-12px都只有12px大，0px值文字消失*/
				font-size: 20px;
				/*字体，如果有多个属性值，则从左往右一次查找使用，直到发现第一个存在的字体*/
				font-family: "仿宋";
				/*设置字体粗细
				 bold
				 bolder
				 100-900
				 */
				font-weight: bold;
				
				/*
				 斜体：
				 */
				font-style: italic;
				
				background: blue;
				height: 100px;
				
				/*文本对齐方式：水平居中*/
				text-align: center;
				/*垂直居中:line-height=height
				 行高=元素高度 */
				line-height: 100px;

				/*
				 字体颜色：
				 颜色单词
				 十六进制 0-9 A-F
				 rgb（0-255,0-255,0-255）
				 rgba(0-255,0-255,0-255,0-1透明度)
				   */
				color: #ff00ff;
				
				/*color: rgb(255,0,0);*/
				
				/*color: rgba(255,0,0,0.2);*/
				
				a{
				/*文本修饰*/
				
				/*去掉a标签默认的下划线*/
				text-decoration: none;
				
				/*删除线、贯穿线*/
				/*text-decoration: line-through;*/
				
				/*上划线*/
				/*text-decoration: overline;*/
			}
			}
		</style>
		
	</head>
	<body>
		<!--#div-->
		<div id="div1" class="div1">
			div元素
		</div>
	    <a href="#">文本修饰</a>
	    <br />
	<!--u标签：下划线-->
	    <u>下划线</u>
	</body>
</html>