Zusammenfassung und Weitergabe der Grundlagen zum Erlernen von CSS-Stilen

Es ist unmöglich, CSS-Layout ohne ausreichende Grundkenntnisse zu erstellen. Interessierte Freunde können sich auf die häufig verwendeten CSS-Attribute beziehen. 1.

Grundlegende Einführung in CSS

Cascading Style Sheet (Cascading Style Sheet) wird als „CSS“ bezeichnet, üblicherweise auch als „Style Sheet (Style Sheet)“, das verwendet wird zum Web-Style-Design. Wenn Sie beispielsweise möchten, dass das Linkwort blau ist, wenn nicht darauf geklickt wird, und dann rot und unterstrichen wird, wenn die Maus darüber bewegt wird, handelt es sich um einen Stil. Durch die Einrichtung eines Stylesheets können Sie die Anzeigeattribute jeder Markierung in HTML einheitlich steuern. Mit Cascading Style Sheets können Benutzer das Erscheinungsbild von Webseiten effektiver steuern. Mithilfe von Cascading Style Sheets können Sie Ihre Möglichkeiten erweitern, die Position und das Erscheinungsbild von Webseitenelementen präzise festzulegen und Spezialeffekte zu erstellen.

CSS ist die Abkürzung für Englisch CascadingStyle Sheets (Cascading Style Sheets). Es handelt sich um eine Computersprache, die zum Ausdrücken von Dateistilen wie HTML oder XML verwendet wird. Die neueste Version von CSS ist CSS3, eine Stil-Design-Sprache, die die Leistung einer Webseite wirklich vom Inhalt trennen kann. Verglichen mit der Leistung von herkömmlichem HTML kann CSS die Position und das Layout von Objekten auf Webseiten präzise auf Pixelebene steuern, unterstützt nahezu alle Schriftgrößenstile, kann Webseitenobjekte und Modellstile bearbeiten und vorläufige Arbeiten durchführen Interaktionen Design ist derzeit die beste ausdrucksstarke Designsprache, die auf Textanzeige basiert. CSS kann Schreibmethoden entsprechend der Verständnisfähigkeit verschiedener Benutzer vereinfachen oder optimieren und es so für alle Arten von Menschen gut lesbar machen.

2. So verwenden Sie CSS

Es gibt drei Möglichkeiten, Stylesheets auf Website-Seiten zu verwenden:

Externe Stile: Verknüpfen Sie Webseiten mit externen Stylesheets.

Innenseitenstile: Erstellen Sie eingebettete Stylesheets auf Webseiten.

Inline-Stile: Wenden Sie Inline-Stile auf einzelne Webseitenelemente an.

Jede Methode hat ihre Vor- und Nachteile:

Verwenden Sie ein externes Stylesheet, wenn Sie den gleichen Stil konsistent auf allen oder einigen Seiten Ihrer Website anwenden möchten. Durch die Definition von Stilen in einem oder mehreren externen Stylesheets und deren Verknüpfung mit allen Webseiten wird ein einheitliches Erscheinungsbild auf allen Webseiten gewährleistet. Wenn Benutzer beschließen, den Stil zu ändern, müssen sie ihn nur einmal im externen Stylesheet ändern, und die Änderung wird auf allen mit dem Stylesheet verknüpften Seiten widergespiegelt. Normalerweise haben externe Stylesheets die Dateierweiterung .css, wie zum Beispiel der allgemeine Stil Common.css im Brisket-Pressemitteilungssystem. Verlinken Sie es dann auf der Seite, die diesen Stil erfordert, z. B.:

>
Wenn Benutzer lediglich den Stil der aktuellen Webseite definieren möchten, können eingebettete Stylesheets verwendet werden. Ein eingebettetes Stylesheet ist ein kaskadierendes Stylesheet, das in das -Tag „eingebettet“ ist. Stile in eingebetteten Stylesheets können nur auf derselben Webseite verwendet werden. Zum Beispiel:



Verwenden Sie Inline-Stile, um kaskadierende Stylesheet-Attribute auf Webseitenelemente anzuwenden. Beispiel:

CSS-Dokument

Wenn die Webseite auf ein externes Stylesheet verweist, erweitern oder überschreiben für die Webseite erstellte Inline- oder eingebettete Stile die angegebenen Eigenschaften im externen Stylesheet.

Um Stile aus einem externen Stylesheet auf einer Webseite zu verwenden, verknüpfen Sie die Webseite mit dem Stylesheet, indem Sie den Befehl „Stylesheet-Verknüpfung“ im Menü „Format“ verwenden. Sie können ein oder mehrere Stylesheets mit der aktuellen Webseite im Webseitenansichtsmodus, mit einer ausgewählten Webseite in einer Ordnerliste oder mit allen Webseiten auf der Site verknüpfen.

