知识点
字体综合设计
font属性用于对字体样样式进行综合设置，其基本语法格式如下：
选择器{font：font-style font-weight font-size/line-height font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
调试工具chrome使用
F12或者shift+ctrl+i打开开发者工具。
选择器
标签选择器（元素选择器）
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式，其基本语法格式如下：
标签名 {属性1：属性值1；属性2，属性值2；属性3，属性值3；}
元素名 {属性1：属性值1；属性2，属性值2；属性3，属性值3；}
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
类选择器
类选择器使用"."（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名 {属性1：属性值1；属性2，属性值2；属性3，属性值3；}
标签调用的时候用class=“类名”即可。
类选择器最大的优势是可以为元素对象定义单独或相容的样式。
小技巧：
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名css选择器。
id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
id {属性1：属性值1；属性2，属性值2；属性3，属性值3；}
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应文档中某一个具体的元素。
用法基本和类选择器相同。
id选择器和类选择器区别
类选择器（class）好比人的名字，是可以多次重复使用的，比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码，全中国是唯一的，不得重复。
通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
- {属性1：属性值1；属性2，属性值2；属性3，属性值3；}
伪类选择器
首先，这也是一个选择器，伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第一个，第n个元素。
为了和我们刚才学的类选择器相区别，类选择器是一个点比如 .demo {}而我们的伪类 用两个点就是冒号 比如：link{}
链接伪类选择器
：link /* 未访问的链接/
：visited / 已访问的链接/
：hover / 鼠标移动到链接上/
：active /选定的链接 */
注意写的时候，他们的顺序尽量不要颠倒，按照lvha的顺序。love hate或者lv宝宝非常ha。
结构（位置）伪类选择器（css3）
：first-child：选取属于其父元素的首个子元素的指定选择器
：last-child：选取属于其父元素的最后一个子元素的指定选择器
：nth-child（n）：匹配属于其父元素的第N个子元素，不论元素的类型
：nth-last-child（n）：选择器匹配属于其元素的第n个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n可以是数字、关键词或公式
代码
<style>
h4 {
color: aqua;
font: italic bold 14px "微软雅黑"; /* font综合写法更简洁 */
}
h1 {
color: chartreuse;
font-size: 40px;
}
.lingwai { /* 声明类样式 */
color: chocolate;
}
.jingdong {
color: orange;
}
.jinxiang {
color: pink;
}
.bugan {
color: purple;
}
.c-blue {
color: blue;
}
.c-green {
color: green;
}
.c-red {
color: red;
}
.c-yellow {
color: yellow;
}
span {
font-size:100px
}
.blue {
color:deepskyblue;
}
.red1{
color: orangered;
}
.orange {
color: orange;
}
.green1 {
color: green;
}
#big { /* id选择器和类选择器结合使用更好 */
color: coral;
}
a:link { /* 未访问的链接 */
font-size: 17px;
color: gray;
font-weight: 700;
}
a:visited { /* 已访问的链接 */
font-size: 17px;
color:orange;
font-weight: 700;
}
a:hover { /* 鼠标移动到链接上 */
font-size: 17px;
color:red;
font-weight: 700;
}
a:active { /* 选定的链接 */
font-size: 17px;
color:green;
font-weight: 700;
}
li:first-child {
color: pink;
}
li:last-child {
color: orangered;
}
/*p、div、h1、span、em、i都可以作为标签选择器*/
/* */
</style>
</head>
<body>
<h4>岭外音书绝</h4>
<h1>经冬复历春</h1>
<hr>
<p class="lingwai">岭外音书绝</p><!--class 引用类样式 类 别的意思-->
<p class="jingdong">经冬复历春</p>
<p class="jinxiang">近乡情更怯</p>
<p class="bugan">不敢问来人</p>
<div class="c-blue">北斗七星高</div>
<div class="c-green">哥舒夜带刀</div>
<div class="c-red">至今窥牧马</div>
<div class="c-yellow">不敢过临洮</div>
<hr>
<span class="blue">G</span>
<span class="red1">o</span>
<span class="orange ">o</span>
<span class="blue">g</span>
<span class="green1">l</span>
<span class="red1">e</span>
<hr>
<div id="big">熊大熊二光头强</div>
<hr>
伪类选择器其中的 链接伪类选择器 主要针对于a
<div><a href="#">秒杀</a>
<a href="#">闪购</a>
</div>
<hr>
<ul>
<li>第一个葫芦娃</li>
<li>第二个葫芦娃</li>
<li>第三个葫芦娃</li>
<li>第四个葫芦娃</li>
<li>第五个葫芦娃</li>
<li>第六个葫芦娃</li>
<li>第七个葫芦娃</li>
</ul>
结果
