CSS一共有四种引入方式

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p{background-color:red;

        color: black}

    </style>

<!--这里是修饰所有的P标签里面的内容，这是引入方法的一种-->

 <style>

        div{background-color:chartreuse;

        color: coral}

    </style>

</head>

<body>

<p style="background-color: aquamarine;color: black">Jay</p>

<!--在css里面，要用分号区别各种属性,虽然这个P标签有css样式，但是文本的样式是就近原则，这是最简单的css引入方式-->

<p>Bob</p>

<div>spider

<p>我是个P</p>

</div>

<!--div里面的P标签在上面有div的样式而没有P标签样式时，按div标签的样式，否则按P标签的样式-->

</body>

</html>

　　结果如图

（2）可以用导入方法

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

然后代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        @import "css3.css";

    </style>

    <p>你好，我是导入的css</p>

</head>

<body>

</body>

</html>

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

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

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

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

link方式如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link href="css3.css" type="text/css" rel="stylesheet">

    <!--type声明引入的文本是css，stylesheet声明引入的是css代码块-->

    <p>你好，我是导入的css</p>

</head>

<body>

</body>

</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. LeetCode Missing Number （简单题）

    题意: 给一个含有n个整数的数组,数组中的元素应该是0-n.现在缺了其中某1个,找出缺少的那个整数? 思路: 0-n的总和是可以直接计算的,而缺少的那个就是sum减去数组的和. int missing ...

  2. 微软高性能缓存AppFabric（二）使用

    原文链接:http://www.cnblogs.com/Qbit/p/6102614.html 从AppFabric 的安装目录中选择两个dll添加到项目中, 默认安装位置:C:\Program Fi ...

  3. World Wind Java开发之十五——加载三维模型（转）

    之前的一篇博客是关于加载粗三维模型的,见http://blog.csdn.net/giser_whu/article/details/43452703,这个地方还存在着不能加载纹理的问题,一直没呢解决 ...

  4. UVA 12169 Disgruntled Judge（Extended_Euclid）

    用扩展欧几里德Extended_Euclid解线性模方程,思路在注释里面了. 注意数据范围不要爆int了. /********************************************* ...

  5. POJ 2184 Cow Exhibition（背包）

    希望Total Smart和Totol Funess都尽量大,两者之间的关系是鱼和熊掌.这种矛盾和背包的容量和价值相似. dp[第i只牛][j = 当前TotS] = 最大的TotF. dp[i][j ...

  6. 【BZOJ2002】[HNOI2010] 弹飞绵羊（大力分块）

    点此看题面 大致题意: 有\(n\)个弹力装置,当到达第\(i\)个装置时,会被弹到第\(i+k_i\)个装置,若不存在第\(i+k_i\)个装置,就会被弹飞.有两种操作,一种操作是将\(k_x\)改 ...

  7. 关于html标签的两种隐藏方式

    做一个文章管理模块 有一个功能是需要根据文章分类来显示内容的标签 刚开始以为很简单 ,手放键盘上就是一顿敲. 如果类型是文章就是没问题  可是另外几种就有问题了 红框的标签一直不出来 后来找了半天然来 ...

  8. find cat sed awk 简单组合使用

    find:查找 // .表示当前目录:   /表示根目录:  | 管道符:  xargs表示将前面的搜索接口作为参数传递到后面的命令中:grep 过滤 // xxxx表示文件名 1.查找指定文件名的文 ...

  9. Linux时区修改

    Linux修改时区的正确方法 CentOS和Ubuntu的时区文件是/etc/localtime,但是在CentOS7以后localtime以及变成了一个链接文件 [root@centos7 ~]# ...

  10. JZOJ 5849 d

    Description Input Output Data Constraint 做法:考虑贪心使得mina*minb最大,先以a为关键字排序,然后枚举删除最小的0~m个ai,对应删除最小的bi,然后 ...