CSS-Tutorial (6) Detaillierte Erläuterung der CSS-Eigenschaften in DW4

Der CSS-Stil von Dreamweaver4 enthält alle in der W3C-Spezifikation definierten CSS1-Attribute und unterteilt diese in Typ, Hintergrund, Block, Box und Rahmen, Liste (Liste), Positionierung (Positionierung) und Erweiterungen (Erweiterungen). Acht Teile, wie unten gezeigt, werden wir im Folgenden ausführlich erläutern.

1. Typ

Das Bedienfeld „Typ“ wird hauptsächlich zum Festlegen grundlegender Stile wie Textschriftart, -größe, -farbe und -effekte verwendet. Beim Festlegen legen wir nur die Attribute fest, die geändert werden müssen, und lassen die Attribute, die nicht geändert werden müssen, leer.

Hinweis: Der Attributname mit * bedeutet, dass der Stileffekt beim Bearbeiten des Dokuments nicht angezeigt werden kann. Sie müssen es mit einem Browser öffnen, um den Effekt zu sehen.

Schriftart: Legen Sie die Schriftfamilie fest. Was ist eine Schriftfamilie? Es bezieht sich auf das Festlegen mehrerer Schriftarten für Text. Wenn Sie auf Text stoßen, der nicht in der ersten Schriftart angezeigt werden kann, wird automatisch die zweite Schriftart oder die nachfolgende Schriftart in der Reihe angezeigt. Die entsprechende CSS-Eigenschaft ist „font-family“.

Hinweis: Dreamweaver4 verfügt über integrierte 6 Serien englischer Schriftarten. Im Allgemeinen verwenden wir die Serien „Verdana, Arial, Helvetica, Sans-Serif“, die besser aussehen. Wenn Sie diese Schriftfamilien nicht verwenden, müssen Sie die Schriftserie selbst bearbeiten. Sie können über „Schriftartenliste bearbeiten“ unten im Dropdown-Feld eine neue Schriftfamilie erstellen oder den Schriftnamen direkt eingeben Geben Sie den Eintrag manuell in das Dropdown-Feld ein, indem Sie ihn durch Kommas getrennt verwenden. Die Standardschriftart für chinesische Webseiten ist Song Dynasty. Lassen Sie das Feld im Allgemeinen leer und wählen Sie keine Schriftart aus.

Größe: Definieren Sie die Größe des Textes. Sie können eine bestimmte Schriftgröße auswählen, indem Sie eine Zahl und eine Maßeinheit auswählen, oder Sie können eine relative Schriftgröße auswählen. Als Einheiten verwenden Sie am besten Pixel, damit der Text im Browser nicht verzerrt wird. Im Allgemeinen werden für kleine Schriftarten die relativ standardmäßigen 12 Pixel verwendet. Die entsprechende CSS-Eigenschaft ist „font-size“.

Hinweis: Die Längeneinheiten in CSS werden in absolute Längeneinheiten und relative Längeneinheiten unterteilt, die wir üblicherweise verwenden: px: (Pixel) Die Länge wird anhand der Auflösung bestimmt die Anzeige.

pt: (Schriftgröße) bestimmt die Länge entsprechend der vom Windows-System definierten Schriftgröße.

mm, cn, in: (Millimeter, Zentimeter, Zoll) Bestimmen Sie die Länge anhand der tatsächlich angezeigten Größe. Diese Einheiten ändern sich nicht, wenn sich die Auflösung des Monitors ändert.

Die relativen Längeneinheiten sind:

em: die Größe des aktuellen Textes. Beispiel: {font-size:2em} bedeutet, dass die Textgröße doppelt so groß ist wie die Originalgröße.

Beispiel: Die Höhe des aktuellen Buchstabens „x“, im Allgemeinen die halbe Schriftgröße.

%: Definiert die Größe als Prozentsatz des aktuellen Textes. Beispiel: {font-size:300%} bedeutet, dass die Textgröße dreimal so groß ist wie die Originalgröße.

