Ostatnio edytowany:

style

Autor: Virtual Patriot

Przeznaczenie elementu style

Element style reprezentuje zawartość w postaci reguł określających styl wyglądu poszczególnych elementów HTML występujących w zawartości dokumentu HTML. Domyślnie wspomnianymi regułami są reguły języka CSS.

Dodatkowe techniczne informacje o elemencie style

kategoria ogólna
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 -->
      </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 -->
      </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".

kontekst wewnętrzny
  • zawartość tekstowa

    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 -->
      </body>
    </html>

    Kontekstem wewnętrznym przykładowego elementu "style" jest wyłącznie zawartość tekstowa, 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
składnia HTML
  • <style> ... </style>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • nigdy
CSS display
  • none

Dodatkowe 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

Edge

tak

Opis atrybutów elementu style

media

Przeznaczenie atrybutu media

Atrybut media wykorzystany wraz z elementem style określa typ media, dla którego 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

Reguła CSS reprezentowana przez zawartość przykładowego elementu "style" określa pomarańczowy kolor tła dla elementu "body" znajdującego się w zawartości przykładowego dokumentu HTML, wspomniana reguła CSS przeznaczona jest dla wszystkich typów media (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)".

title

Przeznaczenie atrybutu title

Atrybut title wykorzystany wraz z elementem style określa tytuł dla zawartości reprezentowanej 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", którego zawartością jest ciąg znaków "body { background-color:yellow; }" został dodany atrybut "title" wraz z wartością "wygląd alternatywny" wspomniany element "style" zawiera dodatkową informację dla przeglądarki internetowej o tym, że tytułem zawartości reprezentowanej przez wspomniany element "style" jest tytuł "wygląd alternatywny".

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem style określa 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 posiadanym przez zawartość reprezentowaną przez dany element "style", wtedy wspomniana 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" wspomniany element "style" zawiera dodatkową informację dla przeglądarki internetowej o tym, że typem MIME zawartości reprezentowanej przez wspomniany element "style" jest typ wskazujący na to, iż zawartość reprezentowana przez wspomniany element "style" jest zawartością, która może wystąpić w zawartości pliku CSS.