style
Style CSS wpisane bezpośrednio w element.
- Dotyczy
- Wszystkie elementy HTML
Przykład
#<p style="color: #fbbf24; font-weight: bold;">Tekst z inline stylem</p>
<div style="width: 60%; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #8b5cf6, #38bdf8);"></div>Definicja i zastosowanie
#Atrybut style przyjmuje deklaracje CSS, które działają tylko na ten jeden element. Składnia jest taka sama jak w arkuszu, tylko bez selektora i nawiasów klamrowych: style="color: tomato; padding: 8px".
Style wpisane w atrybut mają pierwszeństwo przed większością reguł z arkuszy, więc trudno je nadpisać. Dlatego sprawdzają się głównie w szybkich testach, e-mailach HTML i wartościach ustawianych dynamicznie przez JavaScript.
Na co dzień lepiej trzymać wygląd w pliku CSS i łączyć go z elementami przez klasy. Kod jest wtedy czytelniejszy, a style można użyć ponownie.
Składnia
#<element style="właściwość: wartość; druga: wartość">…</element>Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Jeśli ten sam styl powtarzasz w kilku miejscach, przenieś go do klasy.
- Serwisy z restrykcyjną polityką bezpieczeństwa treści (CSP) mogą blokować inline style.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.