专栏首页python语言学习css 三种引用方式

css 三种引用方式

目录

内联式 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内嵌式</title>
</head>
<body>
        <p style='color:red;'>文字颜色为红色</p>
</body>
</html>
  • 执行结果

嵌入式 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>嵌入式</title>
    <style type='text/css'>
        span{
            font-size:18px;   /*字体大小 (单位px)*/
            color: red;      /*字体颜色 (红色)*/
        }
    </style>
</head>
<body>
    <span>学习使人快乐</span>
</body>
</html>
  • 执行结果

外部式 代码

/*外部式css样式(也可称为外链式)就是把css代码写一个单独的外部文件中,这个css样式文件以”.css”为扩展名,在<head>内(不是在style标签内)使用<link>标签将css样式文件链接到HTML文件内,如下代码:*/

/*css样式文件名称以有意义的英文字母命名,如main.css、index.css、base.css等。
rel=”stylesheet”
rel:relationship的缩写,rel属性用于定义链接的文件和HTML文档之间的关系
stylesheet:文档的外部样式表
href:Hypertext Reference的缩写。意思是指定超链接(之前学习a标签的时候)目标的URL。是css代码的一种。href属性的值为样式表文件的地址。*/

/*大家试想一下,如果我们做一个类似淘宝那样的商城网站,那么随着项目需求的增多,我们的css代码量也会更庞大,越发到了后期,我们上述的内联式和嵌入式css样式的方式肯定是不行的,那我们应该怎么办? 这个时候,我们可以使用将我们的css代码编写到另一个单独的文件中,以为了后期方便维护我们的代码。那么这就是外部式css样式。*/

/*html代码*/
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="测试2.css" type="text/css">
</head>
<body>
    <span>好好学习天天向上</span>
</body>
</html>

/*css代码*/
span{
    color: blue;     
    font-size: 24px;
}
  • 执行结果
  • 三种引入方式的优先级 内联式>嵌入式>外部式
  • 但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- 嵌入式css样式的位置一定在外部式的后面 -->
    <link rel="stylesheet" href="index.css">
    <style type="text/css">
      p{
        color:green;        /*字体颜色 绿色*/
      }
    </style>
  </head>
  <body>
    <p style='color:red;'>  /*字体颜色 红色*/
      你好朋友
    </p>
  </body>
</html>
  • 执行结果
  • 总结: 就近原则(离被设置元素越近优先级别越高 )

作 者:郭楷丰

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 静态文件与APP

    郭楷丰
  • django 模版 语法与使用

    """ Django模板语言 Django的模板语言旨在在功能和易用性之间取得平衡。它让那些习惯使用HTML的人感到舒服。 如果您对其他基于文本的模板语言(如S...

    郭楷丰
  • mysql 表关系 与 修改表结构

    郭楷丰
  • 简单说 通过JS控制CSS的各种方式(下)

    版权声明:本文为博主原创文章,欢迎转载,转载请注明出处。 https://blog.csdn...

    FEWY
  • 开发 | 模型表现不好怎么办?37条妙计助你扭转局势

    AI 科技评论按:读论文,看别人的模型的时候仿佛一切都顺利成章,可是等到自己训练模型的时候,麻烦一个接一个…… AI 科技评论找到了一篇国外大神 Slav Iv...

    AI科技评论
  • 第五章(1.5)深度学习——卷积神经网络简介

    卷积神经网络(Convolutional Neural Network, CNN)是一种前馈神经网络, 在计算机视觉等领域被广泛应用. 本文将简单介绍其原理并分...

    两只橙
  • 测试面试题集-Python编程题(1)

    使用while循环实现输出2 - 3 + 4 - 5 + 6 ... + 100 的和。

    ITester软件测试小栈
  • 写给开发者的机器学习指南(五)

    本节描述了应用机器学习技术时的一些常见缺陷。这个部分的想法是让你意识到这些陷阱,并帮助你不要走进这些坑。

    哒呵呵
  • INTERVAL分区升级了,你知道吗?!

    辑手记: Oracle 11g新增的INTERVAL分区使得手工给RANGE分区添加新分区的工作变得异常简单,这也使得INTERVAL分区成为RANGE分区的最...

    数据和云
  • Windows Server 2012 Server Core中安装活动目录

    在Windows Sever 2012中,我们可以自由的切换Server Core和GUI图形界面,相信在今后会有更多的服务我们会运行在Server Core当...

    李珣

扫码关注云+社区

领取腾讯云代金券