Informatyka

Temat: Kaskadowe arkusze stylów

Strony internetowe tworzymy, korzystając z języka HTML. Do pisania kodu w tym języku nie będzie ci potrzebny dostawca usług internetowych ani nawet podłączenie do Internetu. Aktualnie powszechnie stosowanym standardem jest HTML5.

Przydatne linki i programy:
Kaskadowe arkusze stylów (CSS – z ang. Cascading Style Sheets) pozwalają opisywać sposób wyświe- tlania stron WWW. Stanowią uzupełnienie znaczników języka HTML, udostępniając jednocześnie znacznie szerszy zakres możliwości. Przykładowa reguła zapisana w języku CSS może mieć następującą postać:
p { font-family: Verdana; font-size: 11px; }
Najczęściej wykorzystywane atrybuty CSS i sposoby określania ich wartości
Nazwa atrybutuFunkcja
width: szerokość Określa szerokość elementu.
height: wysokość Określa wysokość elementu.
margin: wielkość marginesów Określa wielkość marginesów dla elementu, w kolejności: górny, prawy, dolny, lewy.
border: grubość styl kolorOkreśla grubość, styl i kolor obramowania.
font-family: rodzina krojów Określa rodzinę krojów pisma dla tekstu.
font-size: wielkość Określa wielkość pisma dla tekstu.
font-style: lista atrybutówOkreśla atrybuty tekstu. Możliwe wartości: normal, italic, oblique.
font-weight: pogrubienie Określa pogrubienie tekstu. Możliwe wartości: normal, bold, bolder, lighter lub liczba określająca grubość pisma.
color: kolorOkreśla kolor elementu.
background-color: kolor Określa kolor tła elementu.


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.

Przykład 2. 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.

Przykład 3. 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. Po najechaniu (ang. hover) na hiperłącze kursorem jego kolor zmieni się na czerwony. Odwiedzone (ang. visited) hiperłącza będą koloru ciemnoszarego.

Przykład 4. Ustawianie podświetlania hiperłączy po najechaniu myszą
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.

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, 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>
Przykład z wykorzystaniem Kaskadowe arkusze stylów CSS


Pliki do skopiowania:

Plik index.html
<html>
<head>
<title> Kaskadowe arkusze stylów </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Informatyka" />
<meta name="keywords" content="informatyka"/>
<link rel="stylesheet" href="style22.css" type="text/css">
</head>

<body>
<center><h1><b>Kaskadowe arkusze stylów</b></h1></center>
<hr />

<p class="mojaKlasa_1">Ten akapit będzie używał czcionki określonej w definicji klasy mojaKlasa_1.</p>
<p>Ten <span class="mojaKlasa_1">fragment tekstu</span> będzie używał czcionki określonej w definicji klasy mojaKlasa_1.</p>

Linki:
<ul>
<li><a href="http://zsgh.bytom.pl" target="_blank">Strona szkoły zsgh.bytom.pl</a> </li>
<li><a href="https://www.facebook.com/ZSGH.Bytom" target="_blank">Strona FB szkoły</a></li>
</ul>
<hr />
<p class="mojaKlasa_2">Ten akapit będzie używał czcionki określonej w definicji klasy mojaKlasa_2.</p>
<hr />

<div class="mojaKlasa_2"><marquee class="mojaKlasa_3">Koniec strony z definicją klasy mojaKlasa_3</marquee></div>

</body>
</html>




Plik style22.css
body { background-color: #d5f3ff; }
a { color: #0000ff; }
a:hover { text-decoration: none; color: #ff0000; }
/* a:visited { color: #808080; } */

.mojaKlasa_1 { font-size: 26px; font-weight: bold; color: #800000;}
.mojaKlasa_2 { font-size: 22px; font-weight: bold; color: #800080; text-align: center;}
.mojaKlasa_3 { font-size: 28px; width: 700px; font-weight: bold; color: #ff0000; }




Powinieneś umieć: