HTML/CSS von Grund auf – gemeinsame Attribute (3)

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
klein:13px
mittel:16px
groß:19px
x-groß:23px
xx-groß:27px

(2) Schriftfarbe

{Farbe: rbg250,250,250/#000000/rot;}

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

Der Browser interpretiert es entsprechend der Schriftart
Hinweis: Wenn der Schriftartname auf Chinesisch ist, fügen Sie doppelte Anführungszeichen hinzu: „Microsoft Yahei“ muss nicht hinzugefügt werden: Arial; auf Englisch Anführungszeichen hinzufügen: „Times New Romen“;

(4) Fettschrift {font-weight:;}

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

(5) Textneigung

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

(6) Horizontale Ausrichtung

{text-align:left/center/right/justify(beide Enden ausrichten);🎜>

(7) Vertikale Ausrichtung

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

(8) Textzeilenhöhe

{line-height:normal/value;}

Zeilenhöhe messen: vom oberen Rand dieser Textzeile bis zum oberen Rand der nächsten Textzeile;
Einzelne Textzeile: Wann Zeilenhöhe = Containerhöhe, vertikale Zentrierung; Zeilenhöhe < Vertikal nach oben, wenn der Container hoch ist

Beschreibung: Schriftart-Abkürzungsreihenfolge: Schriftart Schriftart-Größe/Zeilenhöhe Schriftart-Familie; ";}


(9) Textänderung

{text-decoration:none/underline (unterstrichen)/overline (unterstrichen)/durchgestrichen (durchgestrichen hinzufügen)}

Erweiterung: Durchgestrichen hinzufügen

(10) Einrückung der ersten Zeile

{text-indent:value;}Wert ist die Anzahl der Wörter. Die Einheit ist: em;

Text-indent ist ein negativer Wert, vorwärts

Funktioniert nur in der ersten Zeile von Text


(11) Wortabstand

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

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


2. Rand

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

3. CSS-Listenattribute

(1) Symbolstil auflisten

{list-style-type:disc(solider Kreis)/circle(hohler Kreis)/squrare(hohle quadratische Breite)/none(Listensymbol entfernen);} {list-style-type:none}Gleich Im {list-style;none;}

(2) Bilder als Listensymbole

{list-style-image:url();}

(3) Listensymbolposition definieren

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

(4) Listensymbole entfernen

{list-style:none;}

4. Hintergrundattribute

(1) Hintergrundfarbe {background-color: value;} (2) Hintergrundbild {background-image: url (path);}

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

(4) Hintergrundbild behoben {background-attachment: scroll (scrollen) /fixed( fest);🎜>(5) Hintergrundposition: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 behoben #f00;}
                                                                                                                                         }


5. Häufig verwendete Bildformate auf Webseiten

(1) JPG: verlustbehafteter Komprimierungsverlust, geeignet für Bilder mit satten Farben

(2) GIF: verlustbehafteter Komprimierungsverlust, Farbunterstützung, Transparenz, Animation, geeignet für Bilder mit weniger Farbe (3) PNG : Verlust Das Bild hat weniger Farbe, unterstützt keine Animationen und ist ein Feuerwerk. Hinweis: Es ist ein hoher Speicherbedarf für PNG und ein höherer Speicherbedarf für GIF erforderlich

6. Float (vertikale Elemente horizontal anordnen)

{float:left/right/none}
(1) Clear float {clear:left/right/both;}
Erklärung: Das Element nach dem Floating wird vom Dokumentenfluss getrennt und darüber schwebend . Wenn das Element vor Ihrem schwebenden Element ein Element im Standardfluss ist (ohne schwebendes Element)
Die Position des Elements nach dem schwebenden Element hängt vom Browser ab und die nicht schwebenden Elemente hinter dem schwebenden Element werden hineingequetscht die ursprüngliche Position des schwebenden Elements.
(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 schwebend ist
Lösung: (1) Fügen Sie ein leeres eine Anweisung div{clear:both;}
für dieses div (2) Fügen Sie eine Anweisung zum übergeordneten Element in CSS hinzu, div{overflow:hidden;}

7. Box-Modell

1. Definition: Wie Webseitenelemente angezeigt werden und ihre Beziehung zueinander.
Rand-Randfüller-Inhaltsbereich

2. Polsterung (Padding)
(1) Polsterung: Polsterung ist der Abstand zwischen dem Inhalt eines Elements in einem Element auf der Seite und dem Rand (Rand) des Elements, Polsterung
(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 Füllattribut wird dem übergeordneten Element hinzugefügt
Über ob der Füllwert reduziert werden kann? Weniger Problem?
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;}
Aufteilung: {padding-top/right/bottom/left:value;}

2. Rand

(1) Rand: Rand ist der leere Bereich außerhalb des Elements auf der Einstellungsseite;

(2) Das Randattribut wird dem untergeordneten Element hinzugefügt 
(3) Syntax:
Vier Werte: {margin: oben rechts unten links;}
Ein Wert: {margin: 20px}={padding:20px 20px 20px 20px;}
Zwei Werte: {margin: 20px 30px;}= {padding: 20px 30px 20px 30px;} ;}