Das Feld „Stil“ listet Standard-HTML-Tags wie Überschriften

1 sowie Klassen- oder ID-Auswahlen auf, die in eingebetteten Stylesheets oder externen Stylesheets enthalten sind, die mit dem Webseitengerät verknüpft sind. Um einen Stil auf ein Webseitenelement anzuwenden, wählen Sie den Stil aus und klicken Sie im Feld „Stil“ auf den Stil oder die Auswahl.

In Microsoft FrontPage 2000 werden bestimmte Formatierungsfunktionen automatisch als Inline-Stile angewendet. Beispiel: Wenn Sie den Befehl „Rahmen & Schatten“ (im Menü „Format“) verwenden, um einen Rahmen um einen regulären Absatz anzuwenden, schreibt FrontPage die Formatierungsinformationen als Inline-Stileigenschaften der Absatzmarke (z. B. ). Die Anwendung einiger Eigenschaften erfordert jedoch die Verwendung von CSS, andere erfordern die Verwendung von HTML. Wenn Sie nur Inline-Stile mit CSS anwenden möchten, können Sie die Schaltfläche „Stile“ (im Dialogfeld „Eigenschaften“ des Webelements) verwenden, um Klassen- oder ID-Selektoren oder Inline-Stile anzuwenden.


3. CSS-Textattribute:
Farbe: #999999; /*Textfarbe*/

Schriftfamilie: Song Dynasty, sans- Serif ; /*Textschrift*/

Schriftgröße: 9pt; /*Textgröße*/

font-style:itelic;/*Text kursiv*/

Schriftart -Variante:Kleinbuchstaben;/*Kleinschrift*/

Buchstabenabstand: 1pt; /*Leerzeichen zwischen Wörtern*/

Zeilenhöhe: 200 %; height */

font-weight:bold;/*text fett*/

vertical-align:sub;/*subscript*/

Vertical-align:super;/*Superscript*/

text-decoration:line-through;/*Durchgestrichen hinzufügen*/

text-decoration:overline;/*Top Line hinzufügen*/

text-decoration:underline;/*Unterstreichung hinzufügen*/

text-decoration:none;/*Link-Unterstreichung entfernen*/

text-transform: Capitalize; *Das erste Wort groß schreiben*/

Texttransformation: Großbuchstaben; /*Englische Großschreibung*/

Texttransformation: Kleinbuchstaben; /*Englische Kleinbuchstaben*/

Text -align:right;/*Text nach rechts ausgerichtet*/

text-align:left;/*Text nach links ausgerichtet*/

text-align:center;/ *Mittig ausgerichteter Text */

text-align:justify;/*Textverteilte Ausrichtung*/

vertikal-align-Attribut

vertical-align:top ;/*Vertikal nach oben ausrichten*/

vertical-align:bottom;/*Vertikal nach unten ausrichten*/

vertical-align:middle;/*Vertikal in der Mitte ausrichten*/

vertical-align:text -top;/*Text vertikal nach oben ausrichten*/

vertical-align:text-bottom;/*Text vertikal nach unten ausrichten*/

4. CSS-Symbolattribute:

list-style-type:none;/*Keine Zahl*/

list-style-type:decimal;/*Arabische Ziffern*/

list-style-type:lower-roman;/*römische Ziffern in Kleinbuchstaben*/

list-style-type:upper-roman;/*römische Ziffern in Großbuchstaben*/

list-style-type:lower-alpha;/*englische Kleinbuchstaben*/

list-style-type:upper-alpha;/*englische Großbuchstaben*/

list-style-type:disc;/* Vollkreissymbol*/

list-style-type:circle;/*Hohlkreissymbol*/

list-style-type:square; /*Ausgefülltes quadratisches Symbol*/

list-style-image:url(/dot.gif);/*Picture-style symbol*/

list-style-position:outside;/ *Konvexe Zeile*/

list-style-position:inside;/*indent*/

5. CSS-Hintergrundstil:

background- Farbe: #F5E2EC;/*Hintergrundfarbe*/

Hintergrund:transparent;/*Perspektivischer Hintergrund*/

Hintergrundbild: url(/image/bg.gif); Bild*/

Hintergrundanhang: behoben; /*Wasserzeichen fester Hintergrund*/

Hintergrundwiederholung: wiederholen; /*Anordnung wiederholen – Webseitenstandard*/

Hintergrundwiederholung: no-repeat; /*Anordnung nicht wiederholen*/

Hintergrundwiederholung: Wiederholung-x; /*Anordnung auf der x-Achse wiederholen*/

Hintergrund -repeat: repeat-y; /*Auf der y-Achse anordnen*/

Hintergrundposition angeben

