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.

 
Warto powtórzyć
  1. W jaki sposób tworzyliśmy i jak wykorzystywaliśmy style w edytorze tekstu?
  2. 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 IP1-3_T44_c1_Strona
  1. 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.
  2. Zapisz plik pod tą samą nazwą.
Wskazówki:
  • 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

Wykonaj ćwiczenie zgodnie z treścią w podręczniku. Plik zapisany w ćwiczeniu 1.

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; }

Zobacz przykład

Możliwe jest także ustawienie jako tła strony obrazka.
body { background-image: url(obrazek.gif); }

Zobacz przykład

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

Wykonaj ćwiczenie zgodnie z treścią w podręczniku. Plik zapisany w ćwiczeniu 2.

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:

Jestem:




Wyrażam zgodę na przesyłanie pocztą elektroniczną informacji o konferencjach i szkoleniach, nowych produktach i usługach, promocjach oraz innych informacji marketingowych.

Wyrażam zgodę na przetwarzanie moich danych osobowych, w celu świadczenia usług na stronie wydawnictwa przez MIGRA sp. z o.o., Wrocław, ul. Świeradowska 51-57 (REGON: 932280050) zgodnie z europejskim rozporządzeniem o ochronie danych osobowych z dnia 27 kwietnia 2016 r. (Dz. Urz. UE L nr 119, str. 1) oraz ustawą z dnia 18 lipca 2002 r. o świadczeniu usług drogą elektroniczną (Dz.U. 2002 nr 144 poz. 1204 z zm.)

Twoja książka

Informatyka 1-3. Podręcznik dla szkół ponadpodstawowych. Zakres podstawowy.

Zobacz również
Temat 42.
Temat 43.

Dołącz do nas
Kontakt
Migra Sp. z o.o.
ul. Świeradowska 51/57
50-559 Wrocław

tel. 71 75 06 230
faks 71 75 06 235
biuro@migra.pl
www.migra.pl
Kapitał zakładowy: 80000 zł
NIP: 896-12-85-858
REGON: 932280050
KRS: 0000104198
Sąd Rejonowy dla Wrocławia-Fabryczna we Wrocławiu, VI Wydział Gospodarczy Krajowego Rejestru Sądowego
Migra Sp. z o.o.
ul. Świeradowska 51/57
50-559 Wrocław

tel. 71 75 06 230
faks 71 75 06 235
biuro@migra.pl
www.migra.pl
Dla nauczyciela
Materiały metodyczne (m.in. scenariusze lekcji, sprawdziany, rozwiązania zadań)
Pomoce dla nauczyciela
Copyright © Migra