Zusammenfassung der grundlegenden CSS-Stile für die Web-Frontend-Entwicklung

Verwendung von Farben und Einheiten

1. Farbe
   • Verwenden Sie den Namen der Farbe, um die Farbe anzugeben, z. B.: Rot
   • Verwenden Sie Hexadezimalzahl, um die Demonstration darzustellen, zum Beispiel: #FF0000
   • Verwenden Sie numerische RGB-Werte zur Darstellung von Farben, RGB (Rot, Grün, Blau), jeder Wert liegt zwischen 0 und 255
     Im Allgemeinen wird Hexadezimal zur Darstellung von Farben verwendet
2. Einheit
   • px: Pixel, bezogen auf die Auflösungseinstellung.
   • % ist relativ zum Prozentsatz des Browsers. Die Breite kann eingestellt werden, aber die Höhe kann nicht eingestellt werden

Textstil (Text)

1. Farbe: Textfarbe festlegen
2. text-align: Textausrichtung festlegen
   • Mitte
   • links
   • richtig
3. letter-spacing: Wortabstand/Buchstabenabstand
4. Wortabstand: Wortabstand, legen Sie fest, ob Leerzeichen vorhanden sind, siehe Leerzeichen für Chinesisch.
5. Zeilenhöhe: Zeilenhöhe (Zeilenhöhe der zweiten Zeile = Unterkante der ersten Zeile bis Oberkante der dritten Zeile)
6. Texteinzug: normalerweise 2 für 30 Pixel
7. Textdekoration: Textdekoration
   • unterstreichen: unterstreichen
   • overline: overline
   • durchgestrichen: durchgestrichen
   • Blitz blinken (kann nicht verwendet werden)
8. text-transform: Fallkonvertierung
   • Großbuchstaben: alle Großbuchstaben
   • Kleinbuchstaben: alle Kleinbuchstaben
   • Großschreibung: Jedes Wort beginnt mit einem Großbuchstaben
9. Textschatten: Erstellen Sie einen Textschatten (horizontaler Versatz in Pixel, vertikaler Versatz in Pixel, Unschärfegrad in Pixel, Schattenfarbe). Je höher der Unschärfegrad in Pixel, desto verschwommener ist er.
10. Schriftart festlegen:

• Schriftstil: Schriftstil kursiv, schräg kursiv
• Schriftgröße: Legen Sie die Schriftgröße fest
• Schriftstärke: Legen Sie die Stärke der Schriftart fest, fetter ist am dicksten
• Schriftfamilie: Legen Sie Textschriftarten, normale Schrift, offizielle Schrift usw. fest.
• Font-Abkürzungsattribut: Die Reihenfolge der Stilgewichts- und Größenfamilie (Leerzeichen) muss in der Regel in diesem Format erfolgen, nachdem das Abkürzungsattribut verwendet wurde, sonst wird es überschrieben

Ränder und Hintergründe

Wenden Sie einen Rahmen auf ein Element an
1. Rahmenbreite: Rahmenbreite
   Rahmenstil: Rahmenstil
   • keine kein Rand
     gestrichelte gestrichelte Linie
     durchgezogene durchgezogene Linie
     doppelte Doppellinie
     Rillenrillenlinie
     gepunktete Punktliniengrenze
     Einsatz Eingebetteter anfangs konvexer
     Kammkammrand
     
   bolder-color: Rahmenfarbe
   Abgekürzte Form Grenze:Breite Stil Farbe in keiner Reihenfolge
Legen Sie individuell einen bestimmten Rand fest
2. Rand oben/unten/links/rechts-Breite/Stil/Farbe
   Kurzform: border-top{width,style,color}
Wenden Sie einen abgerundeten Rand an (x-Radius, y-Radius, schreiben Sie einfach einen, wenn xy gleich ist)
3. Rand-oben/unten-links/rechts-Radius
   Abkürzung: border-radius
Elementhintergrund festlegen
4. Rand rechts: 0 Pixel; Rand unten: 0 Pixel; padding-right: 0px; padding-bottom: 0px; disc;">background-image:{url("")} Hintergrundbildadresse
   Hintergrundwiederholung: Methode zur Wiederholung von Hintergrundbildern, im Allgemeinen keine Wiederholung
   Hintergrundgröße: Hintergrundbildgröße
   Hintergrundposition: Hintergrundbildposition
   Abkürzung: Hintergrund: Farbbildwiederholungsposition. Wenn die Größe nicht angegeben wird, kommt es zu Konflikten
