第一种：内联，直接在标签里面加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. django学习笔记（五）

    知识点概要 - Session - CSRF - Model操作 - Form验证(ModelForm) - 中间件 - 缓存 - 信号 内容详细: 1. Session 基于Cookie做用户验证时 ...

  2. C#导出大量数据到excel，怎么提升性能

    一,要提升性能,我们先要知道耗时的地方在哪里 1,数据库查询,2,把数据组合成新集合循环嵌套太多 二,那我们怎么优化呢? 一,数据库查询,1>,数据库查询:如果数据量小,我们可以用临时datat ...

  3. npm学习（一）之安装、更新以及管理npm版本

    安装npm 安装前须知: npm是在Node中编写的,因此需要安装Node.js才能使用npm.可以通过Node.js网站安装npm,或者安装节点版本管理器NVM. 如果只是想开始探索npm,使用No ...

  4. java中访问修饰符public，private，protected，friendly的作用域

    在修饰的元素上没有写任何的访问修饰符,则表示friendly. 作用域 当前类 同一包中 子孙类 其他包中 public √ √ √ √ protected √ √ √ × private √ x x ...

  5. Label显示时间

    package 第十一章; import java.awt.Button; import java.awt.Color; import java.awt.Font; import java.awt.F ...

  6. iOS微信浏览器回退不刷新（监听浏览器回退事件）

    兼容性:兼容全部ios系统 $(function(){ pushHistory(); }); function pushHistory(){ window.addEventListener(" ...

  7. javascript中跨域问题的解决方法汇总

    javascript中实现跨域的方式总结 第一种方式:jsonp请求:jsonp的原理是利用<script>标签的跨域特性,可以不受限制地从其他域中加载资源,类似的标签还有<img& ...

  8. 【玩转Eclipse】——eclipse实现代码块折叠-类似于VS中的#region……#endregion

    [玩转Eclipse]——eclipse实现代码块折叠-类似于VS中的#region……#endregion http://www.cnblogs.com/Micheal-G/articles/507 ...

  9. CenterOS7中解决No package mysql-server available.

    CenterOS7中解决No package mysql-server available. 1.使用yum install -y mysql-server报错如下: [root@heyong_jd ...

  10. The Battle of Chibi（数据结构优化dp，树状数组）

    The Battle of Chibi Cao Cao made up a big army and was going to invade the whole South China. Yu Zho ...