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 stylsolid
, czyli ciągła pojedyncza linia.
Selektor
selektor#identyfikator { cecha: wartość }
Identyfikator to wartość atrybutu
id="..."
nadanego selektorowi z poziomu języka HTML.Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.
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).
FORMULARZE
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.
<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>
WITAJ NA MOJEJ STRONIE
MULTIMEDIA
<embed src="/ścieżka dostępu do pliku" width="x" height="y">
Natomiast "x" oznacza szerokość w pikselach, a "y" wysokość wyświetlanego obrazu wtyczki (ang. plug-in), czyli okna na stronie w którym odtwarzany będzie plik. Jeśli nie podamy rozmiarów obrazu wtyczki, może on przyjąć wielkość, która nie pasuje do wymiarów pliku! Rozmiary zależą również od posiadanej przez użytkownika wtyczki.
Polecenie <embed>
jest przydatne jeśli chcemy wstawić na stronę jeden z plików multimedialnych:
- *.wav - plik dźwiękowy typu "wav"
- *.mid - plik dźwiękowy typu "midi"
- *.avi - plik typu "avi"
- *.ra - plik Real Audio Player
- *.mp3 - plik dźwiękowy typu "mp3" (MPEG Layer-3)
- *.mpeg - plik typu "mpeg"
- *.mov - plik typu "mov"
- *.asf - plik typu "asf"
- i inne
Polecenie to współpracuje z różnymi wtyczkami, dzięki którym teoretycznie może odtwarzać nowe formaty plików multimedialnych. Wtyczka (czyli plug-in) to specjalny niewielki program, który można doinstalować do przeglądarki, zwiększając jej możliwości. Po wywołaniu polecenia, wprost na stronie powinno zostać wyświetlone okno (o podanych rozmiarach), w którym będzie odtwarzany wskazany plik.
Należy pamiętać, że pliki multimedialne mają zwykle duże rozmiary, dlatego najlepiej na początku strony umieścić tekst, a dopiero na końcu polecenie <embed>
. W takim przypadku w pierwszej kolejności wczyta się tekst.
Polecenie <embed>
sprawia wiele kłopotów nawet w przeglądarkach, które je interpretują! Ponadto należy pamiętać, że pliki multimedialne mają zwykle bardzo duże rozmiary, a więc wczytywanie takiej strony w Internecie, może trwać potwornie długo!
Możliwe jest również bezpośrednie osadzenie na stronie dokumentu PDF. Jest to format, który stał się powszechnym standardem publikacji elektronicznych. Umożliwia m.in. różnorodne formatowanie tekstu, wstawianie grafiki i inne. Dokumenty PDF można stworzyć np. przy użyciu programu wbudowanego w pakiet biurowy WordPerfect Office 2000, natomiast aby przeglądać pliki PDF, trzeba dysponować darmowym programem Adobe Reader.
Aby można było osadzić na stronie WWW plik PDF, użytkownik oglądający nasz serwis musi mieć zainstalowany program Adobe Reader.
Dodatkowo należy pamiętać o podaniu rozmiarów obiektu EMBED (atrybuty width="..."
oraz height="..."
), ponieważ jeśli tego nie zrobimy, w MSIE otrzymamy zbyt małe okienko (uniemożliwiające czytanie), natomiast w Netscape Navigatorze trzeba będzie kliknąć prawym przyciskiem myszki i wybrać polecenie "Open"