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. extra用法

    做子查询时,有些orm语句满足不了的时候使用 select参数 ## select age,(age > 18) as is_adult from myapp_person; Person.ob ...

  2. Html飞机大战(十二): canvas写字（结束状态的编辑）

    好家伙,基本的功能都做完了,来补充一个结束状态的游戏结束文案   上代码: case END: //给我的画笔设置一个字的样式 //后面写出来的字都是这个样式的 context.font = &quo ...

  3. EL表达式处理字符串

    示例 JSP页面页头添加 <%@ taglib uri="/WEB-INF/taglib/c.tld" prefix="c"%> <%@ ta ...

  4. nftables语法及例子

    先上我自己实际测试通过的例子,用例子便于在实践中学习: # 0 --- 说明 ---下面例子中的单引号目的是为了避免nftable参数中的星号.花括号.分号等符号被shell展开解释掉了,导致nft命 ...

  5. Nebula Graph 源码解读系列 ｜ Vol.03 Planner 的实现

    上篇我们讲到 Validator 会将由 Parser 生成的抽象语法树(AST)转化为执行计划,这次,我们来讲下执行计划是如何生成的. 概述 Planner 是执行计划(Execution Plan ...

  6. 【代码更新】SPI时序——AD数模数转换

    [代码更新]SPI时序--AD数模数转换 AD芯片手册:https://www.ti.com.cn/cn/lit/ds/symlink/ads8558.pdf?ts=1709473143911& ...

  7. 基于Ant Design设计语言的WinForm UI界面库

    前言 经常在技术群里看到有小伙伴提问:WinForm有什么好看.开源的UI库推荐的吗?,今天大姚给大家分享一款基于Ant Design(使用Ant Design 5.0)设计语言.开源(Apache ...

  8. PostgreSql一个月学习计划

    1.背景 国内使用数据库最多的莫过于mysql,大部分程序员第一次接触数据库就是mysql.(毕竟免费的 = =!)但近年来,有一些黑马出现(如下图),其中表现最突出的莫过于PostgreSQL.特规 ...

  9. 开源好用的所见即所得(WYSIWYG)编辑器：Editor.js

    @ 目录 特点 基于区块 干净的数据 界面与交互 插件 标题和文本 图片 列表 Todo 表格 使用 安装 创建编辑器实例 配置工具 本地化 自定义样式 今天介绍一个开源好用的Web所见即所得(WYS ...

  10. k8s安全之Network Policy

    K8s Network Policy 是一种资源,它用于在 Pod 之间以及从其他网络实体到 Pod 的通信中进行网络级别的访问控制.它允许您定义一组规则,这些规则可以指定允许或拒绝网络流量. 具体来 ...