Eine vorläufige Untersuchung der CSS (Attribute) von HTML

CSS (Cascading Style Sheets)

CSS ist eine Computersprache, die zum Ausdrücken von Dokumentstilen wie HTML oder XML verwendet wird. CSS kann Webseiten nicht nur statisch ändern, sondern auch mit verschiedenen Skriptsprachen zusammenarbeiten, um Webseitenelemente dynamisch zu formatieren.

CSS kann eine pixelgenaue Steuerung des Layouts von Elementpositionen in Webseiten ermöglichen, unterstützt nahezu alle Schriftgrößenstile und bietet die Möglichkeit, Webseitenobjekte und Modellstile zu bearbeiten.

CSS-Größenattribut (Dimension)

height Legt die Höhe des Elements fest
width Legt die Breite des Elements fest
max-height Legen Sie die maximale Höhe des Elements fest
max-width legt die maximale Breite des Elements fest
min-height legt die minimale Höhe des Elements fest
min-width legt die minimale Breite des Elements fest

CSS-Hintergrundeigenschaft (Background)

background Legt alle Hintergrundeigenschaften in einer Anweisung fest
background-color Legt die Hintergrundfarbe des Elements fest
background-image Legen Sie das Hintergrundbild des Elements fest

background-position Legen Sie die Position des Hintergrundbilds fest

oben oben

rechts rechts

links links

Mitte Mitte

Hintergrundwiederholung Legen Sie den Hintergrund fest. So wiederholen Sie Bilder

Wiederholen, alle wiederholen

Wiederholen-x, horizontal wiederholen

Wiederholen-y vertikal wiederholen

no-repeat nicht wiederholen
background -attachment Ob das Hintergrundbild beim Scrollen der Seite scrollt

CSS-Rahmeneigenschaften (Rand und Umriss)

Eigenschaften

Beschreibung

border Alle Randeigenschaften festlegen

border-bottom Legen Sie fest unterer Rand

border-bottom-color Legt die Farbe des unteren Randes fest

border-botton-style Legt den Stil des unteren Randes fest

border-botton-width Legt die Breite fest des unteren Randes

border-color Legt die Farbe der vier Ränder fest

border-left Legt den linken Rand fest

border-left-color Legt die Farbe des linken fest border

border-left-style Legt den Stil des linken Randes fest

border-left -width Legt die Breite des linken Randes fest

border-right- Legt den rechten Rand fest border

border-right-color Legt die Farbe des rechten Randes fest

border-right-style Legt den Stil des rechten Randes fest

border-right-width Legt die Breite von fest der rechte Rand

border-style Legen Sie den Stil der vier Ränder fest

solid Der Stil ist eine durchgezogene Linie

double Doppelte durchgezogene Linie (die Breite beträgt 1 Pixel, der Effekt ist unsichtbar)

dottde Gepunktete Linie (erscheint als durchgezogene Linie unter IE6/7)

gestrichelte gepunktete Linie (erscheint als durchgezogene Linie unter IE6/7)

border- top Legt den oberen Rand fest

border-top-color Legt die Farbe des oberen Rands fest

border-top-style Legt den Stil des oberen Rands fest

border-top -width Legt die Breite des oberen Rands fest

border-width Legt die Breite der vier Ränder fest

outline Legt alle Umrissattribute fest

outline-color Legt die Farbe des fest Umriss

outline-style Legen Sie den Stil des Umrisses fest

outline-width Legen Sie die Breite des Umrisses fest

border-bottom-left-radius Definieren Sie die Form des unteren Teils linke Ecke des Rahmens

border-bottom-right-radius Definieren Sie die Form der unteren rechten Ecke des Rahmens

border-top-left-radius Definieren Sie die Form der oberen linken Ecke des Rahmens

border-top-right-radius Definieren Sie die obere rechte Ecke des Rahmens. Form

border-radius Kurzschriftattribut, legen Sie alle vier border-*-radius-Attribute fest

