HTML层叠样式创建

最新推荐文章于 2022-01-12 21:32:41 发布

Aimyone

最新推荐文章于 2022-01-12 21:32:41 发布

阅读量886

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36636312/article/details/89178467

外部链接

1，新建一个css文件，在里面编写样式

hr{color:sienna}
p{margin-left: 20px; background:#A0522D;}
body{background-image: url(../img/t018cf71a3dc744c5a7.jpg);}

然后在HTML文件中编写引用链接

<link rel="stylesheet" type="text/css" href="../css/1.css"/>

备注：html与css在同一项目下，所以引用路径如此。

内部链接

内部链接直接在html文件中编写即可，一般位于head标签内

    <style type="text/css">
    			hr {color:sienna;}
    			p{margin-left: 20px;}
    			body{background-image: url(img/t018cf71a3dc744c5a7.jpg);}
    		</style>

这个样式表应用于全页面
如果针对页面一部进行样式编写，则将其命名

   <style>
			input[type="text"]
			{
				width: 350px;
				display: block;
				margin-bottom: 10px;
				background-color:aquamarine;
				font-family: Verdana,Arial;
			}
			
			input[type="button"]
			{
				width: 200px;
				height: 30px;
				margin-left: 150px;
				display: block;
				fonty-family:Verdana,Arial;
			}
			</style>

然后在body标签内引用样式

<body>
	<form name="input" action="" method="get">
		<input type="text" name="Name" id="" value="Bill" size="20" />
		<input type="text" name="Name"  value="Gates" size="20"/>
		<input type="button" value="Example Button" />
</body>

最终的效果图
由于图片与页面大小不同，图片会以重复的方式铺平页面
在这里插入图片描述