Kaskadowość
i dziedziczenie

Karta pracy 2020/2021

Adres:
http://plotkarka.eu/KP/css3-cascade.html
Autor:
Radosław Kowaluk

Dziedziczenie

Czynności wstępne

Utwórz plik cascade.html z podstawową strukturą strony WWW w standardzie HTML5.

<!DOCTYPE html>
<html>
 <head>
  <title>Kaskadowość i dziedziczenie</title>
  <meta charset="utf-8"/>
  <style>

  </style>
 </head>
 <body>

 </body>
</html>

Importowanie stylów1

Utwórz plik styleimportowane.css z następującym kodem: 

body {
color: silver;
}

W pliku cascade.html w elemencie style dodaj kod:

@import url("styleimportowane.css");

W pliku cascade.html w elemencie body dodaj kod:

<h1>Importowanie stylów</h1>
<p>Wartość domyślna</p>

Zapisz pliki. Otwórz stronę w przeglądarce.

Kaskadowość

Zasada kaskadowości 2

W pliku cascade.html w elemencie body dodaj kod:

<h3>Zasady kaskadowości</h3>
<h4>Zasady kaskadowości</h4>
<h5>Zasady kaskadowości</h5>

W pliku cascade.html w elemencie style dodaj kod:

h3, h4, h5 {
font-size: 28px;
}
h3, h4 {
font-size: 14px;
}

Zapisz pliki. Otwórz stronę w przeglądarce.

Zmiana zasad kaskadowości 3

W pliku cascade.html w elemencie style dodaj kod:

h4 {
font-size: 7px  !important;
}

Zapisz plik. Otwórz stronę w przeglądarce.

Wgrywanie plików na serwer

Umieść pliki ćwiczeniowe na serwerze po sprawdzeniu kodu.

Zadanie

Zastosuj poznane wiadomości w swoim projekcie

  1. @import - pozwala importować reguły stylów z innych arkuszy stylów. Może być umieszczana w elemencie style lub w pliku styli. Musi być wpisana jako pierwsza (reguła @charset, musi być pierwszą w arkuszu stylów, jeśli istnieje). Import arkusza może być połączona z typami mediów.
  2. W kaskadowych arkuszach stylów obowiązuje reguła definiowana na końcu.
  3. Dyrektywa !important - zmiana kolejności w kaskadzie.