【外链式写网页】

JUANのWEB

已于 2022-03-16 14:43:57 修改

阅读量451

点赞数 2

分类专栏：动态网页设计文章标签： css html

于 2022-03-16 14:42:35 首次发布

本文链接：https://blog.csdn.net/m0_63241410/article/details/123525790

版权

动态网页设计专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在桌面创建一个文档，编写完成后，改后缀为.css，书写css样式：

font-size：

font-family：

...........

}

比如说这个例子：

@charset"utf-8"
/*CSS Document*/
p{
font-size:16px;
font-family:"微软雅黑"；
line-height:28px;
text-indent:em;

}
.blue{color:#33F;}
.red{color:#F00;}
.money{font-size:28px;}

再写html代码段的时候，使用外链式应该在<head>标签内，<title>下面一行。且链接时如果HTML文件没有和css文件在同一级文件夹则加上文件夹的名字，若在同一级文件夹中则直接链入文件名，例如：

<!DOCTYPE html>
<html>
<head>
	<title>重庆火锅</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<p>
	<em class="blue">导语</em>:fhejkdhewuriejkhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhdfgus<strong class="red">重庆火锅</strong>dssfershhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhrtrgrfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjkhdss....<em class="blue">详情</em>
</p>
<p>
	<em>重庆火锅</em>：jdhfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhue<strong class="red money">18yuan</strong>
</p>
</body>
</html>

同时我们也可以利用<img>标签插入图片（贴合主题就好，随便在网上找一张）

代码大致如下所示：

<!DOCTYPE html>
<html>
<head>
	<title>重庆火锅</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<img src="重庆火锅.jpg">
<p>
	<em class="blue">导语</em>:fhejkdhewuriejkhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhdfgus<strong class="red">重庆火锅</strong>dssfershhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhrtrgrfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjkhdss....<em class="blue">详情</em>
</p>
<p>
	<em>重庆火锅</em>：jdhfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhue<strong class="red money">18yuan</strong>
</p>
</body>
</html>

显示为：