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. kafka学习笔记01-kafka简介和架构介绍

    一.kafka介绍 kafka 最开始是 Linkedin 用来处理海量的日志信息,后来 linkedin 于 2010 年贡献给了 Apache 基金会并成为了顶级项目. 后来开发 kafka 的一 ...

  2. 在vue项目中使用scss语法的准备步骤

    在vue项目中使用scss语法的准备步骤 个人总结: 在项目根目录cmd控制台中使用以下命令行,安装vue项目中使用scss的相关依赖; 在["项目根目录/build/webpack.bas ...

  3. 详解SSL证书系列(1)什么是SSL证书？

    你一定遇到过这种情况,打开一个网站,浏览器弹出警告"您与此网站之间建立的连接不安全.由于此连接不安全,因此信息(如密码或信用卡)不会安全地发送到此网站,并且可能被其他人截获或看到" ...

  4. 可以取代宝塔和Nginx的Web服务器：Caddy

    一.安装 官网文章:https://caddyserver.com/docs/install 在左边选择:Install 我的服务器是Ubuntu,所以选第二行 我的服务器是Ubuntu,官方给出的就 ...

  5. ThreadLocal原理解析

    ThreadLocal源码分析 /* * Copyright (c) 1997, 2013, Oracle and/or its affiliates. All rights reserved. * ...

  6. linux压缩文件并排除指定目录

    今天要在linux上打包一个项目另作他用,但是项目图片都是放本地服务器的,整个项目打包好后有2G多下载十分费时.项目中的图片我们可以不要,所以压缩的时候要排除图片目录. 具体命令如下: // 参数说明 ...

  7. PaddleOCR 服务化部署(基于PaddleHub Serving)

    最近用到百度飞桨的 PaddleOCR,研究了一下PaddleOCR的服务化部署,简单记录一些部署过程和碰到的问题. 基础环境 paddlepaddle 2.5.2 python 3.7 paddle ...

  8. MySQL基础篇快速记忆和查询

    查询 语法: SELECT 标识选择哪些列 FROM 标识从哪个表中选择 去重(Distinct) 在SELECT语句中使用关键字DISTINCT去除重复行 SELECT DISTINCT depar ...

  9. 将Abp移植进.NET MAUI项目（三）：构建UI层

    ​ 很开心,终于到了创建页面的时候了! 我们需要两个页面 MainPage 主页面 MusicItemPage 条目编辑页面 编写主页面 新建一个MainPageViewModel.cs,作为Main ...

  10. 简单实用算法——位图算法（BitMap）

    目录 算法原理 优点和缺点 算法实现(C#) 算法应用 参考文章 算法原理 BitMap的基本思想就是用一个bit位来标记某个元素对应的Value,而Key即是该元素.由于采用了Bit为单位来存储数据 ...