Styl HTML

Atrybut "style" jest używany do zmiany stylu elementów HTML.

Ten tekst jest w czcionce Verdana i kolorze czerwonym
Ten tekst jest w czcionce Times i kolorze niebieskim
Ten tekst ma wysokość 30 pikseli

Spróbuj sam

Atrybut "style" w HTML

Działanie atrybutu "style":

Dostarcza uniwersalny sposób zmiany stylu wszystkich elementów HTML.

Styl został wprowadzony w HTML 4 jako nowy preferowany sposób zmiany stylu elementów HTML. Dzięki stylom, można bezpośrednio dodać style do elementów HTML za pomocą atrybutu "style" lub pośrednio w oddzielnym pliku stylu (pliku CSS).

Możesz znaleźć więcej informacji w naszej Kurs CSSNaucz się wszystkiego o stylach i CSS.

W naszym kursie HTML użyjemy atrybutu "style", aby wyjaśnić style HTML.

Znaczniki i atrybuty do unikania

W HTML 4 kilka znaczników i atrybutów zostało zdeprecjonowanych. Pojęcie "zdeprecjonowany" oznacza, że w przyszłych wersjach HTML i XHTML te znaczniki i atrybuty nie będą już wspierane.

Przekazana informacja jest jasna: unikaj tych przestarzałych znaczników i atrybutów!

Unikaj używania poniższych znaczników i atrybutów:

Znacznik Opis
<center> Zdefiniuj zawartość wyśrodkowaną.
<font> i <basefont> Zdefiniuj czcionkę HTML.
<s> i <strike> Zdefiniuj tekst wytarte
<u> Zdefiniuj podkreślony tekst
Atrybut Opis
align Zdefiniuj sposób wyrównania tekstu
bgcolor Zdefiniuj kolor tła
color Zdefiniuj kolor tekstu

Dla powyższych znaczników i atrybutów: używaj stylów!

Przykład stylu HTML - kolor tła

Atrybut "background-color" określa kolor tła elementu:

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">To jest nagłówek</h2>
<p style="background-color:green">To jest paragraf.</p>
</body>
</html>

Spróbuj sam

Atrybut style wyeliminował "stary" atrybut bgcolor.

Spróbuj sam: Ustawienie starej metody ustawiania koloru tła

Przykład stylu HTML - czcionki, kolory i rozmiary

Atrybuty font-family, color oraz font-size definiują odpowiednio rodzinę czcionek, kolor i rozmiar czcionki tekstu elementu:

<html>
<body>
<h1 style="font-family:verdana">Nagłówek</h1>
<p style="font-family:arial;color:red;font-size:20px;">Paragraf.</p>
</body>
</html>

Spróbuj sam

Atrybut style wyeliminował stary znacznik <font>.

Spróbuj sam: Ustawienie starej metody ustawiania czcionki

Przykład stylu HTML - wyśrodkowanie tekstu

Atrybut text-align określa sposób poziomego wyśrodkowania tekstu elementu:

<html>
<body>
<h1 style="text-align:center">To jest nagłówek</h1>
<p>Wyszukiwarka powyżej jest wyśrodkowana na tej stronie.</p>
</body>
</html>

Spróbuj sam

Atrybut style wyeliminował stary atrybut "align".

Spróbuj sam: Ustawienie starej metody wyśrodkowania