当前位置: 首页 > news >正文

day14-css的存在形式以及优先级

一、概述

  之前我们写了css选择器,但是我们还是觉得写在head的style里面,重用的效果总觉的还是不太好,还有同一个标签,用了三个样式,优先级又该如何呢?下面我们就来好好研究一下。

二、css的优先级

2.1、引入多个样式

说明:我们知道一个标签可以有多个css的样式,就是说一个class属性可以写入多个样式,中间以空格隔开

2.2、多个样式的优先级

说明:标签上的style优先级最高,然后是编写顺序,就近原则,在head的style标签里面越往下的标签,优先级越高。

注意:这边说的优先级高,指的是样式里面有同一个样式,比如上面三个都有color样式,如果他们存在不同的样式,则三种样式不存在优先级,都所有的样式都用上。

2.3、在chrome中查看样式优先级

说明:其实样式的优先级我们在Chrome浏览器中是可以看得出来的,下面我们就来看看,怎么看这个

 

三、css的存在形式

之前我们写的样式都是写在了head的style里面,但是这样只能提供一个html文件使用,其他的html文件就不能很好的重用此样式了,效果如图:

那怎么办?我想其他的html文件也想用,所以我们就创建一个css文件,然后通过在head标签里面的link标签去导入就可以了

①创建css文件

②html文件中到入css文件

③使用该css样式

 注意了,这边link标签中的href="css的路径",一般情况下会写在css文件夹下:

 

转载于:https://www.cnblogs.com/zhangqigao/articles/8026512.html

相关文章:

  • [LeetCode] Ransom Note 赎金条
  • textField textView输入限制
  • Python中的generator对象
  • 数据结构C++ 队列——队列的应用
  • PS注意
  • 提升工作效率的方法
  • 基于Redis实现分布式锁,避免重复执行定时任务
  • 一篇文章告诉你React里为什么不能用index作为key
  • 阿武老师百搭傲娇句式
  • LaTeX模板(二)
  • java可重入锁(ReentrantLock)的实现原理
  • React Native声明属性和属性确认
  • JavaScript深入之词法作用域和动态作用域
  • 竞赛回忆录
  • 简单团队-爬取豆瓣电影TOP250-需求分析
  • 【EOS】Cleos基础
  • Git同步原始仓库到Fork仓库中
  • gulp 教程
  • Hexo+码云+git快速搭建免费的静态Blog
  • HTTP--网络协议分层,http历史(二)
  • JavaScript 基础知识 - 入门篇(一)
  • js对象的深浅拷贝
  • SpiderData 2019年2月25日 DApp数据排行榜
  • Spring声明式事务管理之一:五大属性分析
  • 表单中readonly的input等标签,禁止光标进入(focus)的几种方式
  • 浮现式设计
  • 工作手记之html2canvas使用概述
  • ------- 计算机网络基础
  • 看完九篇字体系列的文章,你还觉得我是在说字体?
  • 前端学习笔记之观察者模式
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 设计模式 开闭原则
  • 一些关于Rust在2019年的思考
  • RDS-Mysql 物理备份恢复到本地数据库上
  • 阿里云ACE认证学习知识点梳理
  • 曜石科技宣布获得千万级天使轮投资,全方面布局电竞产业链 ...
  • # Swust 12th acm 邀请赛# [ E ] 01 String [题解]
  • #《AI中文版》V3 第 1 章 概述
  • #pragma multi_compile #pragma shader_feature
  • #图像处理
  • (1/2) 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序
  • (31)对象的克隆
  • (android 地图实战开发)3 在地图上显示当前位置和自定义银行位置
  • (八)Docker网络跨主机通讯vxlan和vlan
  • (二)WCF的Binding模型
  • (仿QQ聊天消息列表加载)wp7 listbox 列表项逐一加载的一种实现方式,以及加入渐显动画...
  • (附源码)springboot猪场管理系统 毕业设计 160901
  • (附源码)ssm高校升本考试管理系统 毕业设计 201631
  • (附源码)计算机毕业设计SSM基于健身房管理系统
  • (五)关系数据库标准语言SQL
  • (转)Google的Objective-C编码规范
  • (转)JAVA中的堆栈
  • (转)负载均衡,回话保持,cookie
  • .NET Project Open Day(2011.11.13)
  • .net 发送邮件