方式一:内联样式

内联样式,也叫行内样式,指的是直接在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. jchdl - GSL实例 - Mux4（使用WireVec简化输入线声明）

    https://mp.weixin.qq.com/s/yJx_dV6ScUStJtPWVuD38w 原理图 ​​ 参考链接 https://github.com/wjcdx/jchdl/blob/ma ...

  2. Linux (五) VIM编辑器

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 1.简介 ​ Linux系统环境下的一款非常重要的文本编辑工具,我们在Linux环境下几乎所有的文本文件 ...

  3. （Java实现） 最大团问题 部落卫队

    首先介绍下最大团问题: 问题描述:给一个无向图G=(V,E) ,V是顶点集合,E是边集合.然后在这顶点集合中选取几个顶点,这几 个顶点任意两个之间都有边在E中.求最多可以选取的顶点个数.这几个顶点就构 ...

  4. C# Winform 学习（五）

    目标 1.MDI应用程序 2.图片框控件 3.图片集控件 4.定时器控件 一.MDI应用程序 1.理解: 单文档界面:SDI(word) 多文档界面:MDI(excel) 2.特点: 1)每个MDI程 ...

  5. Java实现 LeetCode 313 超级丑数

    313. 超级丑数 编写一段程序来查找第 n 个超级丑数. 超级丑数是指其所有质因数都是长度为 k 的质数列表 primes 中的正整数. 示例: 输入: n = 12, primes = [2,7, ...

  6. java实现数字的值返回

    以下的静态方法实现了:把串 s 中第一个出现的数字的值返回. 如果找不到数字,返回-1 例如: s = "abc24us43" 则返回 2 s = "82445adb5& ...

  7. java实现第七届蓝桥杯平方圈怪

    平方圈怪 题目描述 如果把一个正整数的每一位都平方后再求和,得到一个新的正整数. 对新产生的正整数再做同样的处理. 如此一来,你会发现,不管开始取的是什么数字, 最终如果不是落入1,就是落入同一个循环 ...

  8. Prometheus监控Docker Swarm集群（一）

    Prometheus监控Docker Swarm集群(一) cAdvisor简介 为了解决容器的监控问题,Google开发了一款容器监控工具cAdvisor(Container Advisor),它为 ...

  9. 循环语句&编码了解

    循环语句&编码了解 用户交互 input: input接收的内容是str 循环语句 if语句 语法规则:        if 条件判断:            代码块1        else ...

  10. nacos基础--客户端下载

    对于nacos的作用,我在这里不在过多介绍,不知道的同学可以自行先了解,对于nacos,有官网进行介绍,对于一个初学者来说是一件非常方便的事情. 官网地址:https://nacos.io 但是在下载 ...