HTML ist als wichtiger Bestandteil der Webentwicklung nicht nur der Inhaltsträger der Seite, sondern auch der Definator von Struktur und Stil. Als Sprache zur Steuerung des Erscheinungsbilds und Stils der Seite kann CSS den Inhalt der Webseite farbenfroher und schöner gestalten.
In der tatsächlichen Entwicklung müssen wir häufig unterschiedliche Stile für unterschiedliche Seiten oder Teile verwenden. Zu diesem Zeitpunkt müssen wir unterschiedliche CSS-Dateien aufrufen. In diesem Artikel erfahren Sie, wie Sie verschiedene CSS-Dateien aufrufen und sie auf der Seite verwenden, um Stile zu diversifizieren.
1. So rufen Sie verschiedene CSS-Dateien auf
- Aufruf über den Link-Tag
Sie können externe CSS-Dateien im HTML-Header über den Link-Tag aufrufen. Das Link-Tag muss drei Attribute enthalten: href, rel und type.
Das spezifische Format ist wie folgt:
Unter anderem wird href verwendet, um den Pfad des Aufrufs anzugeben CSS-Datei und rel werden verwendet, um die Beziehung zwischen dem Dokument und dem verknüpften Dokument zu definieren, normalerweise auf Stylesheet eingestellt. Typ gibt den MIME-Typ des verknüpften Dokuments an, normalerweise auf text/css festgelegt.
Zum Beispiel können wir den folgenden Code verwenden, um zwei verschiedene CSS-Dateien im HTML-Header aufzurufen:
<!DOCTYPE html> <html> <head> <link href="style1.css" rel="stylesheet" type="text/css" /> <link href="style2.css" rel="stylesheet" type="text/css" /> <title>调用不同CSS文件示例</title> </head> <body> <!-- 页面内容 --> </body> </html>
Zu diesem Zeitpunkt können wir unterschiedliche Stile in der Datei style1.css und der Datei style2.css definieren und diese aufrufen verschiedene Seiten zur Diversifizierung der Stile.
- Aufruf über @import
Zusätzlich zur Verwendung des Link-Tags können wir auch die Methode @import verwenden, um CSS-Dateien aufzurufen. In einer CSS-Datei können Sie die @import-Anweisung verwenden, um eine andere CSS-Datei aufzurufen, und die Stile in der aufgerufenen Datei werden mit den Stilen in der Hauptdatei zusammengeführt.
Die spezifische Syntax lautet wie folgt:
@import url("Dateipfad");
Zum Beispiel können wir im Haupt-Stylesheet style.css den folgenden Code verwenden, um das Unter-Stylesheet style2 zu laden. css:
@import url("style2.css");Auf diese Weise wird beim Aufruf von style.css in einer HTML-Seite der Stil von style2.css automatisch zusammengeführt, wodurch eine Stildiversifizierung erreicht wird.
2. Verschiedene CSS-Stile anwenden
Nachdem wir mehrere CSS-Dateien aufgerufen haben, können wir verschiedene Stile auf bestimmte Weise verwenden. Im Folgenden werden zwei häufig verwendete Methoden vorgestellt.
- Verwendung des ID-Selektors
In einer HTML-Seite können wir das ID-Attribut für ein Element festlegen, damit wir spezielle CSS-Stile dafür festlegen können.
Zum Beispiel können wir in der Datei style1.css den folgenden CSS-Stil definieren:
#box {
width: 200px;
height: 200px;
background-color: red;
}In der Datei style2.css können wir den folgenden CSS-Stil definieren:
#box {
width: 100px;
height: 100px;
background-color: blue;
}Dann können wir in der HTML-Seite dies tun Verwenden Sie den folgenden Code, um diese beiden Stile aufzurufen:
<!DOCTYPE html> <html> <head> <link href="style1.css" rel="stylesheet" type="text/css" /> <link href="style2.css" rel="stylesheet" type="text/css" /> <title>调用不同CSS文件示例</title> </head> <body> <div id="box">样式设置示例</div> </body> </html>
Zu diesem Zeitpunkt, wenn wir die Seite öffnen, werden wir feststellen, dass die Hintergrundfarbe des Box-Elements rot und nicht blau ist. Dies liegt daran, dass in HTML der ID-Selektor eine höhere Priorität hat als der Label-Selektor, sodass das Box-Element den in style1.css definierten Stil verwendet.
- Verwenden Sie den Klassenselektor
Ähnlich wie beim ID-Selektor können wir auch den Klassenselektor verwenden, um Stile für Elemente festzulegen. Wenn Sie den Klassenselektor verwenden, müssen Sie beim Definieren des Stils in der CSS-Datei ein „.“-Zeichen vor dem Selektor hinzufügen.
Zum Beispiel können wir in der Datei style1.css den folgenden CSS-Stil definieren:
.red-box {
width: 200px;
height: 200px;
background-color: red;
}In der Datei style2.css können wir den folgenden CSS-Stil definieren:
.blue-box {
width: 100px;
height: 100px;
background-color: blue;
}Dann können wir in der HTML-Seite dies tun Verwenden Sie den folgenden Code, um diese beiden Stile aufzurufen:
<!DOCTYPE html> <html> <head> <link href="style1.css" rel="stylesheet" type="text/css" /> <link href="style2.css" rel="stylesheet" type="text/css" /> <title>调用不同CSS文件示例</title> </head> <body> <div class="red-box">样式设置示例</div> <div class="blue-box">样式设置示例</div> </body> </html>
Zu diesem Zeitpunkt, wenn wir die Seite öffnen, werden wir feststellen, dass die Hintergrundfarbe des ersten Boxelements rot und die Hintergrundfarbe des zweiten Boxelements blau ist. Dies liegt daran, dass in HTML der Klassenselektor eine niedrigere Priorität als der ID-Selektor, aber eine höhere Priorität als der Label-Selektor hat. Daher verwendet das erste Boxelement den in style1.css definierten Stil, während das zweite Boxelement die in style2 definierten Stile verwendet. CSS.
3. Zusammenfassung
Bei der Webentwicklung kann die Stileinstellung die Seite schöner und leichter erkennbar machen. Durch den Aufruf verschiedener CSS-Dateien können wir unterschiedliche Stile auf verschiedenen Seiten verwenden, um unterschiedliche Effekte zu erzielen. Nach dem Aufruf mehrerer CSS-Dateien können wir ID-Selektoren oder Klassenselektoren verwenden, um unterschiedliche Stile zu verwenden und den Stilanforderungen verschiedener Elemente gerecht zu werden. Daher ist der sinnvolle Aufruf und Einsatz von CSS-Dateien einer der wichtigen Wissenspunkte in der Webentwicklung.
Das obige ist der detaillierte Inhalt vonRufen Sie verschiedene CSS auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Verständnis von usestate (): Ein umfassender Leitfaden für React State ManagementApr 25, 2025 am 12:21 AMUsSestate () isareAatthookusedTomanagestateInfunktionalkomponenten.1) ItinitializesAndupDatesTate, 2) sollte beschließt, dass die Komponenten, 3) canleadto'Stalestate'ifnotusedCorcty und 4) aufführungsgeoprisiteusecallbackbackbackbackbackbackbackbackback- und -Propsedates-Propastatupdates.
Was sind die Vorteile der Verwendung von React?Apr 25, 2025 am 12:16 AMReactispopulardUetoitsComponent-basierte Architektur, Virtualdom, Richecosystem und Declarativenature.1) Komponentenbasierte ArchitektureAllowsforsableuipieces, Verbesserung der Modularität und Mainainity.2) TheVirtualDomesHancesByupdoiclyupdatingTheUi.
Debugging in React: Identifizierung und Lösung von gemeinsamen ProblemenApr 25, 2025 am 12:09 AMTodebugractApplicationseffectivy, Useethesstrategien: 1) adrescropdrillingwithContextapiorDux.2) HandleasynchronousoperationswithusSestateAndusefect unter Verwendung von ABLORTCONTORTOPREVREPRAPRACECONDITIONS.3) OptimizeperformancewithuSemoemaNtopercallbacktoAid
Was ist Usestate () in React?Apr 25, 2025 am 12:08 AMUsSestate () InreactAllowStatemanagementInfunktionalkomponenten.1) ItsImplifiessTatemanagement, MAKECODEMORECONCISE.2) UsethePrevCountfunctionToupDatEtatEtateBasedonitSecallbackbackbackbackbackbonbackbackbonbonbonbonbonbonbonporesancePorporanceOptimizatio
Usestate () gegen Usereducer (): Auswahl des richtigen Hakens für Ihre ZustandsbedürfnisseApr 24, 2025 pm 05:13 PMEntsSimple, IndependentStateVariables; nutzungsgefertiger () forcomplexStatelogicorwhenstatePendsonPreviousState.1) UsSestate () ISIdeAlforSimpleUpUpdateSliketoggingaboolanorupdatingacounter.2) Usereducer () isBetterFoperePerformAntoRaChers () IsBetterformAntoTterForm
Verwalten von Staat mit usestate (): Ein praktisches TutorialApr 24, 2025 pm 05:05 PMUsestate ist den Klassenkomponenten und anderen Lösungen für das staatliche Management überlegen, da es das Staatsmanagement vereinfacht, den Code klarer und lesbarer macht und mit Reacts deklarativer Natur übereinstimmt. 1) Usestate ermöglicht es, dass die Zustandsvariable direkt in der Funktionskomponente deklariert wird.
Wann ist Usestate () zu verwenden und alternative staatliche Managementlösungen in Betracht zu ziehenApr 24, 2025 pm 04:49 PMUsesEsestate () ForlocalComponentStatemanagement; prüfenAlternativesforglobalState, ComplexLogic, OrperformanceIssues.1) UsSestate () ISIdeAlForSimple, LocalState.2) UseGlobalStatesSolutionsSlikereduxContextForSharedState.3) optforreDuxtOmokitOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOmokitOmortOmoktorstate
Die wiederverwendbaren Komponenten von React: Verbesserung der Wartbarkeit und Effizienz der Code verbessernApr 24, 2025 pm 04:45 PMReusableComponentsinreactenhancecodemaintainabilityandefficience -By -AchouclowingdevelousSameSameComponentacrossDifferentPartSofanApplicationOrProjects
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
SublimeText3 Englische Version
Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!
ZendStudio 13.5.1 Mac
Leistungsstarke integrierte PHP-Entwicklungsumgebung
MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.
SAP NetWeaver Server-Adapter für Eclipse
Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.
Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor
