The Blog

By / CSSEgzamin E.14Egzamin EE.09

CSS: implementacja arkusza styli.

Implementacja arkusza stylów

Kaskadowe arkusze stylów na stronie internetowej możemy zaimplementować głównie na trzy sposoby. Za pomocą zewnętrznego pliku .css, za pomocą atrybutu style=”[…]” dołączonego do danego obiektu html oraz za pomocą znacznika <style>[…]</style>.

<head>(...)
    <style>.wewnetrzny{color: green; }</style>
    <link rel="stylesheet" href="01_styl.css">
</head>

<body>
    <h2 class="zewnetrzny">Tekst zdefiniowany za pomocą pliku zewnętrznego</h2>
    <h2 class="wewnetrzny">Tekst zdefiniowany za pomocą znacznika &lt;style&gt;</h2>
    <h2 style="color:red;">Tekst zdefiniowany za pomocą atrybutu style=""</h2>
</body>

Kolejność

Arkusze stylów są odczytywane w następującej kolejności: na początku jest czytany domyślny styl dołączony do przeglądarki, następnie style zdefiniowane w osobnych plikach CSS, potem style w znacznikach <style>, na końcu zaś style będące przy samych znacznikach języka html. Ta kolejność odczytywania jest nazywana kaskadowością.

Tak więc style, które są domyślnie zdefiniowane przez przeglądarkę, zostaną nadpisane przez te z plików .css, zaś te ewentualnie mogą zostać nadpisane przez definicje będące przy samych znacznikach. Tutaj nie ma znaczenia, czy styl zostanie odczytany ze znacznika <style>, czy z zewnętrznego arkusza stylów, a sama kolejność odczytu tych stylów, ten który jest zawarty później w kodzie, ten zastępuje ewentualne atrybuty wcześniejszego stylu.

Różne kolejności znacznika <link rel> oraz <style>


Jednak tutaj warto zauważyć, że jeśli mamy różne elementy języka HTML, to nie jest tutaj ważna kolejność odczytu danego arkusza stylów ale ważność elementu. Tak więc cechy zdefiniowane dla konkretnego obiektu (za pomocą atrybutu style=””) będą ważniejsze niż cechy dla danego ID, zaś cechy ID będą ważniejsze niż cechy klasy, zaś cechy klasy ważniejsze od cech danego typu elementów.


Przedstawienie kolejności cech na podstawie #wewnetrzny oraz .zewnetrzny.


Atrybutem, który zaburza kolejność czytania stylów jest atrybut !important, stosowany przy definicji cechy, która ma być bezwzględnie umieszczona. Oczywiście stosowanie tego atrybutu nie jest polecane ze względu na ewentualne problemy przy modyfikacji kodu.

Element posiadający style=”color:red”, id #wewnetrzny oraz klasę .zewnetrzny z atrybutem !important po cesze koloru.


Powtórzenie

  1. Definicje możemy dołączać za pomocą oddzielnych plików .css (zwykle najbardziej pożądane rozwiązanie) za pomocą <link rel=”stylesheet” href=”nazwa.css”>, wewnętrznego elementu <style></style> oraz atrybutu elementu HTML <element style=””></element>.
  2. Ostatecznie zostanie przeczytana cecha:
    1. Która jest w arkuszu stylów ostatnim z kolejności,
    2. Która jest ważniejsza, czyli atrybut style elementu HTML jest najważniejszy, następnie ID, potem klasa, na końcu definicja ogólna elementów.
    3. Najważniejszy jest jednak atrybut z wartością !important po innych wartościach, jednak nie polecamy jego stosowania.

Ćwiczenia

  1. Do poniższego kodu dołącz arkusze stylów trzema różnymi sposobami. Zdefiniuj każdy div na posiadający wymiary 200 na 200 (width, height), zaś poszczególne kolory tła (background-color) dopasuj wedle własnego uznania, przy czym na te trzy klasy wpłyń trzema różnymi stylami.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Zadanie</title>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>
</html>



Autor tekstu: Jacek Woźniak

kompendiumEE09

Jestem projektem wykonanym przez czwórkę znajomych mających podobne zainteresowania. Możesz znaleźć wszystkie materiały z zakresu E14 na stronie: http://danda.e-kei.pl/jacek/kompendiumEE_IX/