Autor publikacji
Virtual Patriot - Administrator

style

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu style

Element style reprezentuje zawartość pełniącą rolę reguł określających styl wyglądu elementów HTML, które znajdują się w zawartości danego dokumentu HTML oraz które zostaną wyświetlone w oknie przeglądarki internetowej dla użytkownika.

Domyślnie docelowymi regułami są reguły języka CSS.

Dodatkowe artykuły związane z elementem style

brak

Informacje techniczne o elemencie style

kategoria ogólna

zawartość metadata

kontekst zewnętrzny

  • element HTML, który tworzy wewnętrzny kontekst metadata

    Przykładowy Kod HTML

    <!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <style>body { background-color:blue; }</style>
  </head>

  <body>
    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->
  </body>
</html>

    Kontekstem zewnętrznym przykładowego elementu "style" jest element "head". Wspomniany element "head" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst metadata, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "head", jest prawidłowym kontekstem zewnętrznym dla elementu "style".

  • jako element dziecko elementu noscript, który jest elementem dzieckiem elementu head

    Przykładowy Kod HTML

    <!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <noscript>
      <style>body { background-color:blue; }</style>
    </noscript>
  </head>

  <body>
    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->
  </body>
</html>

    Kontekstem zewnętrznym przykładowego elementu "style" jest element "noscript", dla którego wspomniany element "style" jest elementem dzieckiem. Ponadto wspomniany element "noscript" jest elementem dzieckiem elementu "head", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "noscript", jest prawidłowym kontekstem zewnętrznym dla elementu "style".

  • element HTML, który tworzy wewnętrzny kontekst opływający

    Przykładowy Kod HTML

    <!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>

  <body>
    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
      <style>h2 { background-color:orange; }</style>
    </article>
  </body>
</html>

    Kontekstem zewnętrznym przykładowego elementu "style" jest element "article". Wspomniany element "article" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst opływający, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "article", jest prawidłowym kontekstem zewnętrznym dla elementu "style".

kontekst wewnętrzny

zawartość tekstowa w formie na jaką wskazuje wartość atrybutu type danego elementu style

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <style>body { background-color:blue; }</style>
  </head>

  <body>
    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->
  </body>
</html>

Kontekstem wewnętrznym przykładowego elementu "style" jest wyłącznie zawartość tekstowa w formie reguł języka CSS. Ponadto wartością domyślną atrybutu "type" wspomnianego elementu "style" jest wartość "text/css", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli ciąg znaków "body { background-color:blue; }", jest prawidłowym kontekstem wewnętrznym dla elementu "style".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<style> ... </style>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

none

Przypuszczalnie domyślne reguły CSS elementu style

style {
  display:none;
}

Interpretacja elementu style

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Nie interpretuje atrybutu nonce.

Edge

tak

Opis atrybutów elementu style

Atrybut Lokalny

media

Przeznaczenie atrybutu media

Atrybut media wykorzystany wraz z elementem style pozwala nam określić informację o tym, dla jakiego typu medium (urządzenia) powinna być przeznaczona zawartość reprezentowana przez dany element style.

Wartość domyślna

all (gdy pominęliśmy atrybut)

BRAK (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu media

@media query

Należy podać ciąg znaków w formie @media queries.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>

    <style media="all and (min-width:800px)">
      body { background-color:orange; }
    </style>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Rezultat

Zawartość reprezentowana przez przykładowy element "style" przeznaczona jest dla wszystkich typów mediów (wszystkich urządzeń), w których wartość szerokości okna przeglądarki internetowej w danej chwili wynosi co najmniej "800" pikseli, ponieważ do wspomnianego elementu "style" został dodany atrybut "media" wraz z wartością "all and (min-width:800px)".

Atrybut Lokalny

nonce

Przeznaczenie atrybutu nonce

Atrybut nonce wykorzystany wraz z elementem style pozwala nam określić informację o tym, jaki wygenerowany losowo (np. za pomocą języka programowania PHP) oraz istniejący na potrzeby polityki prywatności treści (Content Security Policy) ciąg znaków powinien zostać przypisany do danego elementu style, dzięki czemu jeden z mechanizmów przeglądarki internetowej będzie mógł zdecydować, czy zawartość reprezentowana przez dany element style powinna zostać uaktywniona.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu nonce

ciąg znaków

Należy podać niepusty ciąg znaków, który został wygenerowany losowo dla dokumentu HTML, w którego zawartości znajduje się dany element style.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-security-policy" content="style-src 'nonce-57609823'">
    <title>Darmowy Kurs HTML</title>

    <style nonce="57609823">
      body { background-color:orange; }
    </style>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "style" został dodany atrybut "nonce" wraz z wartością "57609823", ciągiem znaków, jaki został przypisany do przykładowego elementu "style", jest ciąg znaków "57609823", dlatego zawartość reprezentowana przez wspomniany element "style" została uaktywniona przez jeden z mechanizmów przeglądarki internetowej.

Atrybut Globalny

title

Przeznaczenie atrybutu title

Atrybut title wykorzystany wraz z elementem style pozwala nam określić tytuł, jaki powinna posiadać zawartość reprezentowana przez dany element style.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu title

tytuł

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującego nas tytułu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>

    <style title="wygląd domyślny">
      body { background-color:orange; }
    </style>

    <style title="wygląd alternatywny">
      body { background-color:yellow; }
    </style>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "style" reprezentującego zawartość w postaci ciągu znaków "body { background-color:yellow; }" został dodany atrybut "title" wraz z wartością "wygląd alternatywny", przykładowy element "style" zawiera dodatkową informację dla przeglądarki internetowej o tym, że tytułem zawartości w postaci ciągu znaków "body { background-color:yellow; }" jest tytuł "wygląd alternatywny".

Atrybut Lokalny

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem style pozwala nam określić informację o typie MIME, jaki posiada zawartość reprezentowana przez dany element style.

Jeżeli typ MIME określony przez nas za pomocą wartości danego atrybutu "type" nie będzie zgadzał się z typem MIME w rzeczywistości posiadanym przez zawartość reprezentowaną przez dany element "style", wtedy docelowa zawartość będzie traktowana przez przeglądarkę internetową jako zawartość nieistniejąca.

Wartość domyślna

text/css (gdy pominęliśmy atrybut)

BRAK (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu type

typ MIME

Należy podać ciąg znaków w formie typu MIME.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>

    <style type="text/css">
      body { background-color:orange; }
    </style>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "style" został dodany atrybut "type" wraz z wartością "text/css", przykładowy element "style" reprezentujący zawartość w postaci ciągu znaków "body { background-color:orange; }" zawiera dodatkową informację dla przeglądarki internetowej o tym, że typem MIME, jaki posiada zawartość w postaci ciągu znaków "body { background-color:orange; }", jest typ wskazujący na zawartość zgodną z plikiem typu CSS.