第一种：内联，直接在标签里面加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. Python 操作sqlite数据库及保存查询numpy类型数据（二）

    # -*- coding: utf-8 -*- ''' Created on 2019年3月6日 @author: Administrator ''' import sqlite3 import nu ...

  2. cookie，localStorage和sessionStorage

    一.Cookie Cookie 是小甜饼的意思.cookie 非常小,它的大小限制为4KB左右.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie ...

  3. Fokker–Planck equation

    Fokker–Planck equation:https://en.wikipedia.org/wiki/Fokker%E2%80%93Planck_equation 随机微分方程:https://e ...

  4. 1130. Infix Expression (25)

    Given a syntax tree (binary), you are supposed to output the corresponding infix expression, with pa ...

  5. flask框架上下文

    上下文 上下文:相当于一个容器,保存了 Flask 程序运行过程中的一些信息. Flask中有两种上下文,请求上下文和应用上下文 请求上下文(request context) 在 flask 中,可以 ...

  6. 包、time、datetime、hashlib和hmac、request、re

    目录 包 包的特点 time模块 datetime模块 hashlib模块和hmac模块 hmac密钥(加盐) typing模块 request模块 正则模块 以下必须得记住 哪些做了解 包 包,这里 ...

  7. 【GDOI2014模拟】雨天的尾巴

    题目 深绘里一直很讨厌雨天. 灼热的天气穿透了前半个夏天,后来一场大雨和随之而来的洪水,浇灭了一切. 虽然深绘里家乡的小村落对洪水有着顽固的抵抗力,但也倒了几座老房子,几棵老树被连 根拔起,以及田地里 ...

  8. SpringBoot路径映射

    当然这个功能并非是springboot特有的,只是springboot提供了更简便的方法以供使用.     传统情况下我们跳转一个动态页面且并没有数据,也需要在controller中写一个跳转的con ...

  9. oracle java for ubuntu apt-get

    oracle java PPA: ppa:webupd8team/javathe key word use for search more infomation: webupd8team

  10. MySQL 数据库慢查询日志分析脚本

    这个脚本是基于pt-query-digest做的日志分析脚本,变成可视化的格式. 目录结构是 ./mysql_data/log./mysql_data/log/tmp./slow_query # co ...