CSS-də siyahıların dizaynı. Aralıqdan istifadə etmədən HTML siyahısındakı güllələrin rəngini dəyişdirin Etiket siyahısı elementinin rəngi fərqli

Nümunə 2: Pseudo-elementdən əvvəl ::dan istifadə

• Şimal
• cənub
• Qərb
• Şərq

Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 2.

Tapşırıq

Siyahıdakı markerlərin görünüşünü dəyişdirin və onları başqa simvolla əvəz edin.

Həll

HTML və ya CSS-dən istifadə edərək üç növ markerdən birini təyin edə bilərsiniz: disk (nöqtə), dairə (dairə), kvadrat (kvadrat). Bu dəyərləri UL və ya LI seçicisi üçün müəyyən edilmiş siyahı stili tipli stil xüsusiyyətinə əlavə etməlisiniz (nümunə 1).

Misal 1: Standart markerlər

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Çeburaşka
• Timsah Gena
• Şapoklyak

Bu nümunədə markerlər kimi kvadrat istifadə olunur (şək. 1).

düyü. 1. Markerlərin növü

Öz marker simvolunuzun seçilməsi və qurulması çox unikal şəkildə, :befor psevdo-element vasitəsilə baş verir. İlk addım, list-style-type xassəsini heç biri olaraq təyin etməklə, güllələri siyahıdan tamamilə silmək və sonra :before psevdo-elementini LI seçicisinə əlavə etməkdir. Simvol çıxışının özü məzmun xassəsindən istifadə etməklə həyata keçirilir, dəyəri istənilən mətn və ya simvoldur (nümunə 2).

Nümunə 2: İstifadə: əvvəl və məzmun

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Çeburaşka
• Timsah Gena
• Şapoklyak

Bu misalda standart marker gizlədilir və onun yerinə simvol əlavə edilir (Şəkil 2).

düyü. 2. Simvol şəklində markerlər

Bəzi çətin simvolu marker kimi təyin etmək üçün Microsoft Word və ya simvol cədvəlindən istifadə edə bilərsiniz, bu, Windows-a daxil olan standart proqramdır. Kodun kodlaşdırılması UTF-8 olmalıdır.

css siyahısı marker ölçüsü (8)

Siyahıdakı güllələrin rəngini dəyişməyin bir yolu varmı deyə düşünürdüm.

Mənim siyahım var:

• ev
• Bağ

Li-yə "span" və "p" kimi heç bir şey daxil etmək mümkün deyil. Mən güllələrin rəngini dəyişə bilərəm, amma mətni ağıllı şəkildə dəyişdirə bilərəmmi?

Mənim üçün ən yaxşı seçim CSS psevdo elementlərindən istifadə etməkdir, ona görə də disk bullet diski üçün bu belə görünür:

