Tag HTML <style>

Definicja i użycie

<style> Znacznik jest używany do zdefiniowania informacji o stylu dokumentu (CSS).

W <style> Elementach, można określić sposób prezentacji elementów HTML w przeglądarce.

Proszę zauważyć, że element style definiuje wbudowane w dokument HTML style CSS, podczas gdy element link jest używany do importowania stylów z zewnętrznych arkuszy stylów.

Element style może występować w różnych częściach dokumentu HTML. Dokument może zawierać wiele elementów style, więc nie musi się wciągać wszystkich definicji stylów do sekcji head. W przypadku korzystania z generatorów szablonów ta cecha jest bardzo pomocna, ponieważ w ten sposób można dostarczyć dodatkowe style określone dla strony do stylów zdefiniowanych w szablonie.

Zobacz również:

HTML Kurs:HTML CSS

CSS Kurs:Podręcznik CSS

HTML DOM Podręcznik:Obiekt Style

Przykład

Przykład 1

Użyj <style> Element aplikuje prosty arkusz stylów do dokumentu HTML:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>Jest to tytuł</h1>
<p>Jest to akapit.</p>
</body>
</html>

Spróbuj sam

Przykład 2

Wiele stylów dla tego samego elementu:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>Jest to tytuł</h1>
<p>Jest to akapit.</p>
</body>
</html>

Spróbuj sam

Wskazówki i komentarze

Uwaga:Kiedy przeglądarka odczytuje arkusz stylów, formatuje dokument HTML na podstawie informacji zawartych w arkuszu stylów. Jeśli dla tego samego selektora (elementu) zdefiniowano różne atrybuty w różnych arkuszach stylów, użyje wartości z ostatnio odczytanego arkusza stylów (patrz powyższy przykład)!

Wskazówka:Aby linkować do zewnętrznego arkusza stylów, użyj <link> tag.

Wskazówka:Aby uzyskać więcej informacji o arkuszach stylów, przeczytaj nasz Podręcznik CSS.

Atrybut

Atrybut Wartość Opis
media Zapytania media Określa media, które są używane do stylizacji.
type text/css Określa typ mediów dla tagu <style>.

Globalne atrybuty

<style> Tagi te obsługują również Globalne atrybuty HTML.

Atrybuty wydarzeń

<style> Tagi te obsługują również Atrybuty wydarzeń w HTML.

Domyślne ustawienia CSS

Większość przeglądarek wyświetli wartości domyślne poniżej: <style> Element:

style {
  display: none;
}

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie