HTML - arkusz stylów

Kaskadowe arkusze stylów (CSS) opisują, jak dokumenty są prezentowane na ekranach, w druku, a może jak są wymawiane. W3C aktywnie promuje korzystanie z arkuszy stylów w Internecie od momentu założenia konsorcjum w 1994 roku.

Kaskadowe arkusze stylów (CSS) zapewniają łatwe i efektywne alternatywy dla określania różnych atrybutów dla znaczników HTML. Używając CSS, możesz określić wiele właściwości stylu dla danego elementu HTML. Każda właściwość ma nazwę i wartość oddzielone dwukropkiem (:). Każda deklaracja właściwości jest oddzielona średnikiem (;).

Przykład

Najpierw rozważmy przykład dokumentu HTML, który używa znacznika <font> i powiązanych atrybutów do określenia koloru tekstu i rozmiaru czcionki -

Note- Znacznik czcionki został wycofany i ma zostać usunięty w przyszłej wersji HTML. Dlatego nie należy ich raczej używać, zaleca się używanie stylów CSS do manipulowania czcionkami. Wciąż jednak w celach edukacyjnych, w tym rozdziale zajmiemy się przykładem użycia znacznika czcionki.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

Powyższy przykład możemy przepisać za pomocą arkusza stylów w następujący sposób -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

To da następujący wynik -

Możesz używać CSS na trzy sposoby w dokumencie HTML -

External Style Sheet - Zdefiniuj reguły arkusza stylów w oddzielnym pliku .css, a następnie dołącz ten plik do dokumentu HTML za pomocą znacznika HTML <link>.
Internal Style Sheet - Zdefiniuj zasady arkusza stylów w sekcji nagłówka dokumentu HTML za pomocą tagu <style>.
Inline Style Sheet - Zdefiniuj reguły arkusza stylów bezpośrednio wraz z elementami HTML za pomocą style atrybut.

Zobaczmy kolejno wszystkie trzy przypadki, korzystając z odpowiednich przykładów.

Arkusz stylów zewnętrznych

Jeśli potrzebujesz użyć arkusza stylów na różnych stronach, zawsze zaleca się zdefiniowanie wspólnego arkusza stylów w oddzielnym pliku. Plik arkusza stylów kaskadowych będzie miał rozszerzenie jak.css i zostanie dołączony do plików HTML za pomocą tagu <link>.

Przykład

Zastanów się, czy zdefiniujemy plik arkusza stylów style.css który ma następujące zasady -

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

Tutaj zdefiniowaliśmy trzy reguły CSS, które będą miały zastosowanie do trzech różnych klas zdefiniowanych dla tagów HTML. Proponuję nie przejmować się tym, jak te reguły są definiowane, ponieważ nauczysz się ich podczas studiowania CSS. Skorzystajmy teraz z powyższego zewnętrznego pliku CSS w naszym następującym dokumencie HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

To da następujący wynik -

Wewnętrzny arkusz stylów

Jeśli chcesz zastosować reguły arkusza stylów tylko do pojedynczego dokumentu, możesz uwzględnić te reguły w sekcji nagłówka dokumentu HTML za pomocą znacznika <style>.

Reguły zdefiniowane w wewnętrznym arkuszu stylów zastępują reguły zdefiniowane w zewnętrznym pliku CSS.

Przykład

Przepiszmy jeszcze raz powyższy przykład, ale tutaj napiszemy reguły arkusza stylów w tym samym dokumencie HTML za pomocą tagu <style> -

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

To da następujący wynik -

Wbudowany arkusz stylów

Możesz zastosować reguły arkusza stylów bezpośrednio do dowolnego elementu HTML za pomocą styleatrybut odpowiedniego tagu. Należy to zrobić tylko wtedy, gdy chcesz dokonać określonej zmiany tylko w jakimkolwiek elemencie HTML.

Reguły zdefiniowane w elemencie zastępują reguły zdefiniowane w zewnętrznym pliku CSS, a także reguły zdefiniowane w elemencie <style>.

Przykład

Przepiszmy jeszcze raz powyższy przykład, ale tutaj napiszemy reguły arkusza stylów wraz z elementami HTML za pomocą style atrybut tych elementów.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

To da następujący wynik -