第一种：内联，直接在标签里面加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. Windows 环境下安装redis 及其PHP Redis扩展

    1.安装Redis (1)这里选择在github官网上下载Redis,地址:Redis下载地址 下载压缩包(如下图),并解压到本地目录,我放在D:\redis (2)验证Redis安装是否成功打开命令 ...

  2. Timer的利用

    package 第十一章; import java.util.*; import java.util.TimerTask; public class TimerTest { /** * @param ...

  3. ubuntu上的疑难杂症（不定期更新……）

    ubuntu系统英伟达显卡驱动怎么装 sudo apt-get purge nvidia* #如果之前安装过显卡驱动,就执行这一句来卸载 sudo apt-add-repository ppa:gra ...

  4. 06.Linux系统-GitLab版本控制服务安装部署

    官方文档:https://about.gitlab.com/install/#centos-7 1.yum install -y curl policycoreutils-python openssh ...

  5. Django中利用type动态操作数据库表

    场景分析: 后台MySql数据库保存了一大批按股票代码命名的数据表,每张表保存的是每只股票的日线数据. stock_000002 stock_600030 stock_600020 ...一共3000 ...

  6. PHP常用采集函数总结

    1.获取所有链接内容和地址 function getAllURL($code){ preg_match_all('/<as+href=["|']?([^>"']+)[& ...

  7. Flask 框架app = Flask(__name__) 解析

    #!/usr/local/bin/python # coding=utf-8 from flask import Flask app = Flask(__name__) @app.route('/') ...

  8. css实现div内凹角样式

    平常的开发中我们一般使用到圆角都是外凸的,即border-radius属性.而如果有内凹角的情况,我们一般的考虑实现方法有2种.一种是直接使用背景图片,一种是使用css. 用到的属性则是backgro ...

  9. Comet OJ - Contest #5 D 迫真小游戏 (堆+set)

    迫真小游戏 已经提交 已经通过 时间限制:2000ms 内存限制:256MB 73.98% 提交人数:196 通过人数:145 题目描述 H君喜欢在阳台晒太阳,闲暇之余他会玩一些塔防小游戏. H君玩的 ...

  10. GUI学习之二十——QAbstractSlider学习总结

    今天学习一种全新的输入控件——QAbstractSlider()滑块控件的基础控件. 一.描述: QAbstractSlider()是QWidget()的子类,提供了一个范围内的整数值.它是QSlid ...