Boxschatten erstellen
5. box-shadow: horizontaler Versatz, vertikaler Versatz, Unschärfewert, Schattenerweiterungsradius, Schattenfarbe 10 Pixel, 10 Pixel, 5 Pixel, 0 Pixel, Rot;
   Um mehrere Schatten hinzuzufügen, schreiben Sie den zweiten direkt mit einem Komma nach dem ersten. Setzen Sie den ersten auf eine ganze Zahl und den zweiten Schatten auf eine negative Zahl.
Gliederung festlegen
6. Der Unterschied zwischen Rahmen und Umrissen: Umrisse gehören nicht zur Seite und das Layout der Seite wird durch die Anwendung von Umrissen nicht angepasst
   Der Rand nimmt die tatsächliche Größe ein, der Umriss jedoch nicht
   Wenn der Hover eingestellt ist, wird das umrissmodifizierte Div nicht verschoben, aber das randmodifizierte Div wird verschoben
   Umrissfarbe: Umrissfarbe
   Umrissstil: Umrissstil
   Umrissbreite: Umrissbreite
   outline-offset: Versatz des Umrisses vom Elementrand
   Abkürzung: Gliederung

Andere Stile (Tabelle, Liste, Transparenz, Cursor)

Formular
1. border-collapse angrenzende Zellrandverarbeitung, merge table=collapse
   Grenzabstand: Abstand zwischen benachbarten Zellen
   Bildunterschrift: Titelposition
   empty-cells: Ob leere Zellen angezeigt werden sollen
2. Liste
   list-style-tyle: Der Markierungsstil am Anfang der Liste, runde Punkte, quadratische Punkte usw.
   list-style-image: Listenbild-Tag
   Abkürzung: list-style:none hebt alle Attribute der Liste auf und wird allgemein zur Navigation verwendet
   Horizontale Navigation: li{display:inline}
3. Transparenz
   Deckkraft: Transparenz festlegen (Wert zwischen 0 und 1)
4. Cursorform
   Cursor: Legen Sie die Cursorform fest. Wenn der Cursor auf einem bestimmten Div platziert wird, legen Sie den Wartezustand, die Handform usw. fest.

Box-Modell

Das Boxmodell ist in Elemente, Polsterung, Ränder und Ränder unterteilt,

1. Elemente einer bestimmten Größe festlegen

<code class="hljs groovy"><span class="hljs-number">1). <span class="hljs-string">width:设置元素宽度
<span class="hljs-number">2). <span class="hljs-string">height:设置元素高度</span></span></span></span></code>

2. Polsterung einstellen

• Polsterung oben/unten/rechts/links
• Auffüllung: Abkürzung

3. Legen Sie den Rand fest (den Abstand vom Rand zum Rand des Browsers oder zum nächsten Feld)

• Rand oben/unten/links/rechts
• Rand: Abkürzung

4. Legen Sie die minimale und maximale Größe fest (wenn die Breite auf einen Prozentsatz eingestellt ist, nach dem Erweitern oder Verkleinern des Browsers oder dem Wechsel zu einem großen oder kleinen Bildschirm, verhindern Sie, dass Elemente falsch ausgerichtet werden oder überlaufen)

• Mindestbreite: Der Mindestwert ist die Summe der Breiten der beiden Divs
• max-width: Maximalwert

5. Behandeln Sie den Überlauf von Elementinhalten

• overflow-x/y: Überlauf der x- oder y-Achse
• Überlauf: Abkürzung: Bildlauf legt die Bildlaufleiste fest (Überlaufverarbeitungsmethode)

6. Elementtyp ändern

1). Elementtypen sind unterteilt in:

• Inline-Element: Die Breite und Höhe können auf der Seite nicht festgelegt werden und es belegt keine Zeile, b, span
• inline-block Inline-Block-Level-Element: kann keine Zeile belegen, kann aber die Breite und Höhe des .img-Elements festlegen
• Blockelement auf Blockebene: belegt eine exklusive Zeile und kann Breiten-, Höhen-, P- und Div-Elemente festlegen

2).Anzeige des Elementtyps ändern:

• Elementtypen können ineinander konvertiert werden, und auch die Eigenschaften der Elemente ändern sich nach der Konvertierung
• divs werden im Allgemeinen nicht in Inline-Elemente konvertiert und gehen verloren und können nicht hoch gesetzt werden

3). Verstecktes Element: display:none

7. Schwebende und blockierende Elemente beim Stapeln

• float:float:left/right
• Eliminieren Sie zusammengestapelte Elemente: clear:both (eliminieren Sie sowohl links als auch rechts)

8. Fall:

Baidu-Seite erstellen:

• Tipp: Um das Div zu zentrieren, direkt margin: 0 auto;
• Um zunächst keine Browser-Standardfunktionen zu implementieren: *{margin:0px padding:0px}
• Um zu verhindern, dass der Div-Block überläuft, legen Sie die Maximal- und Minimalwerte fest. Der Minimalwert ist die Summe der linken und rechten Divs
• Vertikaler Text zentrieren: Zeilenhöhe
• Für die Navigation fügen Sie dem Link ein Tag außerhalb des li-Tags hinzu

Layoutstil

1. Positionierungsmethode Position

• statisch: Standardmäßig sind die Elemente normale Elemente, Dokumentenflusspositionierung von oben nach unten
• relativ: Die Position des Elements ist relativ zur normalen Position. Im Allgemeinen können keine großen Änderungen an der Position eines Elements vorgenommen werden ,Links Ich habe das Gefühl, dass er sich relativ zu seiner vorherigen Position bewegt hat

• fest (fest): relativ zum Browserfenster positioniert, häufig verwendet!!!, die Position wird vor der Verschiebung nicht eingenommen und kann nach oben, unten, links und rechts verwendet werden, Häufig verwendete Techniken für kleine Anzeigen, die Bildlaufleiste bewegt sich weiter und ihre Position ändert sich nicht vom Dokumentenfluss und schwebt über dem Dokumentenfluss sind relativ zu den Seiten. Beispiel: top50px bewegt sich nicht um 50px nach oben, aber das Einstellen der Schaltfläche auf einen Abstand von 50px vom oberen Rand kann auch verwendet werden, und das Ziehen der Bildlaufleiste ändert sich nicht die Position

• Absolut (absolut): Ein Vorfahrenelement, dessen relativer Positionswert nicht statisch ist. Das Vorfahrenelement kann nicht statisch sein, je nachdem, wer sich ändert ), tritt auf, wenn die Verschiebungspositionierung zwischen übergeordneten und untergeordneten Elementen oder Vorgängerelementen und untergeordneten Elementen erfolgt

  2. Positionierungslayout

  oben/unten/links/rechts

  3. Z-Index

  Wird verwendet, um die Anzahl der Anzeigeebenen von Elementen und Elementen festzulegen.
  Muss mit der Position verwendet werden

  Übergang, Transformation
  1. Übergang

  Übergang: Das Element wechselt allmählich von einem Stil zum anderen

  Attribut:
  
Übergangsverzögerung: Legen Sie die Verzögerung vor dem Übergang fest
Übergangsdauer: Übergangszeit festlegen
Übergangseigenschaft: Legen Sie die Eigenschaften der Übergangsteilnahme fest
Übergangszeitfunktion: Übergangsrate (lineare gleichmäßige Geschwindigkeit)
• Übergang: Kurzform (Eigenschaftsdauer-Timing-Funktionsverzögerung)
  Umgekehrter Übergang:
  Setzen Sie den Mauszeiger ein, fügen Sie es in das Div ein, und fertig ist es

2. Transformation

transformieren: Geben Sie an, wie
• transformiert werden soll
Transformation: ScaleX/Y(1.5) Skalierung 1,5-fach
Transformieren: Drehen (360 Grad) Die Drehung um 360 Grad stellt den Grad dar, und der Effekt ist mit der Übergangszeit sehr gut
Transformation: Neigungswinkel (X-Achsenwinkel, Y-Achsenwinkel) Neigungswinkel
Transformieren: Übersetzen (X-Achsen-Abstand, Y-Achsen-Abstand) Bewegungsdistanz