Kaskadowość
i dziedziczenie

Karta pracy 2016/2017

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.

Wartość domyślna2

W pliku cascade.html w elemencie style dodaj kod:

h1 {
color: initial;
}

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

Wymuszenie dziedziczenia 3

W pliku cascade.html w elemencie body dodaj kod:

<div>
<h2>Wymuszenie dziedziczenia</h2>
</div>

W pliku cascade.html w elemencie style dodaj kod:

div {
border: 1px solid;
}

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

h2 {
border: inherit;
}

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


  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. Wartość initial - wartość początkowa (lub domyślna) reguły.
  3. Wartość inherit - wartość reguły dziedziczona po elemencie rodzica.

Kaskadowość

Zasada kaskadowości 1

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 2

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. W kaskadowych arkuszach stylów obowiązuje reguła definiowana na końcu.
  2. Dyrektywa !important - zmiana kolejności w kaskadzie.