stb-4
marginesy
Kaskadowe arkusze stylów do formatowania wszystkich elementów wykorzystują model pudełka. W praktyce polega to na tym, że wszystkie elementy umieszczane są w dodatkowej przestrzeni o kształcie prostokątów (rysunek 8.1). W ramach każdego pudełka można kontrolować następujące właściwości:
-
Marginesy — odstępy dzielące poszczególne elementy — pudełka.
-
Obramowanie — linie rozdzielające marginesy i dopełnienie.
-
Dopełnienia — odstępy pomiędzy elementem a otaczającą go ramką. Dopełnienia bardzo często nazywane są również marginesami wewnętrznymi.
-
Szerokość.
-
Wysokość.
 |
|
Rysunek 8.1. Schemat pudełka |
Oczywiście nic nie stoi na przeszkodzie, aby dla pojedynczego elementu określić wszystkie dostępne właściwości.
Marginesy
Margines to obszar występujący po zewnętrznej stronie obramowania elementu. Jest on obecny w każdym elemencie użytym na stronie WWW. Za pomocą CSS można kontrolować lewy, prawy, górny oraz dolny margines.
Lewy, prawy, górny i dolny margines
|
margin-left | margin-right | margin-top | margin-bottom |
|
|
Dostępne wartości: |
wartość liczbowa | wartość procentowa | auto | inherit |
|
Wartość domyślna: |
0 |
|
Przykład: |
p {margin-left:1cm;} |
|
Dziedziczenie: |
Nie |
|
Obsługa: |
Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari
|
Tekst
Jeśli chcemy umieścić na stronie WWW zwykły tekst, możemy wpisać go bezpośrednio z klawiatury - w miejsce właściwej treści dokumentu (patrz: Ramy dokumentu). Nie trzeba przy tym stosować żadnych dodatkowych poleceń. Należy jednak pamiętać, że przeglądarka internetowa automatycznie zawinie wszystkie wiersze, dlatego w edytorze HTML tekst możemy wpisywać dowolnie, np. po wpisaniu:
To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst...
Na ekranie otrzymamy:
To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst...
W edytorze możemy zakończyć linię (klawisz Enter) w dowolnym miejscu - tam gdzie będzie nam wygodnie. Nie należy również przedzielać wyrazów z jednej linii do drugiej za pomocą myślnika:
To jest zwykły tekst... To jest zwykły tekst... To jest zwy- kły tekst...
Zaznaczony wyraz powinniśmy wpisać normalnie. Przeglądarka sama ustawi go w odpowiedniej linii.
czcionki
Czcionka, zaraz po kolorze, jest prawdopodobnie najbardziej podstawową właściwością strony. W tym artykule nie pokażę żadnych "sztuczek", ale przedstawię jaki zakres wykorzystania czcionek umożliwia CSS.
Ponieważ nie wszystkie czcionki są dostępne na każdym komputerze (istnieją setki tysięcy czcionek i spora część z nich nie jest darmowa), CSS zapewnia system "awaryjny" (ang. fallback). Na początku wymieniasz czcionki, których chcesz używać, a później czcionki, których chciałbyś/chciałabyś użyć zamiast nich, jeśli te pierwsze nie są dostępne. Taka lista powinna być zakończona tzw. czcionką rodzajową (albo generyczną, ang. generic font), których jest pięć: serif, sans-serif, monospace, cursive oraz fantasy.
| Font family | Your browser | Sample image |
|---|---|---|
| 'sans-serif': normalne czcionki szeryfowe | ||
Arial, sans-serif |
Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem |  |
Helvetica, sans-serif |
Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem |  |
Verdana, sans-serif |
Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem |  |
Trebuchet MS, sans-serif |
Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem |  |
Gill Sans, sans-serif |
Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem |  |
Noto Sans, sans-serif |
Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem |  |
Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif |
Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem |  |
Arial Narrow, sans-serif |
Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem |  |
sans-serif |
Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem |
|
Tło
Jeśli chcemy ustalić kolor tła oraz tekstu na całej stronie możemy użyć dodatkowych wartości atrybutu dla znacznika <body>. Wartości te ("background-color: ...; color: ...") nie wpisujemy w miejscu właściwej treści strony - tak jak w przypadku znaczników - lecz w atrybucie style="..." wewnątrz znacznika otwierającego <body> (przed właściwą treścią) - tak jak pokazano powyżej - ponieważ nie są one oddzielnymi znacznikami tylko wartościami atrybutu. Należy również pamiętać, że na stronie może się znajdować tylko jeden znacznik <body>. Wszystkie atrybuty które się do niego odnoszą (jak na przykład powyższy), wpisuje się do tego samego znacznika (otwierającego), a nie wstawia się nowego w innym miejscu strony.
<body style="background-color: kolor tła; color: kolor tekstu"> Tu jest właściwa treść strony </body>
Selektory
Wyrazy "cecha" (ang. property) oraz "wartość" (ang. value) określają atrybuty elementu i zostaną opisane w dalszych rozdziałach. Tutaj będą przedstawione jedynie selektory.
Selektor typu jest podstawowym rodzajem selektora. Pozwala on wybrać pojedynczy zwykły element dokumentu HTML podanego typu, czyli o określonej nazwie, a następnie nadać mu atrybuty (za pomocą cechy oraz wartości - opisane w następnych rozdziałach). Można powiedzieć, że selektor ten to inaczej element (znacznik), występujący w kodzie źródłowym strony.
h6 { color: red }