前端攻城狮---css样式之选择器

最新推荐文章于 2023-02-25 20:54:21 发布

csdn_gyh

最新推荐文章于 2023-02-25 20:54:21 发布

阅读量241

点赞数

分类专栏：前端攻城狮文章标签： html css 前端

本文链接：https://blog.csdn.net/gaoyouhuang/article/details/80545508

版权

前端攻城狮专栏收录该内容

44 篇文章 0 订阅

订阅专栏

前面我们了解到了html的骨架的组成，还有一些常见的标签，但是决定一个网页的漂不漂亮是需要css来控制，可以说html是一个人的身体，而css就是一个人身穿的衣服，那么接下来我们去了解一下css的奥秘所在。

css常见的引入方式

1.行内式

                <style type="text/css">
	               /* css代码写在此处*/ 
	             div {
	     	        font-weight: 700;
	     	        text-decoration: underline;
	             }
	        </style>

2.外链式(推荐使用)

<style type="text/css" src="../xxx.css"></style>

3.内嵌式(不推荐使用)

 <p style="color:green;font-size:34px">段落</p>

css样式语法格式如下

选择器 {
k:v;
k:v;
k:v;
...

}

k就是css样式的参数的名字，而v就是对于的值

css基础选择器

标签选择器

标签选择器就是以标签名作为选择器，如下：

  p {
	    	color: red;//对于的属性的意义之后会讲解到
	    	font-size: 22px;
	    }

	    h2 {
	    	font-size: 36px;
	    }

用途：批量处理同一个标签或设置或清空默认样式 ,如有序列表前会有小圆点，那么为了清除所有的小圆点我们就需要写这么个样式。

li{
	list-style: none;
}

id选择器

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		 #mydiv{
		 	width: 300px;
		 	height: 300px;
		 }
	</style>
</head>
<body>
	<div id="mydiv"></div>
</body>

注意,在使用id选择器的时候，需要给标签添加id属性，在style去给对应的id写样式的时候，需要在id前加上#.

id选择器的注意点

1 每个标签都有id属性，id属性值由字母开头，后面可以为数字下划线横线比如demo test w40 text-center

2 id在页面中是唯一的
3 劣势对多个元素设置统一样式需要起多个id，写多次重复的样式

类选择器

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		 .mydiv{
		 	width: 300px;
		 	height: 300px;
		 }

               .mydiv2{
		 	margin-top:50px;
		 	padding:50px;
		 }

</style></head><body><div class="mydiv mydiv2"></div></body>

在使用类选择器的时候，需要给标签添加class属性，在style去给对应的类写样式的时候，需要在类名前加上.

类选择器注意点

1 class属性值不是唯一的,不同的标签可以取相同的class名
2 类选择器作用，可以用类选择器去选中一部分样式相同的标签
3 一个标签的class值是可以有多个，多个类之间用空格隔开
4 与id选择器区别
id属性一般用于js 类用于设置样式

通配符选择器

 * {
         padding: 0;
         margin: 0;
      }

*就是通配符，代表所有的标签，但是通配符选择器效率比较低，实际的开发中不常用。

如上所示，为什么要给所有的标签加padding和margin，因为很多标签都会有默认样式，会造成开发时候效果不准确，故需要取出所有标签的默认样式

------------------------------------------------------------------------------------------------------------------

高级选择器--后代选择器

	<style type="text/css">
		 #mydiv_p .mydiv_c .myp_c{
		 	font-size: 16px;
		 	color: yellow;
		 }
	</style>
        </head>
        <body>
	<div id="mydiv_p">
		<div class="mydiv_c">
			<p class="myp_c"></p>
		</div>
	</div>

空格表示后代的意思 #mydiv_p .mydiv_c .myp_c表示id是mydiv_p的后代中class是mydiv_p的后代中class是myp_c的标签

高级选择器--交集选择器

交集顾名思义就是要满足多个条件

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		 #mydiv p.myp{
		 	font-size: 16px;
		 	color: yellow;
		 }
	</style>
</head>
<body>
	<div id="mydiv">
		<p class="myp">asdasdasd</p>
	</div>
</body>

#mydiv p.myp 就用到了后代选择器和交集选择器

#mydiv p表示 id是mydiv的标签的后代p，p.myp表示后代p中的类选择器是myp

高级选择器--并集选择器

前面提到用通配符选择器去设置默认样式效率不高，那么我们可以用并集选择器去设置默认样式

 blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}

应用场景

多个标签同一个样式，一个选择器选不完
用于设置整体的默认样式

css基本选择器的已经讲完，接下来会来讲css继承性和层叠行，如有表达错的请谅解和提出错的点，望能共同进步。

csdn_gyh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端攻城狮---css样式之选择器

前面我们了解到了html的骨架的组成，还有一些常见的标签，但是决定一个网页的漂不漂亮是需要css来控制，可以说html是一个人的身体，而css就是一个人身穿的衣服，那么接下来我们去了解一下css的奥秘所在。css常见的引入方式1.行内式 &lt;style type="text/css"&gt; /* css代码写在此处*/ ...
复制链接

扫一扫

专栏目录