将CSS链入HTML的三种方法和样式的优先级问题

将CSS链入HTML的三种方法和样式的优先级问题

1 内部样式

将style标签放到head标签或者body标签内。

<style>xxx</style>

2 内联样式

可以把样式直接作为一个标签的属性,写入到标签中,使用style属性。

<div width="20px" height="20px">xxx</div>

3 外部样式

有一个后缀名为.css的文件专门用来存放css代码,只需要在html代码中使用link标签将css文件引入即可。

<link rel="" type="" href=""></link>
  1. 如果rel为icon,表示给页面标签页设置图标,type为image/图片格式,表示引入xxx格式的图片。修改后图片成为该网页标题旁边的小logo。
<link rel="icon" type="image/图片格式(png、jpg)" href="图片的链接和路径"></link>

请添加图片描述

  1. 如果rel为stylesheet时,表示给页面引入样式表,type固定为text/css。换句话说,就是将css文件引入html文件,用以修改网页个样式。
<link rel="stylesheet" type="text/css" href="css文件的链接或路径"></link>

4 样式的优先级问题你知道吗?

首先,样式的优先级和选择器相关。

  1. 第1级:属性后面添加:!important
  2. 第2级:内联样式
  3. 其他的任何样式都小于这两级,优先级看权重,权重越大,优先级越高
    权重如下:
    (1) * 的权重为 1
    (2) 标签选择器 的权重为 1
    (3) class选择器 的权重为 2
    (4) id选择器 的权重为 4
    (5)父子、后代、兄弟、相邻兄弟 : 看符号之间各个选择器的权重和。
    • 先看符号前边的,如果前边的相等,再比较后边。
    • 如果权重相等,最后写的谁,就实现谁。
    • 如果权重不一样,但是都是修改的一个标签,不重叠样式都能够实现。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值