内联样式表

<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. selenium，测试套件的使用

    学习 selenium-webdriver 已经一段时间了,最近学习到,测试用例的批量执行,和测试套件的使用,有点自己的理解,不晓得对不对,希望大家指正!   写一个测试用例 baidu.py   c ...

  2. go编写简单接口的过程

    环境 系统 Windows server 2016 Datacener go version go1.13.3 windows/amd64 数据库 Microsoft SQL Server 2014( ...

  3. swift开发度假计划app

    用swift开发一个完整的度假地app,设计到布局.数据绑定.数据编辑.页面导航等:适合初学者: github:(git@github.com:Frankltf/ios-swift-app.git)

  4. CTF--HTTP服务--命令执行（使用集成工具测试）

    开门见山 1. 扫描靶机ip,发现PCS 192.168.1.158 2. 用sparta工具对靶机进行信息探测 3. 扫描结果 4. 在浏览器中查看80端口的页面 5. 查看网站信息 6. 暴力破解 ...

  5. 推荐一本书学习springcloud书籍的SpringCloud微服务全栈技术与案例解析

    整本书还算是挺详细的,基本大部分轮子都讲到了,唯一不足就是版本比较旧,而且springcloud 版本现在迭代这么快 很多内容其实高版本中完全没有了,得自己敲代码多采坑 前面基本章节其实可以大致略过一 ...

  6. CUDA学习（四）之使用全局内存进行归约求和（一个包含N个线程的线程块）

    问题:使用CUDA进行数组元素归约求和,归约求和的思想是每次循环取半. 详细过程如下: 假设有一个包含8个元素的数组,索引下标从0到7,现通过3次循环相加得到这8个元素的和,使用一个间隔变量,该间隔变 ...

  7. this和static

    [this] 指的是明确的标记本类的结构 当前正在调用类中方法的对象,不是一个固定的 java中以“{}”为界限.如果现在属性名称和参数名称重名,那么默认情况下,如果没有加任何的限制,指的是最近的“{ ...

  8. [实用分享]Kindle电子书格式AZW3转换为MOBI

    [实用分享]Kindle电子书格式AZW3转换为MOBI 思路:先拆解成源文件再转换成 MOBI 推荐首选这种方法.此方法的思路是,首先用 KindleUnpack 把 azw3 文件拆解成源文件,然 ...

  9. Web框架之Gin介绍及使用

    Gin是一个用Go语言编写的web框架.它是一个类似于martini但拥有更好性能的API框架, 由于使用了httprouter,速度提高了近40倍. 如果你是性能和高效的追求者, 你会爱上Gin. ...

  10. Codeforces 1017D The Wu(状态压缩+预处理)

    题意: 给你n m q,表示在这一组数据中所有的01串长度均为n,然后给你一个含有m个元素的multiset,之后有q次询问.每次询问会给你一个01串t和一个给定常数k,让你输出串t和multiset ...