网页中引用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. Django项目的ORM操作之--数据模型类创建

    在django项目中,其自带了ORM(Object Relation Mapping)对象关系映射框架,我们在django项目下app的models模块下对类进行操作,通过ORM会将我们对类的操作转化 ...

  2. Lodash 浓缩

    Lodash 是个十分有用的工具库,但我们往往只需要其中的一小部分函数.这时,整个 lodash 库就显得十分庞大,我们需要减小 lodash 的体积. cherry-pick 方法 Lodash 官 ...

  3. CentOS 7常用工具安装

    git 在Linux下开发项目,少不了要使用git工具,安装方法十分简单,通过一条 yum 指令既可完成安装: yum install git 安装完成后检测版本: # git --version g ...

  4. 配置wampserver 虚拟主机

    1.修改http.conf 找到,#Include conf/extra/httpd-vhosts.conf,修改为(有的版本服务器,默认是开启的): 2.配置httpd-vhosts.conf文件, ...

  5. xcode好玩的条件断点设置. 可以真人发声。

    哈哈.设置个条件断点. 然后 Logmessage  or speak message 挺有意思. 一听就知道是哪个断点触发了.

  6. json XML 比较

    JSON: 这个为什么会变成“cc”而不是d.substring(dot+1);的值?    解决: var jsonsub = {}; jsonsub[cc] = e; arrnew.push(js ...

  7. 高德地图Demo运行报错 com.android.ide.common.process.ProcessException: Failed to execute aapt

    最近由于有需求去做导航方面的Android开发,很是无奈,以前也的确是没有搞过,领导开大会当着所有人的面说这是给我分配的第一个工作,无论如何要做好,突然间感觉压力好大,自己已经多年没有敲过代码,而且A ...

  8. [Python]定时任务框架 APScheduler

    1.使用APScheduler教程 参考博客地址

  9. 分布式版本控制系统Git——图形化Git客户端工具TortoiseGit

    本篇导读: 上篇介绍了一款Windows环境下的Git服务器工具GitStack ,搭建了最简单的Windows下的Git服务器,需要再次提醒的是GitStack是打包了相对较稳定的Git原生版本的, ...

  10. AngularX 指令（ngForof）（转载）

    该指令用于基于可迭代对象中的每一项创建相应的模板.每个实例化模板的上下文对象继承于外部的上下文对象,其值与可迭代对象对应项的值相关联. NgForOf 指令语法 * 语法糖 <li *ngFor ...