CSS => Struktura i formatowanie reguły CSS

Uwagi

Aby ułatwić czytanie, wszystkie deklaracje należy wyciąć o jeden poziom od selektora, a zamykające nawiasy klamrowe na osobnej linii. Dodaj pojedynczą spację za selektorami i dwukropkami i zawsze umieszczaj średnik po deklaracji końcowej.

Dobry

p {
    color: maroon;
    font-size: 16px;
}

Zły

p{
 color: maroon;
font-size:16px }

One-Liner

Jeśli istnieje tylko jedna lub dwie deklaracje, może uciec z tego. Nie zalecane w większości przypadków. Zawsze zachowuj spójność, jeśli to możliwe.

p { color: maroon; font-size: 16px; }

Reguły, selektory i bloki deklaracji

Reguła CSS składa się z selektora (np. h1 ) i bloku deklaracji ( {} ).

h1 {}

Listy nieruchomości

Niektóre właściwości mogą przyjmować wiele wartości, zwanych zbiorczo listami właściwości .

/* Two values in this property list */
span {
    text-shadow: yellow 0 0 3px, green 4px 4px 10px;
}

/* Alternate Formatting */
span {
    text-shadow:
        yellow 0 0 3px,
        green 4px 4px 10px;
}

Wiele selektorów

Grupując selektory CSS, stosuje się te same style do kilku różnych elementów bez powtarzania stylów w arkuszu stylów. Użyj przecinka, aby oddzielić wiele zgrupowanych selektorów.

div, p { color: blue }

Zatem niebieski kolor dotyczy wszystkich elementów <div> i wszystkich elementów <p> . Bez przecinka tylko elementy <p> , które są <div> byłyby czerwone.

Dotyczy to również wszystkich typów selektorów.

p, .blue, #first, div span{ color : blue }

Ta zasada dotyczy:

<p>
elementy blue klasy
element o identyfikatorze jako first
każdy <span> wewnątrz <div>

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

CSS
Struktura i formatowanie reguły CSS

Szukaj…