blue - Kurs HTML i CSS
Selektory pseudoklas CSS / Tylko do odczytu :read-only :read-write...wyróżnienie za pomocą CSS pól tylko do odczytu. Przykład :read-only :read-write Po wpisaniu w arkuszu stylów: input:read-only { border: 1px solid blue } input:read-write { border: 1px solid red } a w dowolnym miejscu strony: <form action="?"> <input type="text" value="Tylko do odczytu" readonly> <input type="text" value="Do odczytu i do zapisu"> </form> otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):
- Dziedziczenie stylów CSS / Wymuszenie dziedziczenia {...: inherit}
...uzyskany przy pomocy selektora typu i selektora potomka umieszczonych w arkuszu stylów: p { color: green; } p b { color: white; background-color: blue; } p i b { color: inherit; background-color: inherit; }
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
...linear-gradient(to bottom, black, red, white) linear-gradient(180deg, black, red 75%, white) linear-gradient(to right, red, orange, yellow, lime, blue, purple, fuchsia) Kierunek "to right top" zwykle nie jest tym samym co kąt 45deg. Użycie słów kluczowych powoduje, że linia gradientu zawsze będzie skierowana idealnie do podanego narożnika, podczas gdy dla kąta 45deg uzyskamy taki efekt tylko dla elementów kwadratowych. linear-gradient(to right top, black, white) linear-gradient(45deg...
- Tło CSS / Gradient promienisty {background: radial-gradient repeating-radial-gradient}
...at 25% 25%, white, black) radial-gradient(farthest-corner at 25% 25%, white, black) Inne ciekawe przykłady: radial-gradient(at 50% 110%, lightskyblue 40%, fuchsia, purple, blue, lime, yellow, orange, red, lightskyblue 60%) radial-gradient(ellipse 33% 66% at right top, white, red 75%, black) Powtarzany gradient promienisty {background: repeating-radial-gradient} (CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera) selektor { background: repeating-radial-gradient(kształt rozmiar...
- Dziedziczenie stylów CSS / Odwołanie wartości {...: unset}
...uzyskany przy pomocy selektora typu i selektora potomka umieszczonych w arkuszu stylów: p { color: green; } p b { color: white; background-color: blue; border-color: red; border-style: solid; } p i b { color: unset; background-color: unset; border-color: unset; }
- Dziedziczenie stylów CSS / Przywrócenie wartości pierwotnej {...: revert}
...uzyskany przy pomocy selektora typu i selektora potomka umieszczonych w arkuszu stylów: p { color: green; } p b { color: white; background-color: blue; font-weight: normal; } p i b { color: revert; background-color: revert; font-weight: revert; }