方式一:内联样式

内联样式,也叫行内样式,指的是直接在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. Rocket - debug - Example: Write Memory

    https://mp.weixin.qq.com/s/on1LugO9fTFJstMes3T2Xg 介绍riscv-debug的使用实例:使用三种方法写内存. 1. Using System Bus ...

  2. ecilpse 纠错插件

    在market里面搜索 Spot Bugs Unnecessary Code Detector

  3. java实现三进制转十进制

    ** 三进制转十进制** 不同进制的数值间的转换是软件开发中很可能 会遇到的常规问题.下面的代码演示了如何把键盘输入的3 进制数字转换为十进制.试完善之. BufferedReader br = ne ...

  4. Java实现 蓝桥杯 历届试题 地宫取宝

    问题描述 X 国王有一个地宫宝库.是 n x m 个格子的矩阵.每个格子放一件宝贝.每个宝贝贴着价值标签. 地宫的入口在左上角,出口在右下角. 小明被带到地宫的入口,国王要求他只能向右或向下行走. 走 ...

  5. Linux网络命令详解

    命令write,功能是给指定用户发信息(接收信息的用户要处于登录状态,相当于QQ的私聊),例如:用户xbb给用户liuyifei发消息:I want to eat together!(发送消息以CRT ...

  6. PAT 锤子剪刀布

    大家应该都会玩“锤子剪刀布”的游戏:两人同时给出手势,胜负规则如图所示: 现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出什么手势的胜算最大. 输入格式: 输入第 1 行给出正整数 ...

  7. Python学习之turtle绘图篇

    画一个红色的五角星 from turtle import * color('red','red') begin_fill() for i in range(5): fd(200) rt(144) en ...

  8. opencl(7) 内核执行命令入队]工作组、工作项

    1:将内核执行命令入队(该命令可被多个工作项执行) cl_int clEnqueueNDRangeKernel( cl_command_queue command_queue, cl_kernel k ...

  9. Java重置Mysql主键自增长值

    MySql 主键自增重置器(统一处理多个表) resetAutoincrement 是一款基于 Java 开发的程序,其功能为重置 mysql 数据库表的主键自增的值为最近的一个. 介绍 开发背景主要 ...

  10. ASP.NET Core中间件与HttpModule有何不同

    前言 在ASP.NET Core中最大的更改之一是对Http请求管道的更改,在ASP.NET中我们了解HttpHandler和HttpModule但是到现在这些已经被替换为中间件那么下面我们来看一下他 ...