ngjyra li css. Shtoni pika ose numërim në tekst

Vetia list-style-position specifikon nëse pika duhet të pozicionohet brenda ose jashtë artikujve të listës. Kjo pronë mund të marrë dy vlera:

• jashtë - shënuesi ndodhet në të majtë të përmbajtjes (ky është parazgjedhja)
• brenda - shënuesi ndodhet brenda artikullit të listës së bashku me përmbajtjen

Tani mund të rishkruani shembullin e mëparshëm në mënyrë që dhëmbëzimi në anën e majtë të hiqet, por shënuesit të mos dalin nga skaji i shfletuesit:

• Kafe
• Çaj

• Kafe
• Çaj

• Kafe
• Çaj

Në shembull, një kufi iu shtua çdo artikulli të listës për të treguar vizualisht kufijtë e artikujve të listës.

Ky artikull udhëzues do të fokusohet në punën me listat në CSS, do të mësoni se si të ndryshoni llojin e pikës, pozicionin e pikës në lidhje me artikullin e listës, të krijoni pikat tuaja dhe madje të ndryshoni ngjyrën e pikës.

Unë mendoj se ju tashmë e dini se HTML 5 përdor dy lloje kryesore të listave (duke përjashtuar listat e përshkrimit dhe artikujt e menusë):

• lista e numëruar (e renditur) - Elementi HTML
  1. listë me plumba (të pa renditur) – element HTML

     CSS na jep shumë opsione për formatimin e pamjes së këtyre listave, le të shohim ato kryesore.

     Ndryshimi i llojit të shënuesit

     Prona e parë që do të doja të merrja në konsideratë është kjo pronë list-style-type, kjo specifikon llojin e shënuesit të artikullit të listës.

     Menytë e navigimit, për shembull, shpesh përbëhen nga lista të rregullta me pika (element HTML

     ), si parazgjedhje, shënuesi i të cilit shfaqet në formën e një rrethi të mbushur, për ta hequr atë duhet të përdorni Vetia CSS m list-style-type me vlerën none:
     ul(list-style-type: asnjë; /* hiqni shënuesin nga lista */ }

     Për listat me pika (të pa renditura) (elementi HTML

     ) ekzistojnë tre lloje shënuesish: në formën e një rrethi të mbushur (disku është vlera e paracaktuar), një shënues në formën e një rrethi të zbrazët (rrethi) dhe në formën e një katrori (katror), dhe për të numëruar ( renditur) listat (artikull
     ) të gjitha opsionet e mbetura. Lista e plotë jepet në tabelën e mëposhtme:

     Kuptimi	Përshkrimi
     asnjë Artikulli i listës Artikulli i listës Artikulli i listës	Shënuesi nuk shfaqet.
     disku Artikulli i listës Artikulli i listës Artikulli i listës	Një shënues në formën e një rrethi të mbushur. Kjo është vlera e paracaktuar.
     armene Artikulli i listës Artikulli i listës Artikulli i listës	Shënues numerik (numërimi tradicional armen).
     rrethi Artikulli i listës Artikulli i listës Artikulli i listës	Shënues në formën e një rrethi.
     cjk-ideografike Artikulli i listës Artikulli i listës Artikulli i listës	Numra të thjeshtë ideografikë.
     dhjetore Artikulli i listës Artikulli i listës Artikulli i listës	Shënues numerik (numrat dhjetorë arabë që fillojnë me 1).
     dhjetore-drejtuese-zero Artikulli i listës Artikulli i listës Artikulli i listës	Shënues numerik (numrat dhjetorë arabë që fillojnë me 1 dhe pasohen nga një zero kryesore - 01, 02, 03...).
     gjeorgjiane Artikulli i listës Artikulli i listës Artikulli i listës	Shënues numerik (numërimi tradicional gjeorgjian - an, ban, gan, ..., ai, tan, in, in-an...).
     hebraike Artikulli i listës Artikulli i listës Artikulli i listës	Shënues numerik (numërimi tradicional hebraik).
     hiragana Artikulli i listës Artikulli i listës Artikulli i listës	Shënues numerik (rrokëzimi japonez Hiragana - a, i, u, e, o, ka, ki...).
     hiragana-iroha Artikulli i listës Artikulli i listës Artikulli i listës	Shënues numerik (rrokja japoneze Hiragana Iroha - i, ro, ha, ni, ho, ai, te, ...).
     katakana Artikulli i listës Artikulli i listës Artikulli i listës	Shënues numerik (rrokëzimi japonez Katakana - A, I, U, E, O, KA, KI, ...).
     katakana-iroha Artikulli i listës Artikulli i listës Artikulli i listës	Shënues numerik (rrokëzimi japonez Katakana iroha - I, RO, HA, NI, HO, HE, TO, ...).
     më e ulët-alfa Artikulli i listës Artikulli i listës Artikulli i listës	Shkronjat e vogla ascii (a, b, c, d...z).
     greqisht e ulët Artikulli i listës Artikulli i listës Artikulli i listës	Shkronjat e vogla greke (α, β, γ, δ, etj.).
     latinisht i ulët Artikulli i listës Artikulli i listës Artikulli i listës	Shkronjat e vogla latine (a, b, c, d,...z).
     të ulët-romake Artikulli i listës Artikulli i listës Artikulli i listës	Numrat romakë në shkronja të vogla(i, ii, iii, iv, v, etj.).
     katrore Artikulli i listës Artikulli i listës Artikulli i listës	Shënues në formën e një katrori.
     sipër-alfa Artikulli i listës Artikulli i listës Artikulli i listës	Shkronjat e mëdha ascii (A, B, C, D,...Z).
     sipër-latin Artikulli i listës Artikulli i listës Artikulli i listës	Shkronja të mëdha latine (A, B, C, D,...Z).
     romake e lartë Artikulli i listës Artikulli i listës Artikulli i listës	Numrat romakë me shkronja të mëdha (I, II, III, IV, V, etj.).

     Ju lutemi vini re se vlerat hebraike, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha nuk mbështeten nga shfletuesi Internet Explorer .

     Le të shohim një shembull të përdorimit të vetive të tipit list-style në tekst:

     /* listë me vlerën e tipit të paracaktuar të shënuesit (disk). */
     • Artikulli i listës
     • Artikulli i listës
     • Artikulli i listës
     /* listë e numëruar me tip shënuesi më të ulët-roman */
     1. Artikulli i listës
     2. Artikulli i listës
     3. Artikulli i listës
     /* listë me pika me rreth të tipit plumb */
     • Artikulli i listës
     • Artikulli i listës
     • Artikulli i listës

     Në këtë shembull, ne krijuam dy stile, i pari vendos llojin e shënuesit - numrat romakë të vegjël (vlera romake e ulët), e aplikuam atë në një listë të numëruar (element HTML

     ), dhe në një listë me pika (elementi HTML
     ) kemi aplikuar një stil që përcakton llojin e shënuesit të jetë një rreth i zbrazët (rrethi i vlerës).

     Rezultati i shembullit tonë:

     Ju lutemi vini re se mund të aplikoni tiparin tip list-style edhe në një element të vetëm të listës (element HTML

     • ) për të vendosur llojin tuaj të shënuesit, ose për të krijuar stile që do të aplikojnë një shënues specifik në elementët e listës çift ose tek, siç shihet në shembullin e mëposhtëm:
       • Artikulli i listës
       • Artikulli i listës
       • Artikulli i listës
       • Artikulli i listës
       • Artikulli i listës
       • Artikulli i listës
       • Artikulli i listës
       • Artikulli i listës

       Në këtë shembull ne kemi stiluar gjithçka i çuditshëm elementet e listës - tregoi llojin e shënuesit katrore, dhe u tregua ngjyra e tekstit jeshile. Madje Elementet e listës morën stilin e mëposhtëm: e kuqe ngjyra e tekstit dhe mungesa shënues.

       Rezultati i shembullit tonë:

       Pozicioni i shënuesit në lidhje me artikullin e listës

       Rezultati i shembullit tonë:

       Oriz. 71 Një shembull i përdorimit të vetive list-style-position (vendndodhja e shënuesit / numrit në lista).

       Krijoni shënuesit tuaj

       Herët a vonë do t'ju duhet të krijoni shënues të listës me dizajnin tuaj, falë imazhit të stilit të listës së pronave CSS, ne mund ta zbatojmë këtë dëshirë në projektin tuaj.

       Sintaksa e pronës është si më poshtë:

       ol(list-style-image : url("images/primer.png"); /* specifikoni rrugën relative për imazhin */ } ul(list-style-imazh : ; /* specifikoni rrugën absolute për imazhin */ }

       Vlera në kllapa korrespondon me shtegun drejt imazhit që planifikoni të përdorni si shënues. Rruga drejt imazhit mund të jetë ose absolute ose relative. Kur specifikoni një rrugë relative, pikë e rëndësishmeështë ajo duhet të specifikohet në lidhje me vendosjen e fletës së stilit, jo me faqen.

       Nëse planifikoni të dizajnoni shënuesit tuaj, atëherë do t'ju duhet të përdorni një program redaktimi grafik, ose të përdorni një tashmë komplete të gatshme. Ju lutemi vini re se edhe nëse keni bërë gjithçka në mënyrë korrekte, imazhi mund të mos ngarkohet në faqe në këtë rast, ju duhet të redaktoni imazhin në mënyrë që sfondi i tij të bëhet transparent.

       Le të shohim një shembull të përdorimit të shënuesve të personalizuar në një dokument:

       .test(lista-style-imazh : url ("http://site/images/mini5.png"); /* specifikoni rrugën absolute për imazhin që do të përdoret si shënues */ }
       • Artikulli i listës
       • Artikulli i listës
       • Artikulli i listës

       Në këtë shembull ne tregojmë rrugë absolute te imazhi që do të përdoret si shënues.

       Rezultati i shembullit tonë:

       Ndryshimi i ngjyrës së shënuesit në CSS

       Për të përfunduar këtë artikull, le të shohim një mënyrë të avancuar për të ndryshuar ngjyrën e shënuesit pa ndryshuar ngjyrën e elementit, me duke përdorur CSS vetia e përmbajtjes dhe :para pseudoelementi i diskutuar më parë:

       • Artikulli i listës
       • Artikulli i listës
       • Artikulli i listës

       Thelbi i kësaj metode është që para çdo elementi të listës (elementi HTML

     • ) futni një përmbajtje pseudo-element (:para) të gjeneruar (përmbajtja e vetive CSS), e cila është identike në pamjen shënuesi në një listë me pika (elementi HTML
       ), vetëm ngjyra tashmë e nevojshme për detyrën tonë.

       Ju lutemi vini re se në këtë shembull është përdorur vetia padding-right, e cila na lejoi të bënim një dhëmbëzim të brendshëm djathtas në çdo element të listës (elementi HTML

       • ). Nëse në në këtë rast Nëse nuk e zbatoni këtë veçori, shënuesi do të pozicionohet afër tekstit, i cili nuk është vizualisht tërheqës. Puna me të brendshme dhe kufijtë e jashtëm elementet do të diskutohen në detaje në artikullin tjetër të tekstit shkollor "".

         Pyetje dhe detyra mbi temën

         Përpara se të kaloni në temën tjetër, plotësoni detyrat praktike:

         
         

         Nëse keni vështirësi në përfundimin detyrë praktike Ju gjithmonë mund ta hapni shembullin në një dritare të veçantë dhe të inspektoni faqen për të kuptuar se çfarë kodi CSS është përdorur.

         2016-2019 Denis Bolshakov, mund të dërgoni komente dhe sugjerime në faqe në [email protected]

         Detyrë

         Vendosni ngjyrën e shënuesve në listë pa ndryshuar ngjyrën e tekstit.

         Zgjidhje

         Ka dy mënyra për të ndryshuar ngjyrën e shënuesve, le t'i quajmë të thjeshta dhe të ndërlikuara. Një metodë e thjeshtë është brenda

       • shtoni një etiketë , dhe më pas vendosim tekstin brenda tij. Me fjalë të tjera, në vend të skemës tradicionale
       • teksti
       krijoni një dizajn
       • teksti
       . Në këtë rast, ngjyra e shënuesve përcaktohet nga vetia e stilit të ngjyrës për përzgjedhësin LI, dhe ngjyra e tekstit përcaktohet nga përzgjedhësi SPAN (shembulli 1).

       Shembulli 1: Përdorimi i etiketave të ndërlidhura

       HTML5 CSS 2.1 IE Cr Op Sa Fx

       • Violinë
       • Kitarë
       • Gajde
       • Organ fuçi
       • Celesta

       Rezultati i këtij shembulli është paraqitur më poshtë (Figura 1).

       Oriz. 1. Shënues që ndryshojnë në ngjyrë nga teksti kryesor

       Megjithë thjeshtësinë e saj, metoda është e papërshtatshme, veçanërisht me lista të mëdha, sepse tani do t'ju duhet të shtoni një etiketë për çdo artikull të listës . Prandaj, le të shohim një metodë të zgjuar tërësisht të bazuar në CSS.

       Internet Explorer	krom	Opera	Safari	Firefox	Android	iOS
       8.0+	1.0+	7.0+	3.1+	1.0+	1.0+	1.0+

       Çështja është kjo: ne heqim shënuesit e listës origjinale përmes veçorisë list-style-type dhe shtojmë shënuesit tanë duke përdorur pseudo-elementin :before dhe vetinë e përmbajtjes. Kjo lidhje ju lejon të futni çdo tekst ose simbol përpara një elementi, në këtë rast LI. Për më tepër, lloji i tekstit (ngjyra, fonti, sfondi, etj.) gjithashtu mund të kontrollohet përmes stileve, siç tregohet në shembullin 2. Këtu simboli i paragrafit ¶ përdoret si shënues.

       Shembulli 2: Përdorimi i pseudoelementit:para

       HTML5 CSS 2.1 IE Cr Op Sa Fx

       • Veriu
       • Jug
       • Perëndimi
       • Lindje

       Rezultati i këtij shembulli është paraqitur në Fig. 2.

       

       Oriz. 2. Shënjuesit e krijuar duke përdorur stile

       
       
       

       Ndrysho ngjyrën e pikave në listën HTML pa përdorur diapazonin (6)

       Për mua opsioni më i mirë është përdorimi i pseudo elementeve CSS, kështu që për diskun e diskut do të duket kështu:

       ul (lista-stili-lloj: asnjë; ) li ( pozicioni: relative; ) li:para (përmbajtja: ""; shfaqja: bllok; pozicioni: absolut; gjerësia: 5 px; /* rregulloje për t'iu përshtatur nevojave tuaja */ lartësia: 5px /* rregulloje për t'iu përshtatur nevojave tuaja */ rrezja kufitare: 50% /* rregulloje për t'iu përshtatur nevojave tuaja */

       • së pari
       • e dyta
       • e treta
       • gjerësia dhe lartësia duhet të jenë vlera të barabarta për të mbajtur treguesit të rrumbullakosur
       • ju mund ta vendosni kufirin në zero nëse dëshironi të keni pika katrore

       Për më shumë stile pikash, mund të përdorni forma të tjera css https://css-tricks.com/examples/ShapesOfCSS/ (zgjidhni këtë që nuk kërkon pseudo elementë si trekëndëshat)

       Po pyesja veten nëse kishte një mënyrë për të ndryshuar ngjyrën në plumbat në listë.

       Unë kam një listë:

       • Shtëpia
       • Kopshti

       Nuk është e mundur të futësh asgjë në li, si "span" dhe "p". A mund të ndryshoj ngjyrën e plumbave, por jo tekstin në një mënyrë të zgjuar?

       Nëse mund të përdorni një imazh, mund ta bëni atë. Dhe pa një imazh, nuk do të mund të ndryshoni ngjyrën e plumbit, jo tekstin.

       Duke përdorur një imazh

       Li (image-stili i listës: url(imazhe/image.jpg); )

       Pa përdorur një imazh

       Pastaj ju duhet të redaktoni shënimin HTML dhe të përfshini hapësirën brenda listës dhe të ngjyrosni hapësirën dhe hapësirën me ngjyra të ndryshme.

       Më pëlqeu shumë edhe përgjigja e Markut - më duhen një grup UL me ngjyra të ndryshme dhe padyshim që do të ishte më e lehtë të përdorja vetëm një klasë. Ja çfarë përdora për portokallin, për shembull:

       Ul.portokalli ( stili i listës: asnjë; mbushja: 0 px; ) ul.portokalli > li: para (përmbajtja: "\25CF "; madhësia e shkronjave: 15 px; ngjyra: #F00; margjina-djathtas: 10 px; mbushja: 0 px ;lartësia e vijës: 15px;

       Gjithashtu, zbulova se kodi gjashtëkëndor që përdora për "përmbajtjen:" ishte i ndryshëm nga ai i Markut (ai rrethi gjashtëkëndor më dukej shumë i gjatë, ai që përdora duket se qëndronte në mënyrë perfekte në mes). , rrathë, etj.)

       Mund të kombinojmë imazhin e stilit të listës me svg s që mundemi fut në css! Kjo metodë ofron kontroll të jashtëzakonshëm mbi “plumbat” që mund të bëhen çdo gjë.

       Për të marrë një rreth të kuq, thjesht përdorni css-në e mëposhtme:

       "); }

       Por ky është vetëm fillimi. Kjo na lejon të bëjmë çdo gjë të çmendur që duam me këto plumba. rrathët ose drejtkëndëshat janë të lehtë, por çdo gjë që mund të vizatoni me svg, mund të shkoni atje! Shihni shembullin e mollës së mollës më poshtë:

       ul (list-style-image: url("data:image/svg+xml, "); ) ul ul (list-style-imazh: url("të dhëna:image/svg+xml, "); ) ul ul ul (list-style-image: url("data:image/svg+xml, "); ) ul ul ul (list-style-image: url("data:image/svg+xml, "); ) ul.bulls-eye (list-style-image: url("data:image/svg+xml, "); ) ul.shumë ngjyra (lista-style-imazh: url("data:image/svg+xml, "); }

       • Rrathë të mëdhenj!
         • Drejtkëndësha të mëdhenj!
         • b
           • Rrathë të vegjël!
           • c
             • Drejtkëndësha të vegjël!
       • Demat
       • sytë.
       • Shumë
       • ngjyra

       Gjerësia/lartësia e atributit

       Disa shfletues kërkojnë që të vendosen atributet e gjerësisë dhe lartësisë

       Kodimet

       Duke u bazuar në zgjidhjet e @Marc dhe @jessica, kjo është zgjidhja që përdor:

       Li ( pozicioni:relativ; ) li:para (përmbajtja:""; ekrani: bllok; pozicioni: absolut; gjerësia: 6 px; lartësia: 6 px; rreze-kufi: 6 px; majtas: -20 px; lart: .5em; sfond- ngjyra: #000;

       Unë e përdor em për madhësinë e shkronjave, kështu që nëse e vendosni lart në 0,5em, do të vendoset gjithmonë në mes të rreshtit tuaj të parë të tekstit. Kam përdorur majtas:-20 px sepse ky është pozicioni i parazgjedhur majtas:-20 px në shfletues: mbushje prind/2

       E di që kjo është një pyetje vërtet, vërtet e vjetër, por po luaja me këtë dhe dola me një mënyrë që nuk e kisha parë. Jepini listës një ngjyrë dhe më pas anashkaloni ngjyrën e tekstit duke përdorur përzgjedhësin ::first-line::first-line . Unë nuk jam ekspert, kështu që mund të ketë diçka të gabuar me këtë qasje që më mungon, por duket se funksionon.

       li (ngjyra: blu; ) li:: rreshti i parë ( ngjyra: e zezë; )

       • Shtëpia
       • Kopshti

       Ju mund të përdorni lista me pika ose të numëruara për të organizuar tekstin ose për të shfaqur një proces sekuencial në të Prezantimet në PowerPoint.

       

       Ndryshimi i ngjyrës dhe stilit të shënuesve dhe kuptimi i kufizimeve

       Ju mund të ndryshoni ngjyrën, stilin ose madhësinë e pikave ose numrave në prezantimin tuaj në PowerPoint dhe gjithashtu mund të ndryshoni numrin me të cilin dëshironi të filloni.

       

       Aplikoni stile të personalizuara në rrëshqitje të shumta

       Mënyra më e mirë Aplikoni stilet e personalizuara të listës në të gjitha rrëshqitjet në një prezantim - ndryshoni masterin e rrëshqitjes. Çdo cilësim i listës që i bëni masterit të rrëshqitjes do të ruhet dhe do të zbatohet në të gjitha rrëshqitjet. Ju gjithashtu mund të modifikoni ose krijoni një ose më shumë paraqitje rrëshqitëse që përfshijnë stile të personalizuara të listës dhe t'i shtoni ato në vendet në prezantimin tuaj ku dëshironi të përdorni stilet e listave tuaja.

       Listoni kufizimet në PowerPoint

       Ju nuk mund të bëni gjëra me lista në PowerPoint që mund t'i përdorni në të tjerët Programet e zyrës, për shembull Word. Për shembull, PowerPoint nuk mbështet veçoritë e mëposhtme:

       Pyetje dhe përgjigje

       Klikoni titullin e seksionit më poshtë për udhëzime të hollësishme.

       Pse shoh vetëm një shënues pa marrë parasysh sa rreshta shtoj?

       Sigurohuni që jeni duke përdorur teksti fusha është shënues ose numra, jo fushë tituj. NË teksti fushë sa herë që shtypni një tast, shfaqet një numër ose shënuesi ENTER. Kur shtypni CTRL+ENTER, ju merrni linja shtesë pa pika (për detaje ose shënime në një linjë me pika ose me numra).

       
       

       Në fushë tituj teksti pritet të jetë një titull ose titull si një rresht. Ju mund të përdorni numra ose pika, por do të numëroni të gjitha rreshtat e tekstit si një rresht, duke rezultuar në një pikë ose numër.

       Si të anuloni krijimin e shënuesve sa herë që shtohet një rresht?

       Për të ndaluar krijimin e pikave dhe numrave dhe për t'u kthyer në tekst, klikoni shënues ose numërimi përsëri për ta çaktivizuar.

       Mund të shtypni gjithashtu ENTER dhe të shtypni tastin BACKSPACE për të fshirë një shënues ose numër. Më pas mund të shtoni tekst ose shtypni Enter për të shtuar vija bosh shtesë.

       Si të përdorni nivele të shumta shënuesish?

       Për të krijuar një nënlistë brenda një liste, vendoseni kursorin në fillim të rreshtit që dëshironi të futni në dhëmbë, dhe më pas në skedën Shtëpi në grup paragrafi klikoni butonin rrisin nivelin e listës .

       

       1 . Zvogëlo nivelin e listës (pasuri)

       2 . Rritja e nivelit të listës (pasuri)

       Për ta kthyer tekstin në një nivel më të ulët në listë, vendoseni kursorin në fillim të rreshtit dhe më pas në skedën Shtëpi në grup paragrafi klikoni butonin zvogëloni nivelin e listës.

       Si mund ta rris ose zvogëloj hapësirën midis një pike ose numri dhe tekstit në një rresht?

       Për të rritur ose ulur hapësirën midis një pike ose numri dhe tekstit në një rresht, vendoseni kursorin në fillim të rreshtit të tekstit. Për të parë vizoren, në skedën pamje në grup Shfaq kontrolloni kutinë sundimtar. Në vizore, klikoni skedën (siç tregohet në imazhin më poshtë) dhe tërhiqni treguesin për të ndryshuar distancën midis pikës ose numrit dhe tekstit përkatës.

       Vizitori shfaq tre shënues të ndryshëm për të treguar dhëmbëzimin e përcaktuar për fushën e tekstit.

       

       1 . Indent i rreshtit të parë - tregon vendndodhjen e karakterit ose numrit aktual të pikës. Nëse një paragraf nuk është shënuar me pika, kjo tregon pozicionin e rreshtit të parë të tekstit.

       2 . Left Indent - Rregullon vlerat si të vijës së parë ashtu edhe të shënuesve të dhëmbëzimit dhe ruan hapësirën e tyre relative.

       3 . protrusion - tregon vendndodhjen e linjave aktuale të tekstit. Nëse një paragraf nuk është shënuar me pika, ai tregon vendndodhjen e rreshtit të dytë (dhe rreshtave pasues) të tekstit.

       Si mund t'i ndryshoj pikat e paracaktuara në një karakter tjetër?

       Për të ndryshuar pikat e paracaktuara në PowerPoint në një kompjuter Windows, ndiqni këto hapa:

       
       

       Kur futni një rrëshqitje ose kuti teksti për pikat, do të shfaqen opsionet e reja të paracaktuara të pikave.

       Për më shumë informacion rreth punës me mjeshtrat, shihni Ndryshimi i një masteri të rrëshqitjes.

       Përdorni pika ose numërim për të treguar sasi e madhe teksti ose procesi vijues në Microsoft PowerPoint prezantimi i vitit 2010.