PHP基础学习第九篇CSS分组嵌套尺寸和可见（分组选择器、嵌套选择器、尺寸、显示与可见）

最新推荐文章于 2024-07-25 11:52:08 发布

XM..

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量391

点赞数 4

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/xiaomoge__/article/details/127066508

版权

HTML 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

一、分组选择器

h1{

color:green;

}

h2{

color:green;

}

样式表中有很多具有相同样式的元素时，即可使用分组选择器；

h1,h2{

color:green;

}

二、嵌套选择器

当选择器内部存在选择器时，可采用嵌套选择器进行定义：

p{}:为所有p元素指定样式

.marked{}:为所有class="marked"的元素指定样式。

.marked p{}:为所有class="marked"元素内的p元素指定样式。

p.marked{}:为所有class="marked"的p元素指定样式。

举例：

p｛

color:blue;

text-align:center;

｝

.marked{

background-color:red;

}

.marked p{

color:white;

}

p.marked{

text-decoration:underline;

}

三、尺寸

.widthHeight{

height:100px;

width:100px;

}

设置元素最大宽度与高度：

max-width:100px;

max-height:100px;

}

设置元素最小宽度与高度：

min-width:100px;

min-height:100px;

}

设置行高：

p.small{line-height:90%}

p.big{line-height:200%}

四、显示与可见

隐藏元素：

隐藏一个元素可以把display属性设置为"none"，或把visibiity属性设置为"hidden"。visibility:hidden隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。

h1.hidden{visibility:hidden;}

或

h1.hidden{display:none;}

改变元素区块与内联属性：

将区块改变为内联：

div{display:inline;}

将内联改变为区块：

span{display:block;}

测试结果如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小莫初学</title>
	</head>
	<style>
		h1,h2{
			color:green;
		}
		p{
			color:blue;
		}
		.marked{
			text-align:center;
		}
		.marked p{
			font-size:30px;
		}
		p.marked{
			font-style:italic;
		}
		.widthHeight{
			width:50px;
			height:50px;
			background:yellow;
		}
		.max{
			max-height:300px;
			max-width:300px;
			background-color:red;
		}
		.min{
			min-height:100px;
			min-width:100px;
			background-color:green;
		}
		.line{
			line-height:50px;
		}
		.hidden{
			display:none;
		}
		.visibility{
			visibility:hidden;
		}
		.inline{
			display:inline;
			border:1px solid red;
		}
	</style>
	<body>
		<h1>这是测试的一段话</h1>
		<h2>这是测试的二段话</h2>
		<p>这是测试的三段话</p>
		<div class="marked">
		这是测试的四段话
		<p>这是测试的五段话</p>
		</div>
		<p class="marked">这是测试的六段话</p>
		<div class="widthHeight"></div>
		<div class="max">这是测试的七段话</div>              <!--设置最大宽度指的是最大能够容纳多少个数字-->
		<div class="min">这是测试的八段话</div>
		<p class="line">这是测试行高<p>
		<p class="line">这是测试行高<p>
		<h3 class="hidden">这句话隐藏</h3>                   <!--这句话隐藏起来而且不会占用空间-->
		<h4 class="visibility">这句话隐藏而且占用空间</h4>
		<p class="inline">1</p>
		<p class="inline">2</p>
		<p class="inline">3</p>
	</body>
</html>