CSS的三种引入方式

三种引入方式——行内式

行内式就是对单独的标签的样式进行修改的方式，它存在于标签行内,用 style 来表现。

如：

<p style="font-size:10px">行内式</p>

这种即为行内式

三种引入方式——内部样式

当我们想让一整页的网页的某一标签，如<p>中字体样式都改变为某一值，一个一个添加 style 肯定是极度浪费时间的，因此，我们需要”内部样式”引入方法来整体改变标签样式。

如何添加内部样式？

1.首先我们需要在网页头部 <head> 中添加标签 <style></style>

2.接着我们在 <style> 中写上我们需要修改的标签并用大括号括住（标签与大括号之间存在空格）

3.最后我们在大括号内写下要修改的样式(每个样式占一行，最后用分号隔开）

实现为：

<head>
<style>
　　p{
     　font-size:16px;
　　　　color:#FFFFFF
　　}
</style>
</head>

三种引入方式——外部样式

当我们建立网站时，不可避免的就是网页量增大，此时，如果我们还使用“内部样式”方法引入，也会显得有些繁琐，多余，此时我们需要使用“外部样式”方法来完成样式引入。

1.首先我们需要创建一个.css文件

2.我们需要在文件中写入需要引入的样式，即内部样式中 <style> 中部分

3.在网页的<head>中应用<link>引入 .css文件

具体引入方法为：

<head>
<link rel="stylesheet" href="./文件名.css"> ./为当前文件夹即相对路径标志
</head>

便可添加外部样式

PS：内部样式(style内)和外部样式的注释方式都是使用CSS注释方式

<link>中

  1. rel 属性  rel 属性规定了当前文档与被链接文档之间的关系，但是rel属性的stylesheet 值被所有浏览器支持，也就是说你只要记住一个值即可。

stylesheet的意思就是文档的外部样式表。

  1. type属性 type属性规定了被链接文档的 MIME（多用途互联网邮件扩展类型）类型，type属性对应的最常见的值就是text/css，该类型描述样式表.
  2. href属性 href属性后跟的是要引入的链接地址

在 href 引入时 ./ 代表当前文件夹（可以去掉）

../:回到上一级文件夹目录,比如下面这个文件目录结构中（index.html在test文件夹里面，index.css和test文件夹在同一级目录下），我们要在index.html中引入index.css文件，首先要从index.html文件所在目录即test文件夹里出来，才能找到index.css，从某个文件夹里面出来，就要用到../

href 注意点：

  • * 找到引用资源的文件所在位置，以引用资源的文件为基准，寻找资源
  • * ../返回一层，如果有多层，就用多个../，比如返回两层就用../../
  • * 文件夹名代表进入该文件夹，例如css/，表示进入css文件夹，比如从test文件夹里出来进入css文件夹找到index.css文件，可以这样写../css/index.css