Heim > Artikel > Web-Frontend > CSS-Tutorial (5) So erstellen Sie CSS mit DW4
CSS-Tutorial (5) So erstellen Sie CSS mit DW4
- 巴扎黑Original
- 2017-04-01 14:03:142367Durchsuche
1. Bedienfeld „CSS-Stile“ Das obige ist der detaillierte Inhalt vonCSS-Tutorial (5) So erstellen Sie CSS mit DW4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Nachdem ich die vorherigen Kapitel studiert habe, glaube ich, dass jeder ein gewisses Verständnis von CSS hat. In diesem Kapitel erklären wir, wie man Dreamweaver4 zum Erstellen von CSS verwendet. Führen Sie zuerst Dreamweaver4 aus. Wählen Sie nach dem Start Windows->CSS-Stile im Menü aus (oder drücken Sie Shitf+F11). Das System öffnet das CSS-Stilverwaltungsfenster, wie in der Abbildung unten gezeigt Das Bedienfeld „CSS-Stile“ Alle benutzerdefinierten CSS-Stile (d. h. die oben erwähnten Klassenselektoren, die mit einem Punkt beginnen; Dreamweaver4 verwendet solche Klassenselektoren, die mit einem Punkt beginnen, als benutzerdefinierte Stile). Sie können die Schaltfläche „Anwenden“ verwenden, um diese CSS-Stile auf die Seite anzuwenden nach Belieben einen Text- oder Dokumentbereich in .
Hinweis: Vor der Schaltfläche „Übernehmen“ befindet sich ein Kontrollkästchen. Wenn die Schaltfläche ausgewählt ist, ist sie grau und nicht verfügbar. Dies bedeutet, dass die automatische Anwendung erfolgt. Solange die Maus klickt, wird der benutzerdefinierte CSS-Stil automatisch angewendet das aktuelle Element auf der Seite; wenn das Kontrollkästchen nicht aktiviert ist und die Schaltfläche „Übernehmen“ verfügbar ist, müssen Sie beim Anwenden auf die Schaltfläche „Übernehmen“ klicken. Wenn ein benutzerdefinierter Stil auf ein Objekt angewendet wird, entspricht dies dem Hinzufügen von class="..." nach dem aktuellen HTML-Tag. Darüber hinaus befindet sich vor dem Stil ein „S“-förmiges Symbol, das auf einen intern definierten Stil hinweist. Wenn es sich um ein Symbol handelt, bedeutet dies, dass dieser Stil mit einer externen Stylesheet-Datei verknüpft ist.
Hinweis: Im Bedienfeld „CSS-Stile“ werden nur benutzerdefinierte (Klassen-)CSS-Stile angezeigt. Andere CSS-Auswahlstile werden nicht im Bedienfeld „CSS-Stile“ angezeigt, da sie automatisch auf den von HTML gesteuerten Bereich angewendet werden können Tags. (HTML-Tags neu definieren bezieht sich auf den CSS-Stil, dessen Selektor ein einzelnes HTML-Tag ist. Man nennt es Neudefinieren, weil es den Stil des ursprünglichen HTML-Tags neu definiert und ändert.)
Unten rechts befinden sich 4 kleine Schaltflächen Ecke, dies sind die am häufigsten verwendeten Befehle:
Stylesheet anhängen: (Link zum Stylesheet) Nach dem Klicken wird ein Dialogfeld zum Auswählen des Stylesheets angezeigt. Wählen Sie das zuvor erstellte externe Stylesheet aus und klicken Sie auf OK Link. Dieses externe Stylesheet wurde hinzugefügt. Achten Sie beim Hinzufügen externer Stylesheets darauf, nach Möglichkeit relative Pfade zu verwenden. Neuer Stil: (Neuer Stil) Im Allgemeinen verwenden wir diese Schaltfläche, um ein CSS-Stylesheet zu erstellen.
Stylesheet bearbeiten: (Stylesheet bearbeiten) Nach dem Klicken wird das Dialogfeld „Stylesheet bearbeiten“ angezeigt, in dem alle vorhandenen internen und externen Stylesheets angezeigt werden. In diesem Dialogfeld können Sie Stile erstellen, bearbeiten und löschen .
Löschen: (Stil löschen) Wählen Sie zunächst den benutzerdefinierten CSS-Stil aus, der gelöscht werden soll, und klicken Sie dann auf diese Schaltfläche. Der Stil wird gelöscht.
Klicken Sie auf das kleine Dreieck oben oder klicken Sie mit der rechten Maustaste, um ein Menü aufzurufen. Die Funktionen des Menüs sind wie folgt:
Bearbeiten: (Bearbeiten) Bearbeiten Sie Ihren aktuell ausgewählten benutzerdefinierten CSS-Stil Klicken Sie hier, um das Dialogfeld „Stil definieren“ zum Bearbeiten dieses CSS-Klassenstils aufzurufen.
Duplizieren: (Kopieren) Duplizieren Sie die aktuell ausgewählte benutzerdefinierte CSS-Stilklasse.
Löschen: (Löschen) Löschen Sie den aktuell ausgewählten benutzerdefinierten CSS-Stil, der den gleichen Effekt wie eine Schaltfläche hat.
Anwenden: (Anwendung) bezieht sich auf die Anwendung der ausgewählten CSS-Klasse auf das aktuelle Element auf der Seite. Identisch mit der Schaltfläche „Übernehmen“.
Neuer Stil: (Neuer Stil) entspricht der Schaltfläche.
Stylesheet bearbeiten: (Stylesheet bearbeiten) entspricht der Schaltfläche.
Stylesheet anhängen: (Link zu externem Stylesheet) Entspricht der Schaltfläche.
Stylesheet exportieren: (Stylesheet exportieren) Exportieren Sie das interne Stylesheet auf dieser Seite in eine externe Stylesheet-Datei. Hinweis: Zusätzlich zu dieser Methode zum Exportieren von Stylesheets in Dreamweaver4 können Sie im Hauptmenü auch Datei->Exportieren->CSS-Stile exportieren verwenden.
2. Arten der Stylesheet-Erstellung Bevor wir ein Stylesheet erstellen, stellen wir zunächst die drei Stylesheet-Typen von Dreamweaver4 vor. Klicken Sie auf die Schaltfläche im Bedienfeld „CSS-Stile“. , um das Dialogfeld „Neuer Stil“ aufzurufen, wie unten gezeigt:
In „Definieren“ können Sie ein externes Stylesheet oder ein internes Stylesheet auswählen:
l Wählen Sie „Neue Stylesheet-Datei“ (neu). Wenn Sie eine Stylesheet-Datei erstellen möchten, können Sie zunächst diese Stylesheet-Datei speichern und dann diese Stylesheet-Datei definieren. Der Stil der gesamten Seite folgt der von Ihnen erstellten Stylesheet-Datei. Anschließend können Sie diese externe Stylesheet-Datei mit anderen Seiten verknüpfen, sodass eine Stylesheet-Datei mehrere Seiten steuern kann.
l Wenn Sie „Nur dieses Dokument“ auswählen (nur dieses Dokument existiert), erstellen Sie ein internes Stylesheet und Dreamweaver4 fügt den Inhalt des von Ihnen erstellten Stylesheets automatisch in den
Unter Typ stehen drei Stylesheet-Typen zur Auswahl:
l Custon-Stil (Klasse) erstellen: (Benutzerdefinierten Stil erstellen) Passen Sie einen Stil an, der auf die Seite angewendet werden kann ein Klassenattribut Mitte.
l HTML-Tag neu definieren: (HTML-Tag neu definieren) Definieren Sie das Standardformat des angegebenen HTML-Tags neu.
l CSS-Auswahl verwenden: (CSS-Auswahl verwenden) Formatdefinition für eine bestimmte Kombination von Tags oder alle Tags, die das angegebene ID-Attribut enthalten.
Bevor wir CSS definieren, müssen wir zunächst klar überlegen, wo der definierte Stil verwendet wird. Welche Effekte sollen erzielt werden? Ist es auf einer Seite definiert oder steuert es den Stil mehrerer Seiten? Definieren Sie dann das passende Stylesheet basierend auf Ihren Anforderungen.
3. Erstellen Sie benutzerdefinierte Stile
Auf der Seite möchten wir manchmal wichtige Texte oder Inhalte ins Auge fassen. Wir müssen einen separaten Stil für diese wichtigen Texte oder Inhalte definieren, um den allgemeinen Text zu unterscheiden. Wir können CSS für die wichtigen Inhalte separat definieren, indem wir einen benutzerdefinierten Stil erstellen Stil. Fertig. Angenommen, wir fordern, dass die Farbe wichtiger Texte und Inhalte als Rot und Fett definiert wird, um auffällige Zwecke zu erreichen.
Klicken Sie auf „Neuer Stil“. Ein neues Dialogfeld wird angezeigt. Wählen Sie im Dialogfeld „Neuer Stil“ die Option „Custon-Stil (Klasse)“ aus. Wählen Sie hier „Nur dieses Dokument“ aus , und dann oben Geben Sie den Namen des Stils ein, den Sie im Dropdown-Feld Name definiert haben. Wir geben „.emphases“ ein und drücken OK, wie unten gezeigt:
Hinweis: Der Name des benutzerdefinierten Stils Kann nach Belieben eingestellt werden und wird nach seinem Stileffekt benannt. Vor dem Namen muss ein Punkt stehen. Wenn Sie ihn verpassen, füllt das System ihn automatisch für Sie aus.
Das Dialogfeld „Stildefinition“ wird angezeigt. Wählen Sie „Typ“ in der Kategorie aus, stellen Sie dann die Farbe auf Rot und die Gewichtung auf „Fett“ ein und drücken Sie OK, wie im Bild gezeigt:
Fügen Sie dann weitere hinzu Das Bedienfeld „CSS-Stile“ Es wird ein benutzerdefinierter Stil mit dem Namen „emphases“ erstellt. Auf diese Weise haben wir einen neuen Stil definiert:
Schauen wir uns den ursprünglichen Codeteil an. Wir können sehen, dass das folgende Stylesheet hinzugefügt wurde der -Bereich : fett; Farbe: #FF0000 }
-->
Nachdem wir den Stil definiert haben, können wir diesen benutzerdefinierten Stil nun bei Bedarf anwenden. auf der Webseite Wählen Sie den Text aus und klicken Sie im Bedienfeld „Stile“ auf den Hervorhebungsstil. Sehen Sie, ob es der gewünschte Effekt ist.
Hinweis: Wenn es sich bei dem von uns ausgewählten Inhalt um eine Tabelle oder einen Absatz handelt, wird der Text in der gesamten Tabelle oder im gesamten Absatz mit Hervorhebungsstil definiert. Aus dem Originalcode können wir erkennen, dass er im Format
......
oder
……
Wenn wir dem ausgewählten Text Stile hinzufügen, wird der Text selbst nicht von HTML-Tags umgeben, daher werden -Tags automatisch hinzugefügt, zum Beispiel:
……Wichtige Punkte……
Hinweis: Das Span-Tag selbst hat in keiner Weise den Auswahlbereich für das Stylesheet angegeben, und p gibt auch den Bereich für das Stylesheet an.
4. Erstellen Sie ein Redefinitions-Stylesheet
Ein Redefinitions-Stylesheet definiert das Format eines HTML-Tags neu. Beispielsweise möchten wir die Absätze auf der Seite neu formatieren, vor jedem Absatz zwei Leerzeichen lassen und die Größe und den Zeilenabstand des Absatztextes festlegen.
Klicken Sie auf „Neuer Stil“, um das Dialogfeld „Neu“ aufzurufen. Wählen Sie im Dialogfeld „Neuer Stil“ die Option „HTML-Tag neu definieren“. Wir erstellen weiterhin ein internes Stylesheet und wählen „Nur dieses Dokument“. Wenn der Stylesheet-Typ „HTML-Tag neu definieren“ auswählt, ändert sich der Name des Dropdown-Felds oben in „Tag“, was darauf hinweist, dass der Eingabeinhalt ein HTML-Tag ist. Klicken Sie auf die Dropdown-Schaltfläche, und wir können sehen, dass alle HTML-Tags vorhanden sind Wählen Sie im Dropdown-Feld „Tag“ die Option „Absatzmarke P“ aus:
Nach OK geben Sie das Dialogfeld „Stildefinition“ ein und stellen die Schriftgröße auf 12 Pixel und den Zeilenabstand auf 150 % ein Textgröße, wie unten gezeigt:
Im Blockabschnitt legen wir den Texteinzug fest. Da die Textgröße 12 Pixel beträgt, beträgt der Abstand zwischen den beiden Wörtern 24 Pixel:
Nach dem Drücken OK, der Neudefinitionsstil ist abgeschlossen. Zu diesem Zeitpunkt beträgt die Textgröße jedes Absatzes auf der Seite 12 Pixel und der Zeilenabstand beträgt 150 %. Wir können den Einrückungseffekt jedoch im Dreamweaver-Editor nicht sehen. Speichern Sie einfach die Datei und öffnen Sie sie Sehen Sie sich den Effekt an. Derzeit lautet der ursprüngliche Code des CSS-Stylesheets:
5. Erstellen Sie ein dynamisches Link-Stylesheet
Lassen Sie uns eine Reihe von Linkstilen in verschiedenen Zuständen erstellen. Klicken Sie auf „Neuer Stil“, um das Dialogfeld „Neu“ aufzurufen. Wählen Sie im Dialogfeld „Neuer Stil“ die Option „CSS-Auswahl verwenden“ aus. Wir erstellen weiterhin ein internes Stylesheet und wählen „Nur dieses Dokument“. Wenn „CSS-Selektor verwenden“ als Stylesheet-Typ ausgewählt ist, ändert sich der Name des Dropdown-Felds oben in „Selektor“, was darauf hinweist, dass es sich bei dem Eingabeinhalt um einen CSS-Selektor handelt. Klicken Sie auf die Dropdown-Schaltfläche und Sie können die 4 Zustände des sehen Dynamischer Link:
l a :active Wählen Sie den Hyperlink-Status
l a:hover Bewegen Sie den Cursor über den Hyperlink-Status
l a:link Der normale Status des Hyperlinks, sofern vorhanden ist keine Aktion
l a:visited Besuchter Hyperlink-Status
Als nächstes legen wir diese Status fest. Nach OK wird das Dialogfeld zur Stildefinition angezeigt unterstrichen und die Farbe ist orange, wie folgt Bild:
Wir verwenden die gleiche Methode, um a:visited festzulegen, keine Unterstreichung festlegen, gelb, wie unten gezeigt:
Als nächstes legen Sie a:hover fest, mit Unterstreichung und Überstreichung, die Farbe ist Orange, und setzen Sie den Hintergrund unter Hintergrund auf Gelb:
Hier legen wir nicht a:active fest, gemäß den Kaskadenregeln a:active Die Der Stil folgt automatisch einem:hover. Auf diese Weise haben wir die Auswirkungen aller dynamischen Links festgelegt. Achten Sie auf die Reihenfolge der Einstellungen. Im Browser sehen wir: Nicht besuchte Links auf dieser Seite sind nicht unterstrichen und orange; besuchte Links sind nicht unterstrichen und gelb, wenn die Maus auf den Link zeigt, sind sie orange und der Hintergrund ist gelb; . Der Originalcode des Stylesheets lautet:
Bei der Definition dynamischer Links wie diesem ändert sich der Linkeffekt der gesamten Seite. Wenn ich mehr als zwei Gruppen von Linkeffekten definieren möchte? Haben wir in Kapitel 4 nicht gesagt, dass das Mischen von Klassen und Pseudoklassen unterschiedliche Linkeffekte auf derselben Seite erzeugen kann? Klicken Sie auf Neuer Stil und geben Sie im Auswahl-Dropdown-Feld a.link2:link ein (natürlich können Sie zuerst a:link auswählen und dann ändern), wie unten gezeigt:
Auf diese Weise Wir erstellen eine neue .link2-Klasse und legen den Stil für a.link2:link fest, rot, unterstrichen:
Gemäß der obigen Methode definieren wir weiterhin a.link2:visited und a.link2:hover , definieren wir a.link2:visited als Rot unterstrichen, a.link2:hover als Rot ohne Unterstreichung und der Hintergrund ist weiß. Es gibt einen zusätzlichen benutzerdefinierten Stil namens link2 im Bedienfeld „CSS-Stile“. Wenden Sie diesen Stil dann auf einen dynamischen Link an. Nach dem Speichern und Öffnen mit einem Browser sehen wir zwei völlig unterschiedliche Link-Stile. Alle CSS-Codes lauten wie folgt: In Verbindung stehende Artikel
Mehr sehen