在HTML中定义CSS的方式有：Embedding（嵌入式）、Linking（引用式）、Inline（内联式），下面通过实例为大家详细介绍下它们的特点

 
在HTML中常用以下3种方式定义CSS：Embedding（嵌入式）、Linking（引用式）、Inline（内联式）

一、嵌入式

使用HTML的style元素，在文档中定义CSS样式。

复制代码

代码如下:

<head> 
<style type="text/css"> 
h1{color:red} 
p{color:blue} 
</style> 
<head> 

二、内联式

每一个HTML元素都包含一个style属性，可以直接定义样式。该样式仅能用于该元素的内容，对于另一个同名的元素则不起作用。

复制代码

代码如下:

<p style="color:#FFF;font-weight:bold;">内联样式</p> 

三、外部引用式

外部引用指HTML文档本身不含有CSS样式，而是动态引用外部的CSS文件定义文档的表现形式。

1、使用样式表的处理指令语句

在HTML文档的开头部分写一个关于样式表的指令处理语句

复制代码

代码如下:

<?xml-stylesheet type="text/css" href="mystyle.css" ?> 
<html> 
指令语句 
</html> 

不过只有使用xml语法格式编写的html文档才支持使用该指令，大多数浏览器仅当被保存为xhtml或xml格式才有效，且JS不能处理这种CSS，所以不建议使用。

2、使用@import命令

在style元素之间使用@import命令导入外部的css文件

复制代码

代码如下:

<head> 
<style type="text/css"> 
<!--下面两行代码效果一样 
@import "mystyle.css"; 
@import url("mystyle.css"); 
--> 
</style> 
</head> 

任何@import规则必须出现在所有规则之前。参数是一个css文件的URL地址。在一个css文件中也可以用@import指令将另一个css文件导入。

3、使用link元素

复制代码

代码如下:

<head> 
<link rel="stylesheet" href="css的url" type="text/css" > 
</head> 

这也是最常用的方式。

4、使用HTTP消息报头链接到样式表

可以使用HTTP消息报头的link字段链接一个外部样式表。

复制代码

代码如下:

link:<mystyle.css>;rel=stylesheet; 
//等同于<link rel="stylesheet" href="css的url" type="text/css" > 

HTTP报头中可以使用多个link，从而链接多个样式表，且HTTP报头中的link比HTML文档中的link（head元素中）具有优先级。

html里嵌入CSS的三种方式的更多相关文章

  1. 在单文件组件中，引入安装模块里的css的2种方式：script中引入、style中引入

    在单文件组件中,引入安装模块里的css的2种方式:script中引入.style中引入 1.script中引入 <script> import 'bulma/css/bulma.css' ...

  2. 引入CSS的三种方式

    虽然入职已经大半年,并自诩前端工程师,但是我真的不会……(有一种我有罪我该死的感觉 从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 1.内联式 内联式css样式表就 ...

  3. HTML中放置CSS的三种方式和CSS选择器

    (一)在HTML中使用CSS样式的方式一般有三种: 1 内联引用 2 内部引用 3 外部引用.   第一种:内联引用(也叫行内引用) 就是把CSS样式直接作用在HTML标签中. <p style ...

  4. java Web jsp嵌入代码的三种方式

    1,表达式标签  <%= 2+3%> 唯一有显示功能的标签 作用: 计算表达式的返回值 将表达式的返回值显示到网页中. 注意: 表达式中不能有分号 2,普通脚本标签  <% %> ...

  5. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  6. Html CSS的三种链接方式

    感谢原文:https://blog.csdn.net/abc5382334/article/details/24260817 感谢原文:https://blog.csdn.net/jiaqingge/ ...

  7. CSS控制样式的三种方式优先级对比验证

    入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...

  8. css文件引人的三种方式

    前言 1995年,W3C发布了CSS草案 1996年,W3C正式推出CSS1 1998年,推出CSS2 2001年从CSS3开始,CSS这门语言分割成多个独立的模块,每个模块独立分级,且只包含一小部分 ...

  9. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

随机推荐

  1. 【NOIP1999】邮票面值设计 dfs+dp

    题目传送门 这道题其实就是找一波上界比较麻烦 用一波 背包可以推出上界mx 所以新加入的物品价值一旦大于mx+1,显然就会出现断层,所以可以以maxm+1为枚举上界,然后这样进行下一层的dfs. 这样 ...

  2. 51nod K 汽油补给 大根堆+小根堆....

    题目传送门 用优先队列瞎搞... 想着在每个地方 先算上一个点到这一个点要花费多少钱 这个用小根堆算就好 然后在这个地方加油 把油钱比自己多的替代掉 这个用大根堆维护一下 然后两个堆之间信息要保持互通 ...

  3. CVE-2017-5521: Bypassing Authentication on NETGEAR Routers（Netgear认证绕过漏洞）

    SpiderLabs昨天发布的漏洞, 用户访问路由器的web控制界面尝试身份验证,然后又取消身份验证,用户就会被重定向到一个页面暴露密码恢复的token.然后通过passwordrecovered.c ...

  4. ios网络开发 网络状态检查

    http://www.cnblogs.com/hanjun/archive/2012/12/01/2797622.html 网络连接中用到的类: 一.Reachability 1.添加 Reachab ...

  5. appium===Python+Appium环境部署教程

    *前提是你已经安装好python,以及python的pip工具 *安装python请自行百度教程~ 1.安装安卓sdk 安装包:http://tools.android-studio.org/inde ...

  6. /usr/bin/expect介绍

    /usr/bin/expect介绍 http://blog.csdn.net/zhu_tianwei/article/details/44180637 概述 我们通过Shell可以实现简单的控制流功能 ...

  7. c#使用selenium截图，操作dom元素

    using System; //添加selenium的引用 using OpenQA.Selenium.PhantomJS; using OpenQA.Selenium.Chrome; using O ...

  8. 最简单的DLL

    静态链接库与动态链接库都是共享代码的方式,如果采用静态链接库,则无论你愿不愿意,lib 中的指令都全部被直接包含在最终生成的 EXE 文件中了.但是若使用 DLL,该 DLL 不必被包含在最终 EXE ...

  9. 如何获取（GET）一杯咖啡——星巴克REST案例分析

    英文原文:How to GET a Cup of Coffee 我们已习惯于在大型中间件平台(比如那些实现CORBA.Web服务协议栈和J2EE的平台)之上构建分布式系统了.在这篇文章里,我们将采取另 ...

  10. [转载]如何将OFBIZ(opentaps)默认数据库迁移至mysql((2

    原文地址:如何将OFBIZ(opentaps)默认数据库迁移至mysql(利昂原创)作者:利昂 ofbiz自带的数据库是Derby,这是一种小型的适合与测试系统的数据库,但不适合在产品级系统中使用,所 ...