<html>
<head>
<title>HTML和CSS结合方式</title>
<!--内嵌样式:在head标签中加入style标签,对多个相同的标签进行统一修改. 标签名{属性:值;属性:值...}-->
<style type="text/css">
div{width:400px;/*div容器的宽度*/
height:400px;/*div容器的高度*/
background-color:black;/*背景样式可以用于任何标签,背景颜色:黑色*/
background-image:url("1.jpg");/*背景图片*/
background-repeat:no-repeat;/*背景图片是否重复*/
background-attachment:fixed;/*背景图像固定*/
background-position-x:10%;/*背景图像水平方向的位置*/
background-position-y:50%;/*背景图像竖直方向的位置*/
}
</style>
<!--链接方式:通过head标签中的link标签实现,前提是要有一个先写好的css文件。此种方式工作中最常用。-->
<!--注:可以通过多个link标签链接进来多个css文件,若有重复,则以最后链接进来css样式为准-->
<!-- href-引入的样式文件 -->
<link href="divstyle.css" rel="stylesheet" type="text/css">
<!--导入方式:与链接方式类似,都要存在一个先定义好的css文件。-->
<!--注:URL括号后面必须用分号结束。如果导入进来的css样式与本页面定义的样式重复,以本页面样式为准。-->
<style type="text/css">
@import url(borderstyle.css);
</style>
</head>
<body>
<p><img src="libai.jpg" alt="李白" width="140" height="170" align="left"></p>
<h2>将进酒</h2>
<!--行内样式:对指定标签和行有效。格式:标签名 style="属性:值;属性:值..."-->
<p style="color:red; font-size:20; font-family:微软雅黑; border-bottom-style:solid">
人生得意须尽欢,<br>
莫使金樽空对月。<br>
天生我材必有用,<br>
千金散尽还复来。</p>
<br><br><br><br>
<div><font color="white">我是猫咪!</font></div>
<br><br><br><br>
<border>知耻而后勇!</border>
</body>
</html>
HTML与CSS的结合方式
最新推荐文章于 2021-06-19 02:23:14 发布