网页中引用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. Eclipse Java EE IDE中jsp页面编码修改

    Eclipse Java EE IDE模板编码是ISO8859,肯定不是我们需要的,修改方法如下图: 依次点击:Window---->Preference---->Web---->J ...

  2. 《gradle 用户指南中文版》 第1章、简介

    第1章.简介 目录 1.1 关于本用户指南 Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建工具. 这里我们将介绍Gradle,我们认为gradle让java项 ...

  3. [置顶] flume高并发优化——（15）中间件版本升级

    在系统平稳运行一年的基础上,为提供更好的服务,现针对java,kafka,flume,zk,统一进行版本升级,请各位小伙伴跟着走起来,不要掉队啊! 名称 老版本号 新版本号 jdk 1.7.0_25 ...

  4. mysql动态扩容调研

    MySQL动态扩容方案 目前可用方案 MySQL的复制: 一个Master数据库,多个Salve,然后利用MySQL的异步复制能力实现读写分离,这个方案目前应用比较广泛,这种技术对于以读为主的应用很有 ...

  5. UTL_DBWS包的创建和用法

    UTL_DBWS - Consuming Web Services in Oracle 10g In a previous article I presented a method for Consu ...

  6. MPLS基础一(上)

    在上图中,关于PC-A和PC-B之间互相访问的过程中 1.所有三层网络设备形成源和目的的路由条目 2.PC-A发出报文,source-IP为A,destination-IP为B 3.R1收到报文后,根 ...

  7. 创建第一个python程序：‘Hello World!’

    安装好python解释器就可以创建第一个仪式程序Helloworld了 1.Python程序的3种运行方式 1.1.Python解释器直接运行 在Windows或者Linux命令行输入python,进 ...

  8. （一）使用IDEA新建一个最简单的JavaWeb项目，Maven管理

    1.项目环境 IDEA:2016.2 JDK:1.8.0_76 Maven:3.2.5 2.File-->New-->Project-->Maven 3.选择Project SDK: ...

  9. Java并发--深入剖析ThreadLocal

    想必很多朋友对ThreadLocal并不陌生,今天我们就来一起探讨下ThreadLocal的使用方法和实现原理.首先,本文先谈一下对ThreadLocal的理解,然后根据ThreadLocal类的源码 ...

  10. BZOJ3747 POI2015 Kinoman 【线段树】*

    BZOJ3747 POI2015 Kinoman Description 共有m部电影,编号为1~m,第i部电影的好看值为w[i]. 在n天之中(从1~n编号)每天会放映一部电影,第i天放映的是第f[ ...