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. C# EnumWindows示例代码

    代码开箱即用,唯一需要处理的就是要提供一个进程的pid. using System; using System.Collections.Generic; using System.Linq; usin ...

  2. win32 - 将文件的访问权限给特定的用户

    需要首先获取特定用户的SID. 这是一些步骤, 验证输入参数. 为可能足够大的SID和域名创建缓冲区. 在循环中,调用LookupAccountName以检索提供的帐户名的SID.如果SID的缓冲区或 ...

  3. 时序数据库timescaleDB安装

    一:前言相关 环境:Red Hat 8.3.1-5安装程序:PostgreSQL 14.1,TimescaleDB 2.5.1,cmake3.22.1PostgreSQL编译安装需要cmake3.4以 ...

  4. 统信UOS系统开发笔记（四）：从Qt源码编译安装之编译安装QtCreator4.11.2，并配置编译测试Demo

    前言   上一篇已经从Qt源码编译了Qt,那么Qt开发的IDE为QtCreator,本篇从源码编译安装QtCreator,并配置好构建套件,运行Demo并测试.   统信UOS系统版本   系统版本: ...

  5. Python3中的“联动”现象

    技术背景 在python中定义一个列表时,我们一定要注意其中的可变对象的原理.虽然python的语法中没有指针,但是实际上定义一个列表变量时,是把变量名指到了一个可变对象上.如果此时我们定义另外一个变 ...

  6. KVM整理

    管理命令: virsh list --all 查看所有虚拟机状态 virsh start vm1 VM1开机 virsh shutdown vm1 VM1关机 virsh destroy vm1 强制 ...

  7. WPF --- 触摸屏下的两个问题

    引言 本片文章分享一下之前遇到的WPF应用在触摸屏下使用时的两个问题. 场景 具体场景就是一个配置界面, ScrollViewer 中包含一个StackPanel 然后纵向堆叠,已滚动的方式查看,然后 ...

  8. Linux 系统进程管理

    Linux 系统进程管理 目录 Linux 系统进程管理 一.进程的概述 1.1 什么是进程? 1.2 进程和程序的区别 1.3 进程的生命周期 1.4 进程的运行过程 二. 静态显示进程状态-ps ...

  9. vscode 自定义 当前行转大写快捷键 alt + shift + U

    vscode 自定义 当前行转大写快捷键 alt + shift + U

  10. reciterdoc 资料库 支持中文搜索了。 vuepress-plugin-fulltext-search（用一半）

    http://pengchenggang.gitee.io/reciterdoc/ 支持中文搜索了,可是不容易了 通过插件 vuepress-plugin-fulltext-search 实现全文搜索 ...