首页 » 编程语言 » html » 正文

html元素style标签的作用及用法

 html元素中的<style>标签主要用来定义当前文档内部CSS样式的,该标签是在html头部head标签内使用

style标签的定义

style标签是用来定义当前整个文档内部CSS样式效果的;

但如果使用了HTML5新增的 "scoped" 属性,那么, style定义的CSS样式就可以应用到style定义的父元素及其子元素上,就属于当前整个文档的局部范围样式。

style使用提示

所有主流浏览器都支持style标签;

每个html网页文档都可以包含多个style标签

style标签定义的CSS样式,叫做内联样式,但如果需要链接外部CSS样式表,就请使用 <link> 标签。

style标签内未定义 scoped 属性,那么 <style> 标签必须位于 <head>标签头部区域。

style标签的用法

style标签语法

style标签属于双标签,CSS样式代码需放在开始标签<style>的和闭合标签</style>之间,语法如下

<style type="text/css">CSS样式代码</style>

type 属性指明 <style> 与 </style> 标签之间内容的MIME类型,上面代码中,type属性值的内容是"text/css",指明内容的MIME类型是标准的 CSS。

style标签示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>刘代码博客(liudaima.com)</title>
<style type="text/css">
h1 {color:red;}
h2 {color:green;}
p {color:blue;}
</style>
</head>
<body>
<h1>这是一个H1标题</h1>
<h2>这是一个H2标题</h2>
<p>这是一个段落文字。</p>
</body>
</html>

以上代码中,分别定义了标签<h1>、<h2>和<p>的CSS样式效果,分列如下:

定义的<h1>标签样式代码是h1 {color:red;},其意为H1标题为红色;

定义的<h2>标签样式代码是h2 {color:green;},其意为H2标题为绿色;

定义的<p>标签样式代码是p {color:blue;},其意为P段落文字为蓝色;

所以,示例中的代码在浏览器中的效果如下图所示:

2019-09-09_025129.png

<style>标签属性

scoped属性为html5新增属性,定义了scoped属性style标签的样式,叫做范围样式,也叫<style scoped>,有style标签有了这个属性就可以不必放在 <head>标签头部区域。

style除此之外,还有其他属性如下:

属性名称属性值描述
mediamedia_query为样式表规定不同的媒体类型。
scopedscoped如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。
typetext/css规定样式表的 MIME 类型



欢迎您发表评论或留言