美文网首页
HTML为标签设置CSS的三种方法以及权值问题

HTML为标签设置CSS的三种方法以及权值问题

作者: 文仔CXKSNLXX | 来源:发表于2018-11-24 23:16 被阅读0次

HTML为标签设置CSS的三种方法以及权值问题

内联式

内联式是直接把CSS代码写在HTML标签的开始标签中

<p style="color:red; font-size:12px">这里是文字是红色的。</p>

嵌入式

嵌入式是把css样式代码直接写在<style type="text/css"></style>

<style type="text/css">
span{
color:red
}
</style>

注意:嵌入式CSS样式代码必须写在<style></style>之间,且一般会写在<head></head>之间

外部式(外联式)

外联式是把css代码写到一个单独的外部文件中,然后文件名是以“.css”为扩展名,在<head>标签内用<link>标签将css样式代码文件链接到HTML文件内。

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

注意
rel="stylesheet" type="text/css"是固定写法不能修改

三种方法的优先级

优先级:内联式>嵌入式>外部式
注意:嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面
其实就是就近原则(离被设置元素越近优先级越高)
但是上面总结的优先级是在内联式、嵌入式、外部式样式表中css样式是在相同权值的情况下的

css样式的权值

浏览器是根据权值来判断使用哪种CSS样式的,哪种权值高就使用哪种
规则:标签的权值为1,类选择符的权值为10,ID选择的权值最高为100
例子

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意:内联式其实最高的,无论嵌入式和外联式的权值多高,如果该标签有内联式的话,就采用内联式的css
例子

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
#id{
   color:red;
}
</style>
</head>
<body>
    <p>慕课网,<span id="sp" style="color:pink">超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!</p>
</body>


</html>

[图片上传失败...(image-5dfdae-1543072596326)]

上面例子中,用了权值为100的id选择器,但是最终结果是字的样式是按照内联式的样式。

相关文章

  • HTML为标签设置CSS的三种方法以及权值问题

    HTML为标签设置CSS的三种方法以及权值问题 内联式 内联式是直接把CSS代码写在HTML标签的开始标签中如 这...

  • 复习html和css知识笔记

    html和css复习笔记 css样式的展现,是通过判断设置样式的权值来选择的,其中标签选择器权值为1,类选择器为1...

  • jQuery获取设置样式

    css();方法 获取或设置样式 对以下html标签进行样式的获取和设置 获取样式 css();方法设置参数,...

  • 章节九、CSS的继承、层叠和特殊性

    特殊性:浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。标签的权值为1,类选择符的权值为...

  • 选择器的权重

    浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。 下面是权值的规则:标签的权值为1,类选...

  • js/jQuery获取/设置div的高度,宽度···

    js/jQuery获取/设置html标签的高度等css属性· 这是jquery中设置与获取高度的方法。 还赠送了一...

  • CSS

    一、 引入CSS的三种方式 在HTML标签内加style属性 运用style标签 用link标签引入 在CSS文件...

  • CSS-左固定右自适应

    一、左固定,右自适应(如果方向相反,对应值设置为相反即可)HTML CSS

  • radio样式修改颜色纯css

    之前默认的 html为: 改成 html为: 即增加 p 标签 和 span 标签 css为:

  • CSS层叠样式表--选择器

    CSS的作用:用来设置网页结构样式。通过css给html标签设置属性来达到改变标签样式。 选择器、盒子模型、浮动、...

网友评论

      本文标题:HTML为标签设置CSS的三种方法以及权值问题

      本文链接:https://www.haomeiwen.com/subject/shjuqqtx.html