Si të ndryshoni një shënues në një listë. Si të ndryshoni ngjyrën e një shënuesi të listës html duke përdorur CSS. Shenjat me para


Listat CSS— një grup pronash përgjegjëse për hartimin e listave. Përdorimi i listave HTML është shumë i zakonshëm kur krijoni shirita navigimi në uebsajt. Artikujt e listës përfaqësojnë një koleksion elementësh blloku.

Duke përdorur vetitë standarde të CSS mundeni ndryshoni pamjen e shënuesit të listës, shtoni një imazh për shënuesin, dhe ndryshoni vendndodhjen e shënuesit. Lartësia e bllokut të shënuesit mund të vendoset me veçorinë line-height.

Dizajnimi i listave duke përdorur stilet CSS

1. Lloji i shënuesit të listës list-style-type

Vetia ndryshon llojin e shënuesit ose heq shënuesin për listat me pika dhe me numra. I trashëguar.

list-style-lloj
Vlerat:
disku Vlera e paracaktuar. Një rreth i mbushur vepron si një shënues për artikujt e listës.
armene Numërimi tradicional armen.
rrethi Një rreth i hapur vepron si një shënues.
cjk-ideografike Numërimi ideografik.
dhjetore 1, 2, 3, 4, 5, …
dhjetore-drejtuese-zero 01, 02, 03, 04, 05, …
gjeorgjiane Numërimi tradicional gjeorgjian.
hebraike Numërimi tradicional hebraik.
hiragana Numërimi japonez: a, i, u, e, o,…
hiragana-iroha Numërimi japonez: i, ro, ha, ni, ho,…
katakana Numërimi japonez: A, I, U, E, O,…
katakana-iroha Numërimi japonez: I, RO, HA, NI, HO,…
më e ulët-alfa a, b, c, d, e,…
greqisht e ulët Shkronjat e vogla të alfabetit grek.
latinisht i ulët a, b, c, d, e,…
të ulët-romake i, ii, iii, iv, v,…
asnje Nuk ka asnjë shënues.
katrore Një katror i mbushur ose i paplotësuar vepron si shënues.
sipër-alfa A, B, C, D, E,…
sipër-latin A, B, C, D, E,…
sipër-roman I, II, III, IV, V,…
fillestare Vendos vlerën e pronës në vlerën e paracaktuar.
trashëgojnë Trashëgon vlerën e pronës nga elementi mëmë.

Sintaksë

Ul (lloji i stilit të listës: asnjë;) ul (lloji i stilit të listës: katror;) ol (lloj i stilit të listës: asnjë;) ol (lloj i stilit të listës: i ulët-alfa;) Oriz. 1. Shembull i hartimit të listave me pika dhe me numra

2. Imazhe për artikujt e listës list-style-image

Ju mund të përdorni imazhe dhe mbushje gradient si shënues të artikujve të listës. I trashëguar.

Sintaksë

Ul (imazhi i stilit të listës: url ("imazhe/romb.png");) ul (imazhi i stilit të listës: gradient linear (#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Oriz. 2. Hartoni një listë me pika duke përdorur një imazh
Oriz. 3. Hartoni një listë me pika duke përdorur një gradient

3. Lista-stili-pozicion

Kjo veçori ofron mundësinë për të vendosur shënuesin jashtë ose brenda përmbajtjes së artikullit të listës. I trashëguar.

Sot, çdo person duhet të ketë aftësi kompjuterike dhe të zotërojë të paktën një grup minimal programesh. Standardet dhe më të njohurat përfshijnë Microsoft Word. Kur punojnë në Word, përdoruesit përballen me nevojën për të nxjerrë në pah vargjet e caktuara të tekstit për qartësi. Shumë shpesh është e nevojshme të futni një listë në një dokument. Kjo mund të jetë një listë me pika ose një numër - përdoruesi ka mundësinë të lundrojë sipas situatës.

Programi ju lejon të krijoni çdo dokument, letra dhe projekt, duke përdorur mundësi të bollshme për të mësuar të gjitha funksionet e Microsoft Word, ju duhet të kaloni kohë, por rezultati ia vlen.

Listat janë të nevojshme për ta bërë tekstin të qartë dhe shprehës. Listat e numëruara dhe me pika në një nivel përdoren në shumicën e dokumenteve. Në disertacionet dhe punimet shkencore përdoret një listë me shumë nivele.

Numërimi dhe shënuesit

Para së gjithash, ju duhet të zgjidhni paragrafët që duhet të formatohen si një listë. Kjo mund të bëhet duke përdorur miun ose thjesht duke vendosur kursorin në fillim të rreshtit nga do të fillojë lista.

Në MS Word ekziston një skedë "Home", në të cilën mund të zgjidhni futjen e dëshiruar në grupin "Paragraf". Përdoruesi klikon butonat "Numërimi" ose "Shënuesit", më pas përdor vizoren për të vendosur indencat. Kjo metodë është shumë e thjeshtë dhe e drejtpërdrejtë, por një përdorues i papërvojë mund të hasë vështirësi të fshehura. Kur rifutni listat me pika dhe të numëruara, do t'ju duhet të modifikoni përsëri dhëmbjet.

Në rastin kur është e nevojshme të formatoni secilën listë veç e veç dhe të ndryshoni parametrat e fontit, jo çdo përdorues i programit do të jetë në gjendje ta bëjë tekstin të saktë, dhe për më tepër, kjo do të kërkojë shumë kohë dhe përpjekje.

Listat e numëruara

Çdo element i listës theksohet me një numër dhe numërimi rregullohet automatikisht. Për të krijuar dhe modifikuar listat, ekziston një buton "Numërimi" në grupin "Paragraf". Ju gjithashtu mund të përdorni funksionin "Numërimi" në menynë e kontekstit të paragrafit të zgjedhur.

Lista e opsioneve:

  • Formati i numrave përcakton se cili karakter do të shfaqet pranë secilit element.
  • Stili i numërimit mund të zgjidhet në varësi të karakteristikave të një dokumenti të veçantë: numra arabë ose romakë, shkronja të mëdha ose etj.
  • Fusha "Vlera e fillimit" ju lejon të zgjidhni numrin me të cilin do të fillojë lista.
  • Në rastin kur duhet të krijoni një listë të ngjashme, por ta numëroni përsëri, është e përshtatshme të përdorni funksionin "Filloni një listë të re". Ju duhet të zgjidhni elementet dhe të vendosni të gjithë parametrat.

Mund të futni automatikisht një listë të numëruar. Për ta bërë këtë ju duhet të bëni sa më poshtë:

  • Në fillim të paragrafit, para se të futni tekst, duhet të vendosni "1.", pastaj "Hapësirë" ose Tab. Paragrafi do të shfaqet si artikulli i parë në listë.
  • Duke vendosur një paragraf me "1)" dhe më pas duke shtypur Space ose Tab, përdoruesi do të krijojë një lloj tjetër liste.
  • Për analogji, hartohen lista me shkronja. Në rreshta duhet të futni me një pikë ose kllapa. Pas çdo paragrafi duhet të shtypni Space ose Tab.

Krijo automatikisht një listë me pika

Ju mund të futni një listë me pika në Word si më poshtë:

  • Në fillim të një paragrafi, duhet të shkruani një yll ose shenjë më të madhe se, dhe më pas shtypni Space ose Tab.
  • Krijo automatikisht një listë me pika. Mund ta aktivizoni duke shkuar te skeda "File" dhe duke zgjedhur grupin "Opsionet". Në skedën "Drejtshkrim", zgjidhni "Opsionet e korrigjimit automatik". Në seksionin "AutoFormat", duhet të kontrolloni kutitë pranë stileve.

Ju mund të krijoni një listë me pika të llojeve të mëposhtme:

Lista me shumë nivele

Listat me pika dhe të numëruara janë elementë Ato duhet të konfigurohen sipas nevojës nga përdoruesi në një rast të veçantë. Struktura mund të modifikohet duke përdorur funksionin Define Multi-Level List. Është e përshtatshme të kontrolloni se si shfaqen të gjitha listat në grupin "Listat në dokumente". Për të ndryshuar cilësimet e fontit të secilit font individual, një listë me shumë nivele shoqërohet me stilet e paragrafit.

Opsionet kryesore për konfigurimin e një liste me shumë nivele

Kur vendosni një listë, e cila përbëhet nga disa nivele, duhet t'i kushtoni vëmendje parametrave të mëposhtëm:

  • Zgjedhja e një niveli dhe një shembull i dizajnit të tij.
  • Përcaktimi i cilësimeve të shkronjave nëse është e nevojshme, mund të vendosni një pjesë konstante të numrit.
  • Zgjidhni llojin e numërimit: simbolin, figurën, shkronjat dhe opsione të tjera.
  • Përcaktimi i nivelit në të cilin azhurnohet numërimi.
  • Përcaktoni dhëmbëzimin dhe vendosjen e tekstit.
  • Opsione shtesë të redaktimit.
  • Përputhja e stilit të paragrafit dhe listës me shumë nivele.

Cilësimet që janë krijuar një herë mund të aplikohen automatikisht në listat pasuese. Por nëse ka nevojë për redaktim, do të duhet të punoni me secilën listë veç e veç. Ky shqetësim mund të duket i parëndësishëm, por nëse ka një numër të madh listash në tekst, formatimi do të marrë shumë kohë.

Si të ndryshoni stilin e shënuesit?

Duke klikuar në butonin "Shënuesit", mund të zgjidhni opsionin që është i përshtatshëm në këtë rast. Për ta bërë këtë, shkoni te zona "Biblioteka" dhe klikoni mbi të. Lloji i numërimit zgjidhet në të njëjtën mënyrë: në zonën "Biblioteka e numrave".

Për të kthyer një listë të numëruar ose me pika në tekst në Word, thjesht duhet të shtypni butonin përkatës.

Çdo element teksti mund të theksohet me një shënues të veçantë. Për të formatuar listën sipas kërkesave të një dokumenti specifik, duhet të zgjidhni komandën "Përcaktoni shënuesin e ri".

Pas zotërimit të të gjitha veçorive të Microsoft Word, puna me dokumente do të jetë një kënaqësi dhe nuk do t'ju duhet të shpenzoni shumë kohë për formatimin e tekstit. Një listë me pika, si ajo e numëruar, përfshihet në pothuajse çdo dokument dhe përdoret shpesh, kështu që do të jetë e dobishme që përdoruesi i programit të njihet me krijimin e listave të llojeve të ndryshme.

Duke përdorur kutinë e dialogut Listë Mund të ndryshoni opsionet e mëposhtme të listës me pika:

    Simboli i shënuesit për çdo simbol nga fontet e instaluara në kompjuter.

    Madhësia e zgjatjes.

    Distanca midis simbolit të pikës dhe tekstit.

    Radhitje.

Për këto qëllime ju duhet të hyni në menu Formati – Lista dhe shtypni butonin Ndryshimi, pas së cilës do të hapet një kuti dialogu Redakto listën me pika, paraqitur në Fig. 4.25.

Oriz. 4.25. Dritarja e dialogut Redakto listën me pika

Më poshtë është lista e opsioneve të saj:

Opsione

Qëllimi

Simboli i shënuesit

Ofron opsione për shkronja të ndryshme për karakterin e zgjedhur

Ju lejon të zgjidhni një opsion të simbolit të shënuesit

Pozicioni i shënuesit

Përcakton shtrirjen dhe pozicionin e shënuesit në lidhje me kufirin e majtë të tekstit

Pozicioni nga teksti

Vendos sasinë e dhëmbëzimit nga skaji i djathtë i shënuesit deri në fillim të tekstit

Ju lejon të vlerësoni vizualisht se si do të duket lista pasi të bëni ndryshime në të

Ndryshoni formatin e një liste të numëruar

Listat e numëruara krijohen në skedë I numëruar(Fig. 4.24). Nëse formatet e sugjeruara të listës me numër nuk janë të përshtatshme për hartimin e një dokumenti të caktuar, mund të krijoni formatin tuaj të listës duke klikuar Ndryshimi në kutinë e dialogut Listë në skedën I numëruar. Kjo do të hapë një dritare dialogu Ndryshimitë numëruaralistë(Fig. 4.26).

Oriz. 4.26. Dritarja e dialogut Redakto listën e numëruar

Më poshtë janë opsionet në këtë kuti dialogu që ju lejojnë të ndryshoni formatin e listës së numëruar.

Opsioni

Qëllimi

Formati i numrit

Numërimi

Zgjedh stilin e numrave për listën

Përcakton numrin nga i cili duhet të fillojë numërimi në listë

Ju lejon të zgjidhni një font për numrat në listë dhe për çdo tekst para dhe pas numrave Hap skedën Font

Pozicioni i numrit

Radhitje

Vendos shtrirjen e listës

Përcakton shtrirjen dhe pozicionin e numrit

Pozicioni i tekstit

Vendos distancën nga skaji i djathtë i numrit deri në fillim të tekstit

Bën të mundur shikimin e të gjitha ndryshimeve që bëhen përpara se të shtohen në dokument

Krijimi i listave me shumë nivele

Llojet më komplekse të listave gjenden në shumë lloje dokumentesh. Këto janë të ashtuquajturat me shumë nivele listat. Ata gjithashtu përdorin ose shenja ose numërim, dhe ndonjëherë një kombinim të të dyjave. Por ndryshimi kryesor i tyre nga llojet e mëparshme të listave është prania e disa niveleve. Në varësi të nivelit, secilit paragraf i caktohet një simbol ose numër.

Oriz. 4.27. Tab Me shumë nivele kutitë e dialogut Listë.

Listat me shumë nivele ndryshojnë nga listat e rregullta në prani të indenteve. Niveli i një liste të tillë merret një indeks i caktuar.

Krijimi i një liste me shumë nivele është i mundur vetëm duke përdorur një kuti dialogu Listë. Për më tepër, nivelet përcaktohen nga vetë interpretuesi, duke vendosur pika të caktuara. Word analizon dhëmbëzimin dhe, në varësi të madhësisë së tyre, i numëron ato, duke krijuar nivele.

Mund të krijoni formate numërimi të modifikuar për nivele të ndryshme të një liste me shumë nivele, por vetëm një format i listës me shumë nivele lejohet për dokument.

Për të krijuar një listë me shumë nivele, duhet të kryeni hapat e mëposhtëm:

1. Përcaktoni një fragment të dokumentit që supozohet të formatohet si listë.

2. Krijoni dhëmbëzime për çdo paragraf duke përdorur butonin Rritja e dhëmbëzimit në shiritin e veglave Formatimi(Nuk mund të përdorni skeda kur krijoni dhëmbëzime).

3. Zgjidhni fragmentin e zgjedhur të tekstit.

4. Zgjidhni një ekip FormatiListë. Në dritaren e dialogut Listë shkoni te skeda Me shumë nivele(Fig. 4.27).

5. Zgjidhni llojin e dëshiruar të listës me shumë nivele nga opsionet e propozuara. Klikoni Ne rregull.

Sot do të kuptojmë se si krijohen listat në një faqe interneti, çfarë shënuesish përdoren dhe do të testojmë stile të ndryshme për të ndryshuar pamjen.

Më lejoni t'ju kujtoj se si stilet lidhen me një faqe HTML:

Ka listë css me pika ose të parregulluara dhe të numëruara.

Lista e shënuesve janë imazhe të formave të ndryshme: rrathë, katrorë, xhaketë dhe të ngjashme. Quhen edhe plumba. Ju gjithashtu mund të përdorni vizatimet tuaja si shënues për listën.

Lista e numëruar paraqet daljen e informacionit me numër 1, 2, 3 etj.

Në mënyrë tipike, shënuesit janë rrathë të thjeshtë të zinj, të cilët janë të njohur për përdoruesin, por nga ana tjetër, ata nuk tërheqin shumë vëmendjen ndaj tekstit.

Nëse vendosni t'i zëvendësoni këto kriklla me ato të stilistëve, atëherë duhet të zotëroni stilimi i një liste duke përdorur css. Kjo është ajo që ne do të bëjmë sot.

Baza e çdo liste përbëhet nga kodi i mëposhtëm i faqes në internet:

  • Elementi i parë i listës
  • Elementi i dytë i listës
  • Elementi i fundit i listës

Ky bllok duket si ky:

  • Elementi i parë i listës
  • Elementi i dytë i listës
  • Elementi i fundit i listës

Stilimi Css i shënuesve të listës

Ne do të shkruajmë daljen e jashtme në skedarin e stilit stil.css. Mund të quhet ndryshe, por ka një shtrirje .css.

Shënuesit standardë CSS: rrethi (rrethi) - rrethi i paplotësuar, pika (disku) - rrethi i mbushur, katrori (katrori) - katrori i mbushur.

Gjeneron një listë në kodin css ul- me ndihmën e tij vendosim se cili nga shënuesit standardë do të shfaqet në faqe.

Për shembull, le të shfaqim listat duke përdorur një rreth. Hyrja në skedarin css do të jetë si kjo:

Ul (lloji i stilit të listës: rrethi)

Por shpesh është e nevojshme të zëvendësohen shënuesit jo në të gjitha listat e shfaqura, por vetëm në blloqe të caktuara. Për shembull, ndryshoni në postime, por jo në komente. Në këtë rast, kodi ul nuk duhet të ketë ndonjë kuptim, dhe stili i rrethit duhet të specifikohet vetëm për listat në postime. Ja si duket kodi pa vlerën:

Ul (lloji i stilit të listës: asnjë)

Nëse nuk mund ta gjeni kodin në skedarin css përgjegjës për shfaqjen e listës në bllokun që ju nevojitet, atëherë përdorni shtojcën për Firefox - Firebug ose në Google Chrom, kliko me të djathtën në faqen e internetit të blogut. Pastaj "shikoni kodin e elementit".

Për shembull, një nga opsionet për ndryshimin e paraqitjes së listës në postime në një rreth standard, nëse nuk ka përmbajtje për bllokun ul:

ul post-përmbajtje (lista-stili-lloj: rrethi)

Ose një shembull tjetër:

#content-blok ul (list-style-lloj: katror)

Përfundoni kursin "Praktika Css"

]]> ]]>

Njohja e CSS është e nevojshme për çdo webmaster, sepse është një mënyrë universale për të bërë dizajn me cilësi të lartë pa mbingarkuar kodin e faqes.

Për ata që duan mësoni truket e stilimit të css shumë shpejt, ]]> rekomandoj ]]> kurs të avancuar "Praktika CSS" nga Evgeniy Popov.

Artikujt e ardhshëm:

Shënues grafikë për listën.

Listoni indencat css.

Si të ndryshoni ngjyrën css të një shënuesi të listës në mënyrë që ngjyra e tij të jetë e ndryshme nga ngjyra e tekstit.

Listat e mbivendosura. Si të bëni një listë horizontale në css. Ndryshoni stilin e listave të numëruara.

Shkarkoni shënues të bukur për listat e faqeve.

Përdorimi i listave në një artikull ka një efekt pozitiv si në SEO ashtu edhe në perceptimin e informacionit të përdoruesit. Ka shumë mënyra për të shfaqur bukur shënuesit (me një imazh ose duke përdorur CSS). Ne do të shikojmë një metodë mjaft të thjeshtë por elegante të ndryshimit të shënuesve të listës duke përdorur CSS.

Si duket?

Në këtë rast, ne nuk mund të bëjmë pa teknologji të reja, përkatësisht CSS3 me mbështetje për pseudo-klasën e mëparshme. Duke përdorur vetëm stile dhe paraqitjen bazë të HTML, ne do të transformojmë shënuesit standardë të mërzitshëm që nuk plotësojnë standardet moderne.

Në rastin e parë, ne do të përdorim listën me pika që na ofron etiketa

    :

    • Ajo që kemi marrë.
    • Jo keq, apo jo?

    Prandaj, në rastin e dytë, lista e numëruar nga etiketa

      :

      1. Në të majtë të tekstit është një numër.
      2. Vazhdimi i listës për numrin e fushave që na duhen.

      Elementet janë në të njëjtën distancë nga fillimi i bllokut të tekstit, gjë që u jep atyre hijeshi shtesë.

      Lista e bukur me pika

        Si simbole mund të përdoren kuptime të ndryshme. Mjafton të futni kodin e ri në pronën e përmbajtjes.

        HTML

        • Elementi 1
        • Elementi 2

        CSS

        ul (lista-stili-lloj: asnjë; ) ul li:para (përmbajtja: "\203A "; mbushje-djathtas: 6px; madhësia e shkronjave: 16px; ngjyra: #00bf80; pesha e shkronjave: bold; )

        Lista e bukur me numra

          Duke përdorur një listë të numëruar, ose mund të dizajnoni bukur një bllok teksti në një faqe, ose të krijoni diçka të përshtatshme dhe të kuptueshme, si në fillim të këtij materiali.

          HTML

          1. Elementi 1
          2. Elementi 2

          CSS

          ol ( margjina-majtas: 63 px; lloji i stilit të listës: asnjë; kundër-rivendosja: li; ) ol li:para (përmbajtja: kundër(li); kundër-rritje: li 1; mbushje: 0px 6px; diferencë-majtas : -28px madhësia e shkronjave: 12px;

          Formatoni saktë artikujt tuaj në mënyrë që përdoruesi të mos rrisë shkallën e fryrjes.