W poprzednich częściach tego kursu CSS poznaliśmy sposoby, za pomocą których możemy dodać reguły CSS do dokumentu HTML. Poznaliśmy również do czego wykorzystywane są selektory CSS. Przyszedł czas abyśmy bliżej przyjrzeli się właściwościom CSS, bo to właśnie one mają wpływ na wygląd danego elementu HTML.

W realnym świecie, gdy chcielibyśmy zmienić wygląd białej, czystej kartki papieru, to moglibyśmy to uczynić za pomocą różnych czynności. Moglibyśmy zmienić jej kolor, kształt, rozmiar lub moglibyśmy namalować coś na niej.

W świecie wirtualnym za zmianę wyglądu danego elementu HTML odpowiadają właściwości CSS, które dzielą się na różne kategorie. 

Właściwości CSS możemy podzielić na kilka grup kategorii. Każda z tych grup jest odpowiedzialna za zmianę konkretnych cech wyglądu elementu HTML, na przykład:

• Tekst - właściwości odpowiedzialne za formatowanie cech wyglądu tekstu w danym elemencie HTML, np. text-align:center; wyśrodkuje tekst w elemencie.
• Czcionka - właściwości odpowiedzialne za formatowanie wyglądu czcionki tekstu w danym elemencie HTML, np. font-size:15px; zmieni rozmiar wyświetlanej czcionki tekstu.
• Rozmiary - właściwości odpowiedzialne za formatowanie szerokości i wysokości w danym elemencie HTML, np. width:200px; sprawi że szerokość elementu HTML będzie wynosić 200 pikseli.
• Tło - właściwości odpowiedzialne za formatowanie cech wyglądu tła w danym elemencie HTML, np. background-color:lightblue; zmieni kolor tła elementu HTML na jasnoniebieski.
• Marginesy - właściwości odpowiedzialne za formatowanie wartości marginesów wewnętrznych i zewnętrznych w danym elemencie HTML, np. margin:10px; sprawi że wszystkie marginesy zewnętrzne elementu HTML będą wynosić 10 pikseli.
• Obramowanie - właściwości odpowiedzialne za formatowanie cech wyglądu obramowania w danym elemencie HTML, np. border-top-style:solid; doda do elementu HTML górne obramowanie, którego stylem będzie styl solid, czyli ciągła pojedyncza linia.

Reszta właściwości została opisana w w części przeznaczonej na szczegółowy opis właściwości CSS.

Przy poznawaniu właściwości CSS pierwszą informacją na jaką powinniśmy zwrócić uwagę jest to, czy dana właściwość jest poprawnie interpretowana przez wszystkie najnowsze wersje najpopularniejszych przeglądarek internetowych, takich jak: Firefox, Opera, Safari, Google Chrome, Internet Explorer.

O ile właściwości należące do specyfikacji CSS1 i CSS2 są w większości poprawnie interpretowane przez wszystkie najnowsze przeglądarki internetowe, tak właściwości CSS należące do specyfikacji CSS3, która jest ciągle rozwijana, już niekoniecznie (przynajmniej na dzień dzisiejszy, w przyszłości to się zmieni).

Co się stanie gdy dana przeglądarka internetowa nie interpretuje właściwości CSS, którą użyliśmy w naszym kodzie, do określenia wyglądu elementu HTML?

Nie powoduje to błędu, właściwości CSS, które są poprawnie interpretowane przez daną przeglądarkę internetową, zostaną przypisane do danego elementu HTML, a właściwości CSS, które nie są interpretowane przez daną przeglądarkę internetową, zostaną pominięte. Dlatego ważne jest to, aby właściwości CSS, które nie są interpretowane przez wszystkie najnowsze wersje najpopularniejszych przeglądarek internetowych, a które chcemy dodać do danego elementu HTML, nie psuły wyglądu strony internetowej, w przypadku gdy zostaną one "niezrozumiane", czyli pominięte przez daną przeglądarkę internetową.

Przykładowo, właściwość background-color:lightblue; doda do elementu jasnoniebieski kolor tła i będzie on poprawnie interpretowany przez wszystkie przeglądarki internetowe.

Natomiast właściwość box-shadow:4px 4px 0 black; doda do elementu HTML cień, lecz przeglądarka Internet Explorer w wersji wcześniejszej niż 9 nie interpretuje właściwości box-shadow, a więc zostanie ona pominięta we wspomnianej wersji przeglądarki Internet Explorer, jednak nie popsuje to wyglądu naszego elementu HTML.

