wypunktowanie - Kurs HTML i CSS
- Tekst HTML / Wykaz <ul, ol, li>
...uporządkowana <ol, li> Wykaz numerowany - różne typy Wykaz numerowany z podaniem początkowego numeru Zmiana numerowania w trakcie Wykaz z wypunktowaniem innym kolorem Wykaz w akapicie Potrzebujesz pomocy? Przy tworzeniu wykazów HTML możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz dowolny, nawet najbardziej skomplikowany układ numeracji albo punktów i podpunktów. ✅ Rozpocznij konfigurację wykazu Wypunktowanie...
- Tekst HTML / Zagnieżdżanie wykazów
...poziomu. Każdy kolejny poziom wykazu zwykle jest bardziej przesunięty w prawo. Jak zrobić listę w liście HTML? Aby stworzyć wielopoziomowe wypunktowanie lub numerację, należy umieścić element wykazu podrzędnego <ul>...</ul> lub <ol>...</ol> wewnątrz znacznika <li>...</li> wykazu nadrzędnego.
- Menu drzewiaste / Skrypt menu drzewiastego
...Na koniec w wybranym miejscu strony - tam, gdzie ma się wyświetlać menu drzewiaste - wstaw kod oparty na technice zagnieżdżania wykazów (tylko wypunktowanie, czyli lista nieuporządkowana <ul>...</ul>). Sposób zagnieżdżania kolejnych punktów listy będzie automatycznie odzwierciedlał strukturę drzewa menu. Oto przykładowy kod: <ul id="tree0" class="tree"> <li><a href="...">Dokument 1</a></li> <li><a>Folder 2</a> <ul> <li><a href="...">Dokument 2.1</a></li> <li><a href="...">Dokument...
- Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style
...symbols(symbole) } lub selektor { list-style-type: symbols(algorytm symbole) } Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów]. W przypadku definiowania anonimowego typu stylu wykazu każdy element listy symbolów musi być zawsze ujęty w cudzysłowy ("...") albo apostrofy ('...') - nawet kiedy spełnia format niestandardowego identyfikatora. Dozwolone w tym przypadku algorytmy...
- Wykazy CSS / Zawijanie tekstu w wykazie {list-style-position}
selektor { list-style-position: pozycja } Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów]. Natomiast "pozycja" określa, jak będą zawijane wiersze wykazu, które nie zmieszczą się w jednej linii. Możliwe są tutaj dwa przypadki: outside - wyróżniki na zewnątrz wykazu (domyślnie). Przykład list-style-position: outside Punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy...
- Selektory elementów CSS / Selektor potomka
...w akapicie, które nie zawiera się w znaczniku pochylenia. Inny przykład: ol ul { color: red } Taka deklaracja spodowuje, że każdy wykaz typu wypunktowanie (ul), który znajdzie się wewnątrz wykazu numerowanego (ol), będzie miał automatycznie nadany kolor czerowny: <ol> <li>Punkt pierwszy <ul> <li>Podpunkt pierwszy</li> <li>Podpunkt drugi</li> </ul> </li> <li>Punkt drugi</li> </ol> Punkt pierwszy Podpunkt pierwszy Podpunkt drugi Punkt drugi Dla porównania żaden z...
- Wykazy CSS / Wyróżnik obrazkowy wykazu {list-style-image}
selektor { list-style-image: url(ścieżka dostępu) } Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów]. Natomiast jako "ścieżka dostępu" należy wpisać względną ścieżkę do obrazka, który ma się pojawić jako wyróżnik wykazu (marker). Wpisanie none usunie obrazek. Ścieżkę dostępu należy konstruować względem arkusza CSS, a nie względem dokumentu HTML! Polecenie pozwala zastosować dowolny obrazek...
- Wykazy CSS / Typ stylu wykazu {list-style-type}
...typ stylu wykazu Typ stylu wykazu {list-style-type} selektor { list-style-type: typ } Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów]. Natomiast "typ" odpowiada za wygląd wyróżnika (markera) wykazu. Należy zamiast niego wpisać dowolny z poniżej wymienionych typów albo specjalną wartość none, która wyłącza wyświetlanie wyróżników przy punktach wykazu. Dla zainteresowanych Jeśli za...
- Wykazy CSS / Atrybuty mieszane wykazu {list-style}
selektor { list-style: wartości atrybutów } Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości (oddzielone spacjami), jakie mają przyjąć poszczególne atrybuty wykazu. Są to: typ stylu zawijanie tekstu wyróżnik obrazkowy Tak jak przy wielu innych elementach, także i tutaj możliwe jest użycie atrybutów mieszanych. Jak...
- Tekst HTML / Ćwiczenia
...Jeżeli w treści swojej strony używasz skrótów bądź definicji, zadbaj o ich oznaczenie właściwymi znacznikami. Na podstronie linki.html użyj wykazu (wypunktowanie) w taki sposób, aby każdy odnośnik wraz z jego krótkim opisem znajdował się w osobnym punkcie. Na podstronie kontakt.html użyj znacznika ADDRESS, aby odpowiednio oznaczyć informacje kontaktowe z autorem strony - czyli z Tobą 🙂