klein, groß: Zeigt eine Größe an, die eine Ebene kleiner oder eine Ebene größer als die aktuelle Größe ist. Stil: Definieren Sie den Schriftstil als Normal, Kursiv oder Schräg. Italic und Oblique sind kursive Schriftarten. Die Standardeinstellung ist Normal. Die entsprechende CSS-Eigenschaft ist „font-style“.

Hinweis: Italic und Oblique sind beide kursive Schriftarten. Der Unterschied besteht darin, dass Italic eine kursive Schriftart ist, während Oblique eine kursive Schriftart ist. Für Schriftarten ohne Kursivschrift sollte Oblique verwendet werden.

Zeilenhöhe: Legen Sie die Zeilenhöhe der Zeile fest, in der sich der Text befindet. Der Standardwert ist „Normal“, Sie können aber auch selbst einen genauen Wert eingeben und eine Maßeinheit auswählen. Eine intuitivere Schreibweise ist die Verwendung von Prozentsätzen. Beispielsweise bedeutet 140 %, dass die Zeilenhöhe dem 1,4-fachen der Textgröße entspricht. Die entsprechende CSS-Eigenschaft ist „line-height“.

Dekoration: Fügen Sie dem Text Unterstreichungen, Überstreichungen, Durchstriche und Blinkzeichen hinzu. Diese Effekte können gleichzeitig vorhanden sein. Aktivieren Sie einfach das Kontrollkästchen vor dem Effekt. Die entsprechende CSS-Eigenschaft ist „text-decoration“.

Hinweis: Die Standardeinstellung für Links ist Unterstreichung. Wir können die Unterstreichung entfernen, indem wir „Keine“ auswählen. Blinken (Blitzeffekt) ist nur im NC-Browser sichtbar.

Gewicht: Geben Sie die Punktgröße von fettem Text für die Schriftart an. Normal entspricht 400; Fett entspricht 700. Für fett gedruckte Zeichen wird im Allgemeinen Fett verwendet. Die entsprechende CSS-Eigenschaft ist „font-weight“.

Variante: Ermöglicht die Auswahl einer Variante der Schriftart. Wenn Kapitälchen ausgewählt ist, werden alle Buchstaben in diesem Stilbereich großgeschrieben. Die entsprechende CSS-Eigenschaft ist „font-variant“.

Groß-/Kleinschreibung: Wandeln Sie den ersten Buchstaben jedes Worts in der Auswahl in Großbuchstaben um oder machen Sie das Wort vollständig in Groß- oder Kleinbuchstaben. Parameter: Großbuchstaben (den ersten Buchstaben des Wortes groß schreiben), Großbuchstaben (in Großbuchstaben umwandeln), Kleinbuchstaben (in Kleinbuchstaben umwandeln), keine (nicht umwandeln). Die entsprechende CSS-Eigenschaft ist „text-transform“.

Farbe: Textfarbe definieren. Die entsprechende CSS-Eigenschaft ist „color“.

Hinweis: Es gibt drei Möglichkeiten, Farbwerte in CSS darzustellen:

l Das #RRGGBB-Format ist eine Kombination aus roten, grünen und blauen Farbwerten, und der Wert jeder Farbe ist „00 – FF“ ist eine zweistellige hexadezimale positive Ganzzahl. Beispiel: #FF0000 bedeutet Rot, #FFFF00 bedeutet Gelb.

l RGB(R,G,B)-Format, RGB ist der Wert von drei Farben im Bereich von 0 bis 255, zum Beispiel: rgb(255,0,0) bedeutet Rot, rgb(255,255,0 ) bedeutet gelb.

l Verwenden Sie Farbnamen. CSS kann bereits definierte Farbnamen verwenden. Zum Beispiel: Rot bedeutet Rot, Gelb bedeutet Gelb.

2. Hintergrund

