Tavsif
Roʻyxat uchun nuqta boʻlib xizmat qiluvchi tasvir manzilini oʻrnatadi. Bu xususiyat meros qilib olingan, shuning uchun hech biri alohida ro'yxat elementlari uchun markerni tiklash uchun ishlatilmaydi.
Sintaksis
ro'yxat uslubidagi rasm: yo'q | url ("faylga yo'l") | meros
Qadriyatlar
none Tasvirni asosiy element uchun marker sifatida bekor qiladi. url nisbiy yoki mutlaq yo'l grafik fayl... Qiymat bitta, qo'sh tirnoq yoki ularsiz ko'rsatilishi mumkin. inherit Qiymatni ota-onadan meros qilib oladi.HTML5 CSS2.1 IE Cr Op Sa Fx
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Sed diem nonummy nibh euismod
- Tincidunt ut lacreet dolor magna allaguam erat volutpat. Ut wisis enim ad minim weniam, quis nostrud exerci tuttion ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ushbu misolning natijasi rasmda ko'rsatilgan. 1.
Guruch. 1. List-style-image xossasini qo‘llash
Ob'ekt modeli
document.getElementById ("elementID") .style.listStyleImage
Brauzerlar
V turli xil brauzerlar rasm va matn orasidagi masofa farq qilishi mumkin.
V Internet Explorer 7.0 inklyuziv versiyasigacha bo'lgan belgilar ro'yxatga qo'shilsa, ko'rsatilmaydi float mulki... Bundan tashqari, ushbu brauzer meros qiymatini qo'llab-quvvatlamaydi.
Salom aziz blog o'quvchilari. Bugun kaskadli uslublar jadvallarining xususiyatlari haqida yana bir maqola bo'ladi. Ushbu maqolada biz CSS qoidalaridan foydalangan holda uslublar haqida gapiramiz.
Umuman olganda, blok elementlari orasida ro'yxatlar ajralib turadi. Buning sababi, ular brauzerning o'zi tomonidan joylashtirilgan o'qlar va raqamlashni o'z ichiga oladi.
List style xossasi - html sahifasida ro'yxat dizayni
CSS-da ro'yxat uslubi bilan boshlanadigan uchta xususiyat mavjud bo'lib, ular markirovka qilingan va raqamlangan ro'yxatlarni shakllantirish uchun javobgardir. Bundan tashqari, kod miqdorini kamaytirishga imkon beruvchi birlashtirilgan ro'yxat uslubi qoidasi ham mavjud.
Bu xususiyatlarning barchasi html li elementlari uchun ham, ul va ol elementlari uchun ham amal qiladi. Faqatgina farq shundaki, agar qoidalar li ro'yxatining ma'lum bir qiymati uchun yozilgan bo'lsa, unda u faqat unga qo'llaniladi. Va agar ul yoki ul konteynerlari uchun bir xil CSS qoidalari yozilgan bo'lsa, ular ushbu konteynerlarga o'ralgan barcha li elementlarga qo'llaniladi.
Keling, atributdan boshlaylik ro'yxat uslubi turi qaysi to'plamlar markerlar turi yoki raqamlash ro'yxatdagi elementlarda:
roʻyxat uslubi turi: disk | doira | kvadrat | oʻnlik | oʻnlik yetakchi-nol | pastki-rim | yuqori-rim | pastki-yunoncha | pastki-alfa | pastki-lotincha | yuqori-alfa | yuqori-lotincha | armancha | gruzin | hech biri | meros
Ko'rib turganingizdek, ro'yxat uslubi turi xususiyati marker turini ham, raqamlashning har xil turlarini ham belgilashi mumkin bo'lgan juda ko'p mavjud qiymatlarga ega.
- disk - qora doira ko'rinishidagi marker (markerli ro'yxatlar uchun standart qiymat).
- doira - ochiq doira shaklidagi marker.
- kvadrat - kvadrat shaklidagi marker. Brauzerga qarab, u ochiq yoki qorong'i bo'lishi mumkin.
- kasrli - arab raqamlarida raqamlash (raqamlangan ro'yxatlar uchun standart qiymat).
- o'nlik bosh nol - arab raqamlari bilan 01 dan 99 gacha bo'lgan bosh nol bilan raqamlash.
- pastki-rim - kichik rim raqamlarida raqamlash.
- yuqori rim - katta rim raqamlarida raqamlash.
- pastki yunoncha - kichik yunoncha harflar bilan raqamlash.
- pastki-alfa va pastki-lotin - kichik lotin harflarida raqamlash.
- yuqori alfa va yuqori lotin - bosh lotin harflarida raqamlash.
- arman - an'anaviy arman raqamlari yordamida raqamlash.
- gruzin - an'anaviy gruzin raqamlari yordamida raqamlash.
- yo'q - Belgilash va raqamlash umuman amalga oshirilmaydi.
Ro'yxat elementlari turli xil ro'yxat uslubidagi qiymatlarga ega brauzerda shunday ko'rinadi:
Da CSS yordamida Ro'yxatni yaratish uchun qaysi element (OL yoki UL) ishlatilishi muhim emas. OL va UL faqat birlamchi xatti-harakatlarida farqlanadi va ro'yxat uslubi turi xususiyati bilan siz bir ro'yxat ko'rinishini boshqasiga osongina aylantirishingiz mumkin.
Uslub atributi ro'yxat uslubidagi tasvir sifatida belgilash imkonini beradi marker ro'yxat elementlari grafik tasvir ... List-style-image atributidan foydalanilganda, list-style-type atributining qiymati e'tiborga olinmaydi:
ro'yxat uslubidagi rasm: yo'q |<интернет-адрес файла изображения>| meros olish
Ma'nosi yo'q tasvir belgisini olib tashlaydi va uni grafik emas, normal holatga o'rnatadi. Bu standart xatti-harakatlar.
Tasvir faylining manzilini ko'rsatishda marker o'rniga rasm qo'yiladi. Amaldagidek, rasm manzili sifatida ham mutlaq, ham nisbiy manzillardan foydalanish mumkin. Agar brauzer tasvirni yuklay olmasa, standart marker yoki raqamlash yoki ro'yxat uslubi turidagi xususiyatda yozilgan narsalar ishlatiladi.
Marker sifatida rasmli ro'yxatga misol:
- ro'yxatdagi birinchi element;
- ro'yxatning ikkinchi elementi;
- ro'yxatning uchinchi elementi.
Va bu qanday ko'rinishga ega:
- ro'yxatdagi birinchi element;
- ro'yxatning ikkinchi elementi;
- ro'yxatning uchinchi elementi.
Rasmni marker sifatida tanlashda kichik rasmni tanlash yaxshi ekanligi aniq.
Va ro'yxat uslubidagi so'nggi CSS xususiyati - ro'yxat uslubidagi pozitsiya, ro'yxat bandida o'q yoki raqamlash joyini belgilash imkonini beradi. Qiymat sifatida ikkita variant bo'lishi mumkin:
ro'yxat uslubidagi pozitsiya: ichkarida | tashqarisida
Qiymat bo'lsa ichida o'q yoki raqamlash ro'yxatning ichida joylashganidek va holda joylashtiriladi tashqarida li elementlardan tashqarida. Standart tashqarida va marker tashqariga ko'chiriladi.
Turli xil ro'yxat uslubidagi pozitsiya qiymatlari bo'lgan ro'yxatga misol:
- birinchi xatboshida hamma narsa sukut bo'yicha;
- ikkinchi xatboshida ro'yxat uslubi-pozitsiyasi ichkariga o'rnatiladi. Bunday holda, ikkinchi qatorning marker bilan bir tekisda ekanligiga e'tibor bering;
- bu vaqtda ro'yxat uslubidagi pozitsiya tashqarida.
Kompozit CSS ro'yxati uslubi qoidasi
Keyingi CSS xossalari ro'yxati uslubi - bu ro'yxatlarni shakllantirish uchun oldindan tayyorlangan. Bu sizga yuqorida muhokama qilingan uchta CSS qoidalarini bittasiga yozish imkonini beradi. Undagi qiymatlarni ko'rsatish tartibi har qanday bo'lishi mumkin va siz ro'yxat uslubida ko'rsatmagan parametrlar bo'lishi mumkin, brauzer standart bo'lganlarni oladi.
Ro'yxat uslubidagi prefabrik qoidadagi qiymatlarni bo'shliqlar bilan ajrating:
ro'yxat uslubi: ro'yxat uslubi-turi ro'yxat uslubi-tasvir ro'yxati-uslubi-pozitsiyasi;
Styling ro'yxatlari uchun haqiqiy CSS qoidasi quyidagicha ko'rinishi mumkin:
ro'yxat uslubi: aylana url (//site/images/marker.png) tashqarisida;
Shunday qilib, ro'yxat uslubidagi xususiyat kod miqdorini sezilarli darajada kamaytirish imkonini beradi, chunki uchta qoida o'rniga faqat bittasini ko'rsatish kerak.
Yuqorida aytib o'tilganidek, qiymatlar har qanday tartibda va miqdorda ko'rsatilishi mumkin. Shunday qilib, masalan, uchun menyu ro'yxatidan markerlarni olib tashlang etarli kirish:
ro'yxat uslubi: yo'q;
Xuddi shu narsani list-style-type xususiyati yordamida amalga oshirish mumkin:
ro'yxat uslubi turi: yo'q;
Bu dizayn haqida hikoya html ro'yxatlari kaskadli uslublar jadvallari bilan men tugataman. Boshqalar haqida bilish uchun CSS xususiyatlari siz "" bo'limidagi maqolalarni o'qishingiz mumkin va blog yangilanishlariga obuna bo'lishni unutmang. Keyingi safargacha!
| Brauzer | Internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Versiya | 5.5 | 6.0 | 7.0 | 6.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 1.0 | 1.7 | 1.0 | 2.0 |
| Qo'llab-quvvatlanadi | Ha | Ha | Ha | Ha | Ha | Ha | Ha | Ha | Ha | Ha | Ha | Ha | Ha |
qisqacha ma'lumot
Tavsif
Bir vaqtning o'zida marker uslubini, uning o'rnini va marker sifatida ishlatiladigan tasvirni o'rnatish imkonini beruvchi atribut. Argumentlarni batafsilroq muhokama qilish uchun har bir parametr roʻyxati-uslubi-turi, roʻyxat-uslub-pozitsiyasi va roʻyxat-uslubi-rasmning xususiyatlarini alohida koʻring.
Sintaksis
list-style: list-style-type || list-style-position || ro'yxat uslubidagi tasvir
Argumentlar
Belgilangan tartibda uchta o'q uslubi qiymatlarining har qanday kombinatsiyasi. Qiymatlar bo'sh joy bilan ajratilgan. Argumentlarning hech biri talab qilinmaydi, shuning uchun foydalanilmagan qiymatlarni o'tkazib yuborish mumkin.
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Sed diem nonummy nibh euismod
- Tincidunt ut lacreet dolor magna allaguam erat volutpat. Ut wisis enim ad minim weniam, quis nostrud exerci tuttion ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ushbu misolning natijasi rasmda ko'rsatilgan. 1.
Guruch. 1. Ro'yxat uslubi parametridan foydalanish
harf oraligʻi satr balandligi roʻyxat uslubidagi chekka maks. balandlik maks. kenglik min. balandlik min. kenglik konturni toʻldirish joyi oʻngga matnni tekislash matn-bezatish matn-chekinti matnni oʻzgartirish tepa vertikal-boʻsh joy kengligi soʻz oraligʻi z-indeksLIST-STYLE xususiyati
| Mulk | Qadriyatlar | NS* | Nc * |
|---|---|---|---|
| ro'yxat uslubi | [roʻyxat uslubidagi tasvir; ro'yxat uslubidagi pozitsiya; list-style-type], meros qilib oladi | * | + |
| ro'yxat uslubi turi | disk, doira, kvadrat, o'nlik, o'nlik bosh nol, pastki rim, yuqori rim, past-lotin, yuqori lotin, arman, gruzin, hech biri, meros | * | + |
| ro'yxat uslubidagi pozitsiya | ichida, tashqarisida, meros bo'lib | * | + |
| ro'yxat uslubidagi tasvir | Url, hech biri, meros | * | + |
Mulk Ro'yxat uslubi- ro'yxat elementlari uchun barcha marker uslublarini belgilaydigan yozish xususiyatlarining qisqartirilgan shakli. Ushbu xususiyatlar raqamlangan va markirovka qilingan ro'yxatlarga tegishli va alohida ko'rib chiqilishi kerak. Belgilanishning qisqartirilgan shakli alohida xususiyatni o'z ichiga olmaydi, lekin ularni yozish tartibiga rioya qilish kerak: marker turi - uning pozitsiyasi - tasvirga yo'l.
Qo'llash sohasi*: ro'yxat elementlari va mulk qiymati bo'lgan boshqa har qanday Displey hisoblanadi ro'yxat elementi.
Ro'yxat uslubi turi
Mulk to'plamlari marker turi ro'yxatdagi har bir element uchun. Belgilangan va raqamlangan ro'yxatlar uchun marker turlari farqlanadi.
Qiymatlar:
disk- nuqta belgisi.
doira- doira belgisi.
kvadrat- kvadrat belgisi.
kasr- Arab raqamlari: 1, 2, 3….
o'nlik bosh nol- noldan boshlanadigan arab raqamlari: 01, 02, 03 ... 09.
past-rim- Rim raqamlash kichik harf bilan.
yuqori rimlik- Katta harf bilan rim raqamlash.
past-lotin- kichik lotin harflari: a, b, c….
yuqori lotincha- Lotin bosh harflari: A, B, C….
arman- arman raqamlash.
gruzin- Gruziya raqamlash.
yo'q- bekor qilish.
meros
Misol ikki xil xususiyat qiymatidan foydalanadi Ro'yxat uslubi turi:
Ro'yxat uslubi-pozitsiyasi
Xususiyat element belgisining joylashishini aniqlaydi. Yoki marker element ichida yoki uning tashqarisida.
Qiymatlar:
ichida- marker ro'yxat elementi ichida joylashgan.
tashqarida- marker matn blokidan tashqariga ko'chiriladi.
meros- asosiy elementdan meros.
Misol qiymatlar orasidagi farqni aniq ko'rsatadi ichida va tashqarida xususiyatlari Ro'yxat uslubi-pozitsiyasi:
Roʻyxat uslubidagi tasvir
Xususiyat raqamlangan yoki markirovka qilingan ro'yxatdagi element uchun marker bo'lib xizmat qiladigan rasmga yo'lni o'rnatadi. Belgilangan rasmning joylashuvi xususiyat yordamida boshqarilishi mumkin Ro'yxat uslubi-pozitsiyasi.
Qiymatlar:
Url- grafik faylga yo'l.
yo'q- masalan, asosiy element uchun marker rasmini bekor qiladi.
meros- asosiy elementdan meros.
Ul (roʻyxat uslubidagi rasm: url (papka / find.png); roʻyxat uslubidagi joy: ichkarida;)
Misolda biz kichik rasmni marker sifatida ishlatdik, bu mulkning imkoniyatlarini aniq ko'rsatadi. Roʻyxat uslubidagi tasvir:
Bir vaqtning o'zida marker uslubini, uning o'rnini va ro'yxatda marker sifatida ishlatiladigan tasvirni o'rnatish imkonini beruvchi universal xususiyat.
qisqacha ma'lumot
Belgilar
| Tavsif | Misol | |
|---|---|---|
| <тип> | Qiymat turini bildiradi. | <размер> |
| A & B | Qiymatlar ko'rsatilgan tartibda ko'rsatilishi kerak. | <размер> && <цвет> |
| A | B | Tavsiya etilgan qiymatlardan faqat bittasi tanlanishi kerakligini bildiradi (A yoki B). | normal | kichik qalpoqchalar |
| A || B | Har bir qiymat yakka tartibda yoki boshqalar bilan birgalikda istalgan tartibda ishlatilishi mumkin. | kengligi || hisoblash |
| Guruh qiymatlari. | [kesish || kesib o'tish] | |
| * | Nol yoki undan ko'p marta takrorlang. | [,<время>]* |
| + | Bir yoki bir necha marta takrorlang. | <число>+ |
| ? | Belgilangan tur, so'z yoki guruh ixtiyoriy. | kiritilganmi? |
| (A, B) | Kamida A takrorlang, lekin B martadan ko'p emas. | <радиус>{1,4} |
| # | Vergul bilan ajratilgan holda bir yoki bir necha marta takrorlang. | <время># |
Qadriyatlar
Markerlar uslubini belgilaydigan uchta qiymatning har qanday kombinatsiyasi ular bo'sh joy bilan ajratiladi. Qiymatlarning kombinatsiyasi belgilangan tartibda bajarilishi kerak: birinchi navbatda marker turi, keyin pozitsiya va rasm keladi. Qiymatlarning hech biri talab qilinmaydi, shuning uchun foydalanilmagan qiymatlarni o'tkazib yuborish mumkin.
Misol
- Ko'p o'lchovli polinom
- Oddiy absolyut yaqinlashuvchi qator
- Funktsiyaning integrali
- Funksiyaning kollinear ekstremumi
Ushbu misolning natijasi rasmda ko'rsatilgan. 1.
Guruch. 1. Ro‘yxat tarzi xossasini qo‘llash
Ob'ekt modeli
Ob'ekt.style.listStyle
Spetsifikatsiya
Har bir spetsifikatsiya tasdiqlashning bir necha bosqichlaridan o'tadi.
- Tavsiya - Bu spetsifikatsiya W3C tomonidan tasdiqlangan va standart sifatida tavsiya etiladi.
- Nomzod tavsiyasi ( Mumkin bo'lgan tavsiya) - standart uchun mas'ul bo'lgan guruh uning maqsadlariga mos kelishidan mamnun, ammo standartni amalga oshirish uchun ishlab chiquvchilar hamjamiyatining yordami talab qilinadi.
- Taklif etilayotgan tavsiya ( Tavsiya etilgan tavsiya) - Ayni paytda hujjat yakuniy tasdiqlash uchun W3C maslahat kengashiga taqdim etiladi.
- Ishchi loyiha - muhokamadan so'ng loyihaning yanada etuk versiyasi va jamoatchilik muhokamasi uchun o'zgartirishlar kiritildi.
- Muharrir loyihasi ( Tahririyat loyihasi) - loyiha muharrirlari tomonidan tahrir qilinganidan keyin standartning qoralama versiyasi.
- qoralama ( Spetsifikatsiya loyihasi) standartning birinchi loyihasidir.
Brauzerlar
Brauzerlar
Brauzer jadvalida quyidagi konventsiyalardan foydalaniladi.