方式一:内联样式

内联样式,也叫行内样式,指的是直接在style属性中添加CSS

示例:

<DIV style="display: none;background:red"></DIV>

不建议使用这种方式,它只能改变当前标签的样式,如果想要多个<DIV>拥有相同的样式,你不得不重复得为每一个<DIV>添加相同得样式如果想要修改一种样式,又不得不修改所有style中的代码,很显然,内联方式的使用会导致HTML代码变得冗长,使得网页难以维护.

方式二:嵌入样式

嵌入方式是指的在HTML中的<style>标签中书写CSS代码

示例:

<head>

    <style>

      .content {

         background: red;

       }

    </style>

</head>

嵌入式的CSS只对当前网页有效,因为CSS代码是在HTML文件中,所以会使得代码比较集中,当我们写模板网页时会比较有利,因为查看模板代码的人可以一目了然的的查看HTML结构和CSS样式,因为嵌入的CSS只对当前的HTML文件有效,所以当多个页面要使用相同的CSS代码时,这样写会导致代码冗余,当页面较多时也不利于维护

方式三:链接样式

链接方式是指在HTML引入外部的CSS文件

示例:

<head>

    <link rel="stylesheet" type="text/CSS" href="style.CSS">

</head>

这是最常见的也是最推荐的引入CSS样式,使用这种方式,所有的CSS代码只存在单独的CSS文件中,所以具有良好的维护性.并且CSS代码只存在于CSS文件中CSS文件会在第一次加载时引入,以后切换页面时只需要加载HTML文件

方式四:导入样式

导入样式指的是使用CSS规则引入外部的CSS文件

示例:

<style>

    @import url(style.CSS);

</style>

或者写在CSS 样式中

@charset "utf-8";

@import url(style.CSS);

*{ margin:0; padding:0;}

.notice-link a{ color:#999;}

比较导入方式与链接方式

link是属于HTML,通过<link>标签中的href属性来引入外部文件,而@import属于CSS导致语句应该写在CSS中,并且写在CSS的头部,否则无法正确的导入外部文件;

@import是CSS2.1才出现的概念,所以如果浏览器版本比较低,无法正确导入外部样式文件

当HTML文件被加载时,link引用的文件会同时被加载,而@import引用的文件会等页面加载完成后再被加载,

建议:尽量使用<link>标签导入外部CSS文件,避免或者少使用其他的三种方式

css的四种使用方式的更多相关文章

  1. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  2. 页面中CSS的四种引入方式的介绍与比较

    转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...

  3. CSS的四种引入方式

    1.使用link标签引入css文件: <head> <link rel="stylesheet" type="text/css" href=& ...

  4. css的四种书写方式

    优先级: 外部样式 < 内部样式表 < 内联样式表: 优先级,即:同名的选择器右边的会覆盖左边 1.内部样式表 <head> <style> /*内部样式表,一般用 ...

  5. css的四种隐藏方式

    1.opacity:0只是把元素隐藏起来了 ,但是还是占有布局,所以还是对布局有影响 <div class="div1"> snda:opacity:0只是把元素隐藏起 ...

  6. CSS的4种引入方式及优先级

    第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...

  7. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  8. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  9. CSS简单的四种引入方式

    CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...

随机推荐

  1. Chisel3 - Tutorial - FullAdder

    https://mp.weixin.qq.com/s/Aye-SrUUuIP6_o67Rlt5OQ   全加器   逻辑图如下: ​​   参考链接: https://github.com/ucb-b ...

  2. Java实现 LeetCode 1111 有效括号的嵌套深度（阅读理解题，位运算）

    1111. 有效括号的嵌套深度 有效括号字符串 定义:对于每个左括号,都能找到与之对应的右括号,反之亦然.详情参见题末「有效括号字符串」部分. 嵌套深度 depth 定义:即有效括号字符串嵌套的层数, ...

  3. Java实现 LeetCode 478 在圆内随机生成点

    478. 在圆内随机生成点 给定圆的半径和圆心的 x.y 坐标,写一个在圆中产生均匀随机点的函数 randPoint . 说明: 输入值和输出值都将是浮点数. 圆的半径和圆心的 x.y 坐标将作为参数 ...

  4. Java实现 LeetCode 336 回文对

    336. 回文对 给定一组唯一的单词, 找出所有不同 的索引对(i, j),使得列表中的两个单词, words[i] + words[j] ,可拼接成回文串. 示例 1: 输入: ["abc ...

  5. SQK Server实现 LeetCode 175 组合两个表

    175. 组合两个表 SQL架构 表1: Person +-------------+---------+ | 列名 | 类型 | +-------------+---------+ | Person ...

  6. Java实现 LeetCode 62 不同路径

    62. 不同路径 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为"Start" ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中 ...

  7. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（三）

    系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...

  8. JVM性能优化 (一) 初识JVM

    一.我们为什么要对JVM做优化 在本地开发环境中我们很少会遇到需要对JVM进行优化的需求,但是到了生产环境,我们可能会有下面的需求: 运行的应用"卡住了",日志不输出,程序没有反应 ...

  9. Java编程技术之浅析JVM内存

    JVM JVM->Java Virtual Machine:Java虚拟机,是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的. 基本认知: ...

  10. easypoi 读取 Excel 简单应用

    背景 在做接口测试的时候,经常会使用 Excel 来存储对应的接口信息和用例信息,为了方便程序的读取,引入easypoi 工具来读取 Excel 内容.easypoi 比起 poi 使用更加的方便,代 ...