Przy poznawaniu poszczególnych właściwości CSS należy również zwracać uwagę na inne rzeczy, o których powiemy sobie w dalszych częściach tego kursu CSS, gdy będziemy zapoznawać się z innymi zagadnieniami języka CSS.

W dalszych częściach tego działu przyjrzymy się bliżej niektórym grupom właściwości CSS, natomiast w następnej części kursu CSS poznamy do czego są wykorzystywane przedrostki, które są czasami dołączane do nazwy danej właściwości CSS.

Zewnętrzny arkusz stylów

<head>
	(...)
	<link rel="Stylesheet" href="/style.css">
	(...)
</head>

Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet stosowania stylów. Pozwala nam to zdefiniować takie samo formatowanie określonych elementów na wielu stronach jednocześnie. Dzięki temu, za pomocą tego jednego arkusza, wszystkie nasze strony w obrębie całego serwisu mogą mieć pewne wspólne cechy. Dodatkowo jeśli w ostatniej chwili zdecydujemy się zmienić np. rodzaj czcionki na wszystkich stronach, możemy to zrobić, modyfikując jedynie zewnętrzny arkusz stylów, bez konieczności zmiany każdej strony osobno. Pozwala to zaoszczędzić mnóstwo czasu (zwłaszcza niezdecydowanym ;-)

Wstawienie takiego zewnętrznego arkusza stylów jest bardzo proste. Wystarczy wpisać w treści nagłówkowej każdego z dokumentów (pomiędzy znacznikami <head> a </head>), przedstawioną powyżej linijkę. Deklaracje stylów zawarte w zewnętrznym arkuszu, zostaną automatycznie przeniesione do podanej strony (podczas jej wyświetlania). Wszystkie podstrony serwisu z osadzonym w swoim nagłówku takim poleceniem, uzyskają wygląd, określony w załączonym arkuszu stylów.

W pojedynczym dokumencie HTML można dołączyć dowolną liczbę zewnętrznych arkuszy stylów - każdy jako osobny element <link rel="Stylesheet">. W przypadku konfliktów, ważniejsze będą deklaracje z arkusza dołączonego później. Zwykle tworzy się pojedynczy zewnętrzny arkusz i załącza go w całym serwisie, czyli na wszystkich podstronach. Czasami jednak dodatkowo poza nim projektuje się osobne arkusze, ustalające wygląd np. odrębnych kategorii tematycznych serwisu. Mamy wtedy sytuację, gdy na stronie głównej jest dołączony tylko jeden arkusz stylów, a na podstronach kategorii tematycznych - po dwa.

A teraz kilka słów o tym, jak napisać taki zewnętrzny arkusz stylów. Jest on po prostu zwykłym plikiem tekstowym. Aby go utworzyć, wystarczy zwykły edytor tekstu, w którym piszemy takie same deklaracje stylów selektor { cecha: wartość }, jak w przypadku wewnętrznego arkusza stylów. Oczywiście można się posłużyć specjalnym edytorem CSS. Należy jedynie pamiętać, że plik będący zewnętrznym arkuszem stylów musi mieć rozszerzenie *.css!

Wstawienie białych znaków (spacje, tabulacje, znaki nowej linii) w arkuszu CSS nie ma wpływu na jego działanie. Dlatego możesz ułożyć wpisywane reguły CSS w taki sposób, aby były bardziej czytelne.

Znacznik LINK może znajdować się tylko i wyłącznie w nagłówku dokumentu.

W MSIE 8.0 i starszych można osadzić tylko 31 zewnętrznych arkuszy CSS - deklaracje z następnych plików zostaną pominięte!

PRZYKŁAD:

A oto przykładowy zewnętrzny arkusz stylów:

Zaznacz kod Edytuj na żywo

/* SELEKTORY: */
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #003868;
	background-color: #80B8E8;
	margin: 6mm;
}

p {
	text-align: justify;
}

pre, code {
	font-size: 8pt;
}

Selektor identyfikatora

selektor#identyfikator { cecha: wartość }

