Temat 44. Kaskadowe arkusze stylów CSS
Poniżej znajduje się fragment tematu. Z pełną wersją zapoznasz się w podręczniku Informatyka 1-3.
Wszelkie prawa zastrzeżone. Wszystkie treści na stronie dlaucznia.migra.pl chronione są prawami autorskimi. Dowiedz się więcej.
- W jaki sposób tworzyliśmy i jak wykorzystywaliśmy style w edytorze tekstu?
- Jakie znasz znaczniki języka HTML?
1. Kaskadowe arkusze stylów CSS - wprowadzenie
Kaskadowe arkusze stylów pozwalają opisywać sposób wyświetlania stron WWW. Stanowią uzupełnienie znaczników języka HTML
Przykładowa reguła zapisana w języku CSS może mieć następującą postać:
p { font-family: Verdana; font-size: 11px; }
Przykład 1. Dołączanie stylów CSS do dokumentów HTML
Istnieją dwa sposoby dołączania stylów CSS do dokumentów HTML. Pierwszy z nich polega na umieszczeniu stylów bezpośrednio w dokumencie, wewnątrz znacznika
<style>, dodanego w nagłówku dokumentu HTML.
<head>
<style type="text/css">
p { font-family: Verdana; font-size: 11px; }
</style>
</head>
Drugi sposób polega na umieszczeniu reguł CSS w osobnym pliku. W nagłówku dokumentu HTML dodajemy wtedy odwołanie do pliku stylów CSS.
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
W przypadku takiego odwołania reguły CSS powinny być umieszczone w pliku o nazwie style.css, zapisanym w tym samym katalogu co dokument HTML. Nazwa i położenie pliku z arkuszem stylów mogą być dowolne – określamy je za pomocą atrybutu href w podobny sposób, w jaki wskazywaliśmy elementy docelowe hiperłączy.
Ćwiczenie 1. Stosujemy style do zmiany parametrów czcionki
- Pobierz plik Strona. Używając jednego ze sposobów opisanych w przykładzie 1., dodaj do strony o Wyspach Kanaryjskich regułę CSS określającą czcionkę akapitów. Wypróbuj różne wielkości i kroje czcionek. Następnie zmodyfikuj regułę tak, aby zamiast akapitów dotyczyła całego dokumentu.
- Zapisz plik pod tą samą nazwą.
- Aby zmienić czcionkę w akapitach i listach, można wpisać polecenie w taki sposób:
p, ul, ol { font-family: Arial; font-size: 12 px; }
Polecenie to zmieni czcionkę w akapitach, listach uporządkowanych i nieuporządkowanych na Arial o rozmiarze 12 pikseli. - Aby zmienić czcionkę w całym dokumencie, należy dodać regułę dotyczącą znacznika <body>.
2. Najczęściej wykorzystywane atrybuty CSS i sposoby określania ich wartości
Zapoznaj się z tabelami 1. i 2. z podręcznika, w których zawarte są najczęściej wykorzystywane atrybuty CSS oraz sposoby określania ich wartości.
3. Formatowanie hiperłączy
Przykład 2. Zmiana koloru hiperłączy
Arkusze stylów CSS pozwalają łatwo zmienić wygląd hiperłączy znajdujących się na stronie. Aby zmienić kolory hiperłączy, wystarczy dodać do arkusza stylów następujące trzy reguły:
a { color: #000080; }
a:hover { color: #ff0000; }
a:visited { color: #808080; }
Oznaczają one, że domyślnie hiperłącza będą koloru granatowego (#000080). Po najechaniu (ang. hover) na hiperłącze kursorem jego kolor zmieni się na czerwony (#ff0000). Odwiedzone (ang. visited) hiperłącza będą koloru ciemnoszarego (#808080).
Przykład 3. Ustawianie podświetlania hiperłączy po najechaniu kursorem myszy
Ciekawy efekt można uzyskać, zmieniając kolor tła hiperłącza, na które najedzie kursor.
Na przykład reguła:
a:hover { background-color: #fffecc; }
oznacza, że gdy kursor najedzie na hiperłącze, będzie ono podświetlane na żółto (#fffecc).
Ćwiczenie 2. Zmieniamy wygląd hiperłączy
4. Tło strony
Przykład 4. Zmienianie tła strony
Aby zmienić tło strony na jasnoniebieskie, dodajemy do arkusza stylów CSS definicję:
body { background-color: #d5f3ff; }
Możliwe jest także ustawienie jako tła strony obrazka.body { background-image: url(obrazek.gif); }
W podanej formule obrazek.gif to nazwa obrazka, który ma zostać użyty jako tło.
Warto zauważyć, że jeżeli obrazek tła jest mniejszy od okna przeglądarki, będzie on powielany w pionie i poziomie.
Ćwiczenie 3. Zmieniamy tło strony
5. Klasy elementów
Przykład 5. Stosowanie klas CSS
W arkuszu stylów CSS definiujemy wygląd obiektów danej klasy, tworząc regułę, w której jako selektor podajemy kropkę i nazwę klasy, na przykład:
.mojaKlasa { font-size: 11px; font-weight: bold; }
Od tej pory wszystkie elementy tej klasy będą używały pogrubionej czcionki o rozmiarze 11 pikseli.
Aby określić klasę elementu, dodajemy do znacznika określającego element atrybut
class="nazwa_klasy", na przykład:
<p class="mojaKlasa">Ten akapit będzie używał czcionki określonej
w definicji klasy mojaKlasa.</p>
Ta sama klasa może być na stronie używana wielokrotnie do formatowania elementów
różnych typów. Aby sformatować jedynie fragment tekstu, zawarty na przykład wewnątrz
akapitu, można użyć znacznika <span> … </span>:
<p>Ten <span class="mojaKlasa">fragment tekstu</span> będzie używał
czcionki określonej w definicji klasy mojaKlasa.</p>Przydatne linki
Program Notepad++
https://notepad-plus-plus.org/downloads/
Podziel się swoimi sugestiami do tego tematu
Cały czas się rozwijamy i zależy nam, aby treści dostosować do oczekiwań nauczycieli i uczniów. Masz sugestię do tego tematu? Napisz do nas:
