方式一:内联样式

内联样式,也叫行内样式,指的是直接在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. 一篇文章看清楚 Linux 的职业发展方向

    手机.汽车.甚至宇宙飞船,在今天的科技世界中,你几乎到处都能看到 Linux 的身影.前两天 SpaceX 成功将宇航员送入太空的猎鹰9号火箭与龙飞船用的也是 Linux的操作系统.身处与 Linux ...

  2. Rocket - util - MultiWidthFifo

    https://mp.weixin.qq.com/s/CUnrpyQN5LRBR5bxC5u86A   简单介绍MultiWidthFifo的实现.   ​​   1. 基本介绍   实现一个输入宽度 ...

  3. STC15系列通用-STC15F2K60S2/STCW4K32S4读取DHT11温湿度传感器数据串口输出代码实例工程免费下载

    //为了方便大家调试,另附程序工程共大家下载,下载地址:https://www.90pan.com/b1908750 ​ //************************** //程序说明:stc ...

  4. 【Java Spring Cloud 实战之路】- 使用Nacos和网关中心的创建

    0. 前言 在上一节中,我们创建了一个项目架构,后续的项目都会在那个架构上做补充. 1. Nacos 1.1 简介 Nacos可以用来发现.配置和管理微服务.提供了一组简单易用的特性集,可以快速实现动 ...

  5. Java实现 蓝桥杯VIP 算法训练 P1101

    有一份提货单,其数据项目有:商品名(MC).单价(DJ).数量(SL).定义一个结构体prut,其成员是上面的三项数据.在主函数中定义一个prut类型的结构体数组,输入每个元素的值,计算并输出提货单的 ...

  6. java实现低碳生活大奖赛

    某电视台举办了低碳生活大奖赛.题目的计分规则相当奇怪: 每位选手需要回答 10 个问题(其编号为 1 到 10),越后面越有难度. 答对的,当前分数翻倍:答错了则扣掉与题号相同的分数(选手必须回答问题 ...

  7. java实现第六届蓝桥杯加法变乘法

    加法变乘法 题目描述 我们都知道:1+2+3+ - + 49 = 1225 现在要求你把其中两个不相邻的加号变成乘号,使得结果为2015 比如: 1+2+3+-+1011+12+-+2728+29+- ...

  8. spring Cloud负载均衡Ribbon

    Ribbon饥饿加载 默认情况下Ribbon是懒加载的.当服务起动好之后,第一次请求是非常慢的,第二次之后就快很多. 解决方式:开启饥饿加载 ribbon: eager-load: enabled: ...

  9. 体验SpringBoot(2.3)应用制作Docker镜像(官方方案)

    关于<SpringBoot-2.3容器化技术>系列 <SpringBoot-2.3容器化技术>系列,旨在和大家一起学习实践2.3版本带来的最新容器化技术,让咱们的Java应用更 ...

  10. 使用 xshell 登录 Windows 的 linux 子系统

    1 配置 SSH Server # 卸载自带的 ssh sudo apt-get remove openssh-server # 安装 ssh sudo apt-get install openssh ...