Dobór palety barw na stronę internetową - CSS
Cele ogólne
Uczeń:
Odczytuje projekt strony (brief strony )
omawia zastosowane technologie.
stosuje podstawowe selektory w pliku CSS
rozpoznaje i rozwiązuje najczęściej występujące problemy.
tworzy szablon strony www wg zadanego projektu
dostosowuje styl znacznika <div> w pliku css
definiuje i tworzy plii css
Przydatne narzędzia/oprogramowanie
edytor html css ...
teoria, ćwiczenia HTML
Czym jest CSS?
CSS jest językiem, który wprowadza style (kolory, zdjęcia, granice, marginesy, tabelki, etc.) do dokumentów HTML, PHP lub XHTML. Zamiast definiowania stylów w dokumencie, definiuje się je w oddzielnym pliku, który może być wykorzystywany przez inne dokumenty. Oznacza to mniejszą ilość kodu w oryginalnym pliku (ważny elemnt w algorytmach wyszukiwarek) jak również łatwiejszy sposób zarządzania wyglądem strony. Plik z rozszerzenie CSS (np.: style.css) musi zostać podłączony do każdej strony, na której chcemy aby dane style były zastosowane. W tym celu umieszamy poniższy kod w sekcji HEAD (pomiędzy zanczniki <head> i </head>):
<link rel="stylesheet" href="style.css" type="text/css">
Oto przykładowa treść pliku CSS:
h1 {
font-size: 20px;
color: red;
background-color: black;
}
a {
color: Blue;
font-size: 3em;
}
.header {
color: red;
font-weight: bold;
}
#footer {
background-color: black;
}
W przykładowym pliku umieściliśmy cztery selektory: h1, a, .header i #footer. Selektory, które definiują pewne sekcje dokumentu, można budować na wiele sposobów z następujących bloków:
element
class
Id
Element zawiera w sobie znacznik HTML (taki jak <p>, <h1>, <td>, <a>, etc.). W powyższym przykładzie zdefiniowaliśmy znacznik <h1> dla całego dokumentu. Określiliśmy kolor tła (czarny), kolor czcionki (biały) oraz wielkość czcionki (20px – o wiele lepszą formą jest podawanie wielkości w em np.:2em, która mówi , że czcionka ma być dwa razy większa od czcionki tekstu).
Zastosowanie class jest także bardzo łatwe. Klasa definuje wszystkie znaczniki, które się w niej znajdują. Dlatego w powyższym przykładzie wszystkie znaczniki klasy będą czerwone i pogrubione. W praktyce, aby użyć klasy stosuje się znacznik <div>, np: <div class="header"> lub każdy inny element, któy chcemy aby posiadał określone właściwości klasy np.: <p class="header">.
Ostatnim blokiem budowlanym jest id. Atrybut ten ma takie same właściwości jak klasa z jednym wyjątkiem – można zamieścić jedynie jeden element z takim samym id na danej stronie, np: <div id="footer">.
Używając tych trzech elemetów można budować bardzo zaawansowane pliki css, które definiują cały rozkład strony oraz właściwości wszystkich znaczników.
Wyjaśnijmy po krótce użyte elemety kodu. Każdy selektor zawiera deklaracje (declarations), w których definiowane są właściwości (property). Właściwości posiadają pewne wartości, które zmieniają definiowany element.
Na przykład:
a {
color: Blue;
font-size: 3em;
}
Selektor a (czyli element linku) ma następującą deklarację, która zawiera następujące właściwości: kolor i rozmiar czcionki. Wartościami tych właścowości są: Blue i 3em. Dobrze jest znać wszystkie powyższe terminy, ponieważ pojawiają się one w literaturze fachowej.
Zadanie 1
W pliku z przykładu z tworzeniem menu za pomocą kaskadowych arkuszy stylówwykonaj następujące modyfikacje:
1. zmień sposób wyświetlania elementów menu na liniowy;
2. dodaj formatowanie poszczególnych linków po ich odwiedzeniu;
3. zmień kolorystykę menu - skorzystaj z włąsnej palety barw.
Układ liniowy poziomo
Układ złożony 1
Układ złożony 2
Test wiedzy
|
Zadanie 1. Kaskadowe arkusze stylów oznaczamy jako A. XML B. CSS C. RGB D. PHP Zadanie 2. Znacznik, do którego ma być zastosowany styl nazywamy A. atrybutem B. wartością C. selektorem D. właściwością Zadanie 3. Zapis <body style="background-color: #C0C0C0"> określa definicję stylu A. wewnętrznego B. zewnętrznego C. inline D. offline Zadanie 4. Do zdeprecjonowanych elementów języka HTML 4.01 nie zaliczamy znacznika A. <center>. B. <s>. c. <b>. D. <u>. Zadanie 5. Do grupowania elementów liniowych, takich jak tekst lub grafiki, można wykorzystać znacznk A. <hr>. B. <span>. C. <title>. D. <pre>.
Podsumowanie
Przykładowe rozwiązania oraz komentarze do wybranych ćwiczeń i zadań