百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> 怎样运用HTML span标签的class属性?这里有对于class属性的详解
分享文章到:

怎样运用HTML span标签的class属性?这里有对于class属性的详解

发布时间:09/01 来源:未知 浏览: 关键词:
本篇文章主要为大家讲述的就是关于HTML span标签的class属性的一些用途,这个是需要配合css样式一起来使用的,此刻可以轻微说点css样式的根本,对有过根基的人来说都很容易。那此刻就让我们一起来看看这篇文章吧

第一我们来看看关于HTML span标签的class属性的意思:

span英文为跨度 的意思,但是在网页制作中它是html标签的一种完全标签为<span></span>

<span> 标签被用来组合文档中的行内元素。

class在html中用来定义标签的样式,可反复利用,针对不一样的标签它可以定义长宽高乃至背景色彩等等...

例如、<span class="main"></span>,其中main为class名字在css用以"."停止定义

往下看开展:

这有一个例子:

<p><span>some text.</span>some other text.</p>

例子的说明在这:

假如不合错误 span 利用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差别。尽管如此,上例中的 span 元素依然为 p 元素增添了额外的构造。

可认为 span 利用 id 或 class 属性,这样既可以增添恰当的语义,又便于对 span 利用样式。

可以对统一个 <span> 元素利用 class 或 id 属性,但是更常见的状况是只利用其中一种。这两者的主要差别是,class 用于元素组(相似的元素,或者可以懂得为某一类元素),而 id 用于标识独自的独一的元素。

提醒:事实上,您或许已经留意到了,W3School 站点上有一些文本的样式与其他文本是不一样的。比方“提醒”使用了粗体的橘红色。尽管实现这种结果的办法非常多,但是我们的做法是:使用“提醒”使用 span 元素,然后对这个 span 元素的父元素,即 p 元素利用 class,这样就可以对这个类的子元素 span 利用响应的样式了。

这是HTML中的代码:

<p class="tip"><span>提醒:</span>... ... ...</p>

这是CSS中的代码:

p.tip span {
font-weight:bold;
color:#ff9955;
}

就这样,一个简便的css属性,加上span标签的利用,就能让一个标签利用到别的标签元素中去,这样就是css样式的好处之一,用着利便。

再来一个完全的HTML span标签的class实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>PHP中文网(php.cn)</title>
<style>
span.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<span class="intro">标题 1</span>
<p>段落。</p>
<p class="important">留意:这是一个很重要的段落。 :)</p>
</body>
</html>

就图中能懂得多少,这也是一个很简便的网页,加上了点css样式,就能把整个样式整改。比方把字体色彩改为蓝色了。

就想如图:

tuyi.png

好了,以上就是关于HTML span标签的class属性的介绍。有问题可以鄙人方发问。

【小编引荐】

HTML中的base标签怎样写相对途径?(内附使用介绍)

HTML img标签的src属性的用途是啥?详细使用办法解析(内附实例)

以上就是怎样使用HTML span标签的class属性?这里有关于class属性的详解的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板