CSS系列 -- CSS 样式的四种使用方式CSS三种引入方式有内联样式内部样式表外部样式表内联样式实际在写页面时不提倡

CSS四种引入方式有

内联样式(元素上的style属性)
内部样式表(<style>标签——经常放在<head>标签里面)
链入外部样式表(<link>标签——经常放在<head>标签里面)
导入外部样式表(@import)

内联样式

<h1 style="color:red;">style属性的应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

实际在写页面时不提倡使用，在测试的时候可以使用

页面渲染过程中，遍历 DOM 节点时要是遇到内联样式可能会引起重绘回流，而且内联样式的优先级较高

值得注意的是：内联样式表 不会被缓存

内部样式表

在style标签中的CSS代码。style标签写在head标签中

由 HTML解析器 进行解析

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>内部样式表</title>
  <style type="text/css"><!--使用内部样式表引入CSS-->
    div{
        background: green;
    }
  </style>
</head>
<body>
     <div>我是DIV</div>
</body>
</html>

外链样式表

CSS代码保存在扩展名为.css的文件中

HTML文件引用扩展名为.css的文件，有两种方式：链接式、导入式。

由 CSS解析器 进行解析

1、链接式
<link type="text/css" rel="styleSheet"  href="CSS文件路径" />
2、导入式
<style type="text/css">
  @import url("css文件路径");
</style>

链接式和导入式的区别：

链接式：优先加载CSS文件到页面，由 HTML解析器 进行解析
导入式：先加载HTML结构在加载CSS文件，由 CSS解析器 进行解析链接式和导入式的优先级：
谁在下面谁优先

HTML 的`<link>`标签

<link> 标签定义文档与外部资源的关系<link> 标签最常见的用途是链接样式表。

属性	值及意义
rel	stylesheet 规定当前文档与被链接文档之间的关系
href	URL 规定被链接文档的位置
media	media_query 规定被链接文档将被显示在什么设备上

@import 引入外部样式表

示例

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

CSS 引入的方式有哪些? link 和@import 的区别是?

加载时间段：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
兼容性：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持
支持DOM操作：link支持使用Javascript控制DOM去改变样式；而@import不支持

CSS选择器

1. 基础选择器

id 选择器 #id名{}
类选择器 .class名{}
标签选择器 标签名{}

2. 层次选择器

子级(>) p>span{}
后代(空格) section span{}
兄弟(+) h1+h2{} [需要紧跟着的两个]

3.伪类选择器（一个冒号）

链接和鼠标相关的

x:link  未访问链接
x:visited  已访问链接
x:hover  鼠标放在元素上面
x:active  应用于被激活的元素
x:focus  聚焦中的元素
x:checked 选中的元素

选子元素相关

x:first-child  第一个元素
x:last-child  最后一个元素
x:nth-child(n)  第n个元素
not（n）除了某个元素，其它元素添加样式

4.伪元素选择器（两个冒号）

顾名思义：假元素——所谓假：在dom树中并不存在

::before(元素之前的元素)
::after(元素之后的元素)
应用：在文字前后(左右)插入小图标或小符号
input::-webkit-input-placeholder  (输入前文字)
应用：输入框未输入时的文字提示

CSS选择器的优先级

内联样式 > ID 选择器 > 类选择器、伪类选择器 > 元素选择器、伪元素选择器 > 外部样式

不过以上优先级顺序并非绝对，还和位置顺序有关

例如：内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/style.css" /> <!--外部样式表-->
  <style type="text/css"> <!--内部部样式表-->
    p{
      color: blue;
    }
  </style>
</head>
<!--内部部样式表优先于外部样式表-->

CSS系列 -- CSS 样式的四种使用方式