登录  /  注册

html style标签是什么意思?关于style标签的使用方法详解

寻∝梦
发布: 2018-08-22 13:58:39
原创
15987人浏览过

本篇文章主要讲的是html style标签的定义和属性介绍,先让我们了解style标签在html中的一些用途和位置,然后介绍了使用中的一些方法和细节技巧,让我们一起来看看吧

html style标签的定义和用法:

在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。

type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"。

style 元素位于 head 部分中。

HTML

<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标签的使用方法详解:

标签对中书写各种标签的样式,可以是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 style font-size:20pt>这段文字使用了内嵌样式表,更改了字体大小为20</p>
登录后复制

2.内部样式表不同于内嵌样式表,其是写在html网页的标签之间的,所以它对本网页全部有效。应注意的是,因为它不是写在某一个标签内的,所以在写的时候要注意,自己想在那个标签内使用这个样式表,再定义的时候也要写清楚,否则会造成整个页面的混乱。例如:

<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>
登录后复制

可以看到,在定义内部样式表的时候,