Html CSS的三种链接方式

感谢原文:https://blog.csdn.net/abc5382334/article/details/24260817
感谢原文:https://blog.csdn.net/jiaqingge/article/details/52564348

Html 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>链入内部csstitle>
		<style type="text/css">
			#myid
			{
				width:200px;
				height:300px;
				color:red;
			}
			.myclass
			{
				width:200px;
				height:300px;
				color:red;
			}
		style>
	head>
	<body>
		<p id="myid">链入内部cssp>
		<p class="myclass">链入内部cssp>
		
	body>
html>

3.代码为:

<html>
	<head>
		<title>链入外部csstitle>
		<link type="text/css" rel="stylesheet" href="style.css"/>
	head>
	<body>
		<p id="p1">链入外部cssp>
		<p id="p2">链入外部cssp>
		<p class="p3">链入外部cssp>
	body>
html>

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

其代码为:

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

在css中
id前面是要加一个#

class前面要加一个.


补充:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外联式css样式03title>
    
    
      <link rel="stylesheet" href="style.css">
    
    <style typle="text/css">
        @import url(style.css)
    style>
    
head>
<body>
    <div>lalaladiv>
body>
html>

你可能感兴趣的:(HTML)