一分钟了解Html中CSS的三种链接方式_html-js-css

概述一分钟了解Html中CSS的三种链接方式

在HTML中CSS有三种链接方式，你知道是哪三种吗？三种CSS文本的链接方式分别是内联定义、链入内部CSS、和链入外部CSS，下面我们一起看看吧。

CSS文本的链接方式有三种：分别是内联定义、链入内部CSS、和链入外部CSS

1.代码为：

<HTML>	<head>		<Title>内联定义</Title>	</head>	<body>		<p style="border:2px solID #000000">内联定义</p>		<p style="color:red">内联定义</p>		<p style="Font-size:12px">内联定义</p>	</body></HTML>

2.代码为：

<HTML>	<head>		<Title>链入内部CSS</Title>		<style type="text/CSS">			#myID			{				wIDth:200px;				height:300px;				color:red;			}			.myclass			{				wIDth:200px;				height:300px;				color:red;			}		</style>	</head>	<body>		<p ID="myID">链入内部CSS</p>		<p class="myclass">链入内部CSS</p>			</body></HTML>

3.代码为：

<HTML>	<head>		<Title>链入外部CSS</Title>		<link type="text/CSS" rel="stylesheet" href="style.CSS"/>	</head>	<body>		<p ID="p1">链入外部CSS</p>		<p ID="p2">链入外部CSS</p>		<p class="p3">链入外部CSS</p>	</body></HTML>

代码3的style.CSS是和你的HTML文件在同一个文件夹。

其代码为：

#p1{	border:2px;	color:red;} #p2{	border:2px;	color:blue;} .p3{	border:2px;	color:red;}

在CSS中
ID前面是要加一个#

class前面要加一个.

补充：

<!DOCTYPE HTML><HTML lang="en"><head>    <Meta charset="UTF-8">    <Title>外联式CSS样式03</Title>    <!-- 引入外部的CSS样式表        引入CSS样式表有两种方式:(面试)        1.link标签引入  推荐使用        2.@import引入    -->    <!--         link标签引入,该标签写在head标签里(与文档配置有关,不需显示)    -->      <link rel="stylesheet" href="style.CSS">    <!--         @import引入,需要写在style标签里    -->    <style typle="text/CSS">        @import url(style.CSS)    </style>    <!-- link与import的区别:        1.link是HTML语法,import是CSS语法.        2.link是在HTML文档加载时同时开始加载对应的CSS文件:@import是在HTML文档加载完成后才开始加载对应的CSS文件.        3.link可以引入任何类型的文件,而import只能引入CSS文件.        4.使用link方式引入的CSS样式我们在后期可以使用Js的方式进行修改,但是import不可以.        我们以后使用link        当一个网站有多个文档时,建议使用外联式.     --></head><body>    <p>lalala</p></body></HTML>

感谢大家的阅读，大家学会了吗？

本文转自：https://blog.csdn.net/weixin_43670802/article/details/94174581

推荐教程：《HTML教程》总结

以上是内存溢出为你收集整理的一分钟了解Html中CSS的三种链接方式全部内容，希望文章能够帮你解决一分钟了解Html中CSS的三种链接方式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://www.outofmemory.cn/web/1010650.html