深入解析：04-初识css

一、css样式引入

1.1.内部样式

<div style="width: 100px;"></div>

1.2.外部样式

1.2.1.外部样式1

<style>
  .aa {
  width: 100px;
  }
</style>
<div class="aa"></div>

1.2.2.外部样式2

<!-- rel内表面引入的是style样式，href为路径 -->
    <link rel="stylesheet" href="./abc.css">

若样式同名，后面的样式会把前面的覆盖

还可以用这种方式便于管理

四、额外知识补充

3.1.不同样式加载方式：

浏览器代理加载的元素不能被更改

自己写的css样式可以被更改

3.2.SEO优化：

1.含义：在浏览器搜索时尽量让自己的网站靠前

2.搜索引擎原理：用爬虫获取网站，再根据搜索框匹配库里符合的网站

3.优化方法：把重要信息放在h1~h6，爬虫优先搜索这个内容

提前进行DNS解析提升访问速度便于用户体验：

<link rel="dns-prefetch" href="//at.alicdn.com">

3.3.浏览器的渲染流程

浏览器访问网站时，会先下载html文件，再从上往下解析文件内容

当解析到link中要下载的文件时，他会一边下载一边继续解析，但是浏览器会等css加载完再渲染dom树==（面试可能会问）==

3.4.HTML编写禁忌

• 不要用行内元素包裹块级元素