精简css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  引用外部样式表-->
  <link rel="stylesheet" href="css/style.css">
    <style>@import url("CSS/style.css");</style>
<!--内部样式表
规范，<style> 可以编写css的代码 每一个声明，使用;(英文的分号)结束
语法：
  选择器{
  声明1;
  声明2;
  声明3;
  }
-->
  <style>
    h1{
      color: red;
    }
  </style>
</head>
<body>

</body>
</html>

4.CSS的导入方式

多重样式可以层叠，可以覆盖，
样式的优先级按照就近原则，行内样式>内嵌样式>链接样式>浏览器默认样式
- 行内样式（在内容行直接写css样式style = ....）
- 内嵌样式（<style type= "text/css"><style>放到head标签部分，即使有公共css代码，每个页面都要定义的 **适合文件少，css代码不多的情况**）
- 外部式样式表(<link rel="stylesheet"href="css/style.css"/>放在head标签部分，可以引用多个外部样式表)
- 浏览器默认样式
外部样式两种写法
- 链接式
  - <link rel="stylesheet"href="css/style.css"/>
- 导入式
  - <style>@import url("css/style.css");</style>
- 两种方式没有优先级，谁最后写，就覆盖掉前面的写法
- 首页link和import语法结构不同，前者<link>是html标签，只能放入html源码中使用，后者可以看作为css样式，作用是引入css样式功能，import在thml使用时需要<style type="text/css">标签，同时可以直接"@import url(CSS文件路径地址); '放如Css文件或css代码里引入其它Ccss文件。
  本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。

2.选择器

作用：选择页面上的某一个或某一类元素

1.基本选择器

标签选择器：p、h1.......p{}用于公共选择器，通常用于所有标签出现的地方
类选择器：.p1、.p2.......class=“p1”用于一篇文章中，有多个不同段落使用不同样式的情况使用，可以多次使用
id选择器：#p1、#p2和类别选择器的区别是只能使用一次，全局唯一性
优先级：id>class>标签
css选择器嵌套声明（p span{}是声明的p标签里span标签里的内容）
css选择器集体声明（h1，p{}是声明h1和p标签里的内容）
css选择器全局声明（*{}是里面设定的样式都全局引用）
css选择器混合（多个class选择器可以混用，用空格隔开 id和class可以混用用空格隔开，id选择器不可以多个使用）

2.层次选择器

后代选择器：在某个元素后面祖爷爷爷爷爸爸你 4 3 2 1{}
子选择器：一代爸爸你 2>1{}
相邻(兄弟)选择器同辈只有一个 .a+p{}
通用(兄弟)选择器当前选中元素向下的所有兄弟元素 .a~p{}

3.结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
<!---->
  /*ul的第一个子元素*/
  ul li:first-child{
  background: green;
}
/* ul的最后一个子元素*/
ul li:last-child{
  background: red;
}
/*第一步定位:p的父元素(p的第一个作用)
     第二步定位父元素下的第一个元素(数字的作用)
         第三步判断如果类型是p成立(p的第二个作用)
             第四步产生结果改变样式;只有是p才会改变样式
             */
p:nth-child(1){
  background: #474c5e;
}
/*选中父元素下的p元素的第二个类型*/
p:nth-of-type(2){
  background: #09dc5c;
}
.a111:hover{
  color: red;
}
</style>
<body>
<h1>666</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>
<a href="" class="a111">看这里</a>
</body>
</html>