Jako identyfikator należy podać dowolny pojedynczy wyraz, który nie może zawierać znaków: spacji, kropki, przecinka, dwukropka, pytajnika, nawiasów, znaku równości, plusa itp. Może natomiast zawierać litery (A-Z, a-z), cyfry (0-9), myślniki ("-") i podkreślniki ("_"). Lepiej nie używać polskich liter. Nie może się on również rozpoczynać cyfrą ani myślnikiem. Jeśli koniecznie chcemy użyć "zakazanych" znaków, należy w deklaracji poprzedzić je odwróconym ukośnikiem "\", np. deklaracja: selektor#B\&W\? { cecha: wartość } odpowiada identyfikatorowi: id="B&W?".

Identyfikator może wystąpić tylko raz w hierarchii drzewa dokumentu, czyli w pojedynczym dokumencie nie mogą się znaleźć dwa elementy z takimi samymi identyfikatorami!

Polecenie to pozwala, na nadanie określonych atrybutów formatowania dla elementu, który ma jednoznaczny identyfikator (ID), czyli występuje tylko raz w drzewie dokumentu (w odróżnieniu od klasy).

Przykład

Jeśli jeszcze niezbyt dobrze rozumiesz formularze, specjalnie dla Ciebie napisałem ten przykład. Myślę, że po jego przeczytaniu, wyjaśni się wiele niezrozumiałych dotąd rzeczy.

Wyróżnione fragmenty, można (a nawet trzeba) zastąpić innym tekstem. Są to np. pytania, poszczególne odpowiedzi, wartości parametrów i inne. Czcionką pogrubioną (pomiędzy znakami <!-- a -->) zaznaczono komentarze. Nie są one oczywiście konieczne (możesz je pominąć). Natomiast pozwalają zorientować się, czego dotyczy fragment kodu poniżej nich.

Zaznacz kod Edytuj na żywo

<form action="mailto:twój_adres_poczty@domena" method="post" enctype="text/plain"><div>
<!-- Podstawowe pole tekstowe -->
<input name="Imię">Podaj swoje imię<br>
<input name="Nazwisko">Podaj swoje nazwisko
<!-- Pole typu RADIO -->
<p>Podaj swoją płeć:</p>
<input type="radio" name="Płeć" value="Kobieta">Kobieta
<input type="radio" name="Płeć" value="Mężczyzna">Mężczyzna
<!-- Pole typu RADIO -->
<p>Ile masz lat?</p>
<input type="radio" name="Wiek" value="mniej niż 15">mniej niż 15<br>
<input type="radio" name="Wiek" value="15-19">15-19<br>
<input type="radio" name="Wiek" value="20-29">20-29<br>
<input type="radio" name="Wiek" value="30-39">30-39<br>
<input type="radio" name="Wiek" value="40-60">40-60<br>
<input type="radio" name="Wiek" value="więcej niż 60">więcej niż 60 
<!-- Pole typu CHECKBOX -->
<p>Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?</p>
<input type="checkbox" name="Muzyka" value="Rock">Rock<br>
<input type="checkbox" name="Muzyka" value="Heavy Metal">Heavy Metal<br>
<input type="checkbox" name="Muzyka" value="Pop">Pop<br>
<input type="checkbox" name="Muzyka" value="Techno">Techno<br>
<input type="checkbox" name="Muzyka" value="Muzyka poważna">Muzyka poważna<br>
<input type="checkbox" name="Muzyka" value="Inna">Inna (podaj jaka):
<input name="Muzyka">
<!-- Lista rozwijalna (typ podstawowy) z zaznaczoną opcją domyślną -->
<p>Jakiej przeglądarki internetowej używasz?</p>
<select name="Przeglądarka">
	<option selected>Internet Explorer</option>
	<option>Netscape</option>
	<option>Opera</option>
	<option>Mozilla</option>
	<option>Inna</option>
</select>
<!-- Lista rozwijalna (typ rozszerzony) z zaznaczoną opcją domyślną i zmniejszoną wysokością -->
<p>Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?</p>
<select name="System operacyjny" multiple size="3">
	<option selected>Dos</option>
	<option>Windows</option>
	<option>Linux</option>
	<option>Inny</option>
</select>
<!-- Pole komentarza (o powiększonych rozmiarach oraz z tekstem domyślnym) -->
<p>Podaj swój komentarz:</p>
<textarea name="Komentarz" cols="50" rows="10">Proszę, wpisz tutaj jakiś komentarz...</textarea>
<br><br><br>
<!-- Przycisk WYŚLIJ -->
<input type="submit" value="Wyślij formularz">
<!-- Przycisk WYCZYŚĆ DANE -->
<input type="reset" value="Wyczyść dane">
</div></form>