Witam drodzy czytelnicy serwisu blogowego. Dziś w skarbonce pojawi się kolejny artykuł. Skoncentruje się na projektowaniu z wykorzystaniem zasad kaskadowych arkuszy stylów. Tutaj wszystko jest bardzo proste, niemniej jednak postanowiłem poświęcić temu tematowi osobny wpis.
Nieco wcześniej udało nam się już dowiedzieć, jak, jak i jak można pracować. Cóż, trochę wcześniej szczegółowo przeanalizowaliśmy wszystkie możliwe i ich różne kombinacje, aby dokładnie określić element kodu HTML, dla którego należy zastosować określone właściwości stylizacji.
Styl listy - projekt listy w kodzie HTML
Tak więc w języku znaczników stylów istnieją trzy oddzielne reguły, zaczynające się od stylu listy, które służą do dostosowywania wygląd listy (numerowane lub wypunktowane) w kodzie dokumentów internetowych. Ponadto istnieje prefabrykowana reguła stylu listy CSS, która pozwala nieco zmniejszyć ilość kodu. Ale najpierw najważniejsze.
To, co teraz rozważymy, może być używane zarówno w przypadku elementów HTML LI, jak i elementów Ul i Ol (odpowiednio listy punktowane i numerowane). Jaka byłaby różnica w zastosowaniu stylu listy do tych tagów?
Właściwie możesz dowiedzieć się, czy właściwość jest dziedziczona, czy nie na stronie walidatora (przeczytaj o tym pod podanym linkiem) w sekcji dotyczącej specyfikacji kaskadowych arkuszy stylów. W kolumnie „Dziedziczone” obok odziedziczonych reguł będzie „Tak”:
Zacznijmy typ-listy, który pozwala ustawić rodzaj oznaczenia dla poszczególnych elementów listy HTML. Dla tej reguły dozwolone są następujące wartości:
- Brak - w ogóle nie będzie oznaczania (list-style-type:none; zastosowane do tego elementu i dlatego nie ma znacznika)
- Dysk - wypełniony okrąg (list-style-type: dysk został właśnie zastosowany do tej linii;)
- Okrąg - okrąg jako znacznik
- Kwadrat - kwadrat jako znacznik
- Dziesiętny — cyfry arabskie (list-style-type:decimal;)
- small-alpha - małymi literami
- górna-alfa- listy wielkimi literami
- lower-roman - cyfry rzymskie pisane małymi literami
- upper-roman - Cyfry rzymskie pisane wielkimi literami
Jak myślisz, za pomocą których elementów Ul lub Ol powstała lista tuż powyżej? Podchwytliwe pytanie. Okazuje się, że to już nie jest ważne, chociaż w tym konkretnym przypadku użyłem Ol, ale zmieniając go na Ul, wygląd pozostanie taki sam, ponieważ jest on ustawiany dla każdego elementu przez jego wartość CSS reguły typu list style.
W rzeczywistości Ul i Ol różnią się tylko zachowaniem domyślnym (znaczniki Ul i liczby Ol). Ale jeśli chcesz, możesz łatwo zmienić jeden rodzaj listy w inny za pomocą typu listy. Czcionka używana do oznaczania cyfr lub liter jest dokładnie taka sama, jak ta, którą zdefiniowałeś dla zawartości znaczników LI. Na przykład zmieniając kolor czcionki dla listy, zmienimy i kolor znacznika:
- Zmieniony kolor tekstu (list-style-type:lower-roman;color:red) i zmieniony kolor znacznika
Przejdźmy do następującej właściwości CSS − pozycja w stylu listy. Dzięki niemu możesz ustawić pozycję (umieszczenie) obszaru za pomocą znacznika. Ma tylko dwie możliwe wartości:
Tych. w rzeczywistości w pozycji list-style-position wskazujemy, gdzie chcemy umieścić obszar ze znacznikami - na zewnątrz elementu LI (na zewnątrz) lub w jego wnętrzu (wewnątrz). Domyślnie obszar ze znacznikiem jest wyjęty poza granice, tj. używana jest wartość zewnętrzna.
Zobaczmy to na przykładzie. W pierwszym elemencie listy napiszę konkretnie list-style-position:inside i zobaczymy, co z tego wyniknie:
- Tutaj wszystko jest domyślne.
- Tak będzie wyglądało umieszczenie obszaru znacznika z wnętrzem. Zauważ, że druga linia tego elementu i znacznik znajdują się na tym samym poziomie.
- Tutaj wszystko jest domyślne.
List-style-image i prefabrykowana reguła CSS
Następny w kolejce jest List-style-image - pozwala określić obraz, który będzie używany jako znacznik. Ta reguła jest domyślnie ustawiona na Brak (tj. żaden obraz nie jest używany jako znacznik), ale możesz napisać funkcję Url (), określając ścieżkę do obrazu w nim, który będzie następnie działał jako znacznik na tej liście:
Może to wyglądać tak:
Obraz w stylu listy: url (https://website/images/list_star.png);
- Tutaj wszystko jest domyślne.
- Tak może wyglądać użycie obrazu jako markera. Oczywiste jest, że możesz wybrać do tego celu bardziej odpowiedni obraz.
- Na przykład jak tutaj.
Jak pamiętacie, w artykule o tym wspomniałem, że obrazki odnoszą się do elementów wbudowanych (w rzeczywistości dla przeglądarki jest to ta sama litera, ale czasami bardzo duża).
Oto zdjęcie i zajmuje miejsce znacznika (litery lub cyfry). Jednocześnie wysokość linii z elementem listy zostanie zwiększona, jeśli wstawisz duży obraz jako znacznik (jak miało to miejsce w drugim elemencie powyższego przykładu).
W funkcji obrazu stylu listy można określić oba obrazy. Jeśli obraz nie jest załadowany, zostanie użyty domyślny znacznik lub numeracja, lub cokolwiek jest zapisane w liście-style-type dla tego elementu listy.
Aby zapisać wszystkie trzy opisane powyżej reguły CSS w jednej, możliwe będzie użycie stylu List, który jest prefabrykowany do stylizowania list. Kolejność, w jakiej podane są wartości, nie ma znaczenia. Wartości, których nie określisz w stylu List, zostaną jawnie zinterpretowane przez przeglądarkę jako wartości domyślne.
Gdzie mogę zobaczyć wartości domyślne? Tak, wszystko jest w tym samym miejscu - w specyfikacji CSS walidatora W3C w kolumnie "Initial value" obok interesujących nas właściwości:
Wartości dla poszczególnych właściwości w prefabrykacie w stylu List są oddzielone spacjami. Lokalizacje, jak już wspomniano, nie są ważne:
W praktyce może to wyglądać tak:
Styl listy: adres URL w górnej czcionce rzymskiej (https://site/images/list_star.png);
Możesz używać wartości w dowolnej kolejności i dowolnej liczbie (zaczynając od jednego). Nawiasem mówiąc, za pomocą list najczęściej tworzy się menu na stronach internetowych, a właściwość List-style służy do aby usunąć znaczniki z list menu, które są tam zupełnie niepotrzebne:
typ-listy:brak;
Styl listy:brak;
Powodzenia! Do zobaczenia wkrótce na stronie bloga
Możesz być zainteresowany
Wyświetlanie (block, none, inline) w CSS - ustaw sposób wyświetlania elementów HTML na stronie internetowej Jak zmienić kolor tła wierszy tabel, list i innych elementów HTML na stronie za pomocą pseudoklasy nth-child 
Płynne i przejrzyste w CSS - narzędzia do układania bloków 
Pozycjonowanie za pomocą indeksu Z i CSS Kursor reguła aby zmienić kursor myszy 
Pozycja (bezwzględna, względna i stała) - sposoby pozycjonowania elementów HTML w CSS (reguły lewo, prawo, góra i dół) 
Do czego służy CSS, jak połączyć kaskadowe arkusze stylów z dokument html i podstawowa składnia tego języka 
Właściwości CSS text-decoration, vertical-align, text-align, text-indent do dekorowania tekstu w html 
Zasady dotyczące czcionek(Gramatura, Rodzina, Rozmiar, Styl) i Wysokość linii do stylizacji czcionek w CSS 
Tło w CSS (kolor, pozycja, obraz, powtórzenie, załącznik) - wszystko do ustawienia koloru tła lub obraz w tle Elementy HTML 
CSS - co to jest, jak połączone są kaskadowe arkusze stylów Kod HTML ze stylem i linkiem 
Priorytety w CSS i ich wzrost ze względu na Ważne, łączenie i grupowanie selektorów, stylów użytkownika i autora
Materiał z Web Language Reference
Używane wartości
sLokalizacja Linia, który może definiować i przyjmować jedną z następujących wartości:Ta właściwość jest do odczytu/zapisu dla wszystkich obiektów z wyjątkiem currentStyle (tylko do odczytu). Domyślna wartość to Żaden. Atrybut Kaskadowe arkusze stylów (CSS) jest dziedziczony.
Uwagi
Nieruchomość listStyleImage dotyczy wszystkich elementów, które mają marginesy i wyświetlacz:element listy.
Gdy obraz jest dostępny, zastępuje obraz znacznika ustawiony w listStyleType .
Aby wyświetlić obraz znacznika listy, dla właściwości margines musi być ustawiony na minimum 30 pkt.
Przykłady
Poniższe przykłady ilustrują wykorzystanie właściwości listStyleImage i atrybut obraz w stylu listy aby ustawić obraz znacznika listy.
Pierwszy przykład używa selektora ul i atrybut obraz w stylu listy.
Drugi przykład wykorzystuje właściwość listStyleImage zmienić styl znacznika po wystąpieniu zdarzenia po najechaniu myszą.
- Lorem ipsum dolor sit amet
- Konsektuer adipisujący elita
- Sed diem nonummy nibh euismod
- Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
- dysk - znacznik czarnego kółka (domyślnie dla list punktowanych).
- koło - znacznik w postaci niewypełnionego koła.
- kwadrat - znacznik kwadratowy. Może być jasny lub ciemny, w zależności od przeglądarki.
- dziesiętny - numeracja cyframi arabskimi (wartość domyślna dla list numerowanych).
- dziesiętne-leading-zero - cyfry arabskie od 01 do 99 z wiodącym zerem.
- dolna rzymska - numeracja małymi cyframi rzymskimi.
- górna rzymska - numeracja z dużymi cyframi rzymskimi.
- dolny grecki - numeracja małymi greckimi literami.
- lower-alpha i lower-latin - numeracja małymi literami łacińskimi.
- górna-alfa i górna-łacińska - numeracja wielkimi literami łacińskimi.
- ormiański - numeracja z tradycyjnymi cyframi ormiańskimi.
- gruziński - numeracja z tradycyjnymi gruzińskimi cyframi.
- brak - znakowanie i numeracja nie będą w ogóle wykonywane.
- pierwsza pozycja na liście;
- druga pozycja na liście;
- trzecia pozycja na liście.
- pierwsza pozycja na liście;
- druga pozycja na liście;
- trzecia pozycja na liście.
- w pierwszym akapicie wszystko jest domyślnie;
- w drugim akapicie wartość list-style-position jest ustawiona na inside. W takim przypadku zwróć uwagę, że druga linia jest umieszczona równo z markerem;
- w tym momencie list-style-position znajduje się na zewnątrz.
Listy CSS- zestaw właściwości odpowiedzialnych za projektowanie list. Korzystanie z list HTML jest bardzo powszechne podczas tworzenia pasków nawigacyjnych witryny. Elementy listy reprezentują zestaw elementów blokowych.
Używając standardowych właściwości CSS, możesz zmienić wygląd znacznika listy, dodaj obraz do znacznika, jak również zmień lokalizację znacznika. Wysokość bloku znacznika można ustawić za pomocą właściwości line-height.
Stylizowanie list za pomocą stylów CSS
1. Typ znacznika listy list-style-type
Właściwość zmienia typ znacznika lub usuwa znacznik dla list punktowanych i numerowanych. Dziedziczny.
| typ-listy | |
|---|---|
| Wartości: | |
| dysk | Domyślna wartość. Wypełnione kółko działa jak znacznik elementu listy. |
| ormiański | Tradycyjna numeracja ormiańska. |
| okrąg | Niewypełniony okrąg działa jak znacznik. |
| cjk-ideograficzne | Numeracja ideograficzna. |
| dziesiętny | 1, 2, 3, 4, 5, … |
| dziesiętne zero wiodące | 01, 02, 03, 04, 05, … |
| gruziński | Tradycyjna numeracja gruzińska. |
| hebrajski | Tradycyjna numeracja żydowska. |
| hiragana | Numeracja japońska: a, i, u, e, o, ... |
| hiragana-iroha | Japońska numeracja: i, ro, ha, ni, ho, ... |
| katakana | Japońska numeracja: A, I, U, E, O, ... |
| katakana-iroha | Japońska numeracja: I, RO, HA, NI, HO, ... |
| niższy alfa | a, b, c, d, e, … |
| niższy grecki | Małe litery alfabetu greckiego. |
| dolna łacina | a, b, c, d, e, … |
| niższy romański | ja, ii, iii, iv, v, … |
| Żaden | Brakuje znacznika. |
| kwadrat | Wypełniony lub niewypełniony kwadrat pełni rolę znacznika. |
| wyższa alfa | A, B, C, D, E, … |
| górna łacina | A, B, C, D, E, … |
| górnorzymski | I, II, III, IV, V, ... |
| Inicjał | Ustawia wartość właściwości na jej wartość domyślną. |
| dziedziczyć | Dziedziczy wartość właściwości z elementu nadrzędnego. |
Składnia
Ul (list-style-type: brak;) ul (list-style-type: square;) ol (list-style-type: none;) ol (list-style-type: lower-alpha;) 
Ryż. 1. Przykład projektu list punktowanych i numerowanych
2. Obrazy elementów obrazu w stylu listy
Obrazy i wypełnienia gradientowe mogą być używane jako znaczniki elementów listy. Dziedziczny.
Składnia
Ul (list-style-image: url("images/romb.png");) ul (list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);) 
Ryż. 2. Projekt lista punktowana za pomocą obrazu 
Ryż. 3. Stylizowanie listy punktowanej za pomocą gradientu
3. Pozycja znacznika listy lokalizacji w stylu listy
Ta właściwość umożliwia umieszczenie znacznika na zewnątrz lub wewnątrz zawartości elementu listy. Dziedziczny.
Składnia
Ul (pozycja stylu listy: wewnątrz;) ol (pozycja stylu listy: na zewnątrz;) 
Ryż. 4. Przykład lokalizacji znacznika wewnątrz i na zewnątrz bloku listy
4. Krótki formularz do określania stylów list
Możesz połączyć wszystkie trzy właściwości formatowania listy w jedną za pomocą list-style . Wartości nieruchomości można umieszczać w dowolnej kolejności, a niektóre wartości można pominąć. Jeśli jedna wartość jest obecna, inne właściwości przyjmą wartości domyślne przeglądarki.
Składnia
Ul (list-style: url("images/romb.png") inside;)
4. Przykłady pięknych projektów list
Opis
Uniwersalna właściwość pozwalająca na jednoczesne ustawienie stylu znacznika, jego pozycji, a także obrazu, który będzie używany jako znacznik. Aby uzyskać szczegółowe informacje, zobacz informacje o każdej właściwości i osobno.
Składnia
list-style: list-style-type || pozycja w stylu listy || list-style-image | dziedziczyć
Wartości
Dowolna kombinacja trzech wartości stylu znacznika, oddzielonych spacją. Kombinacje wartości muszą być w podanej kolejności, najpierw typ znacznika, a następnie pozycja i obraz. Żadna z wartości nie jest wymagana, więc nieużywane można pominąć.
Dziedziczy Dziedziczy wartość rodzica.
HTML5 CSS2.1 IE Cr Op Sa Fx
Wynik tego przykładu pokazano na ryc. jeden.
Ryż. 1. Stosowanie właściwości list-style
Model obiektowy
document.getElementById("elementID ").style.listStyle
Przeglądarki
Internet Explorer do wersji 7.0 nie obsługuje wartości dziedziczenia.
Witam drodzy czytelnicy serwisu blogowego. Dziś kolejny artykuł o nieruchomościach stoły kaskadowe style. Skoncentruje się na stylizacji za pomocą reguł CSS.
Ogólnie rzecz biorąc, listy wyróżniają się wśród elementów blokowych. Wynika to z faktu, że zawierają znaczniki i numerację, które umieszcza sama przeglądarka.
Właściwość stylu listy — projekt listy na stronie html
W CSS istnieją trzy właściwości, które zaczynają się od list-style i są odpowiedzialne za stylizowanie list punktowanych i numerowanych. Dodatkowo istnieje prefabrykowana reguła w stylu listy, która pozwala zmniejszyć ilość kodu.
Wszystkie te właściwości można wykorzystać do elementy html li, a także dla elementów ul i ol. Jedyna różnica polega na tym, że zasady są napisane dla konkretne znaczenie wypisz li, wtedy będzie to dotyczyło tylko niego. A jeśli te same reguły css są napisane dla kontenerów ul lub ul, to zostaną one zastosowane do wszystkich elementów li zawartych w tych kontenerach.
Zacznijmy od atrybutu typ-listy, który ustawia rodzaj markerów lub numeracja dla pozycji listy:
list-style-type: dysk|okrąg|kwadrat|dziesiętny|dziesiętny-lider-zero|dolny-rzymski|górny-rzymski|dolny-grecki|dolny-alfa|dolny-łaciński|górny-alfa|górny-łaciński|ormiański| gruziński|brak|dziedziczy
Jak widać, właściwość list-style-type ma wiele dostępnych wartości, które mogą ustawić zarówno styl znacznika, jak i Różne rodzaje numeracja.
Tak wyglądałyby elementy listy w przeglądarce z różnymi wartościami typu list-style-type:
Na za pomocą CSS style nie ma znaczenia, który element (OL czy UL) zostanie użyty do utworzenia listy. OL i UL różnią się tylko domyślnym zachowaniem, a dzięki właściwości list-style-type można łatwo zmienić jeden widok listy na inny.
atrybut stylu obraz w stylu listy pozwala ustawić jako znacznik Lista przedmiotów obraz graficzny . W przypadku używania atrybutu list-style-image wartość atrybutu list-style-type jest ignorowana:
list-style-image: brak|<интернет-адрес файла изображения>|odziedziczyć
Oznaczający Żaden usuwa znacznik obrazu i ustawia go na zwykły, a nie graficzny. To jest zachowanie domyślne.
Podczas określania adresu pliku obrazu, w miejsce znacznika zostanie wstawiony obraz. Podobnie jak w przypadku używania , zarówno adresy bezwzględne, jak i względne mogą być używane jako adres obrazu. Jeśli przeglądarka nie załaduje obrazu, zostanie użyty domyślny znacznik, numeracja lub cokolwiek określonego we właściwości list-style-type.
Przykład listy z obrazem jako znacznikiem:
A oto jak to wygląda:
Oczywiste jest, że wybierając obraz jako znacznik, lepiej wybrać mały obraz.
I ostatnia właściwość CSS z serii list-style - pozycja w stylu listy, co pozwala określić lokalizację punktora lub numeru w elemencie listy. Mogą istnieć dwie opcje wartości:
pozycja w stylu listy: wewnątrz|na zewnątrz
W przypadku wartości w środku znacznik lub numerację umieszcza się niejako wewnątrz listy, a w przypadku na zewnątrz poza elementami li. Wartość domyślna to na zewnątrz, a znacznik jest przesunięty na zewnątrz.
Przykład listy z różnymi wartościami pozycji w stylu listy:
Niestandardowa reguła stylu listy CSS
Następująca właściwość CSS list-style jest prefabrykowana dla list stylizacji. Pozwala na zapisanie wszystkich trzech omówionych powyżej reguł CSS w jednym. Kolejność określania w nim wartości może być dowolna, a parametry, które nie są ustawione w stylu listy, będą domyślnie przyjmowane przez przeglądarkę.
Oddziel wartości w prefabrykacie w stylu listy ze spacjami:
list-style: list-style-type list-style-image pozycja-style-listy;
Prawdziwa reguła CSS dotycząca stylizacji list może wyglądać mniej więcej tak:
styl listy: okrąg url (//site/images/marker.png) na zewnątrz;
W ten sposób właściwość list-style może znacznie zmniejszyć ilość kodu, ponieważ zamiast trzech reguł wystarczy podać tylko jedną.
Jak wspomniano powyżej, wartości można podać w dowolnej kolejności i dowolnej liczbie. Na przykład, aby usuń znaczniki z listy menu Wystarczy napisać:
styl listy: brak;
To samo można zrobić za pomocą właściwości list-style-type:
typ-listy: brak;
W tej historii o układ html listy z kaskadowymi arkuszami stylów, gotowe. Aby dowiedzieć się więcej o innych właściwościach CSS, możesz przeczytać artykuły z sekcji „” i nie zapomnij zasubskrybować aktualizacji bloga. Do zobaczenia wkrótce!
