引入CSS文件和页面填写css代码的优先问题
如题,哪个优先级更高一点.<HEAD><STYLE><!--H1{color:yellow}--></STYLE><LINKrel=stylesheethref="myc...
如题,哪个优先级更高一点.
<HEAD>
<STYLE>
<!--
H1{color:yellow}
-->
</STYLE>
<LINK rel=stylesheet href="mycss.css" type="text/css">
</HEAD>
如果link 在 style下面,那么哪个优先? 展开
<HEAD>
<STYLE>
<!--
H1{color:yellow}
-->
</STYLE>
<LINK rel=stylesheet href="mycss.css" type="text/css">
</HEAD>
如果link 在 style下面,那么哪个优先? 展开
展开全部
CSS文件和页面填写css代码的优先问题,首先我们需要理解的是,在页面填写的CSS的优先级是高于引入文件的优先级的,因为那个css的样式更靠近要影响的元素,我们可以通过代码来理解一下:
html中:
<html>
<head>
<style>
table tr{
width:200px;
height:100px;
color:blue;
}
</style>
<link rel='stylesheet' type='text/css' href='./css/index1.css'>
</head>
<body>
<table>
<tr style="">
<td>我i是测试文字</td>
</tr>
</table>
</body>
</html>
css文件中:
table tr{
width:300px;
height:200px;
color:red;
}
这里写了2个CSS样式,唯一不同的就是文字的颜色,因为css的优先级,在在这里是不会执行外部文件的css样式,而是会去执行更加靠近这个tr的css样式,因而color会执行blue。
html中:
<html>
<head>
<style>
table tr{
width:200px;
height:100px;
color:blue;
}
</style>
<link rel='stylesheet' type='text/css' href='./css/index1.css'>
</head>
<body>
<table>
<tr style="">
<td>我i是测试文字</td>
</tr>
</table>
</body>
</html>
css文件中:
table tr{
width:300px;
height:200px;
color:red;
}
这里写了2个CSS样式,唯一不同的就是文字的颜色,因为css的优先级,在在这里是不会执行外部文件的css样式,而是会去执行更加靠近这个tr的css样式,因而color会执行blue。
展开全部
标签里面的 style="" 这个优先最高;其次是继承的;最后是外面的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
----------------
补充
----------------
<STYLE>
<!--
H1{color:yellow}
-->
</STYLE>
<LINK rel=stylesheet href="mycss.css" type="text/css">
这样的话,服从 mycss.css 的规则
也就是说 总是服从最后被定义的样式
mycss.css的 样式 是位于 <style></style> 的后面
所以服从 mycss.css 的样式
但是一般说来。
都是把 <LINK rel=stylesheet href="mycss.css" type="text/css"> 放在前面。 定义 公共普通的样式
<STYLE>
<!--
H1{color:yellow}
-->
</STYLE>
放在后面,作为特殊页面的特殊样式的补充!
------------------------------------------
后者更高~~
由高到低
<div style="这里的最高">
<style type="text/css">
这里的其次
</style>
<link href="这个最低.css"/>
补充
----------------
<STYLE>
<!--
H1{color:yellow}
-->
</STYLE>
<LINK rel=stylesheet href="mycss.css" type="text/css">
这样的话,服从 mycss.css 的规则
也就是说 总是服从最后被定义的样式
mycss.css的 样式 是位于 <style></style> 的后面
所以服从 mycss.css 的样式
但是一般说来。
都是把 <LINK rel=stylesheet href="mycss.css" type="text/css"> 放在前面。 定义 公共普通的样式
<STYLE>
<!--
H1{color:yellow}
-->
</STYLE>
放在后面,作为特殊页面的特殊样式的补充!
------------------------------------------
后者更高~~
由高到低
<div style="这里的最高">
<style type="text/css">
这里的其次
</style>
<link href="这个最低.css"/>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
近水楼台先得月!
==============================
还是这句话“近水楼台先得月!”
==============================
还是这句话“近水楼台先得月!”
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
一、CSS的优先级
1、标有"!important"的规则有最高优先级
一个样式规则可以有一个"important"附带标签,表示该样式规则具有最高优先级。例如下面例子中,前景色被标为important。
H1{color:black !importan; font-family:sans-serif}
注意:这种声明容易引起混乱,因此通常使用得较少。
2、创作者规则优先级高于浏览者规则
浏览器允许浏览者创建样式规则以覆盖系统缺省值。在此情况下,由网页创作者明确设定得样式优先级较高,而浏览者设置得样式规则优先级较低。
3、更特殊得规则优先于不够特殊的规则
在决定特殊性时,selector中的ID属性有最高优先级。基于ID selector的优先级可通过计数Selector中类属性的数量确定,数量越多优先级越高。假如规则仍然无法确定优先级,则HTML元素名的数量决定了特殊性。
4、在同一个级别的情况下,最后指定的规则有优先权
假如两个或更多的规定在应用了前三个规定具有相同优先级,则后给出的规则优先于早先给出的规则。
如果在网页的HEAD标记中同时使用了STYLE标记符(指定嵌入式样式)和LINK标记符(指定链接式样式),并且这两个样式指定中同时应用了具有同一优先级别的样式,则STYLE标记符和LINK标记符的先后顺序将决定样式的优先级。
例如,如果在LINK所链接的样式表(mycss.css)中定义了以下一条样式规则:
H1{color:red}
同时在嵌入式样式定义中也定义了一条规则:
H1{color:yellow}
在网页中的样式定义如下所示:
<HEAD>
<LINK rel=stylesheet href="mycss.css" type="text/css">
<STYLE>
<!--
H1{color:yellow}
-->
</STYLE>
</HEAD>
由于STYLE标记符中定义的样式后出现,因此它具有更高的优先级,所以网页中H1标记符的内容将显示为黄色(yellow)。同样,如果将Link标记符的位置移动到<STYLE></STYLE>标记符之后,则网页中H1标记符的内容将显示为红色(red)。
另外,由于直插式样式(使用HTNL标记的style属性设置的样式)的位置最接近于样式作用的标记符,因此它通常具有高优先级。
1、标有"!important"的规则有最高优先级
一个样式规则可以有一个"important"附带标签,表示该样式规则具有最高优先级。例如下面例子中,前景色被标为important。
H1{color:black !importan; font-family:sans-serif}
注意:这种声明容易引起混乱,因此通常使用得较少。
2、创作者规则优先级高于浏览者规则
浏览器允许浏览者创建样式规则以覆盖系统缺省值。在此情况下,由网页创作者明确设定得样式优先级较高,而浏览者设置得样式规则优先级较低。
3、更特殊得规则优先于不够特殊的规则
在决定特殊性时,selector中的ID属性有最高优先级。基于ID selector的优先级可通过计数Selector中类属性的数量确定,数量越多优先级越高。假如规则仍然无法确定优先级,则HTML元素名的数量决定了特殊性。
4、在同一个级别的情况下,最后指定的规则有优先权
假如两个或更多的规定在应用了前三个规定具有相同优先级,则后给出的规则优先于早先给出的规则。
如果在网页的HEAD标记中同时使用了STYLE标记符(指定嵌入式样式)和LINK标记符(指定链接式样式),并且这两个样式指定中同时应用了具有同一优先级别的样式,则STYLE标记符和LINK标记符的先后顺序将决定样式的优先级。
例如,如果在LINK所链接的样式表(mycss.css)中定义了以下一条样式规则:
H1{color:red}
同时在嵌入式样式定义中也定义了一条规则:
H1{color:yellow}
在网页中的样式定义如下所示:
<HEAD>
<LINK rel=stylesheet href="mycss.css" type="text/css">
<STYLE>
<!--
H1{color:yellow}
-->
</STYLE>
</HEAD>
由于STYLE标记符中定义的样式后出现,因此它具有更高的优先级,所以网页中H1标记符的内容将显示为黄色(yellow)。同样,如果将Link标记符的位置移动到<STYLE></STYLE>标记符之后,则网页中H1标记符的内容将显示为红色(red)。
另外,由于直插式样式(使用HTNL标记的style属性设置的样式)的位置最接近于样式作用的标记符,因此它通常具有高优先级。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询