内联样式表

<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. openpyxl库实现对excel文档进行编辑（追加写入）

    首先,这个库只支持xlsx格式的excel文件 预期,对”excel_test.xlsx“的A1单元格写入”hello word“ 1.安装”openpyxl“库,pip install openpy ...

  2. lua 中 . 和 : 的区别

    lua 中 . 和 : 的区别 首先在lua中使用":"定义的函数会自动传入一个名为self的变量,这个变量是隐含的,self同c++中的this一样,表示当前对象的指针:而&qu ...

  3. Spring Cloud服务注册中心交付至kubernetes

    前言 服务发现原则: 各个微服务在启动时,会将自己的网络地址等信息注册到服务发现组件中,服务发现组件会存储这些信息 服务消费者可以从服务发现组件中查询到服务提供者的网络地址,并使用该地址来远程调用服务 ...

  4. SpringBoot系列专栏

    学会使用SpringBoot能够极大地提升Spring应用的开发效率,可以说是目前开发应用Java必需掌握的工具之一,而且SpringBoot也是微服务应用的基础,只有学会了SpringBoot,你才 ...

  5. Spring Cloud Zuul之ZuulFilter详解

    简介 Spring Cloud Zuul网关在整个微服务体系中肩负对外开放接口.请求拦截.路由转发等作用,其核心处理则是ZuulFilter ZuulFilter部分源码 Zuul Filter全部继 ...

  6. oracle问题之死锁 （一）

    [前言] 遇到 oracle 异常 和 解决实践 系列文章 整理分享 杂症一.oracle死锁 一.症状: 执行SQL或程序时,程序没有响应或SQL执行一直处于执行状态,没有成功,也没有报错. 二.病 ...

  7. 为什么建议使用Guid结构体做为数据库及排序时的主键

    在.net2.0中,Guid结构体表示一个全局唯一标识符,是一个在生成时就可以肯定为全世界唯一的16字节值.Guid在数据库中通常可以作为各种排序的主键.比如 public class Company ...

  8. Go操作MongoDB

    mongoDB是目前比较流行的一个基于分布式文件存储的数据库,它是一个介于关系数据库和非关系数据库(NoSQL)之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的. mongoDB介绍 mon ...

  9. POJ 1751 Highways(最小生成树Prim普里姆，输出边)

    题目链接:点击打开链接 Description The island nation of Flatopia is perfectly flat. Unfortunately, Flatopia has ...

  10. Go语言学习之goroutine

    协程Coroutine 特点 轻量级的"线程" 非抢占式多任务处理,由协程主动交出控制权 编译器/解释器/虚拟机层面的多任务,非操作系统 多个协程可以在一个或多个线程上执行 go关 ...