border-image Kurzschriftattribut, legt alle border-image-*-Attribute fest

border-image-outset Gibt die Größe des Randbildbereichs jenseits des Randes an

border-image-repeat Ob das Bild soll wiederholt, abgerundet oder gestreckt werden

border-image-slice Gibt den Innenversatz des Bildrandes an

border-image-width Gibt die Breite des Bildrandes an

border-image-source Gibt das als Rahmen verwendete Bild an

box-shadow Fügen Sie einen oder mehrere Schatten zum Feld hinzu

CSS-Schriftattribut ( Schriftart)

Eigenschaft

Beschreibung

font Alle Schriftarteigenschaften festlegen

font-family Die Schriftfamilie des Textes festlegen

font-size Die Schriftgröße festlegen des Textes

font-size-adjust Gibt den Aspektwert für das Element an

font-stretch Verkleinert oder streckt die aktuelle Schriftfamilie

font-style Legt den Schriftstil fest des Textes

font-variant Legen Sie die Öffnungsmethode für chinesischen und englischen Text fest

font-weight Legen Sie die Textdicke fest

text-align Legen Sie die Ausrichtung des Textes fest

center Mitte links Ausrichten links rechts Ausrichten rechts

letter-spacing Textabstand festlegen

text-decoration Textdekorationslinie festlegen

none Wird hauptsächlich zum Entfernen der Unterstreichung verwendet eines Tags

underline Underline

overline overline

durchgestrichene durchgestrichene Linie

Hinweis: Wenn ein untergeordnetes Element innerhalb eines anderen Elements (übergeordnetes Element) platziert wird Wenn Sie die Textdekoration auf das übergeordnete Element festlegen, wird festgestellt, dass die Textdekoration des untergeordneten Elements nicht gelöscht werden kann.

Lösung:
1. Verwenden Sie die absolute Positionierungsposition: ansolute
2

Texttransformationseinstellung Groß-/Kleinschreibung

Großbuchstaben Alle Wörter sind in Großbuchstaben geschrieben

Kleinbuchstaben Alle Wörter sind in Kleinbuchstaben geschrieben

Großschreibung Schreibe den ersten Buchstaben groß

Schriftstil Textstil festlegen

normal normal

kursiv kursiv

schräger schräger Text

font-variant legt die Öffnungsmethode des Textes fest Chinesisch und Englisch

normal normal

kleine englische Programmierung wird großgeschrieben und in kleiner Schriftgröße angezeigt

CSS-Textattribut (Text )

Attribute

Beschreibung

Farbe Legen Sie die Farbe des Textes fest

Richtung Geben Sie die Richtung an /Schreibrichtung des Textes

letter-spacing Zeichenabstand festlegen

line-height Zeilenhöhe festlegen

text-align Legt die horizontale Ausrichtung des Texts fest

vertikal-align Geben Sie die vertikale Ausrichtung des Texts an

text-decoration gibt den dekorativen Effekt an, der dem Text hinzugefügt wird

text-indent gibt die Einrückung der ersten Textzeile an

tex-transform steuert die Groß-/Kleinschreibung von Text

unicode-bidi Setzt die Textrichtung

white-space Gibt an, wie Leerraum in Elementen behandelt werden soll

word-spacing Legt den Wortabstand fest

