=======================
CSS-KaskadierungStylesheet
= ======================
Benennungsregeln: Verwenden Sie Buchstaben, Zahlen oder Unterstriche und Minuszeichen Zusammensetzung, nicht mit einer Zahl beginnen
1. CSS-Syntax
----------------- - -----------
Format: Selektor {Attribute:value;Attribute:value;Attribute:value;....}
Der Selektor wird auch Selektor
Die -Annotation in CSS: /* ... */
genannt
2. Wie man den CSS-Stil in HTML verwendet (die Art und Weise, CSS in HTML einzubetten); ------------------------------------
1. Inline-Modus (Inline-Stil)
Verwenden Sie einfach das style-Attribut im HTML-Tag, um den CSS-Stil festzulegen
Format: <
html tagstyle="attribute:value;attribute:value;. ..."> ;Geänderter Inhalt
in HTML So verwenden Sie den CSS-Stil in
Funktionen: Gilt nur für dieses Tag.
2. Interne Methode (eingebetteter Stil)
besteht darin, Tag zum Festlegen des CSS-Stils Format:
Funktionen: Gilt für die gesamte aktuelle Seite
3. Externe Importmethode (externer Link in)
3.1 (empfohlen) besteht darin, das -Tag im Head-Tag zu verwenden, um eine CSS-Datei zu importieren und es dann darauf anzuwenden Seite zum Implementieren der CSS-Stileinstellung
Format:
3.2 kann auch verwendet werden, um die CSS-Datei im Style-Tag zu importieren.
Zum Beispiel:
Funktionen: Wirkt auf der gesamten Website
Ihre
Priorität: Bei Stilkonflikten wird das Proximitätsprinzip übernommen, das den Wert ausmacht CSS-Attribut Demjenigen, der dem geänderten Inhalt am nächsten kommt, wird Priorität eingeräumt. Wenn kein Stilkonflikt vorliegt, wird der Overlay-Effekt verwendet.
3. **CSS2-Selektor:
----------------- -- ------------------------------------------------
1. HTML-Selektor (
Tag-Selektor) dient zur Verwendung des HTML-Tags als Selektor
wie p{....} Alle p in der Webseite verwenden Tags diesen Stil
h2{....} Alle h2-Tags in der Webseite verwenden diesen Stil
2.
KlasseKlassenselektor (Verwenden Sie point. Selector, um einen benutzerdefinierten Namen (Klassennamen) zu definieren) Definition: .Klassenname {Stil....}
Anonyme KlasseAndere Wählen Sie den Symbolnamen.Klassenname{Stil....}
Verwendung: ...
.mc{color:blue;} /* Alle mit dem Klassenattributwert mc übernehmen diesen Stil*/
p.ps{color:green;} / *Nur der Klassenattributwert im p-Tag ist ps. Dieser Stil wird verwendet*/
Hinweis: Der Klassenselektor kann auf der Webseite wiederverwendet werden
3. ID-Selektor
Definition: #id name {style....}
Verwendung: ... < ;/html tag>
Hinweis: Der ID-Selektor wird nur einmal auf der Webseite verwendet
Priorität des Selektors: von der größte Gehe zum kleinen [ID-Selektor]->[Klassenselektor]->[HTML-Selektor]->[
HTML-Attribut
4. Zugehörige Selektoren (einschließlich Selektoren)
Format: Selektor 1 Selektor 2 Selektor 3...{Stil....}
Zum Beispiel: Tabelle a{. ...} /*Nur das a-Tag im Tabellen-Tag übernimmt diesen Stil*/
h1 p{color:red} /*Nur das p-Tag im h1-Tag übernimmt diesen Stil*/
5. Selektorkombination (Selektorgruppe)
Format: Selektor 1, Selektor 2, Selektor 3...{Stil....}
h3 ,h4,h5,#one,.one{color:green;} /*h3, h4 und h5 verwenden alle diesen Stil*/
6.
Pseudoklasse(Pseudoelement-)Selektor auswählen: Format: Tag-Name: Pseudoklassenname {style....}
a:link {color: #FF0000; text-decoration: none} /* Unvisited link*/
a:visited {color: #00FF00; text-decoration: none} /* Besuchter Link*/
a:hover {color: #FF00FF; text-decoration: underline} /* Mouseover link*/
a:active {color: #0000FF text-decoration: underline} /* Link aktivieren*/
7. Attributauswahl:
...
8. Andere Pseudo-Klassenauswahl
. ..
4. Selektoren in CSS3 (Verstehen)
---------------- ------ ------------------------
1. Beziehungsselektor:
div>p wählt alle Unterelemente aus p
des div-Elements. div+p wählt das p-Element direkt nach dem div-Element aus.
div~p wählt alle Geschwisterelemente p nach dem div-Element aus 2. Attributselektor:
[Attribut] Wählt Elemente mit dem Attribut Attribut aus.
[Attribut=Wert] Wählen Sie Elemente aus, deren Attribut Attribut und Attributwert gleich Wert sind.
[attribute~=value] Wählen Sie ein Element mit einem Attributattribut aus und der Attributwert ist eine durch Leerzeichen getrennte Liste von Wörtern, von denen eines gleich dem Wert ist.
[attribute|=value] wählt das E-Element aus, das das att-Attribut hat und der Attributwert ist eine
Zeichenfolge, die mit val beginnt und durch den Konnektor „-“ getrennt ist. [attibute^=value] Entspricht E-Elementen, die Attributattribute haben und deren Werte mit value beginnen.
[attribute$=value] entspricht E-Elementen, die Attributattribute haben und deren Werte Ende mit Wert
[Attribut*=Wert] entspricht dem E-Element mit dem Attribut Attribut und dem Wert, der den Wert enthält
3. Struktureller Pseudoklassenselektor:
:
:first-letterlegt den Stil des ersten Zeichens innerhalb des -Objekts fest. :
:first-linelegt den Stil der ersten Zeile innerhalb des Objekts fest.
:beforelegt den Inhalt fest, der vor dem Objekt auftritt (gemäß der logischen Struktur des Objektbaums).
:afterLegt fest, was nach dem Objekt passiert (gemäß der logischen Struktur des Objektbaums).
:lang(Sprache) gleicht E-Elemente mit einer speziellen Sprache ab. :element1~element2:
:first-of-type
Entspricht dem ersten Geschwisterelement desselben Typs
:last- of-typeentspricht dem letzten gleichgeordneten Element desselben Typs :only-of-type entspricht dem einzigen gleichgeordneten Element desselben Typs
:only-child entspricht dem einzigen untergeordneten Element Element des übergeordneten Elements
:nth-child(n) entspricht dem n-ten untergeordneten Element des übergeordneten Elements
:nth-last-child(n) entspricht dem vorletzten n-ten Geschwisterelement des gleicher Typ
:last-child() entspricht dem letzten untergeordneten Element des übergeordneten Elements
:root entspricht dem Stammelement des Dokuments. In HTML ist das Stammelement immer HTML
:empty entspricht Elementen
, die keine untergeordneten Elemente (einschließlich Textknoten) haben. 4. *
Pseudoklassenselektor :link legt den Stil von
Hyperlinka fest, bevor dieser besucht wird. :visited legt den Stil des Hyperlinks fest, wenn seine Linkadresse besucht wurde.
:active legt das
-Ereignis fest, das zwischen dem Mausklick und dem Loslassen auftritt, wenn das Element aktiviert wird der Benutzer.) style *:hover legt den Stil des Elements fest, wenn es mit der Maus bewegt wird
*
:focuslegt den Stil des Elements fest, wenn es angezeigt wird erhält Fokus :target Entspricht dem E-Element, auf das die relevante URL zeigt
:enabled Entspricht dem Element im verfügbaren Zustand auf der Benutzeroberfläche
:disabled Entspricht dem Element im deaktivierten Zustand auf der Benutzeroberfläche
:checked Entspricht ausgewählten Elementen auf der Benutzeroberfläche
:not(selector) Entspricht Elementen, die keine Selektorselektoren enthalten
:: Auswahl Legt fest, wann das Objekt ausgewählt wird. Stil
5. Andere Pseudoklassenselektoren
E:not(s): { Attribut🎜>
Entspricht allen Elementen E
, die nicht mit dem einfachen Selektor s übereinstimmen >====================== ======================= ========================= ===============
5. Häufig verwendete Attribute in CSS:
---- -------------------------- ---------- ------------------------- ---------
*c. RGB-Farbe: Änderungen in den drei Farbkanälen Rot (R), Grün (G) und Blau (B)
Hintergrundfarbe: rgba(200,100,0); d. RGBA-Farbe: Rot (R), Grün (G), Blau (B), Transparenz (A) Hintergrundfarbe: rgba(0,0,0,0.5);
*e.
Bild
Transparenzeinstellung img{ opacity:0.25;} 2. Schriftartattribute: Schriftart *Schriftgröße
: Schriftgröße: 20 Pixel, 60 % basierend auf dem Prozentsatz des übergeordneten Objekts*Schriftfamilie: Schriftart: Song Dynasty, Arial
Schriftstil: normal kursiv kursiv; Schriftart
*Schriftart -weight
: Schriftart fett: fett: small-caps Kleine Großbuchstabenschrift
font- stretch: [Verstehen] Die Textdehnung erfolgt relativ zur normalen Breite der vom Browser angezeigten Schriftart (von den meisten Browsern nicht unterstützt).
text-indent
: Einzug der ersten Zeile: text-indent:30pxtext-overflow
: Ob das Auslassungszeichen (...) für Textüberlauf verwendet werden soll.Clip|Ellipse (Auslassungszeichen anzeigen)
*text-align: Textposition: links Mitte rechts
text-transform: Die Groß-/Kleinschreibung des Textes im Objekt: capitalize (erster Buchstabe)|Großbuchstabe Großbuchstabe|Kleinbuchstabe Kleinbuchstabe
* text-decoration: Schriftlinienzeichnung: keine, unterstrichen, durchgestrichentext-decoration-line: [Verstehen] die Position von Textdekorationslinien (Browser ist nicht kompatibel)
*text-shadow
: Ob der Text einen Schatten- und Unschärfeeffekt hatvertikal-align
: Die vertikale Ausrichtung des Texts : Textflussrichtung. ltr |. rtlwhite-space:nowrap; /*Erzwinge, dass der gesamte Text in derselben Zeile angezeigt wird*/
*letter-spacing: Der Abstand von Wörtern oder Buchstaben
word-spacing
* Zeilenhöhe
: Zeilenhöhe Rand: Breitenstil Farbe;Rahmenfarbe
;Rahmenstil
; Rahmenstil: durchgezogene Umsetzung, gepunktete Linie, gestrichelte Linie: border-left-style; .. CSS3-Stil border-radius: abgerundete Eckenverarbeitung box-shadow: Objektschatten festlegen oder abrufen 5.Hintergrundattribute
: Hintergrund *background-color: Hintergrundfarbe *background-image: Hintergrundbild
*Hintergrundwiederholung
: ob wiederholen, wie wiederholen? (gekachelt)*background-position: Positionierung
background-attachment: ob der Hintergrund fixiert werden soll,
scroll: Standardwert. Das Hintergrundbild scrollt mit dem Inhalt des Objekts
fest: Das Hintergrundbild ist fest 🎜> *
Hintergrundgröße: Hintergrundgröße, z. B. Hintergrundgröße :100px 140px;
Mehrschichtiger Hintergrund:
Hintergrund:url(test1.jpg) No-Repeat-Scroll 10px 20px,url( test2.jpg) No-Repeat-Scroll 50px 60px,url (test3.jpg) No-Repeat Scroll 90px 100px; Box;
Hintergrundclip
:
padding-box,padding-box, padding-box;background-size:50px 60px,50px 60px,50px 60px;
6. *Innenpolsterung (innerer Patch) padding: Rufen Sie die inneren Ränder an den vier Seiten des Objekts ab oder legen Sie sie fest, z. B. padding:10px; padding :5px 10px;
padding-top
: Rufen Sie den inneren Rand von ab oder legen Sie ihn fest Oberkante des Objekts
padding-right
: Den inneren Rand der Oberkante des Objekts abrufen oder festlegen. Interne Polsterung rechts
padding -bottom: Den internen Abstand unterhalb des Objekts abrufen oder festlegen
padding-left: Den internen Abstand unten am Objekt abrufen oder festlegen. Innenrand links
7. *Äußerer Abstand (äußerer Patch)
Rand: Rufen Sie den äußeren Rand an den vier Seiten des Objekts ab oder legen Sie ihn fest, z. B. den Rand :10px; margin:5px auto;
margin-top
: Den erweiterten Rand der Oberkante des Objekts abrufen oder festlegen
margin-right: Den erweiterten Rand auf der rechten Seite des Objekts abrufen oder festlegen
margin-bottom: Den erweiterten Rand auf der Unterseite des Objekts abrufen oder festlegen
margin-left: Den erweiterten Rand auf der linken Seite des Objekts abrufen oder festlegen
*position: Positionierungsmethode : absolut(Absolute Positionierung) , fest (relative Positionierungsreferenz, kann zur relativen absoluten Positionierung des Innenraums verwendet werden)
*
z-index: Stapelreihenfolge, je größer der Wert, desto höher.
*oben: Rufen Sie die Position des Objekts relativ zur Oberseite seines zuletzt positionierten übergeordneten Objekts ab oder legen Sie diese fest. Rechts: Rufen Sie die Position des Objekts relativ zur rechten Seite seines am weitesten positionierten Objekts ab oder legen Sie diese fest zuletzt positioniertes übergeordnetes Element
unten: Rufen Sie die Position des Objekts relativ zur Unterseite seines zuletzt positionierten übergeordneten Objekts ab oder legen Sie sie fest *links: Rufen Sie die Position des Objekts relativ zur linken Seite ab oder legen Sie sie fest seines zuletzt positionierten übergeordneten Elements
9. Layout
*
Anzeige: Ob und wie angezeigt werden soll: keine ausgeblendet, Block-Block-Anzeige. .
*
float: gibt an, ob und wie das Objekt
floatist: Wert none | left | >: clear float: none |. left |.
Sichtbarkeit: Legen Sie fest, ob das Objekt angezeigt werden soll. sichtbar|versteckt|reduziert. Im Gegensatz zum Anzeigeattribut reserviert dieses Attribut den physischen Platz, der vom versteckten Objekt eingenommen wird. Clip: Rufen Sie den
sichtbaren Bereichdes Objekts ab oder legen Sie ihn fest. Die Teile außerhalb des Bereichs sind transparent. rect(oben-rechts-unten-links) Zum Beispiel: clip:rect(auto 50px 20px auto); oben und links werden nicht abgeschnitten, rechts 50, unten 20. *Überlauf : darüber hinaus versteckt: versteckt, sichtbar: Inhalt nicht ausschneiden
overflow-x: So verwalten Sie Inhalte, wenn sie die angegebene Breite überschreiten: sichtbar | 🎜>
overflow-y: So verwalten Sie Inhalte, wenn der Inhalt die angegebene Höhe überschreitet
10. Flexible Box Flexible Box (siehe Handbuch für Details)
box-orient: Legen Sie die Anordnung der untergeordneten Elemente des Objekts flexibles Boxmodell fest oder rufen Sie sie ab. horizontal(horizontal)|vertikal(vertikal)
box-pack legt die Ausrichtung untergeordneter Elemente des flexiblen Boxmodellobjekts fest oder ruft sie ab.
box-align legt die Ausrichtung untergeordneter Elemente des Flexbox-Modellobjekts fest oder ruft sie ab.
box-flex legt fest oder ruft ab, wie die untergeordneten Elemente des Flex-Box-Modellobjekts ihren verbleibenden Platz zuweisen.
box-flex-group legt die Gruppe fest oder ruft sie ab, zu der die untergeordneten Elemente des Flex-Box-Modellobjekts gehören.
box-ordinal-group legt die Anzeigereihenfolge der untergeordneten Elemente des flexiblen Boxmodellobjekts fest oder ruft sie ab.
box-direction legt fest oder ruft ab, ob die Reihenfolge der untergeordneten Elemente des flexiblen Box-Modellobjekts umgekehrt ist.
box-lines legt fest oder ruft ab, ob die untergeordneten Elemente des flexiblen Boxmodellobjekts in neuen Zeilen angezeigt werden können.
11. Benutzeroberfläche Benutzeroberfläche
*cursor Welche vom System vordefinierte Cursorform der Mauszeiger annimmt. Zeiger kleine Hand, URL-Anpassung
zoom Legt das Zoomverhältnis des Objekts fest oder ruft es ab: normal|5 mal|200 % Prozentsatz
box-sizing Legt den Kompositionsmodus des Boxmodells fest oder ruft es ab Objekt. content-box |. border-box
content-box: padding und border sind nicht in der definierten Breite und Höhe enthalten.
border-box: Polsterung und Rand sind innerhalb der definierten Breite und Höhe enthalten.
resize legt fest oder ruft ab, ob der Bereich des Objekts es dem Benutzer ermöglicht, zu zoomen und die Größe des Elements anzupassen.
keine: Dem Benutzer nicht erlauben, die Größe des Elements zu ändern.
beides: Benutzer können die Breite und Höhe des Elements anpassen.
horizontal: Der Benutzer kann die Breite des Elements anpassen.
vertikal: Der Benutzer kann die Höhe des Elements anpassen.
outline Zusammengesetzte Eigenschaft: Legen Sie den Linienumriss außerhalb des Objekts fest oder rufen Sie ihn ab.
outline-width Legen Sie fest oder rufen Sie ihn ab Umriss außerhalb des Objekts Die Breite des Linienumrisses
outline-style Legt den Stil des Linienumrisses außerhalb des Objekts fest oder ruft ihn ab
outline-color Legt den Linienumriss außerhalb des Objekts fest oder ruft ihn ab. Die Farbe des Linienumrisses
Outline-OffSet Legt den Wert der Versatzposition des Linienumrisses außerhalb des Objekts fest oder ruft ihn ab
nav-index Legt die Navigation-Reihenfolge des Objekts fest oder ruft sie ab.
nav-up Legt die Navigationsrichtung des Objekts fest oder ruft sie ab.
nav-right Legt die Navigationsrichtung des Objekts fest oder ruft sie ab.
12. Mehrspaltige
columns Legen Sie die Anzahl der Spalten des Objekts und die Breite jeder Spalte fest oder rufen Sie sie ab.
columns-width Festlegen oder abrufen Die Breite jeder Spalte des Objekts
Column-Count Anzahl der Spalten des Objekts festlegen oder abrufen
Column-Gap Den Abstand dazwischen festlegen oder abrufen die Spalten des Objekts
columns-rule Legt die Grenze zwischen den Spalten des Objekts fest oder ruft sie ab
columns-rule-width Legt die Randstärke zwischen den Spalten des Objekts fest oder ruft sie ab
Column -rule-style Legen Sie den Rahmenstil zwischen den Spalten des Objekts fest oder rufen Sie ihn ab
Column-Rule-Color Die Rahmenfarbe zwischen den Spalten des Objekts
Column-Span Ob das Bildelement über alle Spalten hinweg
Column-fill Ob die Höhe aller Spalten des Objekts einheitlich ist
Column-break-before Ob das Objekt eine hat Zeilenumbruch vor
columns-break -after Ob die Zeile nach dem Objekt unterbrochen wird
columns-break-inside Ob die Zeile innerhalb des Objekts unterbrochen wird
13. Tabelle verwandte Attribute:
table-layout Legt den Layout-Algorithmus der Tabelle fest oder ruft ihn ab
border- Collapse Legt fest oder ruft ab, ob die Zeilen und Zellränder der Tabelle zusammengeführt werden oder gemäß dem Standard-HTML-StilSeparate Separate | > Legt den horizontalen und vertikalen Abstand der Zeilen- und Zellenränder fest oder ruft ihn ab, wenn die Tabellenränder unabhängig sind.
caption-side Legt die Seite der Tabelle fest, auf der sich das Beschriftungsobjekt befindet, oder ruft sie ab. top |. right |. left
empty-cell Legt fest, ob der Rand der Zelle angezeigt werden soll. 🎜>
14. Übergang Übergang: Übergang Objekt abrufen oder festlegenÜbergangseffekt während der Transformation
Transition-Property ruft die am Übergang im Objekt beteiligten Eigenschaften ab oder legt sie fest.
Transition-Duration ruft die Dauer des Objektübergangs ab oder legt sie fest.
Transition-Timing-Function ruft ab oder legt sie fest der Übergang im Objekt. Der Typ von
Transition-Delay ruft den Zeitpunkt des verzögerten Übergangs des Objekts ab oder legt ihn fest
15. Animation Animation
animation Die auf das Objekt angewendeten Animationseffekte abrufen oder festlegen.
animation-name Den auf das Objekt angewendeten Animationsnamen abrufen oder festlegen.
animation-duration Die Dauer von abrufen oder festlegen die Objektanimation
animation-timing-function ruft den Übergangstyp der Objektanimation ab oder legt diesen fest
animation-delay ruft die Verzögerungszeit der Objektanimation ab oder legt diesen fest
animation-iteration -count ruft die Schleife der ObjektanimationZahlen
Animation-Direction ab oder legt sie fest. Ruft ab oder legt fest, ob sich die Objektanimation in der Schleife
Animation-Play- in umgekehrter Richtung bewegt. state Den Status der Objektanimation abrufen oder festlegen
animation- fill-mode Den Status des Objekts außerhalb der Animationszeit abrufen oder festlegen
16. 2D-Transformation 2D-Transformation:
transform Ruft den Zustand des Objekts ab oder legt ihn fest. Transform
transform-origin Ruft den durch die Transformation im Objekt referenzierten Ursprung ab oder legt ihn fest
17. Eigenschaften von MedienabfragenMedienabfragen
Breite definiert die Breite des sichtbaren Bereichs der Seite im Ausgabegerät
Höhe definiert die Höhe des sichtbaren Bereichs der Seite im Ausgabegerät
Gerätebreite definiert die sichtbare Breite des Bildschirms des Ausgabegeräts
Gerätehöhe definiert die sichtbare Höhe des Bildschirms Die Ausrichtung des Ausgabegeräts
legt fest, ob „Höhe“ größer oder gleich „Breite“ ist. Der Wert „Portrait“ steht für „Ja“, „Querformat“ für „Nein“
aspect-ratio definiert das Verhältnis von „width“ zu „height“
device-aspect-ratio definiert „device -width' 'Das Verhältnis von 'Gerätehöhe'. Zum Beispiel gängige Monitorverhältnisse: 4/3, 16/9, 16/10
device-aspect-ratio definiert das Verhältnis von „Gerätebreite“ und „Gerätehöhe“. Gängige Monitorverhältnisse sind beispielsweise: 4/3, 16/9, 16/10
Farbe definiert die Anzahl der Farboriginale für jeden Satz Ausgabegeräte. Wenn es sich nicht um ein Farbgerät handelt, ist der Wert gleich 0
Der Farbindex definiert die Anzahl der Einträge in der Farbsuchtabelle des Ausgabegeräts. Wenn keine Farbsuchtabelle verwendet wird, ist der Wert gleich 0
monochrome definiert die Anzahl der monochromen Originale pro Pixel, die in einem monochromen Frame-Puffer enthalten sind. Wenn es sich nicht um ein Monochrom-Gerät handelt, ist der Wert gleich 0
Auflösung definiert die Auflösung des Geräts. Beispiel: 96dpi, 300dpi, 118dpcm
Scan definiert den Scanprozess von TV-Geräten
Raster wird verwendet, um abzufragen, ob das Ausgabegerät Raster oder Punktmatrix verwendet. Nur 1 und 0 sind gültige Werte, 1 steht für Ja, 0 steht für Nein
Das obige ist der detaillierte Inhalt vonDetaillierte Beschreibung der CSS-Cascading-Stylesheets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Welche E-Commerce-Plattformen gibt es?
Was ist ein Festplattenkontingent?
Die zehn besten Börsen für digitale Währungen
Einführung in das Dex-Konzept der digitalen Währung
So zeigen Sie gespeicherte Prozeduren in MySQL an
Welche Zeichensoftware gibt es?
Der Unterschied zwischen statischen Webseiten und dynamischen Webseiten
Einführung in Laravel-Komponenten
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
