CSS-Komplettlösungssammlung

Der vollständige Name von CSS ist Cascading Style Sheet. Kaskadierende Stylesheets.
1. Vier Implementierungsmethoden von CSS:
1. Eingebetteter Typ:

2. Externer Linktyp:

3. Importierter Typ

4. Attributtyp:

2. CSS-Definition:
Objekt auswählen {Attribut 1: Wert 1; Attribut 2: Wert 2; Attribut n: Wert n...}
wie:
td{font-size:12px;color:#FFFF00}
.meinname{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}

Drei Auswahlobjekte
1.HTML-Selektor (TagName)
Zweiter Klassenselektor (.NAME)
3.ID-Selektor (#IDname)
4. Spezielle Objekte (a:hover a:link a:visited a:active)

1.HTML-Selektor
Der HTML-Selektor ist das Markup-Zeichen von HTML, z. B. DIV, TD, H1. Der Geltungsbereich des HTML-Selektors umfasst alle Tags auf allen Seiten, auf die der Stil angewendet wird.
Beispiel:
td
{
Farbe: #FF0000;
}
->
Hinweis: Die Funktion des Codes besteht darin, den Text in den Tabellenzellen automatisch rot zu färben.

2.Klassenselektor
Um einen Klassenselektor zu definieren, müssen Sie seinem Namen einen Punkt hinzufügen. Wie zum Beispiel „.classname“. Der Geltungsbereich des Klassenselektors umfasst alle Tags, die „class="classname"“ enthalten.
Beispiel:
.fontRed
{
Farbe: #FF0000;
}
->
Hinweis: Im zweiten gibt es kein „class="fontRed"", sodass der Text nicht rot wird.

3.ID-Auswahl
Um einen ID-Selektor zu definieren, müssen Sie seinem Namen einen Punkt „#“ hinzufügen. Zum Beispiel „#IDname“. Der Geltungsbereich des ID-Selektors umfasst alle Tags, die „ID="classname"“ enthalten.
Beispiel:

#fontRed
{
Farbe: #FF0000;
}
->
Hinweis: Im zweiten gibt es kein „ID="fontRed"", sodass der Text nicht rot wird.

4. Spezielle Objekte Es gibt vier Arten von speziellen Objekten, die für verknüpfte Objekte festgelegt werden:
a:Hover-Hyperlink, wenn die Maus darüber bewegt wird
a:link regulärer, nicht zugänglicher Hyperlink
a:besucht besuchte Hyperlink
Der Geltungsbereich des a:active-Hyperlink-Spezialobjekts beim Klicken mit der Maus sind alle Markierungen (dieser Satz ist Gegenstand von Diskussionen, da es bald eine Methode geben wird, das Wort „alle“ umzukehren).
Beispiel:
a:schweben
{
Farbe: #0000FF;
Textdekoration: unterstreichen;
}
->
Beachten Sie Folgendes, es ist sehr nützlich! ! !
a.Klassenname:hover
a#IDname:hover
Diese beiden Schreibmethoden werden jeweils mit .classname und #IDname verwendet. Sein Geltungsbereich erstreckt sich auf alle Tags, die „class="classname"“ oder „ID="IDname"“ enthalten. Mit dieser Schreibmethode können Sie mehrere a:hover-Effekte auf derselben Seite erzielen. Wenn Sie mit der Maus darüber fahren, können Sie den Unterschied zwischen dem Navigationsleistentext auf der Homepage von Yiwang und dem normalen Artikeltitel erkennen.

4. Anwendung:
1. Markierungen automatisch anwenden
2. Sonderklasse class="NAME"
3.ID ID="IDname"
4. Spezielle Objekte werden automatisch angewendet. 5. CSS-Eigenschaften
Es gibt viele CSS-Eigenschaften, wie zum Beispiel die Farbe, die oben am häufigsten verwendet wird und die Farbe des Texts angibt. Hintergrundfarbe stellt die Hintergrundfarbe dar. Dies ist das Wichtigste, aber da es nicht schwierig ist, schauen Sie einfach im entsprechenden Handbuch nach.

CSS-Tag-Eigenschaften/Eigenschaftsreferenz Hier ist eine Liste der derzeit unterstützten Stylesheet-Tag-Eigenschaften (CSS).

CSS-Tag-Attribute/Attribute

Verhaltensattribute Verhalten

Schriftart und Textattributrichtung
Richtung [di?rek??n] Führer
Schriftart
Schriftfamilie
Schriftgröße
Schriftart
Schriftartvariante [?v??ri?nt] Variante
Schriftgewicht [weit] Gewicht
ime-mode [m?ud] Modus
Layout-Raster [?leiaut] Layout-Schriftsatz [ɡrid] Raster
layout-grid-char [t?ɑ:](burn..)
Layout-Gitterlinie
Layout-Raster-Modus
Layout-Gittertyp
Buchstabenabstand [?let?] Buchstabenabstand [?speisi?].
Zeilenumbruch [breik] Umbruch
Zeilenhöhe [hait] Höhe
Mindesthöhe
Ruby-align [?ru:bi] Ruby
Rubinüberhang [??uv??hæ?] ragt heraus
Ruby-Position [p??zi??n] Positionierung
Textausrichtung
text-autospace [speis] Automatischer Abstand
Textdekoration [?dek??rei??n] Dekoration
text-indent [in?dent] Einzugssatz
Textausrichtung [?d??stifai].
Text-Kashida-Raum
Textüberlauf [??uv??fl?u] Überlauf
text-transform [træns?f?:m] ändern
Textunterstreichungsposition
unicode-bidi [?bi:di]
vertikal ausrichten
Leerraum
Wortbruch
Zeilenumbruch
Schreibmodusfarbe

und Hintergrundanhang
Hintergrundfarbe
Hintergrundbild
Hintergrundposition
Hintergrundposition-x
Hintergrundposition-y
Hintergrundwiederholung
Farblayout

-Attributrahmen
Rand unten
Rand-unten-Farbe
Rand-unten-Stil
Rand-Boden-Breite
Grenzkollaps*
Randfarbe
Rand-links
Rand-Links-Farbe
Rand-Links-Stil
Rand-Links-Breite
Rand-rechts
Rand-rechte-Farbe
Rand-Rechts-Stil
Rand-Rechts-Breite
Border-Stil
Rand-oben
Rand-Top-Farbe
Border-Top-Stil
Rand-oben-Breite
Randbreite
klar
schweben
Layout-Flow
Marge
Rand unten
Rand links
Rand rechts
Rand oben
Polsterung
Polsterung unten
Polsterung links
Polsterung-rechts
Polsterung oben
scrollbar-3dlight-color
scrollbar-pfeil-farbe
scrollbar-grundfarbe
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
Tabellenlayout
Zoom-

Klassifizierungsattributanzeige

im Listenstil
Bild im Listenstil
Listenstil-Position

Positionierungsattribut

vom Listenstil

Clip
Höhe
links
Überlauf
Überlauf-x
Überlauf-y
Position
Rechts
Spitze
Sichtweite
Breite
Z-Index

-Druckattributseite

pageBreakAfter
pageBreakBefore

-Filterattribut, Filter

-Pseudoklasse und andere Attribute: aktiv

@charset
Cursor
:Anfangsbuchstabe
:erste Zeile
@font-face
:schweben
@Import
!wichtig
:Link
@Medien
@Seite
:besucht

Hauptmethoden, um CSS-Bildrandeffekte zu erzielen

. Die einfachere Methode besteht darin, den Rand (Rahmen) für img direkt in der CSS-Datei zu definieren:
img.framed {
Polsterung: 6px;
Rand: 1 Pixel fest #CCCCCC;
Hintergrundfarbe: #FFFFFF }
Dann hat die Verwendung von class="framed" für die eingebettete Bilddefinition in der HTML-Datei oder beim Aktualisieren der Webseite den entsprechenden Randeffekt.
Der Vorteil der oben genannten Methode besteht darin, dass sie relativ einfach ist, der erzielte Effekt jedoch relativ eintönig ist und möglicherweise nicht unbedingt zufriedenstellende Ergebnisse und einige Spezialeffekte wie Schatten, Farbänderungen usw. erzielt. Dies kann sehr gut durch die Verwendung von Bildsubstitution und Positionierungsübersetzung erreicht werden. Ich gehe hier nicht auf Details ein. Ich glaube, dass es nicht schwierig sein wird, fortgeschrittenere CSS-Effekte in Frage zu stellen.

Sortieren der CSS-Syntax für Tabellenränder

Wir wissen, dass Dreamweaver bei der Tabellenerstellung hervorragende Arbeit leistet, aber irgendwann muss es noch mit CSS kombiniert werden, um einige spezifische Effekte zu erzielen. und dann separat vorstellen, wie man den Rand einer Tabelle mit CSS verschönert.

CSS-Syntax für Tabellenränder

umfasst: obere Randbreite, rechte Randbreite, untere Randbreite, linke Randbreite, Randbreite, Randfarbe, Randstil, oberer Rand, unterer Rand, linker Rand, rechter Rand, Rand, Breite, Höhe, zugehörige Beschriftungen usw.

1.

Syntax für die obere Randbreite: <Wert>

Zulässige Werte: dünn | mittel <Länge>

Anwendbar für: Alle Objekte.

Abwärtskompatibilität: Nein.

Das

Attribut für die obere Randbreite wird zur Angabe verwendet a Die Breite des oberen Randes des Elements. Der Wert kann eines von drei Schlüsselwörtern sein, von denen keines von der Schriftgröße oder -länge beeinflusst wird, und kann zum Implementieren proportionaler Breiten verwendet werden. Negative Werte sind nicht zulässig. Es kann auch verwendet werden, um den oberen Rand, die Breite des Rahmens oder die Eigenschaften des Rahmens abzukürzen.

2. Syntax für die rechte Randbreite

: <Wert>

Zulässige Werte: dünn | mittel <Länge>

Anwendbar auf: Alle Objekte.

Abwärtskompatibilität: Nein.

Zur

Angabe wird das Attribut „Rechte Randbreite“ verwendet das Element Die Breite des rechten Randes. Der Wert kann eines von drei Schlüsselwörtern sein, von denen keines von der Schriftgröße oder -länge beeinflusst wird, und kann zum Implementieren proportionaler Breiten verwendet werden. Negative Werte sind nicht zulässig. Kann auch verwendet werden, um den rechten Rand, die Randbreite oder die Randeigenschaften abzukürzen.

3.

Syntax für die untere Randbreite: <Wert>

Zulässige Werte: dünn | mittel <Länge>

Anwendbar auf: Alle Objekte.

Abwärtskompatibilität: Nein.

Das

Attribut für die untere Randbreite wird zur Angabe verwendet das Element Die Breite des unteren Randes. Der Wert kann eines von drei Schlüsselwörtern sein, von denen keines von der Schriftgröße oder -länge beeinflusst wird, und kann zum Implementieren proportionaler Breiten verwendet werden. Negative Werte sind nicht zulässig. Es kann auch verwendet werden, um den unteren Rand, die Breite des Rahmens oder die Eigenschaften des Rahmens abzukürzen.

4.

Syntax für die linke Randbreite: <Wert>

Zulässige Werte: dünn | mittel <Länge>

Anwendbar auf: Alle Objekte.

Abwärtskompatibilität: Nein.

Das

Attribut für die linke Randbreite wird zur Angabe verwendet das Element Die Breite des linken Randes. Der Wert kann eines von drei Schlüsselwörtern sein, von denen keines von der Schriftgröße oder -länge beeinflusst wird, und kann zum Implementieren proportionaler Breiten verwendet werden. Negative Werte sind nicht zulässig. Es kann auch verwendet werden, um den linken Rand, die Breite des Randes oder die Eigenschaften des Randes abzukürzen.

5. Rahmenbreitensyntax

: border-width: <value>

Zulässige

Werte

:

dünn

|

Grenzen des Elements mit einem bis vier Werten, wobei der Wert ein Schlüsselwort oder eine Länge ist. Negative Längen sind nicht zulässig. Wenn alle vier Werte angegeben sind, gelten sie jeweils für die Randstile oben, rechts, unten und links. Wenn ein Wert angegeben wird, wird dieser auf jede Kante angewendet. Wenn zwei oder drei Werte angegeben sind, entspricht der weggelassene Wert der Gegenseite. Diese Eigenschaft ist eine Abkürzung für die Eigenschaften oben, rechts, unten und links. Sie können auch das abgekürzte Randattribut verwenden.

6. Syntax der Rahmenfarbe

: border-color: <value>

Zulässige Werte: <color>{1,4}

Anfangswert: Der Wert des Farbattributs

gilt für: Alle Objekte.

Abwärtskompatibilität: Nein.

Das Randfarbattribut legt den Rand fest Farbe eines Elements. Sie können ein bis vier Schlüsselwörter verwenden. Wenn alle vier Werte angegeben sind, gelten sie jeweils für die Randstile oben, rechts, unten und links. Wenn ein Wert angegeben wird, wird dieser auf jede Kante angewendet. Wenn zwei oder drei Werte angegeben sind, entspricht der weggelassene Wert der Gegenseite. Sie können auch das abgekürzte Randattribut verwenden.

7. Rahmenstil

: <Wert>

Zulässige Werte: [gestrichelt] |.

Anfangswert

: Keiner

mit: Nein

Die Eigenschaft border-style wird verwendet, um den Stil des Rahmens eines Elements festzulegen. Diese Eigenschaft muss verwendet werden, um einen sichtbaren Rahmen anzugeben. Sie können ein bis vier Schlüsselwörter verwenden. Wenn alle vier Werte angegeben sind, gelten sie jeweils für die Randstile oben, rechts, unten und links. Wenn ein Wert angegeben wird, wird dieser auf jede Kante angewendet. Wenn zwei oder drei Werte angegeben sind, entspricht der weggelassene Wert der Gegenseite. Sie können auch das abgekürzte Randattribut verwenden.
none: kein Stil;
gepunktet: gepunktete Linie;
gestrichelt: gestrichelte Linie;
durchgezogen: durchgezogene Linie;
double: Doppellinie;
Rille: Rillenlinie;
Grat: Grat;
Einschub: konkav;
Anfang: konvex.
8. Obere

Rahmensyntax: border-top: <Wert>

Zulässige Werte: <obere Rahmenbreite> || <Farbe>

Anfangswert: Undefiniert

Anwendbar für: Alle Objekte

Abwärtskompatibilität: Nein

Oberes Randattribut Ist ein Abkürzung zum Festlegen der Breite, des Stils und der Farbe des Rahmens eines Elements. Beachten Sie, dass nur ein Rahmenstil angegeben werden kann. Sie können auch das abgekürzte Randattribut verwenden.

für

rechten

Rand

: border-right: <Wert>

Zulässige

:

<Breite des rechten Randes> ||

Abkürzung zum Festlegen der Breite, des Stils und der Farbe des rechten Rands eines Elements. Beachten Sie, dass nur ein Rahmenstil angegeben werden kann. Sie können auch das abgekürzte Randattribut verwenden.

10. Syntax für den unteren Rand

: border-bottom: <value>

Zulässige Werte: <Border style> || <Color>

Anfangswert: Undefiniert

Anwendbar für: Alle Objekte

Abwärtskompatibilität: Nein

Bottom border attribute Ist ein Abkürzung zum Festlegen der Breite, des Stils und der Farbe des unteren Rands eines Elements. Beachten Sie, dass nur ein Rahmenstil angegeben werden kann. Sie können auch das abgekürzte Randattribut verwenden.

11. Syntax für den linken Rand

: border-left: <Wert>

Zulässige Werte: <Breite des linken Randes> || <Farbe>

Anfangswert: Nicht definiert.

Anwendbar für: Alle Objekte.

Abwärtskompatibilität:

Nein Abkürzung zum Festlegen der Breite, des Stils und der Farbe des linken Rands eines Elements. Beachten Sie, dass nur ein Rahmenstil angegeben werden kann. Sie können auch das abgekürzte Randattribut verwenden.

12. Rahmensyntax

: Grenze: <Wert>

Zulässige Werte: <Rahmenbreite> || <Farbe>

Anfangswert: Undefiniert

Anwendbar für: Alle Objekte

Abwärtskompatibilität: Nein

Die Eigenschaft „Rahmen“ ist eine Einstellung die Breite, den Stil und die Farbe des Rahmens eines Elements.

Beispiele für Grenzdeklarationen sind:

H2 { border: Groove 3em }
A:link { Rand: durchgehend blau }
A:visited { border: dünn gepunktet #800080 }
A:active { border: thick double red }

Das border-Attribut kann nur vier Arten von Rahmen festlegen; es kann nur die Breite und den Stil eines Rahmensatzes angeben. Um unterschiedliche Werte für die vier Ränder eines Elements anzugeben, müssen Webseitenersteller ein oder mehrere Attribute verwenden, wie zum Beispiel: oberer Rand, rechter Rand, unterer Rand, linker Rand, Randfarbe, Randbreite, Randstil, obere Randbreite, rechte Randbreite, untere Randbreite oder linke Randbreite.

13.

Breitensyntax: Breite: <Wert>

Zulässige Werte: <Länge> | <Prozent> |.

Anfangswert: auto

Anwendbar für: Blockebene und Ersetzungselemente

: Nein.

Der Anfangswert des Breitenattributs ist „auto“. Das ist die ursprüngliche Breite des Elements (dort ist die Breite des Elements selbst). Der Prozentsatz bezieht sich auf die Breite des übergeordneten Elements. Negative Längenwerte sind nicht zulässig.

14. Höhensyntax

: Höhe: <Wert>

Zulässige Werte: <Länge> |. auto

Anfangswert: auto

Anwendbar für: Blockebene und Ersatzelemente

Abwärtskompatibilität: Nein

Der Anfangswert des Höhenattributs ist „auto“, also der des Elements Die ursprüngliche Höhe (dort ist die Höhe des Elements selbst). Der Prozentsatz bezieht sich auf die Breite des übergeordneten Elements. Negative Längenwerte sind nicht zulässig.

15. In Bezug auf die

Beschriftung der Tabellenbeschriftung sollte die Definition des gesamten Tabellenstils in der Tabelle platziert werden.
td-Zellenbeschriftung, die Definition des Zellenstils sollte in td platziert werden.
BODY ist das Hauptelement des Webdokuments. Alle sichtbaren Bereiche liegen innerhalb des <BODY>-Elements.
SCHALTFLÄCHE Die Schaltfläche des Formularfelds kann die Form „Senden“, „Zurücksetzen“ usw. haben.
DIV definiert einen Bereich auf der Webseite. Die Höhe, Breite oder absolute Position dieses Bereichs ist bekannt
Geben Sie im IMG-Bildelement die Quelle des Bildes an, indem Sie das Attribut „src“ angeben
Eingabeformularfeld INPUT
MARQUEE-Effekt mit beweglichen Untertiteln
SPAN definiert einen Bereich auf der Webseite. Die Höhe, Breite oder absolute Position dieses Bereichs sind bekannt
Textbereich TEXTAREA
TFOOT mehrzeiliges Eingabetextfeld
TH-Tabellenkopfzelle
THEAD-Tabellentitel
TR-Tabellenzeile