CSS样式表的三种引入方式：
1、外部样式表——即将CSS样式写在单独的一个.css文件中：
<link rel="stylesheet" type="text/css" href="./css/custom.css" />
2、内部样式表：
<style type="text/css">
h1{
color: red
}
</style>
3、内联样式表：
<h1 style="color: gold">标题</h1>
一个样式中，如果包含多个属性，则用分号隔开：
#container{
width: 100%;
height: 735px;
background-color: #f4f4f4;
}
还可以多个样式使用同一个属性：
h1, a, h2{
color: red;
}
继承（故称样式层叠表）：
一个标签内的所有元素都会继承该标签的样式，例如：
/*1、body内的text会变红，h1标签的text也会变红，a标签、h2标签以及其他所有标签的text都会变红。
2、但是样式的继承会存在覆盖：例如，body标签中有一个h1标签，那么h1的样式会覆盖掉body的样式。*/
body{
color: black;
}
选择器：
1、派生选择器：
/*样式设置：*/
/*也就是先选择li标签，此时再选择，肯定就是选择li标签的strong标签，而不是其他地方的strong标签；
所以li的strong标签变红了，p的strong没变*/
li strong{
color: red;
} <!--效果测试-->
<p><strong>p的strong标签</strong></p>
<ul>
<li><strong>li的strong标签</strong></li>
</ul>
2、id选择器(用#表示)：
<style type="text/css">
#id{
color: red;
}
</style> <divid="id">id选择器</div>
派生选择器和id选择器的联合使用：
<style type="text/css">
/*就是说：在id="id"的标签下，设置a标签的样式*/
#id a{
color: red;
}
</style> <div id="id"><a>联合使用</a></div>
3、类选择器：
以一个点来表示：
<style type="text/css">
.class{
color: red;
}
</style> <div class="class"><a>类选择器</a></div>
与派生选择器联合使用（或者说，通过派生的方式来选择）：
<style type="text/css">
.class a{
color: red;
}
</style> <div class="class"><a>通过类选择器，来派生选择</a></div>
4、属性选择器：
设置指定了/拥有某个属性的标签的样式，通过[]来表示：
<style type="text/css">
[title]{
color: red;
}
</style> <div title="div">属性选择器</div>
更具体的选择：属性和值选择器：
<style type="text/css">
[title=value]{
color: red;
}
</style> <div title="value">属性和值选择器</div>
<div title="div">属性选择器</div>
背景方面：
CSS设置标签的背景图片、背景颜色：
<style type="text/css">
body{
background-image: url("1.png");
background-color: black;
}
</style>
设置背景图片的重复情况：
/*例如*/
background-repeat: no-repeat;
设置背景图片显示的位置：
/*这里有三种方式：属性值的形式是(x，y)；第三种的y坐标好像是向上为正*/
/*background-position: right top;*/
/*background-position: 100px 100px;*/
background-position: 0% 0%;
设置背景图片是否跟随页面的滚动而滚动：
/*设置成fixed就不会跟随滚动，其他就会跟随(测试的时候，选择一张尺寸较小的图片，并且不要重复)*/
background-attachment: fixed;
文本方面：
设置文本的大小写：
p{
text-transform: capitalize;
}
文本的阴影效果：
h1{
/*参数1、2是阴影相对于原文本的坐标值(x，y)，参数3是阴影的清晰度——阴影都是这样弄的*/
text-shadow: 2px 2px 1px #FF0000;
}
<h1>text的效果</h1>
文本自动换行(normal不会将单词拆分，但是word-wrap的break-word会拆分)：
#test{
width: 100px;
/*text-wrap: normal;*/ /*deprecate*/
word-wrap: normal;
}
<p id="test">hello world hello world </p>
a链接的四种状态及使用：
/*测试的时候，最好清除浏览数据，不然可能看不到link的效果*/
a:link {
/*初始状态：从未被点击*/
color: black;
}
a:visited{
/*被点击过后(未清除浏览数据)，再次浏览该页面显示的状态*/
color: red;
}
a:hover{
/*鼠标放在a连接上，不点击*/
color: gold;
}
a:active{
/*鼠标单击a链接不松开：正在被点击的时刻*/
color: white;
} <!--如果没有href属性，是无法看到visited的效果的，因为没有进行访问(visit)-->
<a href="http://www.baidu.com">点击测试</a>
去掉a链接的下划线：
a{
text-decoration: none;
}
<a href="http://www.baidu.com">点击测试</a>