HTML5/CSS3/JavaScript技术大全
上QQ阅读APP看书,第一时间看更新

2.4.5 <style>标签

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

在<style>标签里,可以指定HTM标签在浏览器里的呈现方式。

<style>标签通常被放在<head>标签中,也可以被放置在其他位置。

<style>标签的常用属性如表2-6所示。

表2-6 <style>标签的常用属性

其中scoped为HTML5新增属性,如果没有定义scoped属性,则<style>元素必须位于HTML文档的<head>部分。大多数情况下,只需要为<style>标签设置type属性即可,设置值为“text/css”,表示其中的内容为CSS样式。

由于media属性在多个标签中都会涉及到,本书将在第4章中详细介绍。

关于<style>标签的详细说明将会在CSS部分介绍。

语法格式:

<style type="text/css"> 
//定义样式 
</style> 

语法说明:

样式表的定义代码必须包含在<style></style>标签中。

应用举例(style.html):

<!DOCTYPE HTML> 
<html> 
<head> 
<style type="text/css"> 
h1 {color:red} 
p {color:blue} 
</style> 
</head> 
<body> 
<h1>这是标题</h1> 
<p>这是段落</p> 
</body> 
</html> 

代码说明:

在以上代码中,加粗的部分定义了两个样式,其中第1个样式表示将标签<h1>的内容颜色设置为红色,而第2个样式表示将标签<p>的内容颜色设置为蓝色。

在Chrome浏览器中打开该网页,显示效果如图2-10所示。

47140-00-034-1.jpg

图2-10 style标签应用