零基础学Web 04（style标签）

最新推荐文章于 2023-12-29 13:55:14 发布

Rashore

最新推荐文章于 2023-12-29 13:55:14 发布

阅读量1.8k

点赞数 1

分类专栏： web零基础学习文章标签： html css3 css html5

本文链接：https://blog.csdn.net/ruoruoruo666/article/details/115736603

版权

web零基础学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了HTML中<style>元素的用法，用于在文档内部定义样式信息。通过示例展示了如何设置<h1>、<p>和<a>标签的颜色。此外，详细解释了media属性，用于指定在不同设备或环境下应用特定样式，如打印模式和响应式设计。通过实例演示了如何根据屏幕宽度调整背景图片。

摘要由CSDN通过智能技术生成

零基础学Web 04

style元素

定义

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

属性
实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>style样式</title>
    <style type="text/css">
        h1 {color: yellow}
        p {color: blue}
    </style>
</head>
<body>
    <h1>header1</h1>
    <p>A paragraph.</p>
</body>
</html>

在这里插入图片描述

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>style样式</title>
    <style type="text/css">
        h1 {color: yellow}
        p {color: blue}
		a {color:red}
    </style>
</head>
<body>
    <h1>header1</h1>
    <p>A paragraph.</p>
	<a href="http://www.baidu.com" target="_blank">快点开呀！</a>
</body>
</html>

在这里插入图片描述
5. 实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>style样式</title>
    <style type="text/css">
        h1 {color: yellow}
        p {color: blue}
		a {color:red;
		background:black;}
    </style>
</head>
<body>
    <h1>header1</h1>
    <p>A paragraph.</p>
	<a href="http://www.baidu.com" target="_blank">快点开呀！</a>
</body>
</html>

在这里插入图片描述

style元素的media属性01

引入：media属性可以用来表明文档在什么情况下使用该元素中定义的样式。举个例子，在打印模式之中，浏览器通常会将你的网页背景给去除掉，主要为了环保美观，打印一大片背景浪费墨水，当我们不打印背景的时候字体颜色往往会显示的有些浅，这时候media属性会为打印模式设计一个单独的专属的样式。

若想解决以上打印文档不打印背景时候出现字体颜色相对较浅的时候可以选择media属性。需要在head部分加入代码段如下：

<style media="print">
   h1{
   color:black;
   }
   h2{
   color:black;
   }
   p{
   color:black;
   }
   </style>

效果展示（不加media属性之前打印界面）
效果展示（加media属性之后打印界面）

style元素的media属性02

引入：除了可以为指定设备定制样式，media还支持通过一些特性来设计更具体的条件，运算符就是用于组合设备和特性的条件。比如说，我们希望网页在浏览器的宽度为512px到1024px之间，我们可以加入以下代码：

<style media="screen" and (min-width:512px) and (max-width:1024px)">
body{
background-img:url(123.png);
}
</style>

注意：“min-”前缀表示不低于指定像素值，“max-”前缀表示不大于指定像素值。

实例源代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width,initial-scale=1.0">
<!--<meta http-equiv="refresh" content="3;http://www.baidu.com">-->
<title>我们的方特之旅</title>
<style type="text/css">
h1 {text-align:center;
color:white;
}
p{text-align:center;
color:white;
}

body{
background-image:url(halfRombes.png);
}
</style>
<style media="print">
h1{color:black;
}

p{color:black;
}
</style>
<style media="screen and (min-width:512px) and (max-width:1024px)">
body{
background-image:url(123.png);
}
</style>
</head>
<body>
<h1>我们的方特之旅</h1>
<p>请问你们这趟旅行开心吗？<br>A.开心<br>B.不开心<br>C.非常不开心<br></p>

</body>
</html>