Das Hintergrundbedienfeld wird hauptsächlich zum Festlegen des Hintergrunds von Elementen verwendet, einschließlich Hintergrundfarbe, Hintergrundbild und Hintergrundbildsteuerung. Im Allgemeinen handelt es sich um die Einstellung von BODY (Seite), TABLE (Tabelle) und p (Bereich).

Hintergrundfarbe: Legen Sie die Hintergrundfarbe des Elements fest. Die entsprechende CSS-Eigenschaft ist „background-color“.

Hintergrundbild: Legen Sie das Hintergrundbild des Elements fest. Die entsprechende CSS-Eigenschaft ist „background-image“.

Wiederholen: Legt fest, ob und wie das Hintergrundbild wiederholt wird. Keine Wiederholung: Zeigt das Bild einmal am Anfang des Elements an. Wiederholen: Ordnet das Bild horizontal und vertikal über den Hintergrundbereich des Elements an. Wiederholen-x und Wiederholen-y: Wiederholen in horizontaler bzw. vertikaler Richtung. Die Standardeinstellung ist Wiederholen. Die entsprechende CSS-Eigenschaft ist „background-repeat“.

Hinweis: Wenn Sie den BODY eines Elements definieren, können Sie steuern, ob der Seitenhintergrund wiederholt wird.

Anhang: Hintergrundbild oder Scrollen mit dem Inhalt korrigiert. Der Parameter „fixed“ gibt einen festen Hintergrund an, und „scroll“ gibt einen Hintergrund an, der mit dem Inhalt scrollt. Die entsprechende CSS-Eigenschaft ist „background-attachment“.

Hinweis: Wenn Sie den BODY des Elements definieren, können Sie den Seitenhintergrund fixieren.

Horizontal: Geben Sie die horizontale Position des Hintergrundbilds an. Sie können links (links), Mitte (Mitte) und rechts (rechts) angeben. Sie können auch einen numerischen Wert angeben, z. B. 20 Pixel bedeutet, dass der Hintergrund 20 Pixel von links entfernt ist. Die entsprechende CSS-Eigenschaft ist „background-position“.

Vertikal: Geben Sie die vertikale Position des Hintergrundbilds an. Es kann als oben (oben), Mitte (Mitte), unten (unten) angegeben werden; es kann auch ein numerischer Wert angegeben werden. Die entsprechende CSS-Eigenschaft ist „background-position“.

Hinweis: Die horizontale Position und die vertikale Position verwenden dieselbe CSS-Eigenschaft, achten Sie also beim Festlegen darauf.

3. Block

Das Blockbedienfeld wird hauptsächlich zum Festlegen des Textabstands, der Ausrichtung, des Hochstellens, des Tiefstellens, der Anordnung, des Einzugs der ersten Zeile usw. des Objekttexts verwendet.

Wortabstand: Legen Sie den Abstand zwischen Wörtern fest. Es können negative Werte eingestellt werden. Die entsprechende CSS-Eigenschaft ist „word-spacing“.

Hinweis: Im Allgemeinen unterstützt IE dieses Attribut nicht und ist nur in IE4+ auf der MAC-Plattform verfügbar.

Buchstabenabstand: Legen Sie den Abstand zwischen den Zeichen fest. Es können negative Werte angegeben werden. Da es sich bei chinesischen Zeichen ebenfalls um Zeichen handelt, kann dieser Parameter den Abstand zwischen den Zeichen festlegen. Die entsprechende CSS-Eigenschaft ist „letter-spacing“.

Vertikale Ausrichtung: Gibt die vertikale Ausrichtung des Elements an. Sie können sub (tiefgestellt), super (hochgestellt), top (oben ausgerichtet), middle (zentriert), unten (unten ausgerichtet) usw. angeben. Die entsprechende CSS-Eigenschaft ist „vertical-align“.

Textausrichtung: Legen Sie die Anordnung des Textes fest. Links (linke Ausrichtung), rechts (rechte Ausrichtung), Mitte (Mitte), Blocksatz (beide Enden ausrichten). Die entsprechende CSS-Eigenschaft ist „text-align“.

Texteinzug: Legen Sie den Einzugswert der ersten Textzeile fest. Negative Werte ziehen die erste Textzeile nach außen. Um vor jedem Absatz zwei Leerzeichen zu lassen, stellen Sie den Wert auf 2em ein, da em die aktuelle Schriftgröße und 2em die Größe von zwei Zeichen ist. Die entsprechende CSS-Eigenschaft ist „text-indent“.

Leerzeichen: Legen Sie fest, wie mit Leerzeichen innerhalb des Elements umgegangen wird. Es stehen drei Optionen zur Auswahl: „Normal“ komprimiert alle Leerzeichen; „Pre“ verarbeitet diese Leerzeichen genauso wie den Text im „pre“-Tag (d. h. alle Leerzeichen, einschließlich Leerzeichen, Tabulatoren, Wagenrückläufe usw. werden komprimiert). ) Reserviert); Nowrap gibt an, dass der Text nur umgebrochen wird, wenn er auf das br-Tag trifft. Die entsprechende CSS-Eigenschaft ist „white-space“.
4. Box

Das Box-Bedienfeld legt hauptsächlich die Grenze, den Abstand, die Höhe, die Breite und die Schwebemethode des Objekts fest.

Breite: Definiert die Breite des Elements. Die entsprechende CSS-Eigenschaft ist „width“.

Höhe: Definiert die Höhe des Elements. Die entsprechende CSS-Eigenschaft ist „height“.

Hinweis: Bei den durch Breite und Höhe definierten Objekten handelt es sich meist um Bilder, Tabellen, Ebenen usw.

Float: Definiert, wie das Element schwebt. „Left“ bedeutet, dass das Objekt auf der linken Seite schwebt, „Right“ bedeutet, dass das Objekt auf der rechten Seite schwebt, und „None“ bedeutet, dass das Objekt nicht schwebt. Die entsprechende CSS-Eigenschaft ist „float“.

Klar: Das Schweben von Elementen ist nicht zulässig. „Links“ bedeutet, dass schwebende Objekte auf der linken Seite nicht erlaubt sind, „Rechts“ bedeutet, dass schwebende Objekte auf der rechten Seite nicht erlaubt sind, „Keine“ bedeutet, dass schwebende Objekte auf beiden Seiten erlaubt sind und beide Seiten keine schwebenden Objekte haben dürfen. Die entsprechende CSS-Eigenschaft ist „clear“.

Padding: Definiert den Abstand zwischen dem Elementinhalt und seinem Rand (wenn das Element keinen Rand hat, bezieht es sich auf den Rand der Seite). Sie können die Werte oben (obere Polsterung), rechts (rechte Polsterung), unten (untere Polsterung) und links (linke Polsterung) festlegen. Die entsprechenden CSS-Eigenschaften sind „padding; padding-top; padding-right; padding-bottom; padding-left“.

Rand: Definiert den Abstand zwischen dem Rand des Elements und anderen Elementen (wenn kein Rand vorhanden ist, bedeutet dies den Abstand zwischen dem Inhalt). Sie können die Werte oben (oberer Rand), rechts (rechter Rand), unten (unterer Rand) und links (linker Rand) festlegen. Die entsprechenden CSS-Eigenschaften sind „margin; margin-top; margin-right; margin-bottom; margin-left“.

Das Folgende ist das Beziehungsdiagramm zwischen Polsterung, Rand und Rand:

5. Rand

Das Randbedienfeld kann die Breite, Farbe und den Stil des Objektrands festlegen.

Breite: Legen Sie die Breite der Elementseite fest. Sie können die Werte „Top“ (Breite oben), „Right“ (Breite rechts), „Bottom“ (Breite unten) bzw. „Left“ (Breite links) festlegen. Die entsprechenden CSS-Eigenschaften sind „border; border-top; border-right; border-bottom; border-left“.

