CSS选择器

QBjie

于 2020-07-14 11:02:09 发布

阅读量67

点赞数

本文链接：https://blog.csdn.net/QBjie/article/details/107333515

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				color: hotpink;
				font-family:"MS Serif",楷体;
			}
		</style>
	</head>
	<body>
		<span>郑州</span>
		<span>How are you?</span>
		<div style="text-align: center;font-family: 楷体;">大学</div>
		<!--
        	CSS定义的位置：标签内部style标签属性；style标签内部；CSS文件内部
        	CSS语法：
        		声明：color：red; 样式属性：样式属性值；
        		样式属性值：
        			样式属性值有空格，这需要用单引号或双引号（当处于标签内部时            style已经加双引号，此时属性值需用单引号引起来）引起来
        			样式属性值有多个，逗号间隔
        			样式属性值不区分大小写
        -->
        <div id="zzu">郑州大学</div>
        <span class="x">逆流而上</span>
        <b class="x">学无止境</b>
        <i id="t">书山有路</i>
        <style>
        	/*
        	 *id选择器：以id标签属性为选择器 匹配：标签的id与id选择器相同的标签
        	 */
        	#zzu{
        		color: chartreuse;
        		font-family: 楷体;
        	}
        	/*
        	 *class选择器：以id标签属性为选择器 匹配：标签的class与class选择器相同的标签
        	 */
        	/*.x{
        		color: cyan;
        	}*/
        	/*
        	 *标签选择器：以标签属性为选择器
        	 */
        	b{
        		font-size: 25px;
        	}
        	/*
        	 *后代选择器：父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
	         *                      declaration1;
	         *                      declaration2;
    	         *                      …
                 *           }
        	 */
        	html body #zzu{
        		background-color: mediumspringgreen;
        	}
        	/*
        	 *分组选择器：如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码， 
        	 *该选择器的选择器名由多个选择器组成，使用逗号分隔。
        	 */
        	#t,.x{
        		color: cyan;
        	}
        	/*
        	 *通配符选择器：作用于整个界面。
        	 */
                
        	*{
                        <!--让整个块填充满-->
        		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: red;
        		color: #fff;/*字体颜色*/
        		font-size: 20px;
        		font-family: "微软雅黑";
        		cursor: pointer;/*出现小手*/
        	}
        </style>
	</body>
</html>

QBjie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> span{ color: hotpink; font-family:"MS Serif",楷体; } </style> </head> <body> <span>郑州&l.
复制链接

扫一扫