内联样式表

<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. 学_汇编语言_王爽版 要点采集笔记（未完待续&hellip;）

    第一章 基础知识 存储器(内存)存放CPU工作的指令和数据(CPU可以直接使用的信息在内存中存放):指令和数据都是二进制数没有任何区别,由CPU决定是数据还是指令 内存单元:存储器被分为若干个存储单元 ...

  2. mysql--->mysql的事务和锁

    mysql 事务和锁 什么是事务?及其特性? 答:事务:是一系列的数据库操作,是数据库应用的基本逻辑单位. 或者这样理解: 事务就是被绑定在一起作为一个逻辑工作单元的SQL语句分组,如果任何一个语句操 ...

  3. mysql--->B+tree索引的设计原理

    1.什么是数据库的索引 每种查找算法都只能应用于特定的数据结构之上,例如二分查找要求被检索数据有序,而二叉树查找只能应用于二叉查找树上,但是数据本身的组织结构不可能完全满足各种数据结构(例如,理论上不 ...

  4. Docker基础内容之容器

    前言 容器是独立运行的一个或一组应用以及它们的运行态环境. 相关命令 启动容器相关命令 docker run 运行一个ubuntu14.04版本的容器,如果这个镜像本地不存在则会去默认仓库中下载 do ...

  5. string method 字符串常用方法讲解

    st = 'hello ketty ##$ \*'print(st.count('t'))# 输出‘t’的个数print(st.capitalize()) #Hello ketty 将首字母大写pri ...

  6. Web 开发工具类(2): HttpClientUtils

    HttpClientUtils 整合了一些 web开发中常用的httpClient操作: package com.evan.common.utils; import java.io.IOExcepti ...

  7. webpack--运行npm run dev自动打开浏览器运行首页的两种方式以及热加载

    作为开发人员,我们在修改了代码之后,在vscode终端运行npm run dev指令后,希望它可以自动打开浏览器方便我们调试,有两种方式可以实现: 自动打开浏览器的两种方式: 方式一: 1.webpa ...

  8. 痞子衡嵌入式：ARM Cortex-M内核那些事（3.3）- 为AI,ML而生(M55)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ARM Cortex-M55. 鼠年春节,大家都在时刻关心 2019nCoV 疫情发展,没太多心思搞技术,就在这个时候,ARM 不声不响 ...

  9. 变量引用的错误：UnboundLocalError: local variable 'range' referenced before assignment

    class Battery(): """一次模拟电瓶汽车的简单尝试""" def __init__(self,battery_size = ...

  10. java字符编码-Unicode编码问题刨根究底

    博客搬家: java字符编码问题 前段时间在读<java核心技术卷一>,遇到一些名词:码点.代码单元等,其实字面意思不难理解,解释如下 码点(code point):Unicode编码表中 ...