Główna
WŁASNOŚCI
| | 
| 
| Odsłony: 365
| | Odsłony: 365Wł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.
SELEKTORY
| | | | Odsłony: 350
| | Odsłony: 350Selektor typu
selektor { cecha: wartość }
gdzie wyrazem selektor może być praktycznie dowolny znacznik, np. p (akapit), h1 (tytuł), td (komórka tabeli) i inne [zobacz: Wstawianie stylów]. To właśnie elementom znajdującym się pomiędzy tymi znacznikami, nadajemy atrybuty formatowania.
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 (X)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.
formularze
| | | | Odsłony: 356
| | Odsłony: 356Przykł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.
<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
| | | | Odsłony: 353
| | Odsłony: 353Przykład umieszczenia stylów w odrębnym dokumencie.
Kod w pliku style.css, który musi być umieszczony w tym samym katalogu co plik index.html:
h1 { color: red; }
Kod w pliku index.html:
<html>
<head>
<title>Styl umieszczony w odrębnym dokumencie</title>
<link href="/style.css" type="text/css" rel="stylesheet" />
<style type="text/css">
p { color: blue;}
</style>
</head>
<body>
<h1>Nagłówek sformatowany w odrębnym pliku</h1>
<p>Akapit sformatowany w nagłówku strony</p>
<p style="color: green;">Akapit sformatowany in-line</p>
</body>
</html>
multimedia
| | | | Odsłony: 349
| | Odsłony: 349AUDIO
Pliki dźwiękowe umieszczamy za pomocą znaczników audio.