网页中引用CSS样式

内联样式

行内样式表

外部样式表

　　　　..链接式　　

　　　　..导入式

内嵌方式

style标签

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf8">
  5.         <style>
  6.             p {
  7.                 color: red;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <p>这是一个p标签！</p>
  13.     </body>
  14. </html>

行内样式

  1. <!doctype html>
  2. <html>
  3. 　　<head>
  4. 　　　　<meta charset="utf8">
  5. 　　</head>
  6. 　　<body>
  7. 　　　　<p style="color: blue;">这是一个p标签！</p>
  8. 　　</body>
  9. </html>

外联样式表-链接式

link标签

index.css

  1. p {
  2.   color: green;
  3. }
    注意：这里是另建一个css文件

然后在HTML文件中通过link标签引入：

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf8">
  5.         <link rel="stylesheet" href="index.css">
  6.     </head>
  7.     <body>
  8.         <p>这是一个p标签！</p>
  9.     </body>
  10. </html>

外联样式表-@import url()方式 导入式

了解即可。

index.css

  1. @import url(other.css)

注意：
@import url()必须写在文件最开始的位置。

链接式与导入式的区别

  1. 1、<link/>标签属于XHTML,@import是属性css2.1
  2. 2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
  3. 3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
  4. 4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
  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. npm安装elasticsearch-reindex

    由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装. npm -v 你可以使用以下命令来查看所有全局安装的 ...

  2. Composer切换到Laravel-China 镜像

    全局 composer config -g repo.packagist composer https://packagist.laravel-china.org 该项目 composer confi ...

  3. SQL 中怎么查询数据库中具有的表、存储过程、试图数目、总触发器数、作业数

    用户表:select count(*) 总表数 from sysobjects where xtype='u' 刚才那个是用户表,下面这个是系统表加用户表: select count(*) 总表数 f ...

  4. IIS网站最大并发连接数

    打开网站服务器IIS---[控制面板]-[管理工具]--[Internet信息服务IIS管理器]   打开应用程序池--找到网站对应使用的应用程序池--选择右侧[高级设置]   在[高级设置]窗口可看 ...

  5. String.getBytes()[转]

    在Java中,String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组.这个表示在不通OS下,返回的东西不一样! String.getBytes(String decode)方 ...

  6. 如何将.crt的ssl证书文件转换成.pem格式

    如何将.crt的ssl证书文件转换成.pem格式 摘自:https://www.landui.com/help/show-8127 2018-07-04 14:55:41 2158次 准备:有一台安装 ...

  7. 两个线程并发执行以下代码，假设a是全局变量，那么以下输出______是不可能的？

    3.两个线程并发执行以下代码,假设a是全局变量,那么以下输出______是不可能的? void foo(){    ++a;    printf("%d ",a);}A.3 2   ...

  8. 【#】Spring3 MVC （三）---请求处理方法 参数及返回值总结

    博客分类:  spring MVCJSPServletCC++ @RequestMapping("/xxxx") public String  aaa(){ } 在处理用户请求的方 ...

  9. [GO]获取命令行参数

    package main import ( "os" "fmt" ) func main() { list := os.Args n := len(list) ...

  10. 编写高质量代码改善C#程序的157个建议——建议102：区分接口和抽象类的应用场合

    建议102:区分接口和抽象类的应用场合 接口和抽象类有一些显而易见的区别: 接口支持多继承,抽象类则不能. 接口可以包含方法.属性.索引器.事件的签名,但不能有实现,抽象类则可以. 接口在增加新方法后 ...