内联样式表

<p style="font-size:50px; color:blue">css内联样式表</p>

内部样式表

<style type="text/css">

     p{

         font-size: 100px;

         color: red;

     }

</style>

<p>css内部样式表</p>

外部样式表

创建一个cssTest.css的css文件

p{

    font-size: 50px;

    color:green;

}

span{

    font-size: 50px;

    color: yellow;

}

使用外部样式表

<link rel="stylesheet"  type="text/css" href="../css/cssTest.css">

    <p> 优先级： 内联样式表 > 内部样式表 > 外部样式表</p>

    <span >外部样式表</span>

完整测试代码

<!-- 文件名cssTest.html -->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>cssTest</title>

    <style type="text/css">

        p{

            font-size: 50px;

            color: red;

        }

    </style>

    <link rel="stylesheet"  type="text/css" href="../css/cssTest.css">

</head>

<body>

    <p style="font-size:50px; color:blue">css内联样式表</p>

    <p>css内部样式表</p>

    <p>优先级：内联样式表 > 内部样式表 > 外部样式表</p>

    <span >外部样式表</span>

</body>

</html>

css文件

<!-- 文件名cssTest.css -->

p{

    font-size: 50px;

    color:green;

}

span{

    font-size: 50px;

    color: yellow;

}

css三种导入方式的优先级

内联样式表 > 内部样式表 > 外部样式表

css的三种导入方式的更多相关文章

  1. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  2. css-1,css的三种引入方式 基本选择器

    <!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...

  3. 11 CSS的三种引入方式和基本选择器

    <!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...

  4. Html CSS的三种链接方式

    感谢原文:https://blog.csdn.net/abc5382334/article/details/24260817 感谢原文:https://blog.csdn.net/jiaqingge/ ...

  5. CSS的三种引入方式

    1.标签 <style>定义样式         <link> 资源的引用(某些css的样式) 2.属性 rel=”stylessheet” 外部样式表  (rel为定义当前文 ...

  6. CSS三：CSS的三种引入方式

    CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...

  7. css的三种引入方式、常用的元素选择器以及css三大特性

    第一.html文件中如何使用css html文件中使用css有3种方式:链接式.嵌入式.行内式,推荐使用程度依次递减:1.链接式:在html文件通过<link />标签引入,rel属性值必 ...

  8. css的三种书写方式

    一.内联样式 <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 二 ...

  9. css的三种使用方式:行内样式,内嵌样式,外部引用样式

    三中的使用方法的简单实例如下: 行内样式: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

随机推荐

  1. swoole(PHP异步网络通信引擎)的结构和运行流程

    swoole结构说明和运行流程 主要分为三个部分: 1.Master:swoole的主进程 处理swoole核心的事件驱动, 它包含多个线程(蓝色Reactor), 所有事件的监听都在Reactor实 ...

  2. 初入计科，首次接触C的感受

    1 你对计算机科学与技术专业了解是怎样? 答:一开始我对这个专业并无了解,觉得无非是把电脑给学透.经过一周的学习后,我深刻地感觉自己对这个专业深深的误解. 通过翻阅书籍,上网浏览相关信息,我认为该专业 ...

  3. Ganglia安装及配置

    Ganglia安装及配置root用户下yum安装所依赖的环境(实际生产环境都已安装)yum -y install apr-develapr-util check-devel cairo-devel p ...

  4. linux下的特殊模式

    单用户模式 ubuntu 16.04 单用户操作 1.重启操作系统,BIOS引导过后一直按住shift,出现GUN Grub菜单: 2.选择Advanced options for Ubuntu选项回 ...

  5. Spring Boot 2.x基础教程：使用国产数据库连接池Druid

    上一节,我们介绍了Spring Boot在JDBC模块中自动化配置使用的默认数据源HikariCP.接下来这一节,我们将介绍另外一个被广泛应用的开源数据源:Druid. Druid是由阿里巴巴数据库事 ...

  6. codeforces 1025B Weakened Common Divisor(质因数分解)

    题意: 给你n对数,求一个数,可以让他整除每一对数的其中一个 思路: 枚举第一对数的质因数,然后暴力 代码: #include<iostream> #include<cstdio&g ...

  7. 《Python学习手册 第五版》 -第3章 你应如何运行Python程序

    在这里,运行Python程序的前提是你的电脑已经配置Python相关的运行环境,如何配置可以通过本书的附件查看,也可以自行通过网络查询配置,在此不再赘述 运行一个Python程序,主要有6种方式 1. ...

  8. PC微信逆向--实现消息防撤回

    自从聊天软件消息撤回功能问世后,对于撤回的消息,我们对它一直有种强烈的好奇感."Ta刚撤回了什么?是骂我的话?还是说喜欢我?还是把发给其他人的消息误发给了我?好气呀,都看不到了...&quo ...

  9. 【阿里云IoT+YF3300】14.阿里IoT Studio打造手机端APP

    在上一篇<13.阿里云IoT Studio WEB监控界面构建>中,我们介绍了用阿里云IoT Studio(原Link Develop)可视化构建WEB界面程序.本篇文章将介绍用阿里云Io ...

  10. Qt中字符串和数值之间的转换

    来自<Qt5.9 C++开发指南> 普通数值和字符串之间的转换 一.从字符串转换为数值 QString类从字符串转换为整数的函数有: int QString::toInt(bool *ok ...