怎样运用HTML span标签的class属性?这里有对于class属性的详解
第一我们来看看关于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样式,就能把整个样式整改。比方把字体色彩改为蓝色了。
就想如图:
好了,以上就是关于HTML span标签的class属性的介绍。有问题可以鄙人方发问。
【小编引荐】
HTML中的base标签怎样写相对途径?(内附使用介绍)
HTML img标签的src属性的用途是啥?详细使用办法解析(内附实例)
以上就是怎样使用HTML span标签的class属性?这里有关于class属性的详解的具体内容,更多请关注百分百源码网其它相关文章!