Co to jest div class? - Kurs HTML i CSS
Co to jest div class?
Jest to fragmentu kodu HTML, który w całości mógłby wyglądać np. tak: <div class="klasa">...</div>. Przypisuje on do znacznika bloku podaną klasę CSS. Dzięki temu element ten wraz z całą jego zawartością przyjmie wygląd, który został określony w arkuszu stylów dla wskazanej klasy 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 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...
- CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}
...nazwa-klasy { deklaracje stylów } by następnie w miarę potrzeb móc ich wielokrotnie używać w dowolnym dokumencie HTML na naszej stronie: <div class="nazwa-klasy">dowolny tekst...</div> Przypominam, że w arkuszu stylów (pierwsze polecenie powyżej) nazwa-klasy musi być poprzedzona znakiem kropki (w tym miejscu po kropce nie można postawić spacji!), podczas gdy w kodzie HTML (drugie polecenie powyżej) znak kropki koniecznie trzeba usunąć. Ponadto w nazwie klasy najlepiej używać wyłącznie...