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. win32-GetActiveWindow和GetForegroundWindow

    最近被这两个api搞得有点晕,故查阅了相关的资料. 这篇文章解释的很好:https://devblogs.microsoft.com/oldnewthing/20081006-00/?p=20643 ...

  2. Redis服务端事件处理流程分析

    一.事件处理 1.1 什么是事件 Redis 为什么运行得比较快? 原因之一就是它的服务端处理程序用了事件驱动的处理方式. 那什么叫事件处理?就是把处理程序当成一个一个的事件处理.比如我前面文章:服务 ...

  3. 案例分享：Qt便携式致病菌快速检测仪（账号管理、实验过程、二维图表、历史数据、通讯管理、实验报告、中英文等等）

    需求   根据提供的用户原型设计.ui设计.通讯协议研发便携式致病菌快速检测仪器软件.  100%还原ui.   基本主功能(推荐visio:★★★☆☆,前期主流程需求整理)          Dem ...

  4. 解读平台工程，DevOps真的死了吗？不，它只是换了个马甲而已，弥补了DevOps空心理论，让DevOps继续发展壮大

    最**台工程这个概念越来越火爆,Gartner 的预测,到 2026 年,80% 的软件工程组织将拥有*台工程团队,来提供内部服务.组件和应用程序交付工具,作为可重复使用的资源.本篇文章将带你走进*台 ...

  5. 【Azure 应用服务】Azure Function App在部署时候遇见 503 ServiceUnavailable

    问题描述 在VS Code中编写好 Azure Function App代码后,通过  func azure functionapp publish 部署失败,抛出 503 Service Unava ...

  6. 笔记本linux问题记录

    目录 UEFI笔记本无法引导进入操作系统 grub引导错误,无法进入系统 笔记本亮度不能保存 禁用独立显卡 KVM 解决nmcli dev 中的wlan0显示unavailable 杂项 UEFI笔记 ...

  7. stm32f103ve+光电传感器使用教程+oled（HAL库）

    最近想做一个物联网农业监控系统,第一步就是能够学会使用相关的外设,比如温湿度检测,光照强度检测,还有CO2检测等. 这次讲一下光电传感器的使用和代码实现. 1.知识储备:串口使用,ADC采集(此处用的 ...

  8. RocketMQ(7) 消费幂等

    1 什么是消费幂等 当出现消费者对某条消息重复消费的情况时,重复消费的结果与消费一次的结果是相同的,并且多次消 费并未对业务系统产生任何负面影响,那么这个消费过程就是消费幂等的. 幂等:若某操作执行多 ...

  9. Dubbo基本见解

    1.dubbo主要角色 Provider: 暴露服务的服务提供方. Consumer: 调用远程服务的服务消费方. a.订阅注册中心,注册中心广播服务变更,第一次会主动全量pull所有信息,后面增量会 ...

  10. 记录: OpenAI中转代理API接口服务的使用

    由于OpenAI提供服务的地区列表里没有 China,因此想要方便使用OpenAI API的话就需要用到中转服务. 本文介绍的iDataRiver平台便提供这样的API,且比官方OpenAI还要便宜, ...