Şekillendirme ul css liste numaraları. Bir html sayfasındaki bir listenin görünümünü özelleştirmek için CSS kuralları. liste stili özelliği (tür, görüntü, konum)

CSS Listeleri- listelerin tasarımından sorumlu bir dizi özellik. Site gezinme çubukları oluşturulurken HTML listelerinin kullanımı çok yaygındır. Liste öğeleri, bir dizi blok öğesini temsil eder.

Standart CSS özelliklerini kullanarak şunları yapabilirsiniz: liste işaretçisinin görünümünü değiştir, işaretçi için resim ekle, birlikte işaretçi konumunu değiştir. İşaret bloğunun yüksekliği line-height özelliği ile ayarlanabilir.

CSS Stilleriyle Stil Listeleri Oluşturma

1. Liste işaretleyici türü liste stili türü

Özellik, işaretçi türünü değiştirir veya işaretçiyi kaldırır madde işaretli ve numaralı listeler için. Miras.

liste-tarzı-tipi
Değerler:
disk	Varsayılan değer. Dolu bir daire, liste öğesi işaretçisi görevi görür.
Ermeni	Geleneksel Ermeni numaralandırma.
daire	Doldurulmamış bir daire bir işaretleyici görevi görür.
cjk-ideografik	İdeografik numaralandırma.
ondalık	1, 2, 3, 4, 5, …
ondalık-başlık-sıfır	01, 02, 03, 04, 05, …
gürcü	Geleneksel Gürcü numaralandırma.
İbranice	Geleneksel Yahudi numaralandırma.
hiragana	Japonca numaralandırma: a, i, u, e, o, ...
hiragana-iroha	Japonca numaralandırma: i, ro, ha, ni, ho, ...
katakana	Japonca numaralandırma: A, I, U, E, O, ...
katakana-iroha	Japonca numaralandırma: I, RO, HA, NI, HO, ...
alt alfa	a,b,c,d,e,…
aşağı yunanca	Yunan alfabesinin küçük harfleri.
alt latince	a,b,c,d,e,…
alt roma	ben, ii, iii, iv, v, …
Yok	İşaretçi eksik.
Meydan	Doldurulmuş veya doldurulmamış bir kare, bir işaretleyici görevi görür.
üst alfa	A, B, C, D, E,…
üst latin	A, B, C, D, E,…
üst roma	I, II, III, IV, V, ...
ilk	Bir özelliğin değerini varsayılan değerine ayarlar.
miras	Özellik değerini üst öğeden devralır.

Sözdizimi

Ul (liste stili türü: yok;) ul (liste stili türü: kare;) ol (liste stili türü: yok;) ol (liste stili türü: alt alfa;)
Pirinç. 1. Madde işaretli ve numaralı listelerin tasarımına bir örnek

2. Liste stili görüntü öğeleri için görüntüler

Görüntüler ve degrade dolgular, liste öğesi işaretleri olarak kullanılabilir. Miras.

Sözdizimi

Ul (list-style-image: url("images/romb.png");) ul (list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F %50, #FFB214 %50);)
Pirinç. 2. Resimli Madde İşaretli Liste Tasarlama Pirinç. 3. Madde İşaretli Bir Listeyi Gradyan ile Şekillendirme

3. Liste işaretleyici konum listesi stili konumu

Bu özellik, işaretçiyi liste öğesinin içeriğinin dışına veya içine yerleştirme yeteneği sağlar. Miras.

Merhaba, blog sitesinin sevgili okuyucuları. Bugün, basamaklı stil sayfalarının özellikleri hakkında başka bir makale olacak. CSS kuralları ile stil oluşturmaya odaklanacaktır.

Genel olarak, listeler blok öğeleri arasında ayrı durur. Bunun nedeni, tarayıcının kendisi tarafından yerleştirilen işaretçileri ve numaralandırmayı içermeleridir.

Liste stili özelliği - html sayfasında liste tasarımı

CSS'de liste stili ile başlayan ve madde işaretli ve numaralandırılmış listelerin stilinden sorumlu olan üç özellik vardır. Ayrıca, kod miktarını azaltmanıza izin veren liste stili önceden hazırlanmış bir kural vardır.

Tüm bu özellikler hem html li elemanları için hem de ul ve ol elemanları için kullanılabilir. Tek fark, kurallar li listesinin belirli bir değeri için yazılırsa, o zaman sadece onun için uygulanacaktır. Ve ul veya ul kapsayıcıları için aynı css kuralları yazılırsa, bu kapsayıcılarda bulunan tüm li öğelerine uygulanacaktır.

Bir özellik ile başlayalım liste-tarzı-tipi, hangi ayarlar işaretleyici türü veya numaralama liste öğeleri için:

liste-stil-türü: disk|daire|kare|ondalık|ondalık-ön-sıfır|alt-roman|üst-roman|alt-yunan|alt-alfa|alt-latin|üst-alfa|üst-latin|ermenice| gürcü|hiçbiri|miras

Gördüğünüz gibi list-style-type özelliği, hem işaretçi türünü hem de çeşitli numaralandırma türlerini belirtebilen birçok kullanılabilir değere sahiptir.

• disk - siyah daire işaretçisi (madde işaretli listeler için varsayılan).
• daire - doldurulmamış bir daire şeklinde bir işaretleyici.
• kare - kare işaretleyici. Tarayıcıya bağlı olarak açık veya koyu olabilir.
• ondalık - Arap rakamlarıyla numaralandırma (numaralı listeler için varsayılan değer).
• ondalık-başında-sıfır - Başında sıfır olan 01'den 99'a kadar Arap rakamları.
• alt romen - küçük Romen rakamlarıyla numaralandırma.
• üst romen - büyük Romen rakamlarıyla numaralandırma.
• alt yunanca - alt yunan harfleriyle numaralandırma.
• alt-alfa ve alt-latin - küçük Latin harfleriyle numaralandırma.
• üst alfa ve üst latin - büyük Latin harfleriyle numaralandırma.
• ermenice - geleneksel Ermeni rakamlarıyla numaralandırma.
• gürcü - geleneksel Gürcü rakamlarıyla numaralandırma.
• yok - işaretleme ve numaralandırma kesinlikle yapılmayacaktır.

Liste öğeleri, farklı liste stili türü değerlere sahip tarayıcıda şöyle görünür:

CSS stillerini kullanırken, listeyi oluşturmak için hangi öğenin (OL veya UL) kullanıldığı önemli değildir. OL ve UL yalnızca varsayılan davranışlarında farklılık gösterir ve list-style-type özelliği ile bir liste görünümünü diğerine kolayca dönüştürebilirsiniz.

stil özelliği liste-tarzı-görüntü olarak ayarlamanızı sağlar işaretleyiciöğeleri listele grafik görüntü. list-style-image özniteliğini kullanırken, list-style-type özniteliğinin değeri yok sayılır:

liste-tarzı-görüntü: yok|<интернет-адрес файла изображения>|miras

Anlam Yok görüntü işaretçisini kaldırır ve onu grafik değil, normal bir işarete ayarlar. Bu varsayılan davranıştır.

Görüntü dosyasının adresini belirlerken, işaretleyicinin yerine bir resim eklenecektir. kullanımında olduğu gibi, görüntü adresi olarak hem mutlak hem de göreli adresler kullanılabilir. Tarayıcı görüntüyü yükleyemezse, varsayılan işaretçi veya numaralandırma veya list-style-type özelliğinde belirtilen her şey kullanılır.

İşaretleyici olarak resim içeren bir liste örneği:

• listedeki ilk öğe;


• listedeki ikinci öğe;


• listedeki üçüncü öğe.

Ve işte şöyle görünüyor:

• listedeki ilk öğe;
• listedeki ikinci öğe;
• listedeki üçüncü öğe.

İşaretleyici olarak bir resim seçerken, küçük bir resim seçmenin daha iyi olduğu açıktır.

Ve liste tarzı serideki son CSS özelliği - liste stili konumu, bu, bir liste öğesindeki bir madde işaretinin veya sayının konumunu belirtmenize olanak tanır. Değer için iki seçenek olabilir:

liste stili konumu: içeride|dışarıda

değer olması durumunda içeri işaretleyici veya numaralandırma, olduğu gibi, listenin içine yerleştirilir ve durumda dışarıda li elemanlarının dışında. Varsayılan değer dışarıdadır ve işaretçi dışarıya taşınır.

Farklı liste stili konum değerlerine sahip liste örneği:

• ilk paragrafta her şey varsayılan olarak;
• ikinci paragrafta list-style-position içeriden olarak ayarlanır. Bu durumda, ikinci satırın işaretleyici ile aynı hizada yerleştirildiğine dikkat edin;
• bu noktada liste-stil-pozisyonu dışındadır.

Özel CSS liste stili kuralı

Aşağıdaki CSS liste stili özelliği, stil listeleri için önceden hazırlanmıştır. Yukarıda tartışılan üç CSS kuralını tek bir kurala yazmanıza olanak tanır. İçindeki değerleri belirtme sırası herhangi bir olabilir ve liste stilinde ayarlamadığınız parametreler varsayılan olarak tarayıcı tarafından alınacaktır.

Liste tarzı bir prefabrikte değerleri boşluklarla ayırın:

liste stili: liste stili tipi liste stili görüntü liste stili konumu;

Stil listeleri için gerçek bir CSS kuralı şöyle görünebilir:

liste stili: dışarıda daire url'si (http://site/images/marker.png);

Bu nedenle, liste stili özelliği kod miktarını önemli ölçüde azaltabilir, çünkü üç kural yerine yalnızca bir tane belirtmek yeterlidir.

Yukarıda belirtildiği gibi, değerler herhangi bir sırada ve herhangi bir sayıda belirtilebilir. Yani, örneğin, yapmak için menü listesinden işaretçileri kaldır Yazmak için yeterli:

liste stili: yok;

Aynısı, list-style-type özelliği kullanılarak da yapılabilir:

liste stili türü: yok;

Bu, basamaklı stil sayfaları kullanan html listelerinin tasarımı hakkındaki hikayeyi tamamlar. Diğer CSS özelliklerini öğrenmek için "" bölümünden makaleler okuyabilir ve blog güncellemelerine abone olmayı unutmayın. Yakında görüşürüz!

23.02.2017

Henüz değil

Herkese selam!
Bugünkü eğitimde, CSS'deki görünümü nasıl kontrol edebileceğiniz, yani madde işaretli ve numaralı listeler oluşturma, madde işaretli listeleri bir görüntü ile nasıl dekore edebileceğiniz ve ayrıca gerekirse madde işaretli liste atamalarını nasıl tamamen kaldırabileceğiniz hakkında konuşacağım.
Bu dersi geciktirmemeye ve çok fazla bilgi yazmamaya çalışacağım. Ama sadece deneyeceğim ve nasıl gittiğini göreceğim.

Listedeki işaretleyici türü

LIST-STYLE-TYPE özelliği
Liste stili türü kuralı, örneğin sayıları, harfleri, kareleri, daireleri vb. görüntülemek için işaretçi türünü ayarlayabilir.

Mülk:

• Yok – işaretleyici olmadan

- madde işaretli listeler:

• disk- içi dolu bir daire şeklinde bir işaretleyici;
• daire- doldurulmamış bir daire şeklinde bir işaret;
• Meydan- doldurulmuş kare şeklinde bir işaretleyici;

- numaralı listeler:

• ondalık- sıradan ondalık sayılar (1,2,3,4,5, vb.);
• üst roma- büyük Romen rakamları (I, II, III, IV, V, vb.);
• alt roma- küçük Romen rakamları (i, ii, iii, iv, v, vb.);
• üst alfa- büyük harfler (A, B, C, D, E, vb.);
• alt alfa– küçük harfler (a,b,c,d,e, vb.)

Li ( liste stili tipi: daire; /* Boş daire işaretleri */ )

Tam örnek:

• Metin 1
• metin #2

Sonuç:

İşaretçiyi listeden kaldırmanız gerekirse, "none" özelliğini kullanın:

Li ( list-style-type: none; /* İşaretçileri kaldır */ )

Sonuç:

İşaretçinin listedeki konumu

Mülk "LİSTE-TARZ-POZİSYON »
"liste stili-pozisyon" kuralı, işaretçinin konumunu belirleyebilir.

Mülk:

• dışarıda– listenin ana bloğunun dışında;
• içeri– listenin ana bloğunun içinde.

Li ( list-style-position: içeride; /* işaretçi konumu */ )

Liste işaretleyici rengi

Mülk "RENK »
Yalnızca metnin rengini değil, aynı zamanda işaretçinin rengini de değiştirebileceğiniz “renk” kuralını zaten biliyorsunuz. Bak.

• Metin 1
• Metin #2

Sonuç:

Listede işaretleyici yerine resim

Mülk "LİSTE-TARZ-GÖRÜNTÜ »
Numaralı veya madde işaretli listelerin standart görünümünü beğenmiyorsanız, "liste-tarzı-görüntü" kuralını kullanabilir ve normal madde işaretleri yerine resim madde işaretlerini koyabilirsiniz.

Sözdizimi:

Liste-tarzı-görüntü: url(image.png);

LI ( list-style-image: url("marker1.png"); /* işaret resmi */ )

"marker1.png", işaretçinin resmidir.

Sonuç:

Listedeki madde işareti girintisi

PADDING-LEFT özelliği
İşaretçiden metne girinti yapmanız gerekiyorsa, sol doldurma kuralını kullanın.

Li ( dolgu-sol: 30px; /* İşaretçiden metne dolgu */ )

Sonuç:

SONUNA KADAR OKUYANLARA HEDİYE

Herhangi bir numaradan numaralandırmayı listeleme
Bunu bilmene gerek yok ama buraya kadar okuyanlar için bir hediye yapmaya karar verdim. Listenin numaralandırmasını 1'den değil, örneğin 6'dan ayarlamanız gerekiyorsa, bunu yapabilirsiniz:

Li ( list-style-type: yok; /* Listeden ilk numaralandırmayı kaldır */ ) ul ( counter-reset: list 5; /* Counter'ı başlat */ ) ul li:before ( counter-increment: list; /* Sayaç değerini artır */ içerik: sayaç(liste) "."; /* Çıkış numarası */ )

Sonuç:

Bir sonraki derslerinizi sabırsızlıkla bekliyorum! Abone olmayı unutmayın!

Önceki yazı
Sonraki Gönderi

CSS size madde işaretli ve numaralı listeler oluşturma, resimli madde işaretleri stil listeleri oluşturma ve gerekirse madde işaretli liste atamalarını tamamen kaldırma yeteneği verir.

CSS stilleri listesi işaretçisi.

liste-tarzı-tipi

liste stili türü: disk | daire | kare | ondalık | alt roma | üst roma | alt-alfa | üst alfa | Yok;

Anlam :

disk - içi dolu daire şeklinde madde işaretli liste

daire - doldurulmamış bir daire şeklinde madde işaretli bir liste

kare - doldurulmuş kare şeklinde madde işaretli bir liste

ondalık - Arapça sayılar (1,2,3, vb.)

üst romen - büyük Romen rakamlarıyla numaralandırılmış liste (I,II,III,IV, vb.)

alt romen - küçük Romen rakamlarıyla numaralandırılmış liste (i,ii,iii,iv, vb.)

üst alfa - büyük harflerle numaralandırılmış liste (A,B,C, vb.)

alt-alfa - küçük harflerle numaralandırılmış liste (a,b,c, vb.)

yok - işaret yok.

Örnek :

• En iyisine inan, en kötüsünü bekle.
• Hayat bir hastalıktır, ölümcüldür.
• Asla asla Deme.

Sonuç :

İşaretçinin listedeki görüntüsünün kaldırılması gereken durumlar vardır. Bunu yapmak için CSS kodunu yazın

liste stili türü: Yok;

Örnek :

• En iyisine inan, en kötüsünü bekle.
• Asla asla Deme.

Sonuç :

Listedeki normal işaretleri kendi resimlerinizle değiştirebilirsiniz. Bu, list-style-image özelliği ile yapılabilir.

liste-tarzı-görüntü

liste-tarzı-görüntü: url(resim.png);

Örnek :

• En iyisine inan, en kötüsünü bekle.
• Hayat ölümcül bir hastalıktır.
• Asla asla Deme.

Sonuç :

Madde işaretli listeye metinden bir mesafe de verebilirsiniz. Bu, li seçici için padding-left özelliği kullanılarak yapılabilir.

Örnek :

• En iyisine inan, en kötüsünü bekle.
• Hayat ölümcül bir hastalıktır.
• Asla asla Deme.

Sonuç :

Bir sonraki görev, işaretçinin rengini değiştirmek, ancak metnin rengini değiştirmemektir. Bu nasıl yapılabilir? Teste bir etiket eklenerek işaretçinin rengi değiştirilebilir .
Şuna benziyor:

Metin

Örnek :

• En iyisine inan, en kötüsünü bekle.
• Hayat ölümcül bir hastalıktır.
• Asla asla Deme.

Sonuç :

Genel temaya ek olarak.
Herhangi bir nedenle, işaretçi listesinin numaralandırmasını sıfırdan değil, örneğin 8'den ayarlamanız gerekiyorsa, böyle bir hamle yapabilirsiniz.

Örnek :

• En iyisine inan, en kötüsünü bekle.
• Hayat ölümcül bir hastalıktır Madde 2
• Asla asla deme Madde 3
• Tek bildiğim buydu. 4. madde

Sonuç :

Konu burada son buluyor.

Listeler, bir web sayfasının önemli bir unsurudur. Bilginin yapılandırılmasına ve kullanıcı dostu bir şekilde sunulmasına yardımcı olurlar. Ayrıca menüler ve gezinme çubukları genellikle listeler şeklinde tasarlanır. Özellikler grubu, markalama elemanının konumunu ve görünümünü kontrol etmenizi sağlar.

Liste türleri

Sıralı ve sırasız listeleri ayırt edin. İlkinde, noktadan noktaya değişmeyen herhangi bir karakter bir işaretleyici görevi görebilir ve ikincisinde, listenin her bir öğesinin, diğerleri arasındaki konumunu belirleyen kendi işaretçisi vardır.

İşaretleme için sıralı listelerde, genellikle farklı sistem ve alfabelerin sayıları veya harfleri kullanılır.

Yuvalama derecesine bağlı olarak, tek seviye vardır ve Her seviye genellikle kendi işaretleme elemanına sahiptir.

Menüler veya gezinme çubukları oluştururken listelerin kullanılması, bu öğenin önemli anlamsal anlamı olduğundan, HTML standardının en son sürümü tarafından teşvik edilir.

CSS'de göster

Her öğe, özel bir görüntüleme tipi gösterimi olan bir blok kapsayıcıdır: liste öğesi. Varsayılan olarak bu değer, ul ve ol kapları içinde bulunan li öğeleri için ayarlanır ve işaretçinin bloktan önce görüntülenmesini sağlar.

Gerekirse, bu tür bir görüntüleme herhangi bir HTML kapsayıcı için ayarlanabilir. Görüntülenen işaretleyici öğe, liste stili CSS özellik grubu kullanılarak biçimlendirilir.

P (görüntüleme: liste öğesi; liste stili türü: ondalık; )

Aşağıda listelenen üç özelliğin tümü, display: list-item içeren alt öğeler tarafından devralınır ve gerekirse açıkça geçersiz kılınmalıdır.

İşaretçi konumunu listele

İlk grup özelliği liste stili konumudur. İşaretçinin metin bloğunda mı kalacağını yoksa dışına mı taşınacağını belirler.

Özellik iki değerden birini alır:

• içeri,
• dışarıda.

Aralarındaki fark, özellikle çok satırlı paragraflarda fark edilir.

Liste1 ( liste-stil-konumu: dış; ) .list2 ( liste-stil-konumu: iç; )

Varsayılan değer dışarıdadır ve liste işaretçisi blok sınırının dışına yerleştirilir.

işaretleyici görünümü

İkinci özellik - list-style-type - işaretleme elemanının tipini kontrol eder ve on beşten fazla değer alabilir.

Varsayılan olarak, numaralı listeler Arap rakamları, madde işaretli listeler ise noktalar kullanır. Ancak CSS liste stili özellikleri, bu ayarları değiştirmenize ve hatta madde işaretlerini tamamen kaldırmanıza olanak tanır.

Sırasız liste işaretleri:

• disk - metin rengiyle dolu normal nokta;
• daire - metin renginde konturlu boş daire;
• kare - dolu kare.

Sıralı listeler için daha birçok seçenek vardır:

list-style-type özelliğinin değeri	Tanım
ondalık	standart Arapça numaralandırma, birden başlayarak: 1, 2, ..., 10, ...
ondalık-başlık-sıfır	Arap rakamları kullanır, bir karakterden oluşan değerler solda önemsiz bir sıfır ile tamamlanır: 01, 02, ... , 10, ...
	Latin alfabesi: a, b, ... , e, ...
	büyük harfler: A, B, ... , E, ...
aşağı yunanca	Yunan alfabesi, küçük harfler
alt roma	Küçük harflerle gösterilen Romen rakamları: i, ii, ... , vi, ...
üst roma	Büyük harflerle gösterilen Romen rakamları: I, II, ... , VI, ...
Ermeni	Ermeni numaralandırma stili
gürcü	Gürcü numaralandırma stili
İbranice	Yahudi numaralandırma stili
	çeşitli Japonca numaralandırma stilleri, küçük harfler
	çeşitli Japonca numaralandırma stilleri, büyük harfler
cjk-ideografik	Doğu ideografik numaralandırma

Alt-alfa ve alt-latin gibi bazı değerler örtüşür ve diğerleri bazı tarayıcılar ve yazı tipleri tarafından desteklenmez.

Gerekirse, sırasız uls'ye sıralı tip işaretleri uygulanabilir ve bunun tersi de geçerlidir.

Ayrı olarak, herhangi bir türden bir listeden işaretçileri gizleyen yok değerini vurgulamalıyız. Bir listenin anlamını korumak istediğiniz ancak etiket öğelerinin tasarıma uymadığı gezinme çubukları oluştururken özellikle yararlıdır. Ayrıca, özellik genellikle özel stil için kullanılır.

Liste (liste stili-türü: yok; )

Özel işaretleyici

CSS tanımlı işaretçi türlerinin yerine herhangi bir görüntü kullanılabilir. Bunu yapmak için, buna list-style-image özelliğine bir referans iletmeniz gerekir.

Resimleri gif formatında bile kullanabilirsiniz - animasyon kaydedilecektir. Resmin gerçek boyutta görüntülendiğini hatırlamak önemlidir.

Liste ( list-style-image: url(image.jpg); line-height: 25px; )

Örneğin:

Görüntü dosyalarına ek olarak, radyal veya doğrusal degrade CSS işlevlerini kullanabilirsiniz:

Liste ( liste-tarzı-görüntü: radyal-gradyan(açık mavi, aqua, mavi); )

İşaretçinin şekli kare kalır.

Birleştirilmiş Sözdizimi

Bir liste işaretçisinin görünümünü tanımlayan tüm özellikler tek bir CSS liste stilinde birleştirilebilir.

Liste stili: liste stili türü liste stili konumu liste stili görüntü

Belirli özellikler bir boşlukla listelenir, sıraları ihlal edilemez, ancak herhangi biri atlanabilir:

Liste1 ( liste stili: yok; ) .list2 ( liste stili: üst roman içi; ) .list3 ( liste stili: url içinde(/images/img1.png); )

Stilleri orijinal ayarlarına sıfırlamak için, listelenen dört özellikten herhangi birine aktarılabilecek bir başlangıç ​​değeri vardır.

Bir grubu vurgulu efektlerle birlikte kullanarak, kullanıcının dikkatini çeken güzel, benzersiz listeler oluşturabilirsiniz.