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

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

当前位置: 主页>网站教程>html5教程> html style标签有哪些意思?对于style标签的运用办法详解
分享文章到:

html style标签有哪些意思?对于style标签的运用办法详解

发布时间:09/01 来源:未知 浏览: 关键词:
本篇文章主要讲的是html style标签的定义和属性介绍,先让我们理解style标签在HTML中的一些用处和位置,然后介绍了使用中的一些办法和细节技巧,让我们一起来看看吧

html style标签的定义和用途:

<style> 标签用于为 HTML 文档定义样式信息。

在 style 中,您可以规定在阅读器中怎样显现 HTML 文档。

type 属性是必需的,定义 style 元素的内容。独一大概的值是 "text/css"。

style 元素位于 head 部分中。

HTML <style> 标签实例:

<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>

必需的属性:

type : text/css : 规定样式表的 MIME 类型。

html style标签的使用办法详解:

</style>标签对中书写各种标签的样式,可以是body也可以是h1,马上行内样式全写在一块儿

比方10个标签都是统一个class的话,假如在行内样式中就需要写10条

而在style中写一条就成。

此刻都是构造(html)、样式(css)、行动(js)相别离的设计模式

<p id="xxx">===><style>#xxx{}</style>
<p class="xxx">===><style>.xxx{}</style>
<body></body>===><style>body{}</style>

style标签在css样式表中按其所在位置分三种:

1.内嵌样式表

2.内部样式表

3.外部样式表

下面具体说明一下:

1.内嵌样式表是写在使用它的标签(Tag)内的,例如要在<p>标签中使用,

其语法为:

<p style font-size:20pt>这段文字使用了内嵌样式表,更换了字体大小为20</p>

2.内部样式表不一样于内嵌样式表,其是写在html网页的<head></head>标签之间的,所以它对本网页全部有效。应留意的是,由于它不是写在某一个标签内的,所以在写的时候要留意,本人想在阿谁标签内使用这个样式表,再定义的时候也要写分明,不然会造成整个页面的纷乱。例如:

<html>
<head>
p.mylayout <style type="text/css">{font-size:22pt; color:blue; border-width:1px; border:double; text-align:center; }</style></head>
<body> 
<p class="mylayout">这段文字使用了样式表</p>
<p>这段文字没有使用样式表</p>
</body>
</html>

可以看到,在定义内部样式表的时候,<style>前面声明的时候应当第一声明在哪个标签里使用这个样式表,假如并不想在该网页所有的此标签中都使用这个样式表则在声明的标签后面加上本人定义的一个样式表名称,例如上面的p.mylayout,意为只能在该网页的<p>标签中使用此样式表,在要使用这个样式表的<p>标签中声明,声明方式为<标签 自定义样式表名称>

利用样式表选中,你可以用一样的HTML标签构成不一样的样式。比方说,你但愿段落<p>有两种样式,一种是居中对齐,一种是居右对齐。你就可以写如下样式:

p.right {text-align:right}
p.center {text-align:center}

其中right和center就是两个样式表。然后你就可以援用这两个样式表,示例代码如下:

<p class="center">这一段居中显示。</p>
<p class="right">这一段是居右显示。</p>

也可以不消HTML 标签,直接用“.”加上样式表名称。示例代码如下:

.center {text-align: center}

这种通用的样式表名称就没有标签的局限性,可以用于不一样的标签。比方:

<h1 class = "center">这个标题居中显示。</h1>
<p class = "center">这个段落居中显示。</p>

3.外部样式表

外部样式表就是将样式表的内容独自写到一个notepad中,并留存为后缀为.css的文件,在你写的想要调取的网页中加上如下的代码(当然还是加到<head></head>之间):

<link href="你css文件所在的文件夹" rel="stylesheet" type="text/css">

例如:

先写一段代码共存为p.css

p.mylayout {font-size:20pt; border-width:1px; color:blue; }

然后在你写的网页中调取这个样式表:

<HTML>
<head>
<link href="p.css所在的相对途径" rel="stylesheet" type="text/css">
</head>
<body>
<p class="mylayout"> 这个标题使用了Style 。</p>
<p>这个标题没有使用Style。</p>
</body>
</HTML>

所以一个外部样式表可以被许多网页调取,这就是外部样式表的好处。

样式表也可以串联,即一个网页用多个css,其串联的次序是:内嵌>内部>外部>阅读器本身的

也就是说当一个网页有内部css时,它在的调取外部css就被覆盖了(即外部css不起作用)

css样式表定义时的嵌套说明:

p b {color:blue;}

使用时:

<p>这段文字在b标签中的为<b>蓝色</b></p>

cursor:hand 这个属性是将鼠标变成手的外形。

【小编的相关文章】

html em标签的作用是啥?<em>和<i>标签的不同

html5 output标签是啥意思?html5 output标签的使用办法

以上就是html style标签是啥意思?关于style标签的使用办法详解的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

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

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

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

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

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

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板