Farbe: Legen Sie die Farbe des Rahmens fest. Sie können die Farbe für jede Kante einzeln einstellen. Die entsprechenden CSS-Eigenschaften sind „border-color; border-top-color; border-right-color; border-bottom-color; border-left-color“.

Hinweis: Durch die Einstellung verschiedener Farben können wir helle und dunkle Kanten erzeugen, sodass die Elemente dreidimensional wirken.

Stil: Legen Sie den Rahmenstil fest. Kann eingestellt werden auf „none“ (kein Rand), „dotted“ (gepunktete Linie), „dashed“ (gestrichelte Linie), „solid“ (durchgezogene Linie), „double“ (doppelte Linie), „Groove“ (Nut), „Ridge“ (konvexe Nut), „Inset“ (konkave Kante) , Outset (konvexe Kante) und andere Randstile. Die entsprechende CSS-Eigenschaft ist „border-style“.

Hinweis: Gepunktete (gepunktete Linie) und gestrichelte (gestrichelte Linie) müssen von IE5.5 oder höher oder der MAC-Plattform unterstützt werden, andernfalls ist der Effekt eine durchgezogene Linie.

6. Liste

Im Listenfenster können Sie den Stil, das Bild und die Position des Listenelements festlegen.

Typ: Legen Sie das Standard-Tag fest, das vom Listenelement verwendet wird. Die einstellbaren Stile sind: Scheibe (voller Kreis), Kreis (hohler Kreis), Quadrat (Quadrat), Dezimalzahl (arabische Ziffern), niederromanisch (römische Kleinbuchstaben), großromanisch (römische Großbuchstaben), unter -alpha (englische Kleinbuchstaben), Upper-Alpha (englische Großbuchstaben), none (keine Aufzählungszeichen). Die entsprechende CSS-Eigenschaft ist „list-style-type“.

Aufzählungsbild: Legen Sie das Bild des Listenelements fest. Der Wert ist die URL-Adresse oder der Pfad des Bildes. Die entsprechende CSS-Eigenschaft ist „list-style-image“.

Position: Legen Sie fest, ob sich das Listenelement innerhalb oder außerhalb des Textes befindet. Innen: Die Listenelementmarkierung wird innerhalb des Textes platziert. Außerhalb: Die Listenelementmarkierung wird außerhalb des Textes platziert. Die entsprechende CSS-Eigenschaft ist „list-style-position“.

7. Positionierung

Das Positionierungsbedienfeld entspricht dem Platzieren von Objekten in einer Ebene zur Positionierung. Es entspricht dem HTML-p-Tag. Sie können sich Definitionen als eine Ebene von CSS-Definitionen vorstellen.

Typ: Legen Sie die Positionierungsmethode des Objekts fest. Es gibt drei Methoden: Absolut (absolute Positionierung), Relative (relative Positionierung) und Statisch (keine spezielle Positionierung). Die entsprechende CSS-Eigenschaft ist „position“.

Sichtbarkeit: Legen Sie den anfänglichen Anzeigestatus der Objektpositionierungsebene fest. Es gibt drei Zustände: „Erben“ (Übernahme der Anzeigeeigenschaften der übergeordneten Ebene), „Sichtbar“ (das Objekt ist sichtbar) und „Ausgeblendet“. Die entsprechende CSS-Eigenschaft ist „visibility“.

Z-Index: Legen Sie die Stapelreihenfolge von Objekten fest. Ebenen mit höheren Nummern erscheinen über Ebenen mit niedrigeren Nummern. Variablenwerte können positiv oder negativ sein. Die entsprechende CSS-Eigenschaft ist „z-index“.

Überlauf: Legen Sie fest, wie verfahren werden soll, wenn der Inhalt der Ebene die Größe der Ebene überschreitet. Es gibt vier Verarbeitungsmethoden: sichtbar, wodurch die Größe der Ebene erhöht wird, sodass der gesamte Inhalt der Ebene ausgeblendet wird, wodurch die Größe der Ebene unverändert bleibt und der Inhalt über die Ebene hinaus abgeschnitten wird, was immer angezeigt wird; die Bildlaufleiste; Auto, wobei nur Bildlaufleisten angezeigt werden, wenn der Inhalt die Grenzen der Ebene überschreitet. Die entsprechende CSS-Eigenschaft ist „overflow“.

