kolor css. Dodaj punktory lub numerację do tekstu

Właściwość list-style-position określa, czy punktor powinien być umieszczony wewnątrz, czy na zewnątrz elementów listy. Właściwość ta może przyjmować dwie wartości:

• na zewnątrz - znacznik znajduje się po lewej stronie treści (jest to ustawienie domyślne)
• inside - znacznik znajduje się wewnątrz elementu listy wraz z treścią

Teraz możesz przepisać poprzedni przykład tak, aby wcięcie po lewej stronie zostało usunięte, ale znaczniki nie wychodziły poza krawędź przeglądarki:

• Kawa
• Herbata

• Kawa
• Herbata

• Kawa
• Herbata

W tym przykładzie do każdego elementu listy dodano obramowanie, aby wizualnie pokazać granice elementów listy.

W tym samouczku skupimy się na pracy z listami w CSS, dowiesz się, jak zmienić typ punktora, położenie punktora względem elementu listy, stworzyć własne punktory, a nawet zmienić kolor punktora.

Myślę, że już wiesz, że HTML 5 wykorzystuje dwa główne typy list (z wyłączeniem list opisowych i elementów menu):

• lista numerowana (uporządkowana) – Element HTML
  1. lista punktowana (nieuporządkowana) – element HTML

     CSS daje nam wiele opcji formatowania wyglądu tych list, spójrzmy na najważniejsze.

     Zmiana typu znacznika

     Pierwszą nieruchomością, którą chciałbym rozważyć, jest ta nieruchomość typ-stylu listy, określa typ znacznika elementu listy.

     Na przykład menu nawigacyjne często składają się ze zwykłych list punktowanych (element HTML

     ), którego znacznik domyślnie wyświetlany jest w postaci wypełnionego okręgu, aby go usunąć należy użyć Właściwość CSS m typ-stylu listy z wartością brak :
     ul(typ-stylu listy: brak; /* usuń znacznik z listy */ }

     W przypadku list punktowanych (nieuporządkowanych) (element HTML

     ) występują trzy rodzaje znaczników: w formie wypełnionego okręgu (domyślnie jest to krążek), znacznik w formie wydrążonego okręgu (okręgu) i w formie kwadratu (kwadratu) oraz dla numerowanych ( zamówione) listy (poz
     ) wszystkie pozostałe opcje. Pełna lista znajduje się w poniższej tabeli:

     Oznaczający	Opis
     nic Pozycja listy Pozycja listy Pozycja listy	Znacznik nie jest wyświetlany.
     dysk Pozycja listy Pozycja listy Pozycja listy	Marker w kształcie wypełnionego koła. Jest to wartość domyślna.
     ormiański Pozycja listy Pozycja listy Pozycja listy	Znacznik numeryczny (tradycyjna numeracja ormiańska).
     koło Pozycja listy Pozycja listy Pozycja listy	Marker w kształcie koła.
     cjk-ideograficzne Pozycja listy Pozycja listy Pozycja listy	Proste liczby ideograficzne.
     dziesiętny Pozycja listy Pozycja listy Pozycja listy	Znacznik numeryczny (dziesiętne liczby arabskie zaczynające się od 1).
     dziesiętne-zero wiodące Pozycja listy Pozycja listy Pozycja listy	Znacznik numeryczny (dziesiętne liczby arabskie zaczynające się od 1 i zakończone zerem wiodącym - 01, 02, 03...).
     gruziński Pozycja listy Pozycja listy Pozycja listy	Znacznik numeryczny (tradycyjna numeracja gruzińska - an, ban, gan, ..., on, tan, in, in-an...).
     hebrajski Pozycja listy Pozycja listy Pozycja listy	Znacznik numeryczny (tradycyjna numeracja hebrajska).
     hiragana Pozycja listy Pozycja listy Pozycja listy	Znacznik numeryczny (sylaba japońska hiragana - a, i, u, e, o, ka, ki...).
     hiragana-iroha Pozycja listy Pozycja listy Pozycja listy	Znacznik numeryczny (sylabariusz japoński Hiragana Iroha - i, ro, ha, ni, ho, on, to, ...).
     katakana Pozycja listy Pozycja listy Pozycja listy	Znacznik numeryczny (sylaba japońskiej katakany - A, I, U, E, O, KA, KI, ...).
     katakana-iroha Pozycja listy Pozycja listy Pozycja listy	Znacznik numeryczny (sylaba japońska Katakana iroha - I, RO, HA, NI, HO, HE, TO, ...).
     niższa alfa Pozycja listy Pozycja listy Pozycja listy	Małe litery ASCII (a, b, c, d...z).
     dolnogrecki Pozycja listy Pozycja listy Pozycja listy	Małe litery greckie (α, β, γ, δ itp.).
     dolno-łacińska Pozycja listy Pozycja listy Pozycja listy	Małe litery łacińskie (a, b, c, d,...z).
     dolno-rzymski Pozycja listy Pozycja listy Pozycja listy	Cyfry rzymskie w małe litery(i, ii, iii, iv, v itd.).
     kwadrat Pozycja listy Pozycja listy Pozycja listy	Marker w kształcie kwadratu.
     wyższa alfa Pozycja listy Pozycja listy Pozycja listy	Wielkie litery ascii (A, B, C, D,...Z).
     górno-łacińska Pozycja listy Pozycja listy Pozycja listy	Wielkie litery łacińskie (A, B, C, D,...Z).
     górno-rzymskie Pozycja listy Pozycja listy Pozycja listy	Cyfry rzymskie pisane wielkimi literami (I, II, III, IV, V itd.).

     Należy pamiętać, że wartości hebrajski, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha nie są obsługiwane przez przeglądarkę Internet Explorera .

     Spójrzmy na przykład użycia właściwości list-style-type w tekście:

     /* lista z domyślną wartością typu znacznika (dysk). */
     • Pozycja listy
     • Pozycja listy
     • Pozycja listy
     /* lista numerowana ze znacznikiem typu niższy-rzymski */
     1. Pozycja listy
     2. Pozycja listy
     3. Pozycja listy
     /* lista punktowana z kółkiem typu punktorowego */
     • Pozycja listy
     • Pozycja listy
     • Pozycja listy

     W tym przykładzie utworzyliśmy dwa style, pierwszy ustawia typ znacznika - małe cyfry rzymskie (mała wartość rzymska), zastosowaliśmy go do listy numerowanej (element HTML

     ) i do listy punktowanej (element HTML
     ) zastosowaliśmy styl, który ustawia typ znacznika na pusty okrąg (okrąg wartości).

     Wynik naszego przykładu:

     Pamiętaj, że możesz zastosować właściwość list-style-type nawet do pojedynczego elementu listy (elementu HTML

     • ), aby ustawić typ znacznika, lub utworzyć style, które zastosują określony znacznik do parzystych lub nieparzystych elementów listy, jak pokazano w poniższym przykładzie:
       • Pozycja listy
       • Pozycja listy
       • Pozycja listy
       • Pozycja listy
       • Pozycja listy
       • Pozycja listy
       • Pozycja listy
       • Pozycja listy

       W tym przykładzie wystylizowaliśmy wszystko dziwne elementy listy - wskazano typ znacznika kwadrat i wskazano kolor tekstu zielony. Nawet Elementy listy otrzymały następujący styl: czerwony kolor tekstu i brak znacznik.

       Wynik naszego przykładu:

       Pozycja znacznika względem elementu listy

       Wynik naszego przykładu:

       Ryż. 71 Przykład wykorzystania właściwości list-style-position (lokalizacja znacznika/numeru na listach).

       Stwórz własne markery

       Wcześniej czy później będziesz musiał stworzyć znaczniki list według własnego projektu, dzięki właściwości CSS list-style-image możemy wdrożyć to pragnienie w Twoim projekcie.

       Składnia właściwości jest następująca:

       Ol( obraz w stylu listy: url("images/primer.png"); /* określ względną ścieżkę do obrazu */ } ul( obraz w stylu listy : ; /* określ bezwzględną ścieżkę do obrazu */ }

       Wartość w nawiasach odpowiada ścieżce do obrazu, którego planujesz użyć jako znacznika. Ścieżka do obrazu może być bezwzględna lub względna. Określając ścieżkę względną, ważny punkt czy to jest to należy określić w odniesieniu do położenia arkusza stylów, a nie strony.

       Jeśli planujesz zaprojektować własne znaczniki, będziesz musiał skorzystać z programu do edycji grafiki lub skorzystać z już dostępnego gotowe zestawy. Pamiętaj, że nawet jeśli wszystko zrobiłeś poprawnie, obraz może nie zostać załadowany na stronę; w takim przypadku musisz edytować obraz, aby jego tło stało się przezroczyste.

       Spójrzmy na przykład użycia niestandardowych znaczników w dokumencie:

       .test(obraz w stylu listy: url("http://site/images/mini5.png"); /* określ bezwzględną ścieżkę do obrazu, który będzie używany jako znacznik */ }
       • Pozycja listy
       • Pozycja listy
       • Pozycja listy

       W tym przykładzie wskazujemy absolutna ścieżka do obrazu, który będzie używany jako znacznik.

       Wynik naszego przykładu:

       Zmiana koloru znacznika w CSS

       Na zakończenie tego artykułu przyjrzyjmy się zaawansowanemu sposobowi zmiany koloru znacznika bez zmiany koloru elementu, za pomocą za pomocą CSS właściwość content i omówiony wcześniej pseudoelement :before:

       • Pozycja listy
       • Pozycja listy
       • Pozycja listy

       Istota tej metody polega na tym, że przed każdym elementem listy (element HTML

     • ) wstaw pseudoelement (:before) wygenerowaną treść (zawartość właściwości CSS), która jest identyczna w wygląd znacznik na liście punktowanej (element HTML
       ), tylko kolor już niezbędny do naszego zadania.

       Należy pamiętać, że w tym przykładzie wykorzystano właściwość padding-right, która pozwoliła nam na wykonanie wewnętrznego wcięcia w prawo w każdym elemencie listy (element HTML

       • ). Jeśli w w tym przypadku Jeśli nie zastosujesz tej właściwości, znacznik zostanie umieszczony blisko tekstu, co jest nieatrakcyjne wizualnie. Praca z wewnętrznymi i marginesy zewnętrzne elementy zostaną szczegółowo omówione w kolejnym artykule podręcznika „”.

         Pytania i zadania na ten temat

         Zanim przejdziesz do następnego tematu, wykonaj zadania praktyczne:

         
         

         Jeśli masz trudności z ukończeniem zadanie praktyczne Zawsze możesz otworzyć przykład w osobnym oknie i sprawdzić stronę, aby dowiedzieć się, jaki kod CSS został użyty.

         2016-2019 Denis Bolshakov, możesz przesyłać komentarze i sugestie na stronie na adres [email protected]

         Zadanie

         Ustaw kolor znaczników na liście bez zmiany koloru tekstu.

         Rozwiązanie

         Istnieją dwa sposoby zmiany koloru znaczników, nazwijmy je prostym i trudnym. Prostą metodą jest wejście do środka

       • dodaj tag , a następnie umieszczamy w nim tekst. Innymi słowy, zamiast tradycyjnego schematu
       • tekst
       stworzyć projekt
       • tekst
       . W tym przypadku kolor znaczników określany jest przez właściwość stylu koloru dla selektora LI, a kolor tekstu przez selektor SPAN (przykład 1).

       Przykład 1: Używanie zagnieżdżonych tagów

       HTML5 CSS 2.1 IE Cr Op Fx

       • Skrzypce
       • Gitara
       • Dudy
       • Organy beczkowe
       • Celesta

       Wynik tego przykładu pokazano poniżej (rysunek 1).

       Ryż. 1. Oznaczenia różniące się kolorem od tekstu głównego

       Pomimo swojej prostoty metoda jest niewygodna, szczególnie w przypadku dużych list, ponieważ teraz będziesz musiał dodać tag do każdego elementu listy . Przyjrzyjmy się zatem sprytnej metodzie w całości opartej na CSS.

       Internet Explorera	Chrom	Opera	Safari	Firefoksa	Android	iOS
       8.0+	1.0+	7.0+	3.1+	1.0+	1.0+	1.0+

       Rzecz w tym, że usuwamy oryginalne znaczniki listy za pomocą właściwości list-style-type i dodajemy własne znaczniki za pomocą pseudoelementu :before i właściwości content. To łącze umożliwia wstawienie dowolnego tekstu lub symbolu przed elementem, w tym przypadku LI. Co więcej, rodzaj tekstu (kolor, czcionka, tło itp.) można również kontrolować za pomocą stylów, jak pokazano w przykładzie 2. Tutaj symbol akapitu ¶ jest używany jako znaczniki.

       Przykład 2: Użycie pseudoelementu:before

       HTML5 CSS 2.1 IE Cr Op Fx

       • Północ
       • Południe
       • Zachód
       • Wschód

       Wynik tego przykładu pokazano na ryc. 2.

       

       Ryż. 2. Znaczniki utworzone przy użyciu stylów

       
       
       

       Zmień kolor punktorów na liście HTML bez użycia zakresu (6)

       Dla mnie najlepszą opcją jest użycie pseudoelementów CSS, więc w przypadku dysku z kulą wyglądałoby to tak:

       ul ( typ-stylu listy: brak; ) li ( pozycja: względna; ) li:before ( treść: ""; display: block; pozycja: bezwzględna; szerokość: 5px; /* dostosuj do swoich potrzeb */ wysokość: 5px; /* dostosuj do swoich potrzeb */ border-promień: 50%; /* dostosuj do swoich potrzeb */ top: 0.5em;

       • Pierwszy
       • drugi
       • trzeci
       • szerokość i wysokość powinny mieć równe wartości, aby wskaźniki były zaokrąglone
       • możesz ustawić promień obramowania na zero, jeśli chcesz mieć kwadratowe kule

       Aby uzyskać więcej stylów punktorów, możesz użyć innych kształtów CSS https://css-tricks.com/examples/ShapesOfCSS/ (wybierz ten, który nie wymaga pseudoelementów, takich jak trójkąty)

       Zastanawiałem się, czy istnieje sposób na zmianę koloru punktorów na liście.

       Mam listę:

       • Dom
       • Ogród

       Nie można wstawić niczego do li, na przykład „span” i „p”. Czy mogę w jakiś sprytny sposób zmienić kolor punktorów, ale nie tekstu?

       Jeśli możesz użyć obrazu, możesz to zrobić. Bez obrazu nie będzie można zmienić koloru punktora, a nie tekstu.

       Korzystanie z obrazu

       Li (obraz w stylu listy: url(images/yourimage.jpg); )

       Bez użycia obrazu

       Następnie musisz edytować znaczniki HTML i uwzględnić zakres na liście oraz pokolorować zakres i zakres różnymi kolorami.

       Bardzo podobała mi się również odpowiedź Marka - potrzebuję zestawu różnych kolorowych UL i oczywiście łatwiej byłoby po prostu użyć klasy. Oto na przykład, czego użyłem dla pomarańczy:

       Ul.orange ( styl listy: brak; dopełnienie: 0px; ) ul.orange > li:before ( treść: "\25CF "; rozmiar czcionki: 15px; kolor: #F00; prawy margines: 10px; dopełnienie: 0px ;wysokość linii: 15px;

       Odkryłem też, że kod szesnastkowy, którego użyłem dla „treści:” był inny niż kod Marca (ten szesnastkowy okrąg wydawał się zbyt wysoki). Ten, którego użyłem, wydaje się idealnie pasować pośrodku. Znalazłem też kilka innych kształtów (kwadraty, trójkąty , kółka itp.)

       Możemy połączyć obraz w stylu listy z svg s, co możemy osadzić w css! Ta metoda zapewnia niesamowitą kontrolę nad „kulami”, które mogą stać się wszystkim.

       Aby uzyskać czerwone kółko, użyj następującego css:

       "); }

       Ale to dopiero początek. Dzięki temu możemy robić z tymi kulami dowolne szalone rzeczy. koła i prostokąty są łatwe, ale wszystko, co możesz narysować za pomocą SVG, możesz tam zrobić! Zobacz przykład jabłka poniżej:

       ul (obraz w stylu listy: url("dane:obraz/svg+xml, "); ) ul ul ( obraz w stylu listy: url("data:image/svg+xml, "); ) ul ul ul ( obraz w stylu listy: url("data:image/svg+xml, "); ) ul ul ul ul ( obraz w stylu listy: url("dane:obraz/svg+xml, "); ) ul.bulls-eye ( obraz w stylu listy: url("data:image/svg+xml, "); ) ul.multi-color ( obraz w stylu listy: url("dane:obraz/svg+xml, "); }

       • Wielkie kręgi!
         • Wielkie prostokąty!
         • B
           • Małe kółka!
           • C
             • Małe prostokąty!
       • Byki
       • oczy.
       • Wielo
       • kolor

       Atrybut szerokość/wysokość

       Niektóre przeglądarki wymagają ustawienia atrybutów szerokości i wysokości

       Kodowania

       Opierając się na rozwiązaniach @Marc i @jessica, używam tego rozwiązania:

       Li ( pozycja: względna; ) li: przed ( treść:""; wyświetlacz: blok; pozycja: bezwzględna; szerokość: 6 pikseli; wysokość: 6 pikseli; promień obramowania: 6 pikseli; lewy: -20 pikseli; góra: .5em; tło- kolor: #000;

       Używam ich do określania rozmiarów czcionek, więc jeśli ustawisz opcję top na .5em, będzie ona zawsze umieszczana w środku pierwszego wiersza tekstu. Użyłem left:-20px, ponieważ jest to domyślna pozycja left:-20px w przeglądarkach: parent padding/2

       Wiem, że to naprawdę bardzo stare pytanie, ale bawiłem się tym i wymyśliłem sposób, którego nie widziałem. Nadaj liście kolor, a następnie zastąp kolor tekstu za pomocą selektora ::first-line::first-line . Nie jestem ekspertem, więc może być coś nie tak z tym podejściem, którego mi brakuje, ale wydaje się, że działa.

       li ( kolor: niebieski; ) li::pierwsza linia ( kolor: czarny; )

       • Dom
       • Ogród

       List punktowanych lub numerowanych można używać do organizowania tekstu lub pokazywania procesów sekwencyjnych Prezentacje w PowerPoincie.

       

       Zmiana koloru i stylu znaczników oraz zrozumienie ograniczeń

       Możesz zmienić kolor, styl lub rozmiar punktorów lub liczb w prezentacji programu PowerPoint, a także zmienić liczbę, od której chcesz zacząć.

       

       Zastosuj niestandardowe style do wielu slajdów

       Najlepszy sposób Zastosuj niestandardowe style listy do wszystkich slajdów w prezentacji — zmień wzorzec slajdów. Wszelkie ustawienia listy wprowadzone we wzorcu slajdów zostaną zapisane i zastosowane do wszystkich slajdów. Możesz także edytować lub utworzyć jeden lub więcej układów slajdów zawierających niestandardowe style list i dodać je do miejsc w prezentacji, w których chcesz użyć stylów list.

       Lista ograniczeń w programie PowerPoint

       Z listami w programie PowerPoint nie można wykonywać czynności, których można używać w innych Programy biurowe, na przykład Word. Na przykład program PowerPoint nie obsługuje następujących funkcji:

       Pytania i odpowiedzi

       Aby uzyskać szczegółowe instrukcje, kliknij tytuł sekcji poniżej.

       Dlaczego widzę tylko jeden znacznik, niezależnie od tego, ile linii dodam?

       Upewnij się, że używasz tekst pole to znaczniki lub liczby, a nie pole tytuły. W tekst polu każdorazowo po naciśnięciu klawisza pojawia się cyfra lub znacznik ENTER. Po naciśnięciu klawiszy CTRL+ENTER zostaną wyświetlone dodatkowe wiersze bez punktorów (szczegóły lub notatki w wierszu punktowanym lub numerowanym).

       
       

       W polu tytuły oczekuje się, że tekst będzie nagłówkiem lub tytułem w jednym wierszu. Możesz używać liczb lub punktorów, ale wszystkie wiersze tekstu będą liczone jako jeden wiersz, w wyniku czego powstanie jeden punktor lub liczba.

       Jak anulować tworzenie znaczników za każdym razem, gdy dodawana jest linia?

       Aby zakończyć tworzenie punktorów i numerów i powrócić do tekstu, kliknij znaczniki Lub numeracja ponownie, aby go wyłączyć.

       Możesz także nacisnąć ENTER i klawisz BACKSPACE, aby usunąć znacznik lub liczbę. Następnie możesz dodać tekst lub nacisnąć klawisz Enter, aby dodać dodatkowe puste linie.

       Jak korzystać z wielu poziomów znaczników?

       Aby utworzyć podlistę w ramach listy, umieść kursor na początku wiersza, w którym chcesz dodać wcięcie, a następnie na karcie Dom w grupie ustęp kliknij przycisk zwiększyć poziom listy .

       

       1 . Zmniejsz poziom listy (wcięcie)

       2 . Zwiększ poziom listy (wcięcie)

       Aby przenieść tekst z powrotem na niższy poziom listy, umieść kursor na początku linii, a następnie na tabulatorze Dom w grupie ustęp kliknij przycisk obniż poziom listy.

       Jak zwiększyć lub zmniejszyć odstęp między punktorem lub liczbą a tekstem w wierszu?

       Aby zwiększyć lub zmniejszyć odstęp między punktorem lub liczbą a tekstem w wierszu, umieść kursor na początku wiersza tekstu. Aby wyświetlić linijkę, na karcie pogląd w grupie Pokazywać zaznacz pole linijka. Na linijce kliknij zakładkę (jak pokazano na obrazku poniżej) i przeciągnij wskaźnik, aby zmienić odległość pomiędzy punktorem lub liczbą a odpowiednim tekstem.

       Linijka wyświetla trzy różne znaczniki wskazujące wcięcie zdefiniowane dla pola tekstowego.

       

       1 . Wcięcie pierwszego wiersza — wskazuje lokalizację rzeczywistego znaku lub cyfry punktora. Jeśli akapit nie jest wypunktowany, wskazuje to położenie pierwszego wiersza tekstu.

       2 . Lewe wcięcie - Dopasowuje wartości zarówno znaczników pierwszej linii, jak i wcięcia oraz zachowuje ich względne odstępy.

       3 . występ - wskazuje położenie rzeczywistych linii tekstu. Jeśli akapit nie jest wypunktowany, wskazuje położenie drugiego wiersza (i kolejnych wierszy) tekstu.

       Jak mogę zmienić domyślne punktory na inny znak?

       Aby zmienić domyślne punktory w programie PowerPoint na komputerze z systemem Windows, wykonaj następujące kroki:

       
       

       Po wstawieniu slajdu lub pola tekstowego dla punktorów pojawią się nowe domyślne opcje punktorów.

       Aby uzyskać więcej informacji na temat pracy ze wzorcami, zobacz Zmienianie wzorca slajdów.

       Aby to pokazać, użyj punktorów lub numeracji duża ilość tekst lub proces sekwencyjny w Microsoft PowerPoint Prezentacja z 2010 roku.