Lernen Sie in einer Minute die drei Link-Methoden von CSS in HTML kennen

烟雨青岚
Freigeben: 2020-07-06 13:17:38
nach vorne
3689 Leute haben es durchsucht

Lernen Sie in einer Minute die drei Link-Methoden von CSS in HTML kennen

Es gibt drei Verknüpfungsmethoden in CSS in HTML. Wissen Sie, welche drei das sind? Die drei Verknüpfungsmethoden für CSS-Texte sind Inline-Definition, Verknüpfung mit internem CSS und Verknüpfung mit externem CSS. Sehen wir uns diese im Folgenden an.

Es gibt drei Möglichkeiten, CSS-Text zu verlinken: Inline-Definition, Verlinkung in internes CSS und Verlinkung in externes CSS

1. Der Code ist:

<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>
Nach dem Login kopieren

2. Der Code für

<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>
Nach dem Login kopieren

3. Der Code für

ist:

<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>
Nach dem Login kopieren

style.css von Code 3 befindet sich im selben Ordner wie Ihre HTML-Datei.

Der Code lautet :

#p1{
	border:2px;
	color:red;}
 #p2{
	border:2px;
	color:blue;}
 .p3{
	border:2px;
	color:red;}
Nach dem Login kopieren

In CSS müssen Sie ein #
<🎜 vor dem hinzufügen

id >Add a .

Zusätzlich:

<!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>
Nach dem Login kopieren

Danke fürs Lesen, hast du es gelernt?

Dieser Artikel ist reproduziert von: https://blog.csdn.net/weixin_43670802/article/details/94174581

Empfohlenes Tutorial: „

HTML-Tutorial

Das obige ist der detaillierte Inhalt vonLernen Sie in einer Minute die drei Link-Methoden von CSS in HTML kennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage