CSS - Inclusion

Istnieją cztery sposoby łączenia stylów z dokumentem HTML. Najczęściej używane metody to wbudowany CSS i zewnętrzny CSS.

Osadzony CSS - element <style>

Możesz umieścić swoje reguły CSS w dokumencie HTML za pomocą elementu <style>. Ten tag jest umieszczony wewnątrz tagów <head> ... </head>. Reguły zdefiniowane przy użyciu tej składni zostaną zastosowane do wszystkich elementów dostępnych w dokumencie. Oto ogólna składnia -

<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>
   </head>   
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

To da następujący wynik -

Atrybuty

Atrybuty skojarzone z elementami <style> to -

Atrybut	Wartość	Opis
rodzaj	text / css	Określa język arkusza stylów jako typ zawartości (typ MIME). To jest wymagany atrybut.
głoska bezdźwięczna	ekran tty telewizor występ podręczny wydrukować brajl słuchowy wszystko	Określa urządzenie, na którym dokument będzie wyświetlany. Wartość domyślna to all . To jest atrybut opcjonalny.

Wbudowany CSS - atrybut stylu

Możesz użyć atrybutu style dowolnego elementu HTML, aby zdefiniować reguły stylu. Te zasady będą miały zastosowanie tylko do tego elementu. Oto ogólna składnia -

<element style = "...style rules....">

Atrybuty

Atrybut	Wartość	Opis
styl	zasady stylu	Wartość atrybutu style jest połączeniem deklaracji stylu oddzielonych średnikiem (;).

Przykład

Poniżej znajduje się przykład wbudowanego CSS opartego na powyższej składni -

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

To da następujący wynik -

Zewnętrzny CSS - element <link>

Element <link> może służyć do dołączania zewnętrznego pliku arkusza stylów do dokumentu HTML.

Zewnętrzny arkusz stylów to osobny plik tekstowy z rozszerzeniem .cssrozbudowa. Definiujesz wszystkie reguły stylu w tym pliku tekstowym, a następnie możesz dołączyć ten plik do dowolnego dokumentu HTML za pomocą elementu <link>.

Oto ogólna składnia dołączania zewnętrznego pliku CSS -

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

Atrybuty

Atrybuty skojarzone z elementami <style> to -

Atrybut	Wartość	Opis
rodzaj	tekst css	Określa język arkusza stylów jako typ zawartości (typ MIME). Ten atrybut jest wymagany.
href	URL	Określa plik arkusza stylów zawierający reguły stylów. Ten atrybut jest wymagany.
głoska bezdźwięczna	ekran tty telewizor występ podręczny wydrukować brajl słuchowy wszystko	Określa urządzenie, na którym dokument będzie wyświetlany. Wartość domyślna to all . To jest atrybut opcjonalny.

Przykład

Rozważmy prosty plik arkusza stylów o nazwie mystyle.css, w którym obowiązują następujące zasady -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Teraz możesz dołączyć ten plik mystyle.css do dowolnego dokumentu HTML w następujący sposób -

<head>
   <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

Zaimportowany CSS - @import Rule

@import służy do importowania zewnętrznego arkusza stylów w sposób podobny do elementu <link>. Oto ogólna składnia reguły @import.

<head>
   @import "URL";
</head>

Tutaj URL jest adresem URL pliku arkusza stylów zawierającego reguły stylów. Możesz także użyć innej składni -

<head>
   @import url("URL");
</head>

Przykład

Poniżej znajduje się przykład pokazujący, jak zaimportować plik arkusza stylów do dokumentu HTML -

<head>
   @import "mystyle.css";
</head>

Zastępowanie reguł CSS

Omówiliśmy cztery sposoby dołączania reguł arkuszy stylów do dokumentu HTML. Oto reguła zastępująca dowolną regułę arkusza stylów.

Każdy wbudowany arkusz stylów ma najwyższy priorytet. Zatem nadpisuje każdą regułę zdefiniowaną w znacznikach <style> ... </style> lub reguły zdefiniowane w dowolnym zewnętrznym pliku arkusza stylów.
Każda reguła zdefiniowana w znacznikach <style> ... </style> zastąpi reguły zdefiniowane w dowolnym zewnętrznym pliku arkusza stylów.
Każda reguła zdefiniowana w zewnętrznym pliku arkusza stylów ma najniższy priorytet, a reguły zdefiniowane w tym pliku będą stosowane tylko wtedy, gdy powyższe dwie reguły nie mają zastosowania.

Obsługa starych przeglądarek

Wciąż istnieje wiele starych przeglądarek, które nie obsługują CSS. Dlatego powinniśmy uważać podczas pisania naszego osadzonego CSS w dokumencie HTML. Poniższy fragment pokazuje, jak możesz używać tagów komentarzy do ukrywania CSS przed starszymi przeglądarkami -

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

Komentarze CSS

Często może być konieczne umieszczenie dodatkowych komentarzy w blokach arkusza stylów. Tak więc bardzo łatwo jest skomentować dowolną część w arkuszu stylów. Możesz po prostu umieścić swoje komentarze w /*..... to jest komentarz w arkuszu stylów ..... * /.

Możesz użyć / * .... * / do komentowania bloków wieloliniowych w podobny sposób jak w językach programowania C i C ++.

Przykład

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         /* This is a multi-line comment */
      </style>
   </head>

   <body>
      <p>Hello World!</p>
   </body>
</html>

To da następujący wynik -