Detaillierte Beschreibung der CSS-Cascading-Stylesheets

=======================

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 tag

style="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.

Klasse

Klassenselektor (Verwenden Sie point. Selector, um einen benutzerdefinierten Namen (Klassennamen) zu definieren) Definition: .Klassenname {Stil....}

Anonyme Klasse

Andere 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-letter

legt den Stil des ersten Zeichens innerhalb des -Objekts fest. :

:first-line

legt den Stil der ersten Zeile innerhalb des Objekts fest.

:before

legt den Inhalt fest, der vor dem Objekt auftritt (gemäß der logischen Struktur des Objektbaums).

:after

Legt 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-type

entspricht 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. *

Status

Pseudoklassenselektor :link legt den Stil von

Hyperlink

a 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

*

:focus

legt 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:

---- -------------------------- ---------- ------------------------- ---------

1. Farbattribut:

a. HSL-Farbe: Durch Vergleich von Farbton (H), Sättigung (S) und Helligkeit (L) Änderungen in Farbkanälen und deren Überlagerung, um eine Vielzahl von Farben zu erhalten.

Hintergrundfarbe: hsl( 240,100 %,50 %;Farbe:weiß;

b. HSLA-Farbe: Farbton (H), Sättigung (S), Helligkeit (L), Transparenz (A); Farbe: hsla(0,100%,50%,0,2);

*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

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

font-variant

: sm

all-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).

3. Textattribute:

text-indent

: Einzug der ersten Zeile: text-indent:30px

text-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, durchgestrichen

text-decoration-line: [Verstehen] die Position von Textdekorationslinien (Browser ist nicht kompatibel)

*

text-shadow

: Ob der Text einen Schatten- und Unschärfeeffekt hat

vertikal-align

: Die vertikale Ausrichtung des Texts

Richtung

: Textflussrichtung. ltr |. rtl

white-space:nowrap; /*Erzwinge, dass der gesamte Text in derselben Zeile angezeigt wird*/

*letter-spacing: Der Abstand von Wörtern oder Buchstaben

word-spacing

: Der Abstand von Wörtern

* Zeilenhöhe

: Zeilenhöhe

*Farbe: Schriftfarbe

*4. Rand:

Rand: Breitenstil Farbe;

Rahmenfarbe

;

Rahmenstil

; Rahmenstil: durchgezogene Umsetzung, gepunktete Linie, gestrichelte Linie

border-width

:

border-left-color;

border-left-style;

border-left-width:

..

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

8. Positionspositionierung

*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

float

ist: 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 Bereich

des 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!