1 CSS的引入方式

CSS样式有三种不同的使用方式，分别是行内样式，嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式。

  • 行内样式

    行内样式，就是写在元素的style属性中的样式，这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不推荐大量使用内联样式，因为那样不利于后期维护。
  • 嵌入式

    嵌入式，是把CSS样式写在HTML文档内部head标签中的style标签里。浏览器加载HTML的同时就已经加载了CSS样式了。当单个文档需要特殊，单独的样式时，可以使用内部样式表。
  • 链接式

    链接式，就是把CSS样式写在HTML文档的外部，一个后缀为 .css 的外部样式表中，然后使用时在head标签中，使用link标签的href属性引入文件即可。当CSS样式需要应用在很多页面时，外部样式表是最理想的选择。在使用外部样式表的情况下，我们可以通过改变一个文件来改变这所有页面的外观。

common.css

div{

      color: white;

      background-color: #369;

      text-align: center

}


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css的引入方式</title>

<!--    链接式-->

    <link rel="stylesheet" href="common.css">

<!--    嵌入式-->

    <style>

        p{

            color: darkseagreen;

        }

    </style>

</head>

<body>

    <div>故人西辞黄鹤楼</div>

    <div>烟花三月下扬州</div>

    <p>君不见黄河之水天上来,<br>奔流到海不复回.</p>

<!--    行内样式-->

    <div style="color: white;background-color: #369;text-align: center">行内设置</div>

</body>

</html>

1 CSS的引入方式的更多相关文章

  1. CSS的引入方式

    再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...

  2. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  3. CSS的引入方式和样式

    CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...

  4. 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

    前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介    叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...

  5. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  6. 前端（二）—— CSS的引入方式、长度与颜色单位、常用样式、选择器

    CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...

  7. CSS的引入方式和复合选择器

    CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...

  8. css样式引入方式，及常用设置标签样式

    一. 三种样式引入方式   1. 内联式-直接写在div标签中,不推荐用 <div style="color:red;font-size:20px;font-family:'Micro ...

  9. CSS 从入门到放弃系列：CSS的引入方式

    css的四种引入方式 内联方式(行间样式) <div style="width:100px;height: 100px; background-color: red"> ...

  10. 5.CSS的引入方式

    CSS的三种样式表 按照CSS样式书写的位置(或者引入的方式),CSS的样式表可以分为三大类: 1.行内样式表(行内式) <div style="color:red: font-siz ...

随机推荐

  1. redis7源码分析：redis 启动流程

    1. redis 由 server.c 的main函数启动 int main(int argc, char **argv) { ... // 上面的部分为读取配置和启动命令参数解析,看到这一行下面为启 ...

  2. 【Android 逆向】【ARM汇编】 arm64部分知识

    arm64寄存器更多 X0-X30 SP CPSR PC 64位 W0-W30 32位 PC寄存器的值禁止修改 参数放在 X0-X7/W0-W7 结果放在 X0 函数返回 RET 相当于 bl lr ...

  3. FastAPI中全局异常处理

    装饰器版本自定义异常 1.首先我们定义三个文件,分别为exception.py,main.py, user.py 2.自定义异常需要继承HTTPException,该异常可以从fastapi中直接导入 ...

  4. 列表相关函数，深浅拷贝，字典相关函数，集合相关操作及文件操作---day08

    1.列表的相关函数 append() 功能:向列表的末尾添加新的元素 格式:列表.append(值) 返回值:None 注意:新添加的值在列表的末尾,该函数直接操作原有列表 insert() 功能:在 ...

  5. context讲解

    context包 context包介绍 ​ 在go语言中,每个独立调用一般都会被单独的协程处理.但在处理一个请求时,往往可能需要在多个协程之间进行信息传递,甚至包括一层层地递进顺序传递,而且这种信息往 ...

  6. 解决pip install时出现的Could not fetch URL https://pypi.org/simple/pip/问题

    打开windows的我的电脑,在最上方目录栏输入%APPDATA%,回车,接着会定位到一个新的目录, 目录路径为C:\Users\Administrator\AppData\Roaming,在这个目录 ...

  7. 【Azure Redis 缓存】Azure Cache for Redis有默认备份可以用于恢复么？

    问题描述 Azure Cache for Redis有默认备份可以用于恢复么? 答: 只有高级版Redis有. 问题原因 Azure Cache for Redis有不同的版本定价层(基本 Basic ...

  8. 使用beyond compare或kompare作为git的对比、合并工具

    两种方法 方法1: 直接使用命令 # 执行下面命令,参看支持对比合并工具名称,比如bc就是指beyond compare(收费软件,推荐使用开源的kompare) $ git difftool --t ...

  9. 使用 MyBatis 操作 Nebula Graph 的实践

    本文首发于 Nebula Graph Community 公众号 我最近注意到很多同学对于 ORM 框架的需求比较迫切,而且有热心的同学已经捐赠了自己开发的项目,Nebula 社区也在 working ...

  10. Volatile关键字原理

    转载请标明:https://www.cnblogs.com/tangZH/p/15113505.html 一.如果一个变量被volatile关键字修饰,那么所有线程都是可见的.所谓可见就是,当一条线程 ...