HTML/CSS von Grund auf – gemeinsame Attribute

1. CSS-Textattribute

(1) Textgröße {font-size:value;}

Einheit: pt:9pt=12px; Standardschriftgröße des Browsers ist 16px
em:1em=16px;
In CSS2.0
xx-small:9px
x-small:11px
small:13px
medium:16px
large:19 px
x-large:23px
xx-large:27px

(2) Schriftfarbe

{color: rbg250,250,250/#000000/red;}

(3)Textschriftart{font-family:"Font 1", "Font 2", "Font 3";}

Browser interpretiert nach Schriftart
Hinweis: Fügen Sie „double“ hinzu, wenn der Schriftartname „Chinese Quotation“ lautet Markierungen: „Microsoft Yahei“; ein einzelnes englisches Wort muss nicht hinzugefügt werden: Arial; wenn es Leerzeichen im Englischen gibt, fügen Sie Anführungszeichen hinzu: „Times New Romen“ (4) Fettschriftart {font -weight:;}

Attributwerte: normal/500 (normal); fett/600-900 (fett);

(5) Textneigung

{font-style :itatic (kursiv)/oblique (gekippter Text)/normal (Kursivschrift aufheben)}

(6) Horizontale Ausrichtung

{text-align:left/center/ rechts/ausrichten (beide Enden ausrichten);}

(7) Vertikale Ausrichtung

{vertical-align:top/bottom/middle;}

(8) Textzeile Höhe

{line-height:normal/value;}

Zeilenhöhe messen: vom oberen Rand dieser Textzeile bis zum oberen Rand der nächsten Textzeile;
Einzelne Zeile des Textes: Wenn Zeilenhöhe = Containerhöhe, vertikal zentriert; Zeilenhöhe
Beschreibung: Schriftartabkürzungssequenz: Schriftart, Schriftstärke, Schriftart -family; Microsoft Yahei";}
(9) Textdekoration

{text-decoration:none/underline (underline)/overline (underline)/line-through (addthrough)}

Erweiterung:

Durchgestrichen hinzufügen

(10) Einrückung der ersten Zeile

{text-indent:value;}

Wert ist ein Wort Zahleneinheit ist: em;

text-indent ist ein negativer Wert, vorwärts

funktioniert nur in der ersten Textzeile

(11) Wortabstand

{letter-spacing:value;}
Kontrollieren Sie den Abstand zwischen englischen Buchstaben und chinesischen Zeichen

Erweiterung: {word-break: break-all ;}=
Zeilenumbruch

2. Rand

{border-top/bottom/right/left:1px solid/dotted/dashed/double;}

3, CSS-Listenattribute

(1) Listensymbolstil

{list-style-type:disc(solid circle)/circle(hohlkreis)/squrare(hohle quadratische Breite)/none ( Entfernen Sie das Listensymbol). {list- style-image:url();}

(3) Position des Listensymbols definieren

{list-style-position:ouside/inside;}

( 4) Listensymbol entfernen

{list-style:none;}

4. Hintergrundattribut

(1) Hintergrundfarbe {background-color: value;}

(2 ) Hintergrundbild {background-image:url(path);}

(3) Hintergrundbildkachelung {background-repeat:no-repeat (keine Kachelung)/repeat (Kachel)/repeat-x (horizontale Kachelung ) /repeat-y (vertikale Kachel);}

(4) Hintergrundbild behoben {background-attachment: scroll (scrollen)/fixed (fixed);}

(5) Hintergrundbildposition {background-position: x y (Wert: 50px 50px; Richtung: rechts unten;)🎜> Die Richtungspositionen sind: horizontal (links/Mitte/rechts) vertikal (oben/Mitte/unten)

(6) Abkürzung: {background:url ( ) No-Repeat Center Top Fixed #f00;}
{background:url() No-Repeat Center 100px #f00 Scroll;}

5. Häufig verwendete Bildformate auf Webseiten

（ 1) jpg: verlustbehaftete Komprimierung verliert an Qualität und eignet sich für Bilder mit satten Farben
(2) gif: verlustbehaftete Komprimierung verliert an Farbe, unterstützt Transparenz und Animation eignet sich für Bilder mit weniger Farben
(3) PNG: verliert Bilder mit weniger Farbe, unterstützt keine Animation, unterstützt Transparenz, es ist ein Feuerwerk;

Hinweis: hohe Anforderungen für PNG-Speicher, höhere Anforderungen für GIF-Speicher, GIF verwenden, wenn kompatibel;

6. Float (vertikale Elemente horizontal anordnen lassen)

{float:left/right/none}
(1) Clear float {clear:left/right/both;}
Erklärung: Das Element danach Floating ist vom Dokumentfluss getrennt und wird darüber aufgehängt, wenn das Element vor Ihrem Float-Element ein Element im Standardfluss ist (ohne Floating).

Die Position des Elements nach dem Float hängt vom Browser ab Die nicht schwebenden Elemente hinter dem schwebenden Element werden in die ursprüngliche Position des schwebenden Elements gequetscht.

(2) Lösen Sie den Höhenkollaps

Höhenkollaps: Die resultierende Bedingung ist, dass das übergeordnete Element die Höhe nicht schreibt und das untergeordnete Element schwebt

Lösung: (1) Fügen Sie ein leeres
hinzu am Ende des schwebenden Elements
, schreibe eine Anweisung div{clear:both;}
für dieses div (2) Füge eine Anweisung zum übergeordneten Element in CSS hinzu, div{overflow:hidden;}

7. Box-Modell

1. Definition: Wie Webseitenelemente angezeigt werden und ihre Beziehung zueinander.
Randrand Auffüllung des Inhaltsbereichs

2. Auffüllung (Auffüllung)
(1) Auffüllung: Die Auffüllung erfolgt zwischen dem Inhalt eines Elements in einem Element auf der Einstellungsseite und dem Rand (Rand) von der Elementabstand, Füller;
(2) wird verwendet, um die Position des Inhalts im Container anzupassen
(3) wird verwendet, um die Position des untergeordneten Elements im übergeordneten Element anzupassen
(4) Das Padding-Attribut wird zum übergeordneten Element hinzugefügt. Betrifft die Frage, ob der Padding-Wert auf dem
-Ebenenelement reduziert werden soll oder nicht?
1. Subtraktion: Das übergeordnete Element hat keine Breite und Höhe
2. Keine Reduzierung: Das übergeordnete Element hat keine Breite und Höhe;
(5) Wie reduziert man?
Höhe – (oben unten);
3. Syntax:
Vier Werte: {padding: oben rechts unten links;}
Ein Wert: {padding: 20px } ={padding:20px 20px 20px 20px;} : 20px, 30px, 40px, 30px; außerhalb der Elemente auf der Seite;
(2) Das Randattribut wird den untergeordneten Elementen hinzugefügt.                               Ein Wert: {margin: 20px}={padding:20px 20px 20px 20px;}
Zwei Werte: {margin: 20px 30px;} = {padding: 20px 30px 20px 30px; /left:value;}