CSS一共有四种引入方式

（1）最简单的两种方式是直接在html标签里面引入，或者在html文件前面声明，以下是简单的代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         p{background-color:red;
  8.         color: black}
  9.     </style>
  10. <!--这里是修饰所有的P标签里面的内容，这是引入方法的一种-->
  11.  <style>
  12.         div{background-color:chartreuse;
  13.         color: coral}
  14.     </style>
  15.  
  16. </head>
  17. <body>
  18.  
  19. <p style="background-color: aquamarine;color: black">Jay</p>
  20. <!--在css里面，要用分号区别各种属性,虽然这个P标签有css样式，但是文本的样式是就近原则，这是最简单的css引入方式-->
  21.  
  22. <p>Bob</p>
  23.  
  24. <div>spider
  25. <p>我是个P</p>
  26. </div>
  27. <!--div里面的P标签在上面有div的样式而没有P标签样式时，按div标签的样式，否则按P标签的样式-->
  28.  
  29. </body>
  30. </html>

　　结果如图

（2）可以用导入方法

先创建一个stylesheet文件，也就是css文件，在里面编辑好css样式，这里如图

然后代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         @import "css3.css";
  8.     </style>
  9.     <p>你好，我是导入的css</p>
  10. </head>
  11. <body>
  12.  
  13. </body>
  14. </html>

　　这样关于P标签的样式就导入进去了

（4）通过link方式导入样式

这种方法跟import的就会一模一样，但是@import有数量限制，且是先等网页加载完再引入样式，如果网页足够大，则可能出现闪烁，就是漫长的无样式网页加载之后，css突然出来

而link不会出现这样的情况，他是网页主题装载前就先装载CSS的

link方式如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link href="css3.css" type="text/css" rel="stylesheet">
  7.     <!--type声明引入的文本是css，stylesheet声明引入的是css代码块-->
  8.     <p>你好，我是导入的css</p>
  9. </head>
  10. <body>
  11.  
  12. </body>
  13. </html>

　　效果和第三种方式一样

CSS简单的四种引入方式的更多相关文章

  1. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  2. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  3. CSS的四种引入方式

    1.使用link标签引入css文件: <head> <link rel="stylesheet" type="text/css" href=& ...

  4. 页面中CSS的四种引入方式的介绍与比较

    转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...

  5. CSS文件的三种引入方式

    CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...

  6. CSS 文件的4种引入方式

    (1)链接式  : 在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css  (用得比较多) : < ...

  7. CSS布局的四种定位方式

    1.static(静态定位): 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).参考上篇随笔. 2.relative(相对 ...

  8. CSS的4种引入方式及优先级

    第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...

  9. require 4种引入方式的区别

    以下四种引入方式的区别: 自己创建的包里面封装了一些方法,只是把aa文件夹放在了node_modules文件夹里,所以在引用时,不需要写上相对路径,也不能在网上下载 这是网上别人封装好了的包,下载好了 ...

随机推荐

  1. java Vamei快速教程07 包

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们已经写了一些Java程序.之前的每个Java程序都被保存为一个文件,比如Tes ...

  2. 复习C++_基础、函数、数组、字符串

    程序的开发过程 程序 源程序:用源语言写的,有待翻译的程序: 目标程序:源程序通过翻译程序加工以后生成的机器语言程序: 可执行程序:连接目标程序以及库中的某些文件,生成的一个可执行文件,例如Windo ...

  3. cin对象的一些常用方法使用总结

    >> 最初定义的是右移,当但是出现在 cin >>中的时候这个符号被重载了,变成了一个流操作,在用户通过键盘输入信息的时候,所有内容都会先直接存储在一个叫输入缓冲区的的地方,c ...

  4. PHP开发框架流行度排名：Laravel居首

    摘要:在PHP开发中,选择合适的框架有助于加快软件开发,节约宝贵的项目时间,让开发者专注于功能的实现上.Sitepoint网站做了一个小的调查,结果显示最流行的PHP框架前三甲为:Laravel.Ph ...

  5. matlab中size函数总结

    size(A)函数是用来求矩阵的大小的. 比如说一个A是一个3×4的二维矩阵: 1.size(A) %直接显示出A大小 输出:ans= 3 4 2.s=size(A)%返回一个行向量s,s的第一个元素 ...

  6. BeyondCompare：如何之比较文件内容的不同？

    问题描述: 在使用beyond compare比较文件的时候,常会有很多不同,但是点击打开后,发现内容没有不同.这个是因为工具把文件的日期.大小等非内容因素也比较了进去. 解决方法: 点击“会话” - ...

  7. css布局：块级元素的居中

    一.定宽: 1.定位居中(absolute) 方法一: html: <div class="main"></main> css: .main{ width: ...

  8. NSCopying

    ///< .h @interface ChatManager : NSObject <NSCopying> @property (nonatomic) NSUInteger inde ...

  9. mount: no medium found on /dev/sr0 找不到介质

    在VMware虚拟机中配置yum源时,执行 mount /dev/cdrom /mnt/cdrom 出现 mount: no medium found on /dev/sr0. 首先在/mnt 目录下 ...

  10. 安装 ubuntu 后,使用 sed 更换国内源

    cd /etc/aptsed -i "s/archive.ubuntu.com/mirrors.aliyun.com/g" /etc/apt/sources.list也可以使用 1 ...