Platzierung: Legen Sie die Position und Größe der Objektpositionierungsebene fest. Sie können links (linke Positionierung), oben (obere Positionierung), Breite (Breite) und Höhe (Höhe) einstellen. Die entsprechenden CSS-Eigenschaften sind „left; top; width; height“.

Clip: Definiert den sichtbaren Bereich der Positionierungsebene. Der Teil außerhalb des Bereichs ist ein unsichtbarer Bereich und transparent. Dies kann als der Effekt verstanden werden, der durch das Platzieren einer rechteckigen Maske auf der Positionierungsebene entsteht. Die entsprechende CSS-Eigenschaft ist „clip“.

Hinweis: Dieser Parameter ist nur bei absoluter Positionierung gültig.

Hinweis: Wenn in Typ die absolute Positionierung festgelegt ist, wird dem Objekt eine absolute Positionierungsebene hinzugefügt. Die durch dieses CSS erstellte Ebene verfügt über ein Eigenschaftenfenster wie eine normale Ebene und wird auch im Ebenenverwaltungsfenster angezeigt. Sie können die oben genannten Parameter ändern, indem Sie das Eigenschaftenfenster dieser Positionierungsebene festlegen. Der in diesem Eigenschaftsfenster geänderte Wert wird jedoch als Inline-Stil nach dem Objekt-Tag hinzugefügt. Das folgende Bild zeigt das Eigenschaftenfenster der Positionierungsebene:

8 . Erweiterungen (Erweiterungen)

Seitenumbruch: Erzwingen Sie beim Drucken Seitenumbrüche vor und nach dem stilgesteuerten Objekt.

Vorher: Legen Sie das Seitentrennzeichen fest, das vor dem Objekt angezeigt wird. Bei der Einstellung „Immer“ wird immer ein Seitentrennzeichen vor dem Objekt eingefügt. Die entsprechende CSS-Eigenschaft ist „page-break-before“.

Nachher: ​​Das Seitentrennzeichen, das nach dem Festlegen des Objekts angezeigt wird. Bei der Einstellung „Immer“ werden Seitenumbrüche immer nach dem Objekt eingefügt. Die entsprechende CSS-Eigenschaft ist „'>.

Hinweis: Der obige IE5 unterstützt nur immer Werte und Leerwerte (null).

Cursor: ändert sich, wenn die Maus über das von gesteuerte Objekt gleitet Der Stil Mausform kann auf Hand (Handtyp), Fadenkreuz (Typ „Zehn“), Text (Typ „I“), Warten (Warten), Standard (Standard), Hilfe (Hilfe) und E-Resize ( Ostpfeil), ne-resize (Nordostpfeil), n-resize (Nordpfeil), nw-resize (Nordwestpfeil), w-resize (Westpfeil), sw-resize (Südwestpfeil), s-resize (Südpfeil). ), se -resize (Südostpfeil) und auto (automatisch)

.Filter: Filtereffekte zum Stil hinzufügen. Da dieses Attribut viel Inhalt hat, werden wir Filter im nächsten Kapitel separat vorstellen.

2. Filter

CSS bietet einige integrierte Multimedia-Filtereffekte. Mit dieser Technologie können Sie einem Standard-HTML-Element wie Bildern, Textcontainern usw. visuelle Filter und Transformationseffekte hinzufügen. und andere Gegenstände. Dreamweaver4 bietet 16 Filter zur Auswahl, wie unten gezeigt:

Als Nächstes schauen wir uns an, wie Sie diese CSS-Filter bequem in Dreamweaver4 verwenden können.

