Ro'yxat uslubi CSS rangi. Ro'yxatdagi markerlar rangini qanday o'zgartirish mumkin? Ro'yxat marker turi ro'yxat uslubi turi

Belgilangan ro'yxatning satrlarini asosiy matndan qandaydir tarzda ajratish uchun siz ro'yxatdagi o'qlarning rangini matn rangidan farqli qilishingiz mumkin.

Standart qora nuqta. Agar siz shunchaki rangni li elementiga o'rnatsangiz, unda hech narsa ishlamaydi - rang butun chiziqqa o'rnatiladi va siz faqat markerning rangini o'zgartirishingiz kerak (nuqtalarning ul li rangi).

CSS yordamida o'q rangini qanday o'zgartirish mumkin

  1. Xususiyat yordamida asl ro'yxat belgilarini yashirish ro'yxat uslubi turi
  2. Pseudo-element yordamida o'z markerlaringizni qo'shish : oldin va xususiyatlari mazmuni. Bu element oldiga istalgan matn yoki belgini kiritish imkonini beradi li.
  3. Markerning ko'rinishini rang, shrift, fon va boshqalarni o'zgartirish orqali CSS uslublari orqali boshqarish mumkin. Men qalin Montserrat shriftidan foydalandim.
li (list-style-type: none; /* Standart markerlarni yashirish */ ) li:before (shrift-family: "Montserrat", sans-serif; shrift-og'irligi: 400; rang: #d7002e; /* Marker rangi * / kontent: " "; /* Marker */ padding-right: 7px; /* Markerdan matnga chekinish */ )

Agar sizda markerlar keraksiz joylarda, masalan, asosiy menyuda yoki altbilgida ikki nusxadagi menyuda paydo bo'ladigan vaziyat mavjud bo'lsa, buni osongina tuzatish mumkin. Faqat qo'shing asosiy element, unda marker ranglarini o'zgartirishimiz kerak bo'lgan ro'yxatlar mavjud. Men so'zni qo'shdim maqola va endi bu o'zgarishlar faqat saytning kontent maydoniga tegishli.

maqola li (ro'yxat uslubi turi: hech biri; /* Standart belgilarni yashirish */ ) maqola li:before (shrift-family: "Montserrat", sans-serif; shrift-og'irligi: 400; rang: #d7002e; /* Marker rangi */ kontent: " "; /* Marker */ padding-o'ng: 7px; / * Markerdan matnga chekinish */ )

O'qlarning rangini matn rangidan farq qilish uchun o'zgartirishning ikkita mashhur usuli mavjud.

Foydalanish

Har bir element ichida

  • biz sarmoya kiritamiz , va keyin matnni uning ichiga joylashtiramiz. Boshqacha qilib aytganda, an'anaviy sxema o'rniga

  • matn

    • dizayn yaratish

  • matn

    • Bunda markerlarning rangi li selektori uchun rang uslubi xossasi bilan, matn rangi esa oraliq selektori tomonidan aniqlanadi (1-misol).

    1-misol: Ichki teglardan foydalanish

    Roʻyxatdagi matn va oʻqlarning rangi

    • Skripka
    • Gitara
    • Qopqoqlar
    • Organ organi
    • Selesta

    Ushbu misolning natijasi quyida ko'rsatilgan (1-rasm).

    Guruch. 1. Asosiy matndan rangi bilan farq qiluvchi markerlar

    Oddiyligiga qaramay, usul noqulay, ayniqsa katta ro'yxatlar bilan, chunki endi siz har bir ro'yxat elementiga qo'shishingiz kerak bo'ladi. .

    Foydalanish:: oldin

    Gap shundaki: biz list-style-type xususiyati orqali asl roʻyxat belgilarini olib tashlaymiz va :: oldin pseudo-element va kontent xususiyatidan foydalanib oʻz markerlarimizni qoʻshamiz. Bu havola element oldiga istalgan matn yoki belgini kiritish imkonini beradi, bu holda

  • . Bundan tashqari, matn turi (rang, shrift, fon va boshqalar) 2-misolda ko'rsatilganidek, uslublar orqali ham boshqarilishi mumkin.

    2-misol: Pseudo-elementdan oldin ::dan foydalanish

    Roʻyxat belgisi rangi

    • Shimoliy
    • janubiy
    • G'arbiy
    • Sharq

    Ushbu misolning natijasi rasmda ko'rsatilgan. 2.

    Maqolada raqamlanmagan ro'yxat uchun ma'lum bir markerni o'rnatishga imkon beradigan bir nechta usullar keltirilgan, shuningdek ularning afzalliklari va kamchiliklari ko'rsatilgan.

    Agar siz biron bir saytni tahlil qilsangiz, kontentda ko'pincha turli xil ro'yxatlar mavjudligini bilib olishingiz mumkin: menyular, mahsulotlar ro'yxati va boshqalar. HTML kodida teg raqamlangan ro'yxat uchun, teg esa markirovka qilingan ro'yxat uchun javobgardir. ro'yxati.

    Shuni ham ta'kidlash kerakki, amalda markirovka qilingan ro'yxatlar ancha keng tarqalgan, ammo ularning bitta kichik kamchiliklari bor. Ro'yxatdagi marker siz foydalanayotgan brauzerga qarab boshqacha ko'rinadi. Jiddiy dizayner uchun bu muammo.

    Ushbu salbiy ta'sirni bartaraf etish uchun ro'yxat uslubi xususiyatidan foydalanib marker chiqishini bekor qilishingiz kerak:

    ol, ul (roʻyxat uslubi: yoʻq; )

    Bu noyob markerlar va belgilar bilan ro'yxatni shakllantirishni boshlaydi. Quyida barcha brauzerlarda o'ziga xos va izchil bo'lgan ro'yxat elementi piktogrammalarini taqdim etishning eng keng tarqalgan usullari keltirilgan.

    Rasmlar orqali markerlar

    Ro'yxat uchun markerni belgilashning eng keng tarqalgan va oddiy usuli fon tasviridan (fon xususiyatidan) foydalanishdir. Usul uslublar jadvalida ro'yxat elementlari uchun fon tasvirini, shuningdek, yangi marker uchun joy ajratadigan to'ldirish xususiyatini belgilashga asoslangan. Quyida kod misoli keltirilgan:

    ul (ro'yxat uslubi: hech biri; ) li( fon: url (tasvirga yo'l) takrorlanmaydi; to'ldirish - chap: 20px; )

    Ushbu usul o'zining o'ziga xosligi bilan quvonadi, chunki u rasm shaklida mutlaqo har qanday markerni o'rnatishga imkon beradi. Quyida bizning kodimiz brauzerda qanday ko'rinishi:

    Ushbu usulning asosiy ijobiy tomoni shundaki, u 100% o'zaro faoliyat brauzer bilan mos keladi, ammo shunga qaramay, kichik kamchilik mavjud. Rasmdan foydalanish serverga qo'shimcha qo'ng'iroqdir.

    Oldindan foydalanilgan markerlar

    Agar dizayn shartlari imkon bersa, rasmsiz qilishingiz mumkin bo'lgan variant mavjud. Ro'yxat eng oddiy elementlar, masalan, kvadrat ( ) yoki o'q ( →) bilan belgilangan asosiy tarkibni loyihalashda bunga ko'pincha ruxsat beriladi. Shunday qilib, biz har qanday mos keladigan maxsus belgi marker sifatida harakat qila oladigan nuqtaga keldik.

    Keyinchalik, ro'yxat elementlariga maxsus belgilarni qanday kiritish kerakligi haqida savol tug'iladi. Tabiiyki, qo'lda emas, aks holda bu juda cho'zilgan va zerikarli jarayon bo'ladi, bundan tashqari, u ham ko'p mehnat talab qiladi. Pseudo-element bu vaziyatdan chiqishimizga yordam beradi oldin, ulardan foydalanish ma'lum bir selektorga bog'langan, bu bizga maxsus belgilardan markerlarni belgilash jarayonini avtomatlashtirishga imkon beradi. Ushbu yechim IE uchun yozilishini hisobga olgan holda ko'pgina brauzerlar uchun javob beradi ifoda.

    Quyida chiziqcha bilan markirovka qilingan ro'yxatni yaratadigan kod misoli keltirilgan:

    li( this. innerHTML = "-" + this. innerHTML) /*IE hack*/ ) li: before( kontent: " \201 3" ; }

    Amalda biz quyidagi rasmni olamiz:

    Eslatib o‘taman, real sharoitda xakerlar shartli izohlar bilan bog‘lanadi.

    Ushbu usuldan foydalanganda asosiy narsa kerakli belgining kodlanishini bilishdir. Shuni ham ta'kidlash kerakki, ifodalash uchun maxsus belgilar raqamli kombinatsiya yoki mnemonik kod sifatida yoziladi. Kontent xususiyatiga kelsak, bu holda birinchi navbatda qiya chiziq qo'yiladi, keyin esa o'n oltilik kod yoziladi.

    insertAdjacentHTML dan foydalanish

    Yuqoridagi usul har doim ham afsonaviy IEda to'g'ri ishlamaydi (hackga qaramay). Aniqrog'i, ushbu brauzer uchun "tayoqchalar" to'liq ishlab chiqilmagan. Keyinchalik samarali usul asoslangan insertAdjacentHTML, quyida ushbu usul uchun kod mavjud:

    li( //z-indeks: ifoda(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", "-")); }

    CSS xususiyatlari tomonidan chizilgan markerlar

    Ba'zi kvadrat belgilarini ba'zi CSS xususiyatlaridan foydalanib chizish mumkin. Masalan, rangli plombali kvadrat background-color xususiyatidan, ramka shaklidagi kvadrat esa border xususiyatidan foydalanib chiziladi (darvoqe, plombali kvadratni shu tarzda chizish mumkin). . CSS faylidagi misol yozuvi:

    li( //z-indeks: ifoda (runtimeStyle.zIndex = 1, bu. innerHTML = "

    " + bu. innerHTML) /* e6 va 7 uchun hack */) li: oldin, . listMarkerBackColor( fon-rang: #539127; kenglik: 7px; balandlik: 7px; kontent: "" ; float: chap; chekka: 6px 6px 0 0; toshib ketish: yashirin; ) html . listMarkerBackColor( chekka o'ng: 1px; /* IE6 da kichik xatolikni tuzating */ }

    Shunday qilib, CSS xususiyatlari bilan chizilgan marker amalda shunday ko'rinadi:

    Oldin va birinchi bolani birgalikda ishlatish

    Ushbu usul ko'pincha veb-saytda non bo'laklarini yaratishda qo'llaniladi. Nima haqida gapirayotganimizni bilmaganlar uchun quyidagi misolga qarang.

    Bunday holda, har bir havola bir-biridan maxsus belgi bilan ajratiladi, lekin birinchi elementdan oldin hech qanday maxsus belgi bo'lmasligi kerak. Bunda bizga pseudo-klass yordam beradi birinchi farzand, bu ro'yxatning faqat birinchi elementiga kirish imkonini beradi. Kodda u shunday ko'rinishi kerak

    HTML

    < ul> < li>< a href= "#" >uy < li>< a href= "#" >Blog < li>< a href= "#" >CSS < li>target= "_blank" dan foydalanilganda yaroqli kod

    li: oldin (kontent: " \21 92" ; ) li: birinchi- bola: oldin (kontent: "" ; )

    Shuni ham ta'kidlash joizki, ushbu uslub nafaqat non bo'laklari uchun, balki dizayn qisqartmasidan kelib chiqqan holda muntazam markirovka qilingan ro'yxatlar uchun ham qo'llaniladi.

    U qaysi brauzerlarda ishlaydi?

    6.0+ 4.0+ 9.5+ 3.0+ 3.0+ - -

    xulosalar

    Xulosa qilib aytganda, oldingi soxta elementdan foydalanish asosiy mazmunda asosli va oqilona ekanligini ta'kidlashimiz mumkin, chunki ro'yxatlarni loyihalash uchun maxsus talablar yo'q. Bu, o'z navbatida, rasmdan foydalanish variantiga nisbatan serverdagi yukni kamaytiradi. Va agar siz asosiy tarkibda juda ko'p markirovka qilingan ro'yxatlar bo'lishi mumkinligini ta'kidlasangiz, farq yanada sezilarli bo'lishi mumkin. Lekin rasmlar marker dizayn echimlari nuqtai nazaridan katta foyda keltiradi.

    CSS ro'yxatlari— roʻyxatlarni loyihalash uchun masʼul boʻlgan xususiyatlar toʻplami. Veb-sayt navigatsiya panelini yaratishda HTML ro'yxatlaridan foydalanish juda keng tarqalgan. Ro'yxat elementlari blok elementlari to'plamini ifodalaydi.

    Siz standart CSS xususiyatlaridan foydalanishingiz mumkin ro'yxat markerining ko'rinishini o'zgartirish, marker uchun rasm qo'shing, shuningdek marker joylashuvini o'zgartirish. Marker blokining balandligi chiziq balandligi xususiyati bilan o'rnatilishi mumkin.

    CSS uslublari yordamida ro'yxatlarni loyihalash

    1. Ro‘yxat marker turi ro‘yxat-stili-turi

    Xususiyat marker turini o'zgartiradi yoki markerni olib tashlaydi Belgilangan va raqamlangan ro'yxatlar uchun. Meroslangan.

    ro'yxat uslubi turi
    Qiymatlar:
    disk Standart qiymat. To'ldirilgan doira ro'yxat elementlari uchun marker vazifasini bajaradi.
    arman An'anaviy arman raqamlash.
    doira Ochiq doira marker vazifasini bajaradi.
    cjk-ideografik Ideografik raqamlash.
    kasr 1, 2, 3, 4, 5, …
    o'nlik bosh nol 01, 02, 03, 04, 05, …
    gruzin An'anaviy gruzin raqamlash.
    ibroniy An'anaviy ibroniycha raqamlash.
    hiragana Yaponcha raqamlash: a, i, u, e, o, …
    hiragana-iroha Yaponcha raqamlash: i, ro, ha, ni, ho,…
    katakana Yaponcha raqamlash: A, I, U, E, O, …
    katakana-iroha Yaponcha raqamlash: I, RO, HA, NI, HO, …
    pastki alfa a, b, c, d, e, …
    pastki yunoncha Yunon alifbosining kichik harflari.
    pastki lotincha a, b, c, d, e, …
    pastki rim i, ii, iii, iv, v, …
    yo'q Hech qanday marker yo'q.
    kvadrat To'ldirilgan yoki to'ldirilmagan kvadrat marker vazifasini bajaradi.
    yuqori alfa A, B, C, D, E, …
    yuqori lotincha A, B, C, D, E, …
    yuqori roman I, II, III, IV, V, …
    boshlang'ich Xususiyat qiymatini standart qiymatga o'rnatadi.
    meros Asosiy elementdan xususiyat qiymatini meros qilib oladi.

    Sintaksis

    Ul (roʻyxat uslubi turi: yoʻq;) ul (roʻyxat uslubi turi: kvadrat;) ol (roʻyxat uslubi turi: yoʻq;) ol (roʻyxat uslubi turi: pastki alfa;) Guruch. 1. Belgilangan va raqamlangan ro'yxatlarni loyihalash misoli

    2. Ro'yxat elementlari uchun tasvirlar ro'yxat uslubi-tasvir

    Roʻyxat elementi belgilari sifatida tasvirlar va gradient toʻldirishlardan foydalanishingiz mumkin. Meroslangan.

    Sintaksis

    Ul (roʻyxat uslubidagi rasm: url("rasmlar/romb.png");) ul (roʻyxat uslubidagi tasvir: chiziqli-gradient (#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
    Guruch. 2. Rasm yordamida markerli ro‘yxatni loyihalash
    Guruch. 3. Gradient yordamida markirovka qilingan ro‘yxatni loyihalash

    3. Ro‘yxat uslubi-pozitsiyasi

    Bu xususiyat markerni ro'yxat elementi tarkibidan tashqarida yoki ichiga joylashtirish imkoniyatini beradi. Meroslangan.

    Ushbu o'quv maqolasi CSS-dagi ro'yxatlar bilan ishlashga qaratilgan bo'lib, siz o'q turini, ro'yxat elementiga nisbatan o'qning joylashishini, o'zingizning o'qlaringizni yaratishni va hatto o'q rangini o'zgartirishni o'rganasiz.

    O'ylaymanki, siz HTML 5 ro'yxatlarning ikkita asosiy turidan foydalanishini allaqachon bilasiz (ta'riflar ro'yxati va menyu elementlari bundan mustasno):