ul ( list-style-type: none; ) li ( mövqe: nisbi; ) li:before ( məzmun: ""; displey: blok; mövqe: mütləq; en: 5px; /* ehtiyaclarınıza uyğun olaraq tənzimləyin */ hündürlük: 5px; /* ehtiyaclarınıza uyğun tənzimləyin */ sərhəd-radius: 50%; sol: -15px; /* ehtiyaclarınıza uyğunlaşdırın */ yuxarı: 0.5em; fon: #f00; /* ehtiyaclarınıza uyğunlaşdırın * / )

• birinci
• ikinci
• üçüncü

• göstəriciləri yuvarlaqlaşdırmaq üçün eni və hündürlüyü bərabər dəyərlər olmalıdır
• kvadrat güllələrə sahib olmaq istəyirsinizsə, sərhəd radiusunu sıfıra təyin edə bilərsiniz

Daha çox güllə üslubu üçün digər css formalarından istifadə edə bilərsiniz https://css-tricks.com/examples/ShapesOfCSS/ (üçbucaq kimi psevdo elementləri tələb etməyən bunu seçin)

@ddilsaver-in cavabı əsasında. Mən güllə spraytindən istifadə etmək istəyirdim. Bu işləyir deyəsən:

Li ( siyahı üslubu: heç biri; mövqe: nisbi; ) li: əvvəl ( məzmun:""; displey: blok; mövqe: mütləq; en: 20 piksel; hündürlük: 20 piksel; sol: -30 piksel; yuxarı: 5 piksel; fon şəkli : url(i20.png); fon mövqeyi: 0px -40px; /* və ya istədiyiniz ofset */ )

Bilirəm ki, bu, həqiqətən, həqiqətən köhnə bir sualdır, amma mən bununla oynayırdım və görmədiyim bir üsul tapdım. Siyahıya rəng verin və sonra ::birinci sətir seçicisi::birinci sətir ilə mətn rəngini ləğv edin. Mən ekspert deyiləm, ona görə də bu yanaşmada çatışmayan bir şey ola bilər, amma görünür ki, işləyir.

li (rəng: mavi; ) li::birinci sətir (rəng: qara; )

• ev
• Bağ

Markın cavabını da çox bəyəndim - mənə müxtəlif rəngli UL dəstləri lazımdır və açıq-aydın bir sinifdən istifadə etmək daha asan olardı. Portağal üçün istifadə etdiyim budur, məsələn:

Ul.orange ( siyahı üslubu: heç biri; doldurma: 0px; ) ul.orange > li:before ( məzmun: "\25CF "; şrift ölçüsü: 15px; rəng: #F00; kənar-sağ: 10px; doldurma: 0px ; xətt hündürlüyü: 15px; )

Həmçinin, "content:" üçün istifadə etdiyim hex kodun Markınkindən fərqli olduğunu kəşf etdim (bu altıbucaqlı dairə çox hündür görünürdü). İstifadə etdiyim kod ortada mükəmməl oturur. Həmçinin bir neçə başqa forma (kvadrat, üçbucaq) tapdım. , dairələr və s.)

@Marc və @jessica-nın həllərinə əsaslanaraq, mənim istifadə etdiyim həll budur:

Li ( mövqe:nisbi; ) li:əvvəl ( məzmun:""; ekran: blok; mövqe: mütləq; en: 6px; hündürlük: 6px; sərhəd radiusu: 6px; sol: -20px; yuxarı: .5em; fon- rəng: #000;)

Mən şrift ölçüləri üçün em istifadə edirəm, ona görə də əgər siz üstü .5em-ə təyin etsəniz, o, həmişə mətninizin ilk sətirinin ortasında yerləşdiriləcək. Mən left:-20px istifadə etdim, çünki bu, brauzerlərdə defolt sol:-20px mövqeyidir: ana doldurma/2

@Marc-ın həllinə əsaslanaraq - güllə simvolu müxtəlif şriftlər və brauzerlər ilə fərqli şəkildə göstərildiyi üçün, gülləni daha çox idarə etdiyim etmək üçün sərhəd radiuslu aşağıdakı css3 texnikasından istifadə etdim:

Li:befor ( məzmun: ""; fon rəngi: #898989; displey: inline-blok; mövqe: nisbi; hündürlük: 12px; en: 12px; sərhəd radiusu: 6px; -webkit-border-radius: 6px; - moz-border-radius: 6px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; margin-sağ: 4px; top: 2px; )

Siyahı üslublu təsviri svg s ilə birləşdirə bilərik css-ə yerləşdirin! Bu üsul hər şeyə çevrilə bilən "güllələr" üzərində inanılmaz nəzarət təklif edir.

Qırmızı dairə əldə etmək üçün aşağıdakı css-dən istifadə edin:

"); }

Amma bu hələ başlanğıcdır. Bu bizə imkan verir ki, bu güllələrlə istədiyimiz çılğınlığı edək. dairələr və ya düzbucaqlılar asandır, lakin svg ilə çəkə biləcəyiniz hər şeyi ora gedə bilərsiniz! Aşağıdakı alma alma nümunəsinə baxın:

ul ( list-style-şəkil: url("data:image/svg+xml, "); ) ul ul ( list-style-şəkil: url("data:image/svg+xml, "); ) ul ul ul ( list-style-şəkil: url("data:image/svg+xml, "); ) ul ul ul ul ( list-style-şəkil: url("data:image/svg+xml, "); ) ul.bulls-eye ( list-style-şəkil: url("data:image/svg+xml, "); ) ul.çox rəngli ( list-style-şəkil: url("data:image/svg+xml, "); }

• Böyük dairələr!
  • Böyük düzbucaqlılar!
  • b
    • Kiçik dairələr!
    • c
      • Kiçik düzbucaqlılar!

• Buğalar
• gözlər.

• Çox
• rəng

Atribut eni/hündürlüyü

Bəzi brauzerlər genişlik və hündürlük atributlarının təyin edilməsini tələb edir

Kodlaşdırmalar

Mən bunu heç bir işarə əlavə etmədən idarə etdim, lakin əvəzinə li:befor istifadə etdim. Bu açıq şəkildə bütün məhdudiyyətlərə malikdir:əvvəl (miras IE dəstəyi yoxdur), lakin çox məhdud sınaqdan sonra IE8, Firefox və Chrome ilə işləyir. Güllə üslubu da unicode-da olanlarla məhdudlaşır.

li ( list-style: none; ) li:before ( /* Dairəvi güllə üçün */ məzmun: "\2022"; /* Kvadrat güllə üçün */ /*content:"\25A0";*/ display: block ; mövqe: nisbi; maksimum en: 0; maksimum hündürlük: 0; sol: -10px; yuxarı: 0; rəng: yaşıl; şrift ölçüsü: 20px; )

Markerlə işarələnmiş siyahının sətirlərini əsas mətndən bir növ fərqləndirmək üçün siz siyahıdakı güllələrin rəngini mətnin rəngindən fərqli edə bilərsiniz.

Varsayılan olaraq qara nöqtədir. Rəngi ​​sadəcə olaraq li elementinə təyin etsəniz, onda heç nə işləməyəcək - rəng bütün xəttə təyin ediləcək və yalnız markerin rəngini dəyişdirməlisiniz (nöqtələrin ul li rəngi).

CSS istifadə edərək güllə rəngini necə dəyişdirmək olar

1. Əmlakdan istifadə edərək orijinal siyahı markerlərinin gizlədilməsi siyahı stili növü
2. Pseudo-Elementdən istifadə edərək Öz Markerlərinizin əlavə edilməsi :əvvəl və xassələri məzmun. Bu elementdən əvvəl hər hansı mətn və ya simvol daxil etməyə imkan verəcək li.
3. Markerin görünüşü rəngini, şriftini, fonunu və s. dəyişdirərək CSS üslubları vasitəsilə idarə oluna bilər. Mən qalın Montserrat şriftindən istifadə etdim.

Markerlərin lazımsız yerlərdə, məsələn, əsas menyuda və ya altbilgidəki dublikat menyuda göründüyü bir vəziyyətiniz varsa, bu asanlıqla düzəldilə bilər. Sadəcə olaraq marker rənglərini dəyişdirməli olduğumuz siyahıları ehtiva edən ana element əlavə edin. sözü əlavə etdim məqalə və indi bu dəyişikliklər yalnız saytın məzmun sahəsinə aiddir.

CSS siyahıları— siyahıların tərtibinə cavabdeh olan xassələr toplusu. Veb sayt naviqasiya barlarını yaratarkən HTML siyahılarından istifadə çox yaygındır. Siyahı elementləri blok elementlərinin toplusunu təmsil edir.

Standart CSS xassələrindən istifadə edə bilərsiniz siyahı markerinin görünüşünü dəyişdirin, marker üçün şəkil əlavə edin, və marker yerini dəyişdirin. Marker blokunun hündürlüyü line-height xüsusiyyəti ilə təyin edilə bilər.

CSS üslublarından istifadə edərək siyahıların dizaynı

1. Siyahı marker növü list-style-type

Mülk marker tipini dəyişir və ya markeri silir markerli və nömrələnmiş siyahılar üçün. miras qalmış.

Sintaksis

Ul (siyahı üslubu növü: heç biri;) ul (siyahı üslubu növü: kvadrat;) ol (siyahı üslubu növü: heç biri;) ol (siyahı stili növü: aşağı alfa;) düyü. 1. Markerli və nömrələnmiş siyahıların layihələndirilməsi nümunəsi

2. Siyahı elementləri üçün təsvirlər list-style-image

Siz siyahı elementi markerləri kimi şəkillər və gradient dolgularından istifadə edə bilərsiniz. miras qalmış.

Sintaksis

Ul (siyahı stili-şəkil: url("şəkillər/romb.png");) ul (siyahı stili-şəkil: xətti-qradiyent(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
düyü. 2. Şəkildən istifadə edərək markerli siyahı tərtib edin
düyü. 3. Qradientdən istifadə edərək markerli siyahı tərtib edin

3. Siyahı tərzi-mövqe

Bu xüsusiyyət markeri siyahı elementinin məzmunundan kənarda və ya içərisində yerləşdirmək imkanı verir. miras qalmış.