前端入门学习笔记五十七

Source

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>分组选择器</title> 
		<style type = "text/css">
		h2,h3,p
		{
			color:skyblue;
		}
		</style>
	</head>
	<body>
		<h2>盗墓笔记</h2>
		<h3>沙海</h3>
		<p>终极笔记</p>
	</body>
</html>

CSS 分组选择器
在样式表中有很多具有相同样式的元素
为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔。

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>CSS 嵌套选择器</title> 
		<style type = "text/css">
			p
			{
				color:plum;
				text-align:center;
			}
			.marked
			{
				background-color:deepskyblue;
			}
			.marked p
			{
				color:lightblue;
			}
			p.marked{
			    text-decoration:lavenderblush;
			}
		</style>
	</head>
	<body>
		<p>沙海</p>
		<div class="marked">
		<p>盗墓笔记</p>
		</div>
		<p>终极笔记</p>
		<p class="marked">重启之极海听雷</p>
	</body>
</html>

CSS 嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了四个样式：
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>CSS Position</title>
		<style type = "text/css">
		div.static {
		    position: static;
		    border: 9px solid salmon;
		}
		</style>
	</head>
	<body>
		<h2>盗墓笔记</h2>
		<p>终极笔记</p>
		<div class="static">
		沙海</div>
	</body>
</html>

static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响

CSS Position
position 属性指定了元素的定位类型。
position 属性的五个值：
static
relative
fixed
absolute
sticky
元素可以使用的顶部，底部，左侧和右侧属性定位。
然而，这些属性无法工作，除非是先设定position属性。