Erstellen Sie einen benutzerdefinierten Stil „.filter“, wählen Sie den Alpha-Filter im Dropdown-Feld „Filter“ aus, wir werden „Alpha(Opacity=?, FinishOpacity=?, style=?, StartX=?, StartY=“ verwenden ? , FinishX=?, FinishY=?)“ setzen Sie den Parameter „Deckkraft“ auf 50 und löschen Sie alle nachfolgenden Parameter, wie unten gezeigt:

Nach dem Drücken von „OK“ wird ein benutzerdefinierter Stil „.filter“ erstellt. Wir Wenden Sie diesen Stil auf ein Bild an und das Bild wird halbtransparent. Wenn Sie diesen Stil auf eine Tabelle anwenden, wird die Tabelle ebenfalls halbtransparent. Beachten Sie, dass alle Filtereffekte nur im Browser sichtbar sind. Das Folgende ist der Originalcode:



Hinweis: In diesem Beispiel haben wir nicht die folgenden Parameter verwendet, sondern nur den Parameter „Deckkraft“. Andere Parameter löschen.

Lassen Sie uns die Effekte und Parameter jedes Filters erklären:

1. Alpha: Transparenz festlegen

Alpha(Opacity=?, FinishOpacity=?, style=? , StartX= ?, StartY=?, FinishX=?, FinishY=?)

Deckkraft: Transparenzstufe, Bereich ist 0-100, 0 steht für völlig transparent, 100 steht für völlig undurchsichtig.

FinishOpacity: Beim Festlegen des Transparenzeffekts des Farbverlaufs wird damit die Transparenz am Ende angegeben. Der Bereich liegt ebenfalls zwischen 0 und 100.

Stil: Legen Sie den Stil der Verlaufstransparenz fest. Ein Wert von 0 steht für eine gleichmäßige Form, 1 für eine lineare Form, 2 für eine radiale Form und 3 für ein Rechteck.

StartX und StartY: stellen die Start-X- und Y-Koordinaten des Verlaufstransparenzeffekts dar.

FinishX und FinishY: stellen die X- und Y-Koordinaten des Endes des Verlaufstransparenzeffekts dar.

2. BlendTrans: Ein- und Ausblendeffekt zwischen Bildern

BlendTrans(Dauer=?)

Dauer: Ein- oder Ausblendzeit.

Hinweis: Dieser Filter muss mit JS verwendet werden, um eine Bildsequenz zu erstellen, um Effekte zwischen Bildern zu erzeugen.

3. Unschärfe: Einen Unschärfeeffekt erzeugen

Unschärfe(Hinzufügen=?, Richtung=?, Stärke=?)

Hinzufügen: Ob in eine Richtung verwischt werden soll Parameter ist ein boolescher Wert, wahr (nicht 0) oder falsch (0).

Richtung: Legen Sie die Richtung der Unschärfe fest, wobei 0 Grad vertikal nach oben steht und alle 45 Grad eine Einheit darstellen.

Stärke: stellt den unscharfen Pixelwert dar.

4. Chroma: Setzt die angegebene Farbe auf transparent

Chroma(Color=?)

Farbe: bezieht sich auf die Farbe, die als transparent eingestellt werden soll.

5. DropShadow: Erstellen Sie einen Schatteneffekt

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Farbe: Geben Sie die Farbe an der Schatten.

OffX: Gibt den horizontalen Versatz des Schattens relativ zum Element an, eine Ganzzahl.

OffY: Gibt den vertikalen Versatz des Schattens relativ zum Element an, eine ganze Zahl.

Positiv: Es handelt sich um einen booleschen Wert. Wenn der Wert wahr (nicht 0) ist, bedeutet dies, dass er einen äußeren Schatten erzeugt.

6. FlipH: Drehen Sie das Element horizontal

7. FlipV: Drehen Sie das Element vertikal

8 (Farbe=?, Stärke=?)

Farbe: Gibt die Farbe des Lichts an.

Stärke: Die Intensität des Lichts, die eine beliebige ganze Zahl zwischen 1 und 255 sein kann. Je größer die Zahl, desto größer die Reichweite des Lichts.

