12-345-678

E-mail

Suport

my good website

ENTER YOUR TEXT HERE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..

Read More

Lorem ipsum dolor sit amet

ENTER YOUR TEXT HERE

ENTER YOUR TEXT HERE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Read More

Lorem ipsum dolor sit amet

ENTER YOUR TEXT HERE

własności

Super User
Kategoria: Bez kategorii

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.

selektory

Super User
Kategoria: Bez kategorii

Selektory elementów

Wzór Znaczenie Opis CSS
* każdy element Selektor uniwersalny 2
E element E (element typu E) Selektor typu 1
E F element F, który jest potomkiem elementu E Selektor potomka 1
E > F element F, który jest dzieckiem elementu E Selektor dziecka 2
E + F element F bezpośrednio poprzedzany przez element E Selektor braci 2
E ~ F element F poprzedzany przez element E Ogólny selektor braci 3

Selektory atrybutów

Wzór Znaczenie Opis CSS
E[atr] element E z ustawionym atrybutem "atr" (na jakąkolwiek wartość) Prosty selektor atrybutu 2
E[atr="wart"] element E, którego atrybut "atr" ma wartość dokładnie "wart" Selektor atrybutu o określonej wartości 2
E[atr~="wart"] element E, którego wartość atrybutu "atr" jest listą oddzielonych spacjami wartości, a jedna z nich ma dokładnie wartość "wart" Selektor atrybutu zawierającego określony wyraz 2
E[lang|="en"] element E, którego atrybut "lang" ma rozdzieloną łącznikami listę wartości, zaczynającą się (z lewej strony) od "en" Selektor atrybutu zawierającego łączniki 2
E[atr^="wart"] element E, którego wartość atrybutu "atr" rozpoczyna się dokładnie od "wart" Selektor atrybutu o wartości rozpoczynającej się od... 3
E[atr$="wart"] element E, którego wartość atrybutu "atr" kończy się dokładnie dokładnie na "wart" Selektor atrybutu o wartości kończącej się na... 3
E[atr*="wart"] element E, którego wartość atrybutu "atr" zawiera "wart" Selektor atrybutu zawierającego określony tekst 3

Selektory specjalne

Wzór Znaczenie Opis CSS
DIV.wart Tylko HTML. To samo co DIV[class~="wart"] Klasy selektorów 1
E#ident element E z identyfikatorem ID równym "ident" Selektor identyfikatora 1

Selektory pseudoelementów

Wzór Znaczenie Opis CSS
P:first-line pierwsza linijka akapitu P Pierwsza linia 1
P:first-letter pierwsza litera akapitu P Pierwsza litera 1
E:before wstawia treść przed zawartością elementu E Przed... 2
E:after wstawia treść po zawartości elementu E Po... 2

Selektory pseudoklas

Wzór Znaczenie Opis CSS
E:root element E, który jest korzeniem dokumentu Korzeń 3
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)		 element E, który jest odpowiednio: n-tym dzieckiem jego rodzica, n-tym dzieckiem licząc od końca, n-tym bratem typu E, n-tym bratem typu Elicząc od końca Pseudoklasy cykliczne 3
E:first-child element E, który jest pierwszym dzieckiem jego rodzica Pierwsze dziecko 2
E:last-child element E, który jest ostatnim dzieckiem jego rodzica Ostatnie dziecko 3
E:only-child element E, który jest jedynym dzieckiem jego rodzica Jedyne dziecko 3
E:first-of-type
E:last-of-type
E:only-of-type		 element E, który jest odpowiednio: pierwszym, ostatnim bądź jedynym bratem typu E Pseudoklasy typu 3
E:empty element E, który nie ma dzieci ani nie zawiera tekstu Pusty element 3
E:link
E:visited		 element E, który jest kotwicą hiperlinku (odsyłaczem), której cel (strona docelowa) jeszcze nie został odwiedzony (:link) lub został już odwiedzony (:visited) Odsyłacz podstawowy

Odsyłacz odwiedzony		 1
E:active
E:hover
E:focus		 element E podczas pewnych akcji użytkownika (:active - aktywacja, :hover - wskazanie, :focus - zogniskowanie) Aktywacja

Wskazanie myszką

Zogniskowanie		 1
E:target element E, który jest etykieta adresu dokumentu Etykieta 3
E:lang(c) element typu E, który jest napisany w języku c (np.: pl - polski, en - angielski) Atrybut języka 2
E:enabled
E:disabled		 element E (interfejsu użytkownika), który jest odblokowany bądź zablokowany Blokada 3
E:checked element E (interfejsu użytkownika), który jest zaznaczony (np. pole wyboru lub opcji) Zaznaczenie 3
E:not(s) element E, którego nie kojarzy prosty selektor s Negacja 3

formularze

Super User
Kategoria: Bez kategorii

FORMULARZE

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 Wypróbuj kod

<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="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="multiple" size="3">
	<option selected="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>

wstawianie stylów

Super User
Kategoria: Bez kategorii

WSTAWIANIE STYLÓW

Zewnętrzny arkusz stylów

<head>
	(...)
	<link rel="Stylesheet" type="text/css" href="/style.css" />
	(...)
</head>
gdzie "style.css" jest zewnętrznym arkuszem stylów. Natomiast znaki (...) oznaczają inne polecenia, które zwykle pojawiają się w nagłówku dokumentu, np. deklaracja strony kodowej.

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 (X)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!

multimedia

Super User
Kategoria: Bez kategorii

MULTIMEDIA

Osadzenie pliku

(interpretuje: Internet Explorer, Netscape/Mozilla/Firefox, Opera, Chrome)

UWAGA!
Polecenie EMBED nie wchodzi w skład specyfikacji HTML 4.01!

<embed src="/ścieżka dostępu do pliku" width="x" height="y" />
gdzie jako "ścieżka dostępu do pliku" należy podać lokalizację na dysku, gdzie znajduje się żądany plik multimedialny.
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 (atrybut pluginspage="..."), 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.