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;
}
设置元素最大宽度与高度：
p{
max-width:100px;
max-height:100px;
}
设置元素最小宽度与高度：
p{
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>