9. Grau: Die Farbe des Bildes entfernen und als Schwarzweißbild anzeigen

10. Invertieren: Die Farbe des Bildes umkehren, um einen filmähnlichen Effekt zu erzeugen

11. Licht: Der Effekt der Platzierung einer Lichtquelle, der verwendet werden kann, um den Projektionseffekt einer Lichtquelle auf ein Objekt zu simulieren

Hinweis: Für diesen Effekt muss JS die Position und Intensität festlegen des Lichtes.

12. Maske: Erstellen Sie eine transparente Maske

Maske (Farbe=?)

Farbe: Legen Sie die Hintergrundfarbe fest, um den Teil des Objekts, der den Hintergrund bedeckt, transparent zu machen.

13. RevealTrans: Umschalteffekt erstellen

RevealTrans(Duration=?, Transition=?)

Dauer: ist die Umschaltzeit in Sekunden.

Übergang: Dies ist die Umschaltmethode und kann von 0 bis 23 eingestellt werden.

Hinweis: Wenn Sie zwischen Seiten wechseln möchten, können Sie im Bereich eine Codezeile hinzufügen: . Wenn die Elemente auf der Seite verwendet werden, müssen sie mit JS verwendet werden.

14. Schatten: Einen weiteren Schatteneffekt erstellen

Schatten (Farbe=?, Richtung=?)

Farbe: bezieht sich auf die Farbe des Schattens.

Richtung: Legt die Richtung der Projektion fest. 0 Grad bedeutet vertikal nach oben, und alle 45 Grad sind eine Einheit.

15. Welle: Welleneffekt

Welle(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Add: Gibt an, ob Zeigt das Originalobjekt an. 0 bedeutet, dass es nicht angezeigt wird, und nicht 0 bedeutet, dass das Originalobjekt angezeigt wird.

Häufigkeit: Stellen Sie die Anzahl der Schwankungen ein.

Lichtstärke: Stellen Sie die Lichtintensität des Welleneffekts zwischen 0 und 100 ein. 0 steht für die schwächste und 100 für die stärkste.

Phase: Der Startphasenwinkel der Welle. Prozentwert von 0 bis 100. (Zum Beispiel: 25 entspricht 90 Grad, während 50 180 Grad entspricht.)

Stärke: Stellen Sie die Amplitude des Wellenschwungs ein.

16. Röntgen: Umrisse des Bildes anzeigen, Röntgeneffekt

Hinweis: Bei der Verwendung von CSS-Filtern müssen Sie Elemente mit Bereichen wie Tabellen, Bilder usw. verwenden. Elemente ohne Bereiche wie Text und Absätze können keine CSS-Filter verwenden. Für solche Elemente können wir die Stile „Höhe“ und „Breite“ oder die Koordinaten der Elemente festlegen, um dies zu erreichen.

Sehen Sie sich das Beispiel unten an. Wir erstellen einen Schlagschatteneffekt (dropshadow) auf einer Textzeile, erstellen einen neuen benutzerdefinierten style.shadow und wählen „DropShadow(Color=?, OffX=?, OffY=?“). ,) im Filter-Dropdown-Feld. Wir setzen es auf „DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)“. Wenn wir dann den definierten Stil auf die Seite anwenden, stellen wir fest, dass der Text in der Tabelle einen Schatten hat, der Text im Absatz jedoch keinen Schatten. Klicken Sie im Bedienfeld „CSS-Stile“ auf die Schaltfläche „Stylesheet bearbeiten“ und fügen Sie dem Stil das Attribut „Höhe“ hinzu:

Um die Höhe des Originalobjekts nicht zu beeinträchtigen, darf die von uns festgelegte Höhe die Höhe der Schriftart selbst nicht überschreiten . Nach OK sehen Sie im Browser, dass auch der Text im Absatz einen Schatten hat.

Das obige ist der detaillierte Inhalt vonCSS-Tutorial (6) Detaillierte Erläuterung der CSS-Eigenschaften in DW4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!