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. 深入理解Go语言(08)：sync.WaitGroup源码分析

    一.sync.WaitGroup简介 1.1 sync.WaitGroup 解决了什么问题 在编程的时候,有时遇到一个大的任务,为了提高计算速度,会用到并发程序,把一个大的任务拆分成几个小的独立的任务 ...

  2. 将JavaBean对象转换为Map集合

    使用jackson-databind可以将JavaBean对象属性转换为Map集合. 添加配置依赖: <dependency> <groupId>com.fasterxml.j ...

  3. Flask遇到的坑及解决办法

    flask_script 在使用第三方包flask_script时,报一下错误 ModuleNotFoundError: No module named 'flask._compat' 问题时flas ...

  4. 腾讯云视频转码回调 http code 405

    异常信息 405 Method Not Allowed 异常场景 通过腾讯云SDK上传视频,视频转码完成回调我的接口失败,我这边一直没有log.找到腾讯云工作人员,告诉我这边返回405错误和不支持ge ...

  5. 图数据库认证考试 NGCP 错题解析 vol.02：这 10 道题竟无一人全部答对

    如果你读过「NebulaGraph 错题解析第一期」,大概知道在错题解析未出来之前,NebulaGraph 专业技能认证 NGCP(全称 NebulaGraph Certified Professio ...

  6. vue3页面使用vue2语法

    vue3页面: import { getCurrentInstance } from 'vue'; const { proxy } = getCurrentInstance(); proxy...

  7. Rust 登上了开源头条「GitHub 热点速览」

    抱歉!上周因为出月刊工作量比较大,所以「GitHub 热点速递」暂停了一期,必须要给守着更新的读者道个歉,以后每周二的「热点速递」会按时更新,下不为例. 说回本周的热门开源项目,Rust 语言可谓是出 ...

  8. BeanShell Sampler 前置处理器

    一概念: 前置处理器主要作用: 用于修改即将发送的http的请求数据 BeanShell预处理器可以在取样器发送请求之前被执行,可以通过它完成发送请求所需的数据 其中的ctx.vars.props.p ...

  9. Java 异常处理(1) ：try-catch-finally的使用

    1 package com.bytezero.throwable; 2 3 import java.io.File; 4 import java.io.FileInputStream; 5 impor ...

  10. mikumikudance 和 pmxEditor 都可以打开 pmx

    mikumikudance 和 pmxEditor 都可以打开 pmx 模型下载 https://www.bilibili.com/blackboard/activity-5hkwDIRkBv.htm ...