网页中引用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;

}
注意：这里是另建一个css文件

然后在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的浏览器来说就是无效的
 

2.css的引入方式的更多相关文章

  1. CSS的引入方式

    再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...

  2. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  3. CSS的引入方式和样式

    CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...

  4. 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

    前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介    叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...

  5. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  6. 前端（二）—— CSS的引入方式、长度与颜色单位、常用样式、选择器

    CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...

  7. CSS的引入方式和复合选择器

    CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...

  8. css样式引入方式，及常用设置标签样式

    一. 三种样式引入方式   1. 内联式-直接写在div标签中,不推荐用 <div style="color:red;font-size:20px;font-family:'Micro ...

  9. CSS 从入门到放弃系列：CSS的引入方式

    css的四种引入方式 内联方式(行间样式) <div style="width:100px;height: 100px; background-color: red"> ...

  10. 5.CSS的引入方式

    CSS的三种样式表 按照CSS样式书写的位置(或者引入的方式),CSS的样式表可以分为三大类: 1.行内样式表(行内式) <div style="color:red: font-siz ...

随机推荐

  1. url_encode and url_decode in Shell

    之前写过一版 shell下解码url,下面给出另外一个版本 from https://gist.github.com/cdown/1163649 function urlencode() { loca ...

  2. NSTimer类的使用

    转载于:http://www.cnblogs.com/wujian1360/archive/2011/09/05/2167992.html 创建一个 Timer + scheduledTimerWit ...

  3. jsp get 乱码

    String str=request.getParameter("name");str=new String(str.getBytes("iso8859-1") ...

  4. 201671010140. 2016-2017-2 《Java程序设计》java学习第十一周

     java学习第十一周     本周,进行了java集合方面的知识,在博客园的帮助下,我的课前预习更有条理性,重点明确,本周的课堂反应明显更好了,首先,梳理一下本周知识点.  Collection   ...

  5. SaltStack 的插件特性

    :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { border: 0; m ...

  6. Inversions SGU - 180

    这个是逆序对的裸题哇 归并排序或者树状数组~ 树状数组的话需要离散化一下··· emm确实很水很水很水··· 归并排序: #include <cstdio> #include <al ...

  7. 714. Best Time to Buy and Sell Stock with Transaction Fee有交易费的买卖股票

    ［抄题］: Your are given an array of integers prices, for which the i-th element is the price of a given ...

  8. sqlserver镜像相关资料

    本文出处:http://blog.csdn.net/dba_huangzj/article/details/35995083 镜像(Mirroring) SQL Server镜像简介 计划搭建SQL ...

  9. python用sqlite3模块操作sqlite数据库-乾颐堂

    SQLite是一个包含在C库中的轻量级数据库.它并不需要独立的维护进程,并且允许使用非标准变体(nonstandard variant)的SQL查询语句来访问数据库. 一些应用可是使用SQLite保存 ...

  10. laravel form表单提交

    控制器 中间层 中间层