网页中引用CSS样式

  • 内联样式
  • 行内样式表
  • 外部样式表
    • 链接式
    • 导入式

内嵌方式

style标签

<!doctype html>

<html>

    <head>

        <meta charset="utf8">

        <style>

            p {

                color: red;

            }

        </style>

    </head>

    <body>

        <p>这是一个p标签！</p>

    </body>

</html>

行内样式

<!doctype html>

<html>

<head>

<meta charset="utf8">

</head>

<body>

<p style="color: blue;">这是一个p标签！</p>

</body>

</html>

外联样式表-链接式

link标签

index.css

p {

  color: green;

}

然后在HTML文件中通过link标签引入：

<!doctype html>

<html>

    <head>

        <meta charset="utf8">

        <link rel="stylesheet" href="index.css">

    </head>

    <body>

        <p>这是一个p标签！</p>

    </body>

</html>

外联样式表-@import url()方式 导入式

了解即可。

index.css

@import url(other.css)

注意：
@import url()必须写在文件最开始的位置。

链接式与导入式的区别

1、<link/>标签属于XHTML,@import是属性css2.1

2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示

3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中

4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的

css引用方式的更多相关文章

  1. CSS引用方式及样式层叠机制

    CSS引用方式有3种,三种分别为:外部引入.内部引入.行内样式,下面一 一进行介绍. 1.外部引入:CSS代码在一个独立的文件中,HTML通过Link标签引入到页面. 代码格式:<link re ...

  2. CSS 选择器及各样式引用方式

    Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...

  3. css的两种引用方式 link和@import

    学习web开发的最大乐趣就是不断的发现自己以前不曾见过的东西,这些东西对于我来说是那么的新鲜有趣. 比如说今天偶尔研究别人的网站,就发现了有趣的东东. 当点开此网页的css时(这个css文件命名方式就 ...

  4. CSS样式表引用方式

    最近讲课中,有些学员对调用样式表老是有含糊不清?大体说来有四种方式: 1.外部文件引用方式;(推荐使用) 2.使用@import引用外部CSS文件; 3.内部文档头方式也叫内嵌法调用; 4.直接插入式 ...

  5. CSS的引用方式（引用外部样式表、内部样式表、内联样式表）

    CSS引用外部样式表的优点:一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件,所以外部引用相对于内部引用和内联引用来说是是节省资源的. CSS使用内部样式表.内联样式表的优点:可以直观的 ...

  6. CSS hack方式一览【转】

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  7. 史上最全的CSS hack方式一览

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  8. [转]史上最全的CSS hack方式一览

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  9. CSS hack方式

    史上最全的CSS hack方式一览   做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现 ...

随机推荐

  1. Kotlin Reference (五) Packages

    most from reference 包 源文件可以从包声明开始: package foo.bar fun baz() {} class Goo {} // ... 源文件的所有内容(如类和函数)都 ...

  2. 使用nrm管理npm仓库

    使用nrm管理npm仓库 用npm装包的时候,经常碰到太慢或者npm官网被墙的情况,有时候凑合一下就改一下 "~/.npmrc" 文件,但是经常改来改去也挺麻烦的,于是找到了可以使 ...

  3. iOS RUN LOOP 是个什么东西？

    RUN Loop是什么? 1.runloop是事件接收和分发机制的一个实现. 2.什么时候使用runloop 当需要和该线程进行交互的时候.主线程默认有runloop.当自己启动一个线程,如果只是 ...

  4. caffe 一些网络参数

    caffe一些网络参数的:http://www.docin.com/p-871820919.html

  5. windows 按时自动化任务

    参考文章: 1. 巧用Windows 7计划任务设置定时提醒 http://jingyan.baidu.com/article/acf728fd279fe5f8e510a333.html 2. cmd ...

  6. 如何将局域网中的 windows 硬盘挂载到 linux 系统中

    1.共享windows上的E盘 2.linux上执行 mount //192.168.3.181/e /tmp/test -o username=dell,,password=abcdef 3.保证两 ...

  7. nginx在使用proxy_pass的情况下开启error_page

    error_page用于指定特定错误发生时要显示的url,但是如果请求经proxy_pass处理后,如何使error_page对upstream产生的错误进行处理呢? 方法很简单. 保持之前的erro ...

  8. JAXP使用Stax API时格式化输出XML

    最近项目中需要生成XBRL instance,对于XML读写和验证进行了一些学习.由于Stax API不支持格式化输出,默认全都写在一行上,网上也没有搜到现成的东西,自己写了一个格式化输出的帮助类. ...

  9. Struts标签库详解，非常好的Struts标签详解

    Struts提供了五个标签库,即:HTML.Bean.Logic.Template和Nested. HTML 标签:         用来创建能够和Struts 框架和其他相应的HTML 标签交互的H ...

  10. stm32寄存器版学习笔记04 定时计数器中断

    STM32共有8个定时计数器,其中TIME1和TIME8是高级定时器,TIME2~TIME5是通用定时器,TIME6和TIME7是基本定时器.以TIME3为例总结定时计数器的基本用法. 1.TIM3的 ...