Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Pseudoklasa :root

Email Drukuj PDF

Pseudoklasa :root należy do grupy pseudoklas strukturalnych, za pomocą których możemy odwołać się do struktury dokumentu XHTML/HTML będącej poza zasięgiem klasycznych selektorów. Omawiana pseudoklasa odnosi się do korzenia struktury, którym w przypadku dokumentów XHTML/HTML jest element HTML, i zawsze działa na cały dokument.

<html>

<head>

</head>

<body>

</body>

</html>

Przykładowe wykorzystanie pseudoklasy :root może mieć następującą formę:

:root

{

background-color:#C0FFC0;

color:navy;

}

BODY          

{

width:90%;

background-color:#FFC0C0;

margin:auto;

margin-top:2cm;

}

Efektem działania powyższego arkusza stylów będzie ustawienie jasnozielonego tła dla całego dokumentu oraz niebieskiego koloru dla czcionki. Natomiast dla głównej części dokumentu określono szerokość, ustalono marginesy i dodano jasnoczerwone tło.

<<przykład>>

<html>

<head>

<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">

<title>Tytuł Strony WWW</title>

<style type="text/css">

:root

{

background-color:#C0FFC0;

color:navy;

}

BODY          

{

width:90%;

background-color:#FFC0C0;

margin:auto;

margin-top:2cm;

}

}

</style>

</head>

<body>

<div class="przyklad">

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non turpis at leo tempus consectetur vitae non mi. Integer mi purus, rhoncus et ornare ac, consectetur sit amet orci. Etiam vitae erat massa, ut interdum ligula. Etiam rhoncus aliquam sapien a lacinia. Ut tincidunt nulla vel est interdum rutrum ut vel justo. Mauris lacinia, augue id rhoncus pulvinar, turpis nisl posuere elit, id pellentesque dui justo ut orci. Morbi malesuada leo eu magna vehicula blandit. Nunc lorem nibh, ultricies non tempor sed, dictum nec magna. Aliquam erat volutpat. Nulla facilisi. Vestibulum aliquam mauris sed tortor scelerisque vitae vulputate mi pellentesque. Nam dapibus cursus eros quis placerat. Praesent posuere malesuada pulvinar. Nam at nibh risus, vel bibendum erat. Sed pretium, risus vitae imperdiet mollis, risus sem ultrices diam, at fermentum ante nibh non diam. </p>

</div>

</body>

</html>

<</przykład>>

Niestety pseudoklasa :root nie jest obsługiwana przez przeglądarkę Internet Explorer. Na rysunku 15.2 przedstawiłem efekt działania przykładu stworzonego w niniejszym podrozdziale.

Rysunek 15.2. Przykład działania pseudoklasy :root

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15752038