class - Kurs HTML i CSS
Selektory specjalne CSS / Klasy selektorów <... class>Spis treści <... class> Klasy selektorów <... class> Lista klas Podzbiory klas Klasy selektorów <... class> selektor.klasa { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne) [zobacz: Wstawianie stylów]. Klasa to wartość atrybutu class="..." 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...
- CSS dla zielonych / Klasy selektorów CSS <div class>
...kolor tła oraz tekstu. W tym celu najpierw w dokumencie HTML obejmujemy całą zawartość tego menu dodatkowym znacznikiem z przypisanym atrybutem class: <div class="menu-nawigacyjne">...</div> Następnie w arkuszu stylów w miejsce selektora wstawiamy wartość atrybutu class - czyli nazwę klasy - poprzedzoną znakiem kropki: .menu-nawigacyjne { background-color: gray; color: silver; } Zwróć uwagę, że w kodzie HTML wartość atrybutu class nie zawiera znaku kropki - trzeba ją dodać tylko w...
- Dobre praktyki / CSS Zorientowane Obiektowo
...musimy przypisać określony styl. Atrybuty stanowią zbiór wszystkich elementów (znaczników) potomnych obiektu, którym jest przypisany styl. <div class="Menu"> <ul> <li><a href="...">...</a></li> <li><a href="...">...</a></li> <li><a href="...">...</a></li> </ul> </div> Powyżej przedstawiony obiekt Menu może składać się z następujących atrybutów: wykaz ul punkt wykazu li (jeśli chodzi o stylizację, nie ma znaczenia, ile punktów ma wykaz, ponieważ wygląd dla nich określamy...
- Dobre praktyki / Przykazania webmastera
...drzewie dokumentu - jest czytelniejszy, a dzięki temu mniej podatny na błędy (od razu zauważysz ewentualny źle domknięty znacznik). Porównaj: <div class="menu"> <ul> <li> <a href="...">...</a> </li> <li> <a href="...">...</a> </li> <li> <a href="...">...</a> </li> </ul> </div> oraz <div class="menu"><ul><li> <a href="...">...</a> </li> <li> <a href="...">...</a></li> <li><a href="...">...</a> </li> </ul></div> Co prawda wcięcia zwiększają...
Aktualizacja / System newsów...adres + '">', '</a>') : new Array('', ''); content += '<dt>' + link[0] + tytul + link[1] + '</dt>' + '<dd>' + '<div class="news_date"><span>Dodano:</span> ' + dzien + '.' + miesiac + '.' + rok + '</div>' + '<div class="news_content">' + (obraz != '' ? link[0] + '<img src="' + obraz + '" alt="" class="news_img"' + (width ? ' width="' + width + '"' : '') + (height ? ' height="' + height + '"' : '') + '>' + link[1] : '') + tresc...
- Indeks, wyszukiwarka / Skrypt indeksu, wyszukiwarki
...onsubmit="' + this.id + '.wyswietl(); return false">' + '<input type="text" name="haslo" size="30" onkeyup="' + this.id + '.zaznacz()" class="text">' + '<div><select name="hasla" size="' + (typeof rozmiar != 'undefined' && rozmiar ? rozmiar : 15) + '" ondblclick="' + this.id + '.wyswietl()">' ); for (var i = 0; i < hasla.length; i++) { document.write('<option value="' + ((typeof adres_bazowy == 'undefined' || !adres_bazowy ? '' : adres_bazowy)...
- Menu drzewiaste / Skrypt menu drzewiastego
...if (el_node.nodeName.toLowerCase() == 'ul') { el_node.style.display = el_node.style.display == 'none' ? 'block' : 'none'; this.parentNode.className = this.parentNode.className.replace(/(^| +)(opened|closed)( +|$)/g, ' ') + ' ' + (el_node.style.display == 'none' ? 'closed' : 'opened'); return; } } } this.start = function (el) { for (var i = 0, el_node; i < el.childNodes.length; i++) { el_node = el.childNodes.item(i); if (el_node.nodeName.toLowerCase() == 'a')...
- Selektory pseudoklas CSS / Domyślne :default
...button:default { margin-left: 30px } a w dowolnym miejscu strony: <form action="?"> <fieldset> <input type="radio" checked name="pole_opcji" class="przyklad_domyslne"> <input type="radio" name="pole_opcji" class="przyklad_domyslne"> </fieldset> <select size="3"> <option selected class="przyklad_domyslne">Opcja 1</option> <option class="przyklad_domyslne">Opcja 2</option> <option class="przyklad_domyslne">Opcja 3</option> </select> <div> <button type="submit">Wyślij</button>...
- Selektory atrybutów CSS / Łączenie selektorów atrybutów
...atrybutów z ewentualnymi przypisanymi określonymi wartościami. Przykład Przypisujemy czerwony kolor czcionki akapitom, które posiadają atrybut class o dowolnej wartości, dir="ltr", title z wyrazem akapit oraz lang rozpoczynający się od pl z ewentualnymi łącznikami: p[class][dir="ltr"][title~="akapit"][lang|="pl"] { color: red } Ten akapit posiada następujące atrybuty: class, dir="ltr", title="To jest akapit" lang="pl" (powinien być czerwony). Ten akapit posiada następujące atrybuty...
- Selektory pseudoklas CSS / Łączenie selektorów
...Przykład a.przyklad_selektory:hover { font-weight: bold } Taka reguła kojarzy każdy element typu a (czyli odsyłacz), który będzie posiadał klasę class="przyklad_selektory", kiedy zostanie on wskazany myszką: Wskaż ten odsyłacz myszką: class="przyklad_selektory". A tutaj jest odsyłacz bez klasy. Taki sposób tworzenia selektora odsyłaczy jest szczególnie przydatny, ponieważ zwykle chcemy część odnośników na stronie wystylizować inaczej, jeżeli chodzi o ich podświetlanie po wskazaniu...