CSS-Tabelleneigenschaften ( Tabelle）

Eigenschaften

Beschreibung

border Rahmen festlegen

border-color Rahmenfarbe festlegen

cellspacing Breite des Tabellenrahmens festlegen

cellpadding Abstand zwischen den Daten und dem Rahmen festlegen

Hintergrundfarbe Legen Sie die Hintergrundfarbe der Tabelle fest

Hintergrund-URL-Einstellungen Hintergrundbild der Tabelle

colspan Zellen horizontal zusammenführen

rowspan Zellen zusammenführen vertikal

Vier Schritte zum Zusammenführen von Zellen

1. Bestimmen Sie den Startpunkt der Zellen. Welche Zelle beginnt mit dem Zusammenführen
2. Bestimmen Sie, ob die Zellen vertikal oder horizontal zusammengeführt werden 3. Bestimmen Sie, wie viele Zellen müssen zusammengeführt werden 4. Verarbeiten Sie die redundanten Zellen

CSS-Listenattribut (Liste)

Eigenschaft

Beschreibung

list-style Alles in einer Anweisung festlegen Die Listenattribute

list-style-image Legen Sie das Bild als Listenelementmarkierung fest

list-style-position Legen Sie die Platzierungsposition der Listenelementmarkierung fest

inside Platzieren Sie den Listenstil im Inhalt

außen Standardmäßig befindet sich der Listenstil nicht im Inhalt , normalerweise in psdding

list-style-type Legen Sie den Typ der Listenelementmarkierung fest

Zusammengesetzte Schrift

list-style 1. Typ 2. Position 3. Bild

Standardstil löschen

padding: 0px;

margin:0px;

list-style:none;

CSS-Marginattribut (Margin)

Attribut

Beschreibung

margin Legen Sie alle Margin-Eigenschaften in einer Anweisung fest

margin-top Legt den oberen Rand des Elements fest

margin-right Legt den rechten Rand des Elements fest

margin-bottom Legt den unteren Rand des Elements fest

margin-left Legt den linken Rand des Elements fest

CSS-Auffülleigenschaft (Padding)

Eigenschaft

Beschreibung

padding Legt alle Padding-Eigenschaften in einer Deklaration fest

padding-top Legt die obere Polsterung des Elements fest

padding-right Legt die rechte Polsterung des Elements fest

padding-bottom Legt die untere Polsterung des Elements fest

padding-left Legt den linken Abstand des Elements fest

CSS-Positionierungsattribut (Positionierung)

Attribute

Beschreibung

Position gibt den Positionierungstyp des Elements an

unten legt den Versatz zwischen der unteren Randgrenze des positionierten Elements und der unteren Grenze seines enthaltenden Blocks fest

rechts Legt den Versatz zwischen der rechten Randkante des positionierten Elements und der rechten Kante seines enthaltenden Blocks fest.

links Legt den Versatz zwischen der linken Randkante des positionierten Elements und der linken Kante von fest sein enthaltender Block

top Set Der Versatz zwischen der oberen Randgrenze des positionierten Elements und der oberen Grenze seines enthaltenden Blocks

overflow Gibt an, was passiert, wenn der Inhalt über die Elementbox

hinausläuft

cursor Gibt die Art des anzuzeigenden Cursors an

float gibt an, ob die Box schweben soll

display gibt die Art der Box an, die das Element erzeugen soll

vertikal- align legt die vertikale Ausrichtung des Elements fest

visibility gibt an, ob das Element sichtbar ist

z-index Legt die Stapelreihenfolge der Elemente fest

CSS-Pseudoklassen (Pseudoklassen)

Attribute

Beschreibung

: aktiv Stil zum aktivierten Element hinzufügen

: Fokus Tastatureingabefokus geben Dem Element einen Stil hinzufügen

: hover Wenn sich die Maus über dem Element befindet, fügen Sie dem Element einen Stil hinzu

: link Einen Stil zu einem nicht besuchten Link hinzufügen

: besuchte Stil zum besuchten Link hinzufügen

: lang Stil zum Element mit dem angegebenen lang-Attribut hinzufügen

CSS für das Element (Pseudoelemente)

Eigenschaft

Beschreibung

: erster Buchstabe Spezielle Stile zum ersten Buchstaben des Texts hinzufügen Stile

: erste Zeile Spezielle Stile zur ersten Textzeile hinzufügen

: bofore Inhalt vor dem Element hinzufügen

: after Inhalt nach dem Element hinzufügen

Fazit

Einfachheit geht nicht der Komplexität voraus, sondern kommt nach der Komplexität

Für Weitere verwandte Artikel zu CSS (Eigenschaften) in HTML finden Sie auf der chinesischen PHP-Website!