第一种：内联，直接在标签里面加style属性，优先级别最高，但是不利于维护

第二种：页面嵌入，在head标签里面写一个style标签，以类选择器的形式写入，优先级别第二

第三种：外联，样式表链接，单独写一个css文件，在html的head里面用link标签引用

css

/* 定义body的背景色为紫色 */
body{ background: blueviolet;}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>

    <!-- 在head里面用link标签引用css文件 -->
    <link rel="stylesheet" href="../css/css01.css">

    <!-- class属性为class_01的颜色属为红色 -->
    <style>
        .class_01{ color:red; }
    </style>
</head>
<body>

    <h1>原始文字</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores aspernatur autem cum eligendi esse
        libero magnam nemo nesciunt, omnis porro quae quos repellendus sint soluta voluptatem? Ex, sed!</p>

    <!-- 内联，直接在标签里面加style属性，优先级别最高，不利于维护 -->
    <h1 style="color: blue;border: solid 1px #000;">内联，直接写在标签里面，优先级别最高，不利于维护</h1>
    <p style="color: red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores aspernatur autem cum
        eligendi esse
        libero magnam nemo nesciunt, omnis porro quae quos repellendus sint soluta voluptatem? Ex, sed!</p>

    <!-- 页面嵌入，在head标签里面写一个style标签，以类选择器的形式写入，优先级别第二 -->
    <h1 class="class_01">页面嵌入，在head标签里面写一个style标签，以类选择器的形式写入，优先级别第二</h1>
    <p class="class_01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores aspernatur autem cum
        eligendi esse
        libero magnam nemo nesciunt, omnis porro quae quos repellendus sint soluta voluptatem? Ex, sed!</p>

    <!-- 外联，样式表链接，单独写一个css文件，在html的head里面用link标签引用，优先级第三-->
    <p>外联，样式表链接，单独写一个css文件，在html的head里面用link标签引用</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores aspernatur autem cum eligendi esse
        libero magnam nemo nesciunt, omnis porro quae quos repellendus sint soluta voluptatem? Ex, sed!</p>

</body>
</html>

测开之路九十：css的引用方式的更多相关文章

  1. 测开之路九十四：css之盒子模型

    盒子模型 为了演示方便,把内容放到盒子里面 引用css 演示内容 外边距: 4个方向分开写 简写为一条指令,顺序为上右下左 简写为一条指令,第一个值为上下,第二个值为左右 简写为一条指令,只有一个值时 ...

  2. 测开之路九十二：css之背景色和背景

    引用css 设置背景色: 背景图片 整个页面的背景图片 图片当局部背景图 也可以简写 css /* css基本样式 */ /* 设置p标签的文字前景色.背景色 */p{ /*字体颜色为蓝色*/ col ...

  3. 测开之路九十六：css进阶之元素显示和可见性

    元素显示效果:display 块级元素,会导致换行:p.div.h...内联元素,不会导致换行:span.strong... 修改属性 让span标签换行 让指定div不换行 元素可见性:visibi ...

  4. 测开之路九十五：css进阶之光标和溢出内容处理

    光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示 先把内容放到盒子里面 正常显示 不显示溢出内容 显示为滚动条 自动处理 css /* 光标样式 */p{ ...

  5. 测开之路一百：jquery引用、语法、事件

    工作中一般会使用jquery代替js,jquery官网:https://jquery.com/ 引用jquery: 第一种方式:下载引用: jquery下载官网:https://jquery.com/ ...

  6. 测开之路九十九：js函数、事件、window窗体对象

    函数:function 函数名(参数列表) 事件 单击:onclick()表单提交:onsubmit()鼠标经过:onmouseover()值改表时:onchange() window窗体对象转跳:w ...

  7. 测开之路九十八：js变量和语句

    这里为了方便调试,在jsbin网站上面编写js脚本:https://jsbin.com/?js,console 可以点击增加/减少对应展示分页,Console为控制台部分,Output为页面部分 变量 ...

  8. 测开之路九十一：css常用的选择器

    一:全局选择器:* 二:标签选择器,如给所有p标签加个背景色 三:id选择器:# ,如给id为id_01的元素加一个框 四:类选择器:. 如设置一个类选择器为blue,当有标签引用blue的时候,背景 ...

  9. 测开之路一百零五：bootstrap的两种引用方式

    一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...

随机推荐

  1. iOS特殊界面旋屏设置的方法之一

    1.AppDelegate.h @property (assign, nonatomic) BOOL allowRotation; 2.AppDelegate.m #pragma mark - 自动旋 ...

  2. Redis5新特性

    Redis5.0的12个新特性 1.数据类型Stream 本质上是一个消费者等待生产者发送新的数据 使用情景 其他五种数据结构无法实现的需求,可以通过stream来实现 直接贴近业务需求,提升开发效率 ...

  3. 安装SQL2005数据库服务时报错处理方法

    运行一个脚本,以管理员身份运行: net stop winmgmt c: cd %systemroot%/system32/wbem rd /S /Q repository regsvr32 /s % ...

  4. Python核心技术与实战——十一|程序的模块化

    我们现在已经总结了Python的基本招式和套路,现在可以写一些不那么简单的系统性工程或代码量较大的应用程序.这时候,一个简单的.py文件就会显得过于臃肿,无法承担一个重量级软件开发的重任.这就需要这一 ...

  5. C\C++下获取系统进程或线程ID（转）

    在程序开发时有时需要获取线程和进程ID以分析程序运行 ()windows下获取进程或线程ID 通过调用系统提供的GetCurProcessId或GetNowThreadID来获取当前程序代码运行时的进 ...

  6. QQ群文件未通过安全检查，禁止下载该文件

    直接用手机收藏群文件,然后用电脑登上qq去收藏里面下载就ok了

  7. 自学semantic UI个人博客首页模板

    以下是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <m ...

  8. CSS中的自适应单位vw、vh、vmin、vmax

    1.vw.vh.vmin.vmax各单位的意义 上面的自适应单位可以统称为视口单位. 可以先了解一下视口指的是什么? 在PC端,视口指的是在PC端,指的是浏览器的可视区域:而在移动端,它涉及3个视口: ...

  9. 简单的LCA

    这么久了才做LCA的题,以前是感觉很难不敢去尝试,现在学习了一番之后发现算法本身并不难.... 学习时看了这篇博文:https://www.cnblogs.com/JVxie/p/4854719.ht ...

  10. 【bzoj3566】 [SHOI2014]概率充电器

    *题目描述: 著名的电子产品品牌 SHOI 刚刚发布了引领世界潮流的下一代电子产品——概率充电器: “采用全新纳米级加工技术,实现元件与导线能否通电完全由真随机数决定!SHOI 概率充电器,您生活不可 ...