HTML_3——style样式、link外部导入和base改变相对路径

1、style

定义

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

style 元素可以出现在 HTML 文档中的各个部分，一个文档可以包含多个 style 元素。

属性

属性 值 描述
media screen、tty、tv、projection、handheld、print、braille、aural、all 指定样式适用的媒体。
type text/css 指定样式的类型。

实例

例1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Style美化网页样式</title>
	<style type="text/css">
		h1{color:red}
		p{color:blue}
		a{
		color:yellow;
		background:green;
		}
		<!--分别定义不同的属性比如h1格式的字体为红色
		p标签的为蓝色
		超链接的字体为黄色，背景为绿色-->
	</style>
</head>
<body>
   <h1>爱你嘛sei哟</h1>
   <p>妹妹，我不吃这一套（滑稽）</p>
   <p><a href="cnblogs.com/Nadir-Echo/">惊喜！</a></p>
</body>
</html>

效果：

image-20210807180431691

例2：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Style美化网页样式</title>
</head>
<body>
   <h1 style="color:red">我爱你</h1>
   <P>宫崎骏说过一句话:<br>
   “你住的城市 下雨了，<br>
   很想问你有没有带伞。可是我忍住了，<br>
   因为我怕你说没带，而我又无能为力，<br>
   就像是我爱你，却给不到你想要的陪伴。"<br>
   可有人却说过一句话:<br>
   “我们在的城市下雨了，<br>
   很想问你有没有带伞，可是我忍住了，<br>
   因为我怕你说没带，我说我给你送伞吧，<br>
   你说不用，我跑着回去就行了，<br>
   就像是我爱你，你却不需要我的陪伴”</p>
</body>
</html>

image-20210807184915981

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Style美化网页样式</title>
	<style type="text/css">
		body{
			background-image:url("https://www.mxyn.com/mimg/aimg/2007/2-200FQ61R5220.jpg")
			
		}
		<!--设置背景图片-->
		
		h1{
		text-align:center;
		color:re-d;
		}
		
		
		p{
		text-align:32px;
		color:blu-e;
		}
		a{
		color:yellow;
		background:gree-n;
		}
		
		<!--
		分别定义不同的属性比如h1格式的字体为红色
		p标签的为蓝色
		超链接的字体为黄色，背景为绿色
		--
		
	</style>
	<style maedia="print">
		p
		{
			color:white
		}
	</style>
	<!--专门针对打印模式-->
</head>
<body>
   <h1 style="color:red">我爱你</h1>
   <P>宫崎骏说过一句话:<br>
   “你住的城市 下雨了，<br>
   很想问你有没有带伞。可是我忍住了，<br>
   因为我怕你说没带，而我又无能为力，<br>
   就像是我爱你，却给不到你想要的陪伴。"<br>
   可有人却说过一句话:<br>
   “我们在的城市下雨了，<br>
   很想问你有没有带伞，可是我忍住了，<br>
   因为我怕你说没带，我说我给你送伞吧，<br>
   你说不用，我跑着回去就行了，<br>
   就像是我爱你，你却不需要我的陪伴”</p>
</body>
</html>

image-20210807185047140

2、link

为了避免利用style标签，导致页面全部都是相应的元素内容，我们可以通过构建样式表，利用link标签从外部导入。

定义

<link> 标签用于指定外部资源。

link 元素最常见的用途是链接样式表。

注意

link 元素定义了 6 个属性，其中 rel 属性是必选的，它说明了当前文档与被链接资源之间的关系。

属性

属性 值 描述
href URL 指定被链接资源的 URL。
hreflang language_code 指定被链接资源使用的语言。
sizes HeightxWidth 指定图标的大小（比如 sizes="16x16"）。
media media_query 指定被链接的资源将被显示到什么设备上。
rel alternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag 指定当前文档与被链接资源之间的关系。
type MIME_type 规定被链接文档的 MIME 类型。

实例

构建两个css格式的文件

image-20210807192820723

style_1

body{
			background-image:url("https://www.mxyn.com/mimg/aimg/2007/2-200FQ61R5220.jpg")
			
		}
		<!--设置背景图片-->
		
		h1{
		text-align:center;
		color:red;
		}
		
		
		p{
		text-align:32px;
		color:blue;
		}
		a{
		color:yellow;
		background:green;
		}
		
		<!--
		分别定义不同的属性比如h1格式的字体为红色
		p标签的为蓝色
		超链接的字体为黄色，背景为绿色
		-->

style_2

p
		{
			color:white
		}

例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Style美化网页样式</title>
    
	<link rel="stylesheet"type="text/css"href="style_1.css">
    
	<link rel="stylesheet"type="text/css"href="style_2.css"media="print">
	<!--专门针对打印模式-->
	
	
	
</head>
<body>
   <h1 style="color:red">我爱你</h1>
   <P>宫崎骏说过一句话:<br>
   “你住的城市 下雨了，<br>
   很想问你有没有带伞。可是我忍住了，<br>
   因为我怕你说没带，而我又无能为力，<br>
   就像是我爱你，却给不到你想要的陪伴。"<br>
   可有人却说过一句话:<br>
   “我们在的城市下雨了，<br>
   很想问你有没有带伞，可是我忍住了，<br>
   因为我怕你说没带，我说我给你送伞吧，<br>
   你说不用，我跑着回去就行了，<br>
   就像是我爱你，你却不需要我的陪伴”</p>
</body>
</html>

效果：

image-20210807192449718

效果是一样的

除了连接样式表之外，还可以用于链接网站图标

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Style美化网页样式</title>
	<link rel="stylesheet"type="text/css"href="style_1.css">
	
	<link rel="stylesheet"type="text/css"href="style_2.css"media="print">
	<!--专门针对打印模式-->
	
	<link rel="icon"type="image/x-icon"href="book.ico">
	
	
</head>
<body>
   <h1 style="color:red">我爱你</h1>
   <P>宫崎骏说过一句话:<br>
   “你住的城市 下雨了，<br>
   很想问你有没有带伞。可是我忍住了，<br>
   因为我怕你说没带，而我又无能为力，<br>
   就像是我爱你，却给不到你想要的陪伴。"<br>
   可有人却说过一句话:<br>
   “我们在的城市下雨了，<br>
   很想问你有没有带伞，可是我忍住了，<br>
   因为我怕你说没带，我说我给你送伞吧，<br>
   你说不用，我跑着回去就行了，<br>
   就像是我爱你，你却不需要我的陪伴”</p>
</body>
</html>

image-20210807193849513

效果：

image-20210807193956737

3、base标签

定义

<base> 标签用于设置相对 URL 的解析基准。

base 元素可以用来设置一个基准 URL，让 HTML 文档中的相对链接在此基础上进行解析。

注意

<base> 标签必须位于 `` 标签内部，并尽量靠前，以便随后的元素中的相对 URL 可以用上其设置的基准 URL。

属性

属性 值 描述
href URL 指定该 HTML 文档中所有相对链接的基准 URL。
target _blank、_parent、_self、_top、framename 指定在何处打开超链接。 _blank：在新窗口中打开 _parent：在当前的父窗口中打开，如果不存在父窗口，此选项的行为方式与 _self 等同 _self：当前窗口打开（默认） _top：在整个窗口中打开 framename：在指定的框架中打开

实例

指定相对url的解析基准

设置相对路径

比如现在我编辑的文件放在

image-20210807194339210

C:\Users\12436\OneDrive\桌面\学习\学习日志这样一个路径下面，

比如我要将我的这个Demo3.html链接book.ico这个图标

因为他们两个文件放在同一个文件夹下，所以在我读取book.ico直接以相对路径的形式读取就行，也就是

image-20210807194719211

假如说我现在将图标文件放在D盘的test文件夹下

image-20210807194836652

一个方法是直接读取绝对路径（

image-20210807195542804

另一个方法是可以通过link标签里的base属性，人为改变这个相对路径

image-20210807200304900

效果：

image-20210807200037541

图标依然可以用，但是由于改变了相对路径，使得link链接外部样式表的时候使用相对路径找不到两个css文件，使样式全部消失了。

image-20210807200227732

image-20210807195826814

4、参考

style标签

link标签

base标签

posted @ 2021-08-09 15:28  Nadir-Echo  阅读(902)  评论(0)    收藏  举报