网页中引用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. bps、bit、byte的区别

    bps是速度单位,bit是大小单位,byte也是大小单位1bps=1bit每秒, 8bit=1byte 1 Byte = 8    bits1 KB   = 1024 Bytes1 MB   = 10 ...

  2. angularjs学习访问服务器（5）

    (1) 后台AngularController.java代码 package com.amy.controller; import java.util.ArrayList; import java.u ...

  3. js 操作数组的一些方法

    1.从数组中获取最大的数 function getMaxfromarr(arr) { var lasti = 0; for (var i = 0; i < arr.length; i++) { ...

  4. python grpc

    pip install grpcio pip install grpcio-tools python -m grpc_tools.protoc -I. --python_out=. --grpc_py ...

  5. bash's parameter expansion

    [bash's parameter expansion] #: find first from left, remove-left ##: find last from left, remove le ...

  6. VUE+WebPack实现精美前端游戏：CardBattle的游戏场景设置

    C:\Users\ZHONGZHENHUA\cardBattle\src\App.vue src/App.vue <template> <div id="app" ...

  7. 使用zTree展开节点后,覆盖了下一个节点

    如图所示,结果是zTree与<fieldset>标签不兼容....我去!!! 也就是说Ztree不能放在<fieldset>标签中..

  8. 一些好用的 Oracle 批处理和语句

    # 备份脚本 backup.bat @ECHO OFF COLOR 0A SET DaysAgo=1 SET Today=%date:~0,4%%date:~5,2%%date:~8,2% EXP u ...

  9. loadrunner load generator设置init人数

    Load Generator中还有一个很重要的设置.就是用来设置init人数的,我们在运行脚本的时候会发现,在场景监控中,init默认不会超过50个人,也就是最大并发是50个人,我们想使用超过50个人 ...

  10. Python正则表达式的七个使用范例-乾颐堂

    作为一个概念而言,正则表达式对于Python来说并不是独有的.但是,Python中的正则表达式在实际使用过程中还是有一些细小的差别. 本文是一系列关于Python正则表达式文章的其中一部分.在这个系列 ...