网页中引用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. Camera & Render

    1.void Render(); Description Render the camera manually. This will render the camera. It will use th ...

  2. 依赖VUE组件通讯机制实现场景游戏切换

  3. 高性能Web服务器Nginx的配置与部署研究(2)Nginx入门级配置与部署及“Hello World”

    1. Nginx 程序包 目前最新的开发版本时1.1.12: Linux/Unix:nginx-1.1.12.tar.gz Windows:nginx-1.1.12.zip 我们可以下载稳定版尝试: ...

  4. python中函数作用域

    在python中,一个函数就是一个作用域 name = 'xiaoyafei' def change_name(): name = 'sthu' print('在change_name里的name:' ...

  5. 91. Decode Ways反编译字符串

    [抄题]: A message containing letters from A-Z is being encoded to numbers using the following mapping: ...

  6. CloudStack 注册模板脚本分析

    注册系统虚拟机模板 /usr/share/cloudstack-common/scripts/storage/secondary/cloud-install-sys-tmplt 内容如下: usage ...

  7. 约瑟夫问题的变种 LA3882

    题目大意: N个数排成一圈,第一次删除m,以后每k个数删除一次,求最后一被删除的数. 如果这题用链表或者数组模拟整个过程的话,时间复杂度都将高达O(nk),而n<=10000,k<=100 ...

  8. 出现命令提示apt-get -f install的解决方法

    提示apt-get -f install这个信息,然后查看其他的提示信息发现时缺少了一些以依赖库. 解决办法为执行:sudo apt-get -f install命令. 该命令的含义是去补全那些缺少的 ...

  9. ubuntu 14.04 下配置 Go 1.51

    1.最简单的直接的方式(不用设置GOROOT) - 下载 归档文件 并解压到  /usr/local/go/  - 设置环境变量 - 设置系统级的 gedit /etc/profile # 在最末尾加 ...

  10. HDU 6162 Ch’s gift (线段树+树链剖分)

    题意:给定上一棵树,每个树的结点有一个权值,有 m 个询问,每次询问 s, t ,  a, b,问你从 s 到 t 这条路上,权值在 a 和 b 之间的和.(闭区间). 析:很明显的树链剖分,但是要用 ...