内联样式表

<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. 使用ob缓存简单实现页面静态化

    <?php //接收新闻id,传统的方法查询数据库并显示数据 $id=intval($_GET['id']); //先判断该新闻对于的静态页面是否存在,如果有,则直接返回,如果 //没有,则查询 ...

  2. Git详解之安装

    前言 是时候动手尝试下 Git 了,不过得先安装好它.有许多种安装方式,主要分为两种,一种是通过编译源代码来安装:另一种是使用为特定平台预编译好的安装包. 从源代码安装 若是条件允许,从源代码安装有很 ...

  3. mybatis 源码分析中的知识点

    1. resultMap 和 resultType  之间的优劣 resultMap: 在联合查询的时候, 可以不用写Join (因为在resultMap 的定义里面已经写了这些东西了<asso ...

  4. laravel 初学路由简单介绍

    文档中的路由详细演示[初学laravel]对应laravel 的框架目录:routes/web.php 路由的格式一:Route::get($uri,$callback); 1.简单的浏览器输出 Ro ...

  5. .net core控制台使用log4net

    第一步,Nuget log4net包 第二步,在项目中添加一个新xml文件,我这里是直接从.net framework的项目里复制过来的config文件,不过效果是一样的 内容如下: ?xml ver ...

  6. json通过后台获取数据库中的内容，并在前端进行显示

    fastjson.jar以及Echarts树图的js文件(需要在servlet对json进行赋值,所以需要用到json的插件) 链接:https://pan.baidu.com/s/1GBbamPNG ...

  7. css的选择器及它的种类特性？

    今天主要说的是选择器的基础, 首先看,选择器的优先级:!important > 行间样式 > id选择器 > class 选择器 == 属性选择器 > 标签选择器 > 通 ...

  8. 2、TCP/IP

    TCP/IP协议栈:物理层.数据接口层.网络层.传输层.应用层或网络接口层.网络层.传输层.应用层 TCP/IP协议栈的核心协议:1.TCP2.UDP3.ICMP4.IGMP5.ARP:映射IP→Et ...

  9. Codeforces_797

    学了一学期还是那么菜. 好久没更新,还是得放点东西的. A.贪心最小的素因子,k = 1时,直接输出n就可以了. #include<bits/stdc++.h> using namespa ...

  10. 【题解】P1908 逆序对——归并算法

    先吐槽 这题做了两天,昨天讲分治,老师用归并讲了一遍,今天又用树状数组讲了一遍 归并不难,啊啊啊我居然才调出来 思路 归并两个数组时,对于第二个数组的元素a[c2],它与第一个数组中目前还没归到总数组 ...