background-position: 90% 90%; /*Die Position des x und y-Achsen des Hintergrundbildes*/

Hintergrundposition: oben ; /*Nach oben ausrichten*/

Hintergrundposition: unten; /*Nach unten ausrichten*/

Hintergrundposition: links; /*Links ausrichten*/

Hintergrundposition: rechts; /*Rechts ausrichten*/

Hintergrundposition: Mitte; /*Mitte ausrichten*/

6. CSS-Verbindungseigenschaften:

a/*Alle Hyperlinks*/

a:link/*Hyperlink-Textformat*/

a:visited/*Textformat des besuchten Links*/

a:active/*Format des gedrückten Links*/

a:hover/*Maus zum Verlinken*/

Mauszeigerstil:

Linker Finger CURSOR: Hand

Kreuzkörpercursor:Fadenkreuz

Pfeil nach unten, Cursor:s-Größe ändern

Kreuzpfeil Cursor:bewegen

Pfeil zeigt nach oben. Rechter Cursor:bewegen

Fragezeichen hinzufügen. Cursor:Hilfe

Pfeil nach links. Cursor:w-Größe ändern

Pfeil nach oben Cursor:n-resize

Der Pfeil zeigt auf den oberen rechten Cursor:ne-resize

Der Pfeil zeigt auf den oberen linken Cursor:nw-resize

Text, den ich eingebe, Cursor:text

Der Pfeil zeigt auf den unteren rechten Cursor:se-resize

Pfeil diagonal nach unten links, Cursor:sw-resize

Trichtercursor:wait

Cursormuster (IE6) p {cursor:url("cursor file name.cur"), text ;}

7. Liste der CSS-Rahmen:

border-top: 1px solid #6699cc; /*top border*/

border -bottom: 1px solid #6699cc; /*Bottom border*/

border-left: 1px solid #6699cc; /*Left border*/

border-right: 1px solid # 6699cc; /*Right border line*/

Das Obige ist die empfohlene Schreibmethode, aber Sie können es auch Verwenden Sie die herkömmliche Methode wie folgt:

border-top-color: #369 /*Legen Sie die obere Farbe der oberen Randlinie fest*/

border-top-width:1px /*Legen Sie die Oberseite fest Breite des oberen Rands*/

border-top-style: solid/*Legen Sie den oberen Stil des oberen Rands fest*/

Andere Rahmenstile

solid/* fester Rahmen*/

gepunkteter/*gepunkteter Rahmen*/

doppelter/*doppelter Rahmen* /

Nut/*dreidimensionaler innerer konvexer Rahmen*/

Rippe/*dreidimensionaler Reliefrahmen*/

Einsatz/*konkaver Rahmen*/

Anfang /*konvexer Rahmen*/

8. CSS-Formularanwendung:

Textfeld

Button

Kontrollkästchen

Schaltfläche auswählen

Mehrzeiliges Textfeld

Dropdown-MenüOption 1Option 2 🎜>

9. CSS-Randstil:

margin-top:10px;/*upper border*/
margin-right:10px;/*right Randwert*/

margin-bottom:10px;/*Unterer Randwert*/

margin-left:10px;/*Linker Randwert*/


10. CSS-Rand leer

padding-top:10px;/*Oberen Rand leer lassen*/
padding-right:10px;/*Rechten Rand leer lassen*/

padding-bottom:10px;/*Unteren Rand leer lassen*/

padding-left:10px;/*Linken Rand leer lassen*/


Elf, Bildlaufleistenstil

Scrollbar-face-color:#f3f3f3;/*Farbe des hervorstehenden Teils der Bildlaufleiste*/
Scrollbar-highlight-color:#f1f1f1 /*Scrollbar-Farbe des Schattenteils der Leiste*/

Scrollbar-shadow-color:#fcfcfc/*Dreidimensionale Scrollbar-Schattenfarbe*/

Scrollbar-3dlight-color: #fcfcfc/*Farbe der hellen Kante der Bildlaufleiste*/

Scrollbar-arrow-color:#34837/*Farbe der dreieckigen Pfeile auf den Auf- und Ab-Schaltflächen*/

Scrollbar-track- color:#fcfcfc/*Hintergrundfarbe der Bildlaufleiste */

Scrollbar-darkshadow-color:#66c0f4/*Dreidimensionale Bildlaufleiste, starke Schattenfarbe*/

Scrollbar-base- color:#fcfcfc/*Die Grundfarbe der Bildlaufleiste*/

Das Obige ist eine grundlegende Studie über CSS-Stile. Bitte verzeihen Sie mir, wenn es Unstimmigkeiten gibt.

Das obige ist der detaillierte Inhalt vonZusammenfassung und Weitergabe der Grundlagen zum Erlernen von CSS-Stilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!