网页中引用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. lucene3.0范围查找

    在lucene3.0以上版本中,范围查询也有很大的变化,RangeQuery已经不推荐使用,使用TermRangeQuery和NumericRangeQuery两个替代.TermRangeQuery: ...

  2. WIN7下为Editplus添加右键打开

    解决某些特殊情况, EditPlus 3在Windows7下使用右键菜单无法编辑文件的问题.1.Ctrl+R运行regedit2.在 HKEY_CLASSES_ROOT\* 下新建项 shell3.在 ...

  3. partial分部类

    意义 1.源代码控制 2.将一个类或结构分成不同的逻辑单元 3.代码拆分

  4. js闭包的定义

    通过函数字面量创建的函数对象包含一个连接到外部上下文的连接,这叫做闭包. 还有一种定义:函数可以访问它被创建时所处的上下文环境,叫做闭包.

  5. pyinstaller打包后运行提示找不到模块

    截止到2017年9月20号,pyinstaller只支持到python3.5,如果需要支持到3.6,需要自己在github上下载pyinstaller的开发版. 在打包时候,并没有提示错误,可以顺利打 ...

  6. C++版修真小说

    终有一天我手中的编译器将成为我灵魂的一部分,这世界在我的眼中将被代码重构,我将看到山川无尽银河无垠都汇成二进制的数字河流,过往英雄都在我脑海眼前一一浮现,而我听到无数码农跪倒在我的程序面前呼喊. 他们 ...

  7. 135. Candy(Array; Greedy)

    There are N children standing in a line. Each child is assigned a rating value. You are giving candi ...

  8. Python 序列与映射的解包操作-乾颐堂

    解包就是把序列或映射中每个元素单独提取出来,序列解包的一种简单用法就是把首个或前几个元素与后面几个元素分别提取出来,例如: first, seconde, *rest = sequence 如果seq ...

  9. java技术文章集

    RunOOB Java 教程 深入理解Java 8 Lambda spring MVC配置详解 各种参数传递示例代码 关于spring配置文件中ref属性的设定 Spring注解Annotation的 ...

  10. IBatis模糊查询

    IBatis模糊查询  补充: mysql中模糊查询的四种用法: 1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * ...