Znacznik HTML <styl>
Przykład
Użyj elementu <style> do zastosowania prostego arkusza stylów do dokumentu HTML:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Znacznik <style>służy do definiowania informacji o stylu (CSS) dla dokumentu.
Wewnątrz <style>elementu określasz sposób renderowania elementów HTML w przeglądarce.
Wskazówki i uwagi
Uwaga: Gdy przeglądarka odczytuje arkusz stylów, sformatuje dokument HTML zgodnie z informacjami w arkuszu stylów. Jeśli niektóre właściwości zostały zdefiniowane dla tego samego selektora (elementu) w różnych arkuszach stylów, zostanie użyta wartość z ostatnio odczytanego arkusza stylów (patrz przykład poniżej)!
Wskazówka: Aby utworzyć link do zewnętrznego arkusza stylów, użyj tagu <link> .
Wskazówka: aby dowiedzieć się więcej o arkuszach stylów, przeczytaj nasz samouczek CSS .
Obsługa przeglądarki
| Element | |||||
|---|---|---|---|---|---|
| <style> | Yes | Yes | Yes | Yes | Yes |
Atrybuty
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Specifies what media/device the media resource is optimized for |
| type | text/css | Specifies the media type of the <style> tag |
Atrybuty globalne
Znacznik <style>obsługuje również atrybuty globalne w HTML .
Atrybuty wydarzenia
Tag <style>obsługuje również Atrybuty Zdarzeń w HTML .
Więcej przykładów
Przykład
Wiele stylów dla tych samych elementów:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
<style>
h1 {color:green;}
p {color:pink;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
Powiązane strony
Samouczek HTML: HTML CSS
Samouczek CSS : Samouczek CSS
Odniesienie HTML DOM: Obiekt stylu
Domyślne ustawienia CSS
Większość przeglądarek wyświetla <style>element z następującymi wartościami domyślnymi:
style {
display: none;
}