内联样式表

<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. C++ 对TXT 的串并行读写

    任务说明:有36篇文档,现在要读入,并统计词频,字典长度25,希望能够比较串并行读写操作的时间差距. 串行读入并统计词频 // LoadDocsInUbuntu.cpp // #include < ...

  2. Linux下安装Oracle后重启无法登录数据库ORA-01034:ORACLE not available

    Linux下安装了数据库,安装完成后可以用,今天启动就不能用了,提示Oracle not available,后来查找资料,据说是oracle服务没有打开.如下方式可以解决问题. [root@root ...

  3. maven jar 包问题

    1. Failure to transfer... 这种错误基本是所需要的 jar 包不存在,或者下载不完整,可去本地仓库查看相关 jar 文件的完整性 解决方案: 删除对应 jar 包,重新下载(删 ...

  4. DjangoBBS项目功能拆分

    目录 1.随机验证码 2.注册功能 3.登录功能 4.登录认证装饰器配置 5.修改密码模态框方法 6.修改头像 7.修改签名模态框方法 8.注销功能模态框 9.用户上传静态文件配置 10.图片防盗链 ...

  5. 微信小程序框架分析小练手（二）——天气微信小程序制作

    简单的天气微信小程序. 一.首先,打开微信开发者工具,新建一个项目:weather.如下图: 二.进入app.json中,修改导航栏标题为“贵州天气网”. 三.进入index.wxml,进行当天天气情 ...

  6. [PowerShell]Python虚拟环境激活失败

    用Activate.ps1激活还是失效的情况下, 用ISE打开发现路径中的中文乱码了. 所以解决方案有两种, 一是把中文路径改成英文 二是把Activate.ps1脚本用记事本打开另存为ANSI编码即 ...

  7. 一台电脑上配置多个git的ssh key

    前几天公司的代码库全部迁移到了阿里云上,在配置git的ssh key的时候遇到了一个问题,那就是自己的密钥在添加时提示已经存在,原来是自己的个人账号上已经添加过这个密钥了,公司分配的账号就不能再添加这 ...

  8. 题解【Luogu P6102 谔运算】

    \[ \texttt{Description} \] 给出一个长度为 \(n\) 的数列 \(a\),求 \(\sum\limits_{i=1}\limits^{n}\sum\limits_{j=1} ...

  9. Mysql的基本查询语句

    聚集函数 mysql有5个聚集函数,分别是AVG,MAX,MIN,SUM,COUNT. 分组 分组的使用group by作为关键字,having作为条件关键字. having和where的区别:1.w ...

  10. 蓝桥杯2015年省赛C/C++大学B组

    1. 奖券数目 有些人很迷信数字,比如带“4”的数字,认为和“死”谐音,就觉得不吉利.虽然这些说法纯属无稽之谈,但有时还要迎合大众的需求.某抽奖活动的奖券号码是5位数(10000-99999),要求其 ...