CSS的四种引用方式和HTML中常见的选择器的优先级【2018-7-2】

    选择打赏方式

微信公众号伊伊兔,QQ群号:455535550,淘宝天猫优惠劵领取网站:dy208.cn

一、html文档中的四种引用css方式分别是什么?

1.最常用的,引入样式表,引入方式如下:

在head标签中添加

<link href="main.css" rel="stylesheet" type="text/css">

href后面的文件路径即为你要引入的css文件的路径

2.在Html头部用<style></style>包起来,在这里面编写样式:
<style type="text/css">
*{
padding: 0;margin: 0
}
</style>
在要引入大量css样式时一般不用这种写法


3.在标签里面直接编写行内样式。
<div style="color: #333"><div>
直接更改或者赋值给某个标签


4.使用@import引入CSS文件 

使用@import引入CSS文件有两种方式,

一种可以放在页面中的<STYLE>...</STYLE> 中,用法如下: @import url(index2.css); 

另外也可以放在CSS文件中使用,用法如下: @import "sub.css"; 

使用@import引入CSS可以很方便的引入外部文件的CSS代码,方便维护和规划。

但是每多引入一个CSS文件,就会对服务器增加一次连接请求,当访问量较大时,需在维护性和性能上进行权衡。


二、HTML中常见的选择器的优先级

标签选择器:运用范围是:标签的样式是同一格式的范围情况下,比较适用,但在同一标签多种样式的情况下不适合适用。

id选择器:在标签内定义一个id=“idname”,在内部样式中使用:#idname{样式}的方式使用id选择器。

类选择器(class):在标签内定义一个class=“classname”,在内部样式中使用: .classname{样式}的方式使用id选择器。

行内样式:写在标签里面通过style=“属性1:属性值1;….”的方式改变标签样式。

优先级: 
**
id选择器>标签选择器 
行内样式>id选择器 
类选择器>标签选择器 
id选择器>类选择器 
即 
行内样式(最高级)>id选择器>类选择器>标签选择器 
** 

QQ截图20180702131719.jpgQQ截图20180702131728.jpg

版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:CSS的四种引用方式和HTML中常见的选择器的优先级【2018-7-2】 https://www.zcjun.com/learn/102.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!