Tipps für die effiziente Nutzung von CSS-Stylesheets: Nutzen Sie die Leistungsfähigkeit von Stylesheets voll aus
|
Mit der kontinuierlichen Entwicklung der Internetwirtschaft wächst die Anzahl professioneller Websites, Websites öffentlicher Dienste und Unternehmensportale im Internet rasant, und auch die Informationsmenge auf den einzelnen Websites weist einen explosionsartigen Wachstumstrend auf. Angesichts einer so großen Informationsmenge wäre es für uns ein sehr komplizierter Prozess, jede einzelne Spalte auf der Webseite hinzuzufügen oder zu löschen. Um die Effizienz der Wartung und Aktualisierung von Webseiten zu verbessern, können wir Stylesheets verwenden, um das Erscheinungsbild von Hunderten von Webseiten gleichzeitig zu ändern, indem wir nur eine Datei ändern, ohne die personalisierte Leistung zu verlieren. Um die Leistungsfähigkeit und Flexibilität von Stylesheets voll auszunutzen, möchte der Autor einige seiner eigenen Erfahrungen zum effektiven Einsatz von Stylesheets weitergeben. 1. Mehrere Möglichkeiten zum Importieren von CSS in eine Webseite Es gibt viele Möglichkeiten, CSS in HTML einzuführen, z. B. die direkte Einfügen, die Verwendung eines Links zu einem externen Stylesheet, die Verwendung von CSS "@import" zum Importieren eines Stylesheets und die Verwendung des "STYLE"-Tags in einem internen Element zum Definieren eines Stylesheets. Einige Internetnutzer haben gefragt, ob diese Einführungsmethoden gleichzeitig auf derselben Webseite aufgerufen werden können und ob es zu Verwechslungen kommt. Eigentlich müssen wir uns nicht so viele Sorgen machen. Deshalb heißt es auch „Cascading Style Sheets“. Der Browser verarbeitet die Stylesheets auf der Webseite in einer bestimmten Reihenfolge. Überprüfen Sie zunächst, ob die Seite direkt eingefügtes CSS enthält. Wenn ja, führen Sie es zuerst aus und ignorieren Sie das andere CSS in diesem Satz. Überprüfen Sie dann das Tag „STYLE“ im Quellcode der Webseite und führen Sie es aus, wenn es gefunden wird. Überprüfen Sie dann nacheinander das durch „@import“ importierte interne Stylesheet und das verknüpfte externe Stylesheet. Daher können wir mehrere CSS-Importmethoden gleichzeitig auf einer Webseite aufrufen. 2. Erstellen Sie schnell externe CSS-Dateien Für einen Webdesigner, der sich mit CSS nicht auskennt, ist es ziemlich schwierig, mit einem Editor wie WordPad eine externe CSS-Datei zu erstellen. Da Dreamweaver CSS sehr gut unterstützt, ist es viel einfacher, es als Hilfe zu verwenden. Konkret können Sie es folgendermaßen machen: Schreiben Sie zunächst die Namen der Formate auf, die auf den Webseiten der Website verwendet werden können, rufen Sie dann das CSS-Bedienfeld im Dreamweaver-Bearbeitungsfenster auf, definieren Sie sie nacheinander und schreiben Sie einige relevante Inhalte auf eine leere Seite, während Sie sie definieren und ausprobieren. Wenn Sie mit den Ergebnissen nicht zufrieden sind, ändern Sie sie sofort. Nachdem alle definiert sind, erstellen Sie mit Notepad eine leere externe CSS-Datei, kopieren Sie das definierte CSS zwischen 〈head〉 und 〈/head〉 in die CSS-Datei und fertig. 3. Machen Sie das Hintergrundmuster ruhig Wenn eine Webseite nicht vollständig auf einem Bildschirm angezeigt werden kann, verwenden wir häufig horizontale und vertikale Bildlaufleisten, um den Inhalt außerhalb des Bildschirms zu durchsuchen. Beim Verschieben der Bildlaufleiste bewegen sich Bild und Text normalerweise zusammen. Gibt es also eine Möglichkeit, zu verhindern, dass das Hintergrundbild mit dem Text „scrollt“? Um dieses Ziel zu erreichen, können wir CSS verwenden. Wir müssen nur den folgenden Quellcode direkt zwischen die und -Tags der Webseite einfügen. bg.jpg ist das Hintergrundbild der Webseite. Sie können es durch das gewünschte Hintergrundbild ersetzen: Code kopieren Der Code lautet wie folgt:〈Stiltyp="text/css"〉 〈!-- BODY { Hintergrund: lila url(bg.jpg); Hintergrundwiederholung: Wiederholung-y; Hintergrundanhang: behoben } --〉 </Stil> 4. Lassen Sie die Webseite die erste Zeile automatisch einrücken Benutzer, die DreamWeaver zum Entwerfen von Webseiten verwenden, wissen, dass es nicht so bequem ist, Leerzeichen in DreamWeaver einzugeben. Wir können CSS verwenden, um die Funktion „Einzug der ersten Zeile“ zu entwerfen und diesen Mangel auszugleichen. Öffnen Sie die Designoberfläche von DreamWeaver, suchen Sie in der Oberfläche das Dialogfeld zur CSS-Eigenschaftsdefinition (Stildefinition für .style1) und legen Sie die Funktion „Einzug der ersten Zeile“ im Einstellungselement der Eigenschaftsdefinition „Texteinzug“ unter der Registerkarte „Block“ des Dialogfelds fest. Hierbei ist zu beachten, dass sich die sogenannte „erste Zeile“ auf die erste Zeile jedes Inhaltsabsatzes bezieht, d. h. durch direktes Drücken der Eingabetaste wird ein neuer Absatz gebildet. Am besten verwenden Sie „em“ (Charakter) als Einrückungseinheit. Beispielsweise erfordert der chinesische Schriftsatz, dass jeder Absatz am Anfang um zwei chinesische Zeichen eingerückt wird. Das festgelegte CSS lautet wie folgt: Code kopieren Der Code lautet wie folgt:〈Stiltyp="text/css"〉 〈!-- .style1 { Texteinzug: 2em} --〉 </Stil> 5. Verwenden Sie CSS, um den Texthintergrund festzulegen Wenn wir in DreamWeaver dem Text eine andere Hintergrundfarbe hinzufügen müssen, ist der Vorgang sehr einfach. Klicken Sie einfach mit der Maus auf die Textfarbe-Schaltfläche im Eigenschaftenfenster und wählen Sie die gewünschte Farbe aus der Popup-Farbeinstellungsleiste aus. Aber was sollen wir tun, wenn wir einem Text eine andere Hintergrundfarbe hinzufügen möchten? Da DreamWeaver3 diese Funktion nicht hat, können wir CSS geschickt nutzen, um dieses Ziel zu erreichen. Der konkrete Vorgang besteht darin, dass wir zunächst ein CSS zum Definieren der Hintergrundfarbe erstellen können. Nennen Sie dieses CSS beispielsweise „bjstyle“. Wählen Sie dann den Text auf der Webseite aus, für den die Farbe festgelegt werden muss, und klicken Sie anschließend in der Symbolleiste auf „bjstyle“. Nachfolgend sehen Sie einen CSS-Quellcode, der die Hintergrundfarbe definiert: Code kopieren Der Code lautet wie folgt:〈Stiltyp="text/css"〉 〈!-- .bjstyle { Hintergrund: #cc00bb} --〉 </Stil> 6. Fügen Sie dem angegebenen Inhalt Rahmen hinzu In DreamWeaver können wir die leistungsstarke Definitionsfunktion von CSS verwenden, um bestimmten Inhalten Rahmen hinzuzufügen. Öffnen Sie beim Definieren zuerst die Designoberfläche von DreamWeaver und suchen Sie in dieser Oberfläche das Dialogfeld zur Definition der CSS-Eigenschaften (Stildefinition für .style1). Das Einstellungselement „Rahmen“ in diesem Dialogfeld wird verwendet, um die Rahmenlinie des angegebenen Inhalts zu definieren. Die Einstellungsspalten „oben“, „unten“, „links“ und „rechts“ dienen dazu, die Dicke und Farbe der Rahmenlinien um den angegebenen Inhalt herum zu definieren. Nachdem Sie diese Einstellungen vorgenommen haben, müssen Sie auch den Linientyp im folgenden „Stil“ definieren, da wir sonst die definierte Rahmenlinie nicht sehen können, da der Standardlinientyp von CSS „keine“ ist. Nachfolgend sehen Sie einen CSS-Quellcode, der den oberen Rand als dünne blaue Linie und den linken Rand als mitteldicke grüne Linie definiert: Code kopieren Der Code lautet wie folgt:〈Stiltyp="text/css"〉 〈!-- .style1 { Rahmen: durchgezogen; Rahmenbreite: dünn 0px 0px mittel; Rahmenfarbe: #0000FF schwarz schwarz #00FF00} --〉 </Stil> 7. Verwenden Sie Stylesheets, um die Farbe von Hyperlinks zu steuern Wenn Sie Hyperlinks aufmerksam studieren, werden Sie feststellen, dass der Browser Hyperlinks standardmäßig verarbeitet, indem er Hyperlinks, die noch nicht besucht wurden, in blauem Text mit Unterstreichung anzeigt, und Hyperlinks, die bereits besucht wurden, in dunkelviolettem Text mit dunkelvioletter Unterstreichung. Diese Standardfarben werden möglicherweise nach einer Weile langweilig und passen möglicherweise nicht zur Hintergrundfarbe Ihrer Webseite. Daher können wir die Anzeigefarbe des Hyperlinks entsprechend unseren eigenen visuellen Anforderungen frei ändern, sodass er unseren eigenen Stil besser widerspiegelt. Als nächstes stelle ich einen Quellcode zum Ändern der Anzeigefarbe eines Hyperlinks vor. Der Code lautet wie folgt: Wir können diesen Quellcode zwischen den ... in der HTML-Datei einfügen und er funktioniert für jeden Hyperlink auf dieser Webseite. Der Code in diesem Abschnitt: A:link {text-decoration: none; color:blue} bedeutet, dass der Hyperlink noch nicht besucht wurde, er hat keine Unterstreichung und seine Farbe ist blau. A:visited { color:red; text－decoration:line－through } gibt an, dass der Hyperlink nach dem Besuch rot wird und durchgestrichen ist. A:active { color:white; text-decoration:underline } bedeutet, dass der Hyperlink, wenn er aktiv ist, weiß wird und unterstrichen ist. A:hover {text-decoration:none;color:＃FF0000;background-color:black} bedeutet, dass beim Bewegen der Maus über den Hyperlink dieser nicht unterstrichen wird, die Textfarbe gelb wird und die Hintergrundfarbe schwarz ist. Gemäß der obigen Erklärung können wir die Anzeigefarbe des Hyperlinks in verschiedenen Zuständen nach Belieben ändern, um unsere Persönlichkeit besser zum Ausdruck zu bringen. 8. Fügen Sie dem ausgewählten Text ein Hintergrundbild hinzu In DreamWeaver können wir einem bestimmten Text auch ein Hintergrundbild hinzufügen. Der Vorgang ähnelt dem Hinzufügen einer Hintergrundfarbe zu einem bestimmten Text, außer dass die ausgewählte Hintergrundfarbe durch das ausgewählte geladene Hintergrundbild ersetzt wird. Der konkrete Vorgang besteht darin, dass wir zunächst ein CSS zum Definieren der Hintergrundfarbe erstellen können. Nennen Sie dieses CSS beispielsweise „txstyle“. Wählen Sie dann den Text auf der Webseite aus, für den die Farbe festgelegt werden muss, und klicken Sie anschließend in der Symbolleiste auf „txstyle“. Nachfolgend sehen Sie den CSS-Quellcode, der das Hintergrundbild definiert (test.gif ist das geladene Hintergrundbild): Code kopieren Der Code lautet wie folgt:〈Stiltyp="text/css"〉 〈!-- .txbgstyle { Hintergrundbild: URL (test.gif)} --〉 </Stil> |
>>: Beispiel für die Konvertierung von Webpack-Bildern in Base64
Artikel empfehlen
Detailliertes grafisches Tutorial zum Aktivieren des sicheren Remotezugriffs mit Docker
1. Bearbeiten Sie die Datei docker.service vi /us...
36 Prinzipien der MySQL-Datenbankentwicklung (Zusammenfassung)
Vorwort Diese Prinzipien sind aus tatsächlichen K...
Beispiel für die Implementierung einer kaskadierenden MySQL-Replikation
Bei der sogenannten kaskadierenden Replikation sy...
Web-Frontend-Entwicklung CSS-bezogene Teamzusammenarbeit
Die Frontend-Entwicklungsabteilung wächst, die Mi...
Beispiel für die Kompilierung von LNMP im Docker-Container
Inhaltsverzeichnis 1. Projektbeschreibung 2. Ngin...
Über gutes Design
<br />Auf zehntausend Personen, die die Frag...
Erweiterte Verwendung von Ansichten, Transaktionen, Indizes, Selbstverbindungen und Benutzerverwaltung in der MySQL-Datenbank – Beispielanalyse
Dieser Artikel beschreibt anhand von Beispielen d...
Tutorial zur Remote-Verbindung mit einer MySQL-Datenbank unter Linux
Vorwort Ich bin kürzlich bei der Arbeit auf diese...
Implementierung einer zeitgesteuerten MySQL-Datenbanksicherung (vollständige Datenbanksicherung)
Inhaltsverzeichnis 1. MySQL-Datensicherung 1.1. m...
Detaillierte Erläuterung zur Verwendung von Docker zum Bereitstellen der Django + MySQL8-Entwicklungsumgebung
Ich habe das System vor einiger Zeit neu installi...
Implementierung eines Web-Rechners mit nativem JavaScript
In diesem Artikel wird der spezifische JavaScript...
Detaillierte Erklärung zum automatischen Hinzufügen eines Präfix-Plugins nach der CSS3-Verpackung: Autoprefixer
Das mit vue-cli erstellte Projektgerüst hat den A...
So konfigurieren Sie die Neuschreibung von Nginx-Domänennamen und die Auflösung von Platzhalterdomänennamen
In diesem Artikel erfahren Sie, wie Sie Nginx so ...
Installieren Sie Windows Server 2019 auf VMware Workstation (Grafisches Tutorial)
Wenn Sie aufgefordert werden, einen Schlüssel ein...
HTML-Formular_PowerNode Java Academy
1. Formular 1. Die Rolle des Formulars HTML-Formu...