三种导入方式:

1.行内样式:在标签元素中,编写一个style属性,编写样式即可。有多个以分号隔开

<h2 style="color: green">标题</h2>

2.内部样式:写在<head></head>里面

  <style>
h2{
color: red;
}
</style>

3.外部样式:新建一个style.css文件写样式

三种样式的优先级:就近原则,

行内样式  > 内部样式 > 外部样式

拓展知识: 外部样式的两种写法

  • 链接式
 <!--外部样式 -->
<link rel="stylesheet" href="css/style.css">
  • 导入式:@importsCSS2.1所特有的!(渐渐不被使用)
 <!-- 导入式 -->
<style>
@import url("css/style.css");
</style>

区别:(说法转自网页)

1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

4:link支持使用Javascript控制DOM去改变样式;而@import不支持

2.css的导入方式的更多相关文章

  1. Unit 4.css的导入方式和选择器

    一.什么是css CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方 ...

  2. CSS 的导入方式 (link or import ?)

    前言 最常看见的CSS的使用方式有三种 1. 在span, div 等标签上直接使用 style 属性定义CSS <span style="color:blue">Th ...

  3. CSS的导入方式:link与import方式的区别

    在前端开发中,加载CSS样式文件有两种方式:link方式与import方式,它们之间的区别主要有以下几点: 1.兼容性不一样 link是一个HTML标签,所以它不存在兼容性问题,而import方式则具 ...

  4. CSS导入方式和六种选择器

    1.css的导入方式 1.1 行内嵌式 1.2 内部方式 1.2.1含义: css代码写在<head>的<style>标签中 1.2.2 优点 方便在同页面中修改样式 1.2. ...

  5. 表现标准语言CSS3学习 入门+导入方式

    表现标准语言CSS3学习 入门+导入方式 如何学习: css是什么 css怎么用(快速入门) css选择器(重点+难点) 美化网页(文字.阴影.超链接.列表.渐变...) 盒子模型 浮动 定位 网页动 ...

  6. css基础语法一(选择器与css导入方式)

    页面中,所有的CSS代码,需要写入到<style></style>标签中.style标签的type属性应该选择text/css,但是type属性可以省略. CSS修改页面中的所 ...

  7. 第一篇 css导入方式 及选择器

    一 推荐资料 推荐书籍 css Zen Garden 中文(css禅意花园) 二.css样式 1.css样式表特征 继承性  大多数css的样式规则可以被继承 层叠性 1)可以定义 多个样式 2)不冲 ...

  8. css的三种导入方式

    内联样式表 <p style="font-size:50px; color:blue">css内联样式表</p> 内部样式表 <style type= ...

  9. 怎样将多个CSS文件导入一个CSS文件中

    问题: 在HTML中引入css的其中的两个方法:    导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...

  10. CSS的引入方式

    再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...

随机推荐

  1. 4时4态 加被动 例句:I will have been being done - will have be be do - 频率副词位置

    4时4态 频率副词的用法和位置:放在实义动词之前.放在be 动词之后.放在情态动词之后. 频率副词的位置一般是放在实义动词之前.放在be 动词之后.放在情态动词之后.放在be动词之后:She is s ...

  2. 什么是k8s中的sidecar模式

    在Kubernetes中,Sidecar模式是一种将辅助容器与主应用程序容器一起部署在同一个Pod中的设计模式.这种模式的目的是将辅助功能与主应用程序解耦,并提供独立发布.能力重用以及共享资源和网络的 ...

  3. 【stars-one】JetBrains产品试用重置工具

    原文[stars-one]JetBrains产品试用重置工具 | Stars-One的杂货小窝 一款可重置JetBrains全家桶产品的试用时间的小工具,与其全网去找激活码,还不如每个月自己手动重置试 ...

  4. 主题 3 编辑器(Vim)

    主题 3 编辑器(Vim) 编辑器 (Vim) · the missing semester of your cs education (missing-semester-cn.github.io) ...

  5. .NET Aspire Preview 4 发布!

    .NET Aspire是一个有态度的云原生应用开发框架,旨在改善生成.NET云原生应用的体验,并提供一组强大的工具来帮助你生成和运行分布式应用.它允许开发者快速创建属于自己的云原生应用,或改造已有的项 ...

  6. AOSP编译成功后关闭终端emulator命令找不到

    当我们编译好AOSP系统源码后,可以通过emulator命令打开模拟器,但是当我们关闭终端后,在次打开终端输入emulator命令,提示未找到命令: 此时我们需要重新执行下面语句 source bui ...

  7. Spring Boot学习日记13

    学习引入Thymeleaf Thymeleaf 官网:https://www.thymeleaf.org/ Thymeleaf 在Github 的主页:https://github.com/thyme ...

  8. 马文·柯林斯的教育之道 「Marva Collins' Way」 阅读笔记

    <马文·柯林斯的教育之道> 是 哈佛幸福课(积极心理学) 中强列推荐的一本书 这本书主写的是 马文·柯林斯 的成长经历已经和教育理念,仅看介绍,会误认为这本书只是在说鼓励式的教学理念,看完 ...

  9. KingbaseES 如何在日志文件记录查询执行计划

    KingbaseES数据库提供了插件auto_explain,用于在日志中自动记录慢速语句的执行计划. 相比于explain与对象管理工具,auto_explain对于在大型应用程序中跟踪未优化的查询 ...

  10. python 国家标准行业编码标准格式化处理

    代码在上次的基础上做了一点优化,之前对项目要的最终结果理解有些偏差: 原始数据的那一列行业编码是存在三位数和四位数的,我上次理解的三位数就是分割成两位数进行查找,其实三位数的编码是由于第一位的0没有显 ...