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

Tanım

İşaretçinin stilini, konumunu ve işaretçi olarak kullanılacak görüntüyü aynı anda ayarlamanıza izin veren evrensel bir özellik. Ayrıntılı bilgi için, her mülk hakkındaki bilgilere ve ayrı ayrı bakın.

Sözdizimi

liste stili: liste stili türü || liste stili konumu || liste stili görüntü | miras

Değerler

Boşlukla ayrılmış üç işaretçi stili değerinin herhangi bir kombinasyonu. Değer kombinasyonları, önce işaretçi türü, ardından konum ve resim olmak üzere listelenen sırada olmalıdır. Değerlerin hiçbiri gerekli değildir, bu nedenle kullanılmayanlar atlanabilir.

Devral Ebeveynin değerini devralır.

HTML5 CSS2.1 IE Cr Op Sa Fx

• Lorem ipsum dolor sit amet
• Seçkin bir elit inşa etmek
• Sed diem nonummy nibh euismod
• Tincidunt ut Lake Dolore Magna Aliguam Reat Volutpat. Ut wisis enim and minimum Veniam, Quis Nostrud Exercitution Ullamcorper Suscipit Lobortis Nisl ut Aliquip Exea Comdo Consequat.

Sonuç bu örnekŞek. 1.

Pirinç. 1. list-style özelliğinin uygulanması

Nesne Modeli

Document.getElementById("elementID ").style.listStyle

Tarayıcılar

Sürüm 7.0'a kadar olan Internet Explorer devralma değerini desteklemez.

Web Dili Referansından Materyal

Kullanılan değerler

Bu özellik, currentStyle (salt okunur) dışındaki tüm nesneler için okunur/yazılır. varsayılan değer hiçbiri. Basamaklı Stil Sayfaları (CSS) özelliği devralınır.

Notlar

Mülk listStyleImage kenar boşlukları olan tüm öğeler için geçerlidir ve görüntülemek:liste öğesi.

Bir görüntü mevcut olduğunda, listStyleType içinde ayarlanan işaretçi görüntünün yerini alır.

Özellik için liste işaretleyici görüntüsünü görüntülemek için marj minimuma ayarlanmalıdır 30pt.

örnekler

Aşağıdaki örnekler özelliğin kullanımını göstermektedir listStyleImage ve öznitelik liste stili görüntü liste işaretleyici görüntüsünü ayarlamak için.

İlk örnek seçiciyi kullanır Ul ve öznitelik liste stili görüntü.

İkinci örnek özelliği kullanır listStyleImage bir olay meydana geldiğinde işaretçi stilini değiştirmek için fareyle üzerine gelindiğinde.

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 odaklanacak.

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 stiliyle başlayan ve madde işaretli ve numaralı listelerin stilinden sorumlu olan üç özellik vardır. Ayrıca, kod miktarını azaltmanıza izin veren liste stilinde önceden hazırlanmış bir kural vardır.

Tüm bu özellikler için kullanılabilir html öğeleri li ve ayrıca ul ve ol öğeleri için. Tek fark, kurallar li listesinin belirli bir değeri için yazılırsa, o zaman sadece onun için uygulanacaktır. Ve aynı css kuralları ul veya ul kapları için yazılırsa, bu kaplarda bulunan tüm li elemanlarına uygulanacaktır.

Bir özellik ile başlayalım liste stili türü, hangi ayarlar tür belirteçler veya numaralama liste öğeleri için:

liste stili-tür: disk|daire|kare|ondalık|ondalık-öncü-sıfır|alt-roma|üst-roma|alt-yunanca|alt-alfa|alt-latin|üst-alfa|üst-latin|ermenice| Gürcü|yok|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ştaki-sıfır - 01'den 99'a kadar, başında sıfır olan Arap rakamları.
• alt roma - küçük Roma rakamlarıyla numaralandırma.
• üst roma - büyük Roma rakamlarıyla numaralandırma.
• alt-yunan - küçük 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 hiç yapılmayacaktır.

Bu, liste öğelerinin tarayıcıda nasıl görüneceğidir. Farklı anlamlar liste stili türü:

-de CSS kullanarak stiller, 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ğiyle bir liste görünümünü kolayca diğerine dönüştürebilirsiniz.

stil özelliği liste stili görüntü olarak ayarlamanıza izin verir işaretleyici liste öğeleri grafik görüntü. list-style-image özniteliği kullanılırken, list-style-type özniteliğinin değeri yoksayılır:

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

Anlam hiçbiri görüntü işaretçisini kaldırır ve onu grafik değil normal işaretleyiciye ayarlar. Bu varsayılan davranıştır.

Görüntü dosyasının adresini belirtirken, işaretçinin yerine bir resim eklenir. 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 belirtilenler kullanılır.

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



• listedeki ilk öğe;


• listedeki ikinci madde;


• listedeki üçüncü öğe.



Ve işte göründüğü gibi:

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

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

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


liste stili konumu: iç|dış

değer olması durumunda içeri işaretçi veya numaralandırma olduğu gibi listenin içine yerleştirilir ve bu durumda dıştan 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çeride olarak ayarlanır. Bu durumda, ikinci satırın işaretleyici ile aynı hizada yerleştirildiğini unutmayın;
• bu noktada list-style-position dışarıdadır.

Özel CSS liste stili kuralı

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

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

liste stili: liste stili türü liste stili görüntü listesi stili konumu;

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

liste stili: url'yi (//site/images/marker.png) dışarıda daire içine alın;

Bu nedenle, list-style ö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, menü listesinden işaretçileri kaldır Yazmak için yeterli:

liste stili: yok;

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

liste stili türü: yok;

Tasarımla ilgili bu hikayede html listeleri Basamaklı Stil Sayfaları ile bitireceğim. Başkaları hakkında bilgi edinmek için CSS özellikleri" " bölümünden makaleleri okuyabilir ve blog güncellemelerine abone olmayı unutmayın. Yakında görüşürüz!

Web Dili Referansından Materyal

Kullanılan değerler

stil Astar, aşağıdaki değerlerin bir ila üçünü tanımlayabilir ve alabilir:

Bu özellik, tüm nesneler için okuma/yazmadır. varsayılan değer hiçbiri dışında disk. Basamaklı Stil Sayfaları (CSS) özelliği devralınır.

Notlar

Mülk liste biçimi genel bir bileşik özelliktir. Hem tür hem de görüntü için her iki değer ayarlandığında, listStyleImage olarak ayarlandığı durumlar dışında, görüntünün değeri öncelikli olur (standart liste işaretçilerinden biri yerine görüntü gösterilecektir). hiçbiri veya bağlantı ( URL) yanlış ayarlanmış veya güncel değil.

Mülk liste biçimi ayarlanan tüm öğeler için de geçerlidir. liste öğesi mülkiyet için görüntülemek. Liste işaretçisinin görüntüsünü kalın noktalar olarak ayarlamak için, kenar boşluğu özelliğini ayrıntılı olarak tanımlamanız veya değeri ayarlamanız gerekir. içeri bu öğelerdeki listStylePosition özelliği için.

Bir özellikteki değerler liste biçimi herhangi bir sırada tarif edilebilir. Bir boşlukla ayrılmaları gerekir.

örnekler

Aşağıdaki örnekler özelliğin kullanımını göstermektedir liste biçimi ve öznitelik liste biçimi listeye stil vermek için

Örnek, sınıfları kullanır Ul Ve UL kompaktözniteliğin yanı sıra liste biçimi iki sırasız liste tanımlamak için. Sınıf için UL kompakt açıklanan modeli değiştirmek için Ul, değeri ayarlamanız gerekir hiçbiri list-style-image özniteliği için.

• ...
• ...
• ...
• ...

İkinci örnek özelliği kullanır liste biçimi. Liste için belirtilen görsel mevcut değilse, işaretçi kullanılacaktır. içi boş daire(boş daire).

Üçüncü örnek, özelliğin liste biçimiözelliği olan öğeler için geçerli görüntülemek değer alır liste öğesi.

harf aralığı satır yüksekliği liste stili kenar boşluğu maksimum yükseklik maksimum genişlik minimum yükseklik minimum genişlik ana hat taşma dolgu konumu sağa metin hizalama metin süsleme metin girintisi metin dönüşümü üst dikey hizalama beyaz boşluk genişliği kelime aralığı z-endeksi
• HTML Referansı HTML Eğitimleri Web Sitesi Oluşturma Video Kursları

LIST-STYLE özelliği ile

Mülk	Değerler	Vesaire*	Hc*
liste biçimi	[liste stili görüntü; liste stili konumu; list-style-type ], devral	*	+
liste stili türü	disk , daire, kare, ondalık, ondalık sayı baştaki sıfır, alt-roma, üst-roma, alt-latin, üst-latin, ermenice, gürcüce, hiçbiri, miras	*	+
liste stili konumu	içeride, dışarıda, miras	*	+
liste stili görüntü	URL, yok, devral	*	+

Mülk Liste biçimi liste öğeleri için tüm işaretçi stillerini ayarlayan kısaltılmış bir yazma özelliği biçimidir. Bu özellikler hem numaralı hem de madde işaretli listeler için geçerlidir - ayrı olarak ele alınmaları gerekir. Kısaltılmış gösterim biçimi, herhangi bir bireysel özelliği içermeyebilir, ancak gösterim sırasına uyulmalıdır: işaretçi türü - konumu - görüntünün yolu.

uygulama alanı*: liste öğeleri ve özellik değeri verilen diğer öğeler görüntülemek dır-dir liste öğesi.


Liste stili türü

Özellik grupları işaretçi türü listenin her öğesi için. Madde işareti türleri, madde işaretli ve numaralı listeler için farklılık gösterir.

Değerler:

disk- nokta işaretçisi.
daire- daire işaretleyici.
kare- kare işaretleyici.
ondalık- Arapça sayılar: 1, 2, 3 ....
ondalık basamak sıfır- Sıfırdan başlayan Arap rakamları: 01, 02, 03 ... 09.
alçak roma- Küçük harflerle Romen rakamları.
üst roma- Büyük harflerle Romen rakamları.
lowel-latince- küçük Latin harfleri: a, b, c ....
üst latin— büyük latin harfler: A, B, C ….
Ermeni- Ermenice numaralandırma.
gürcü- Gürcüce numaralandırma.
hiçbiri- iptal.
miras

Örnek iki kullanır Farklı anlamlarözellikler Liste stili türü:

liste stili konumu

Özellik, öğenin işaretçisinin konumunu belirtir. İşaretçi, öğenin içinde veya dışındadır.

Değerler:

içeri- işaretçi, liste öğesinin içinde yer alır.
dıştan— işaretçi metin bloğunun dışına taşınır.
miras- üst öğeden kalıtım.

Örnek, değerler arasındaki farkı açıkça göstermektedir. içeri Ve dıştanözellikler liste stili konumu:

Liste stili görüntü

Özellik, numaralandırılmış veya işaretleyici olarak hizmet edecek resmin yolunu belirtir. maddeli liste. İşaretleyici görüntünün konumu, özellik kullanılarak kontrol edilebilir. liste stili konumu.

Değerler:

URL— grafik dosyasının yolu.
hiçbiri- örneğin ana öğe için işaretleyici görüntüyü iptal eder.
miras- üst öğeden kalıtım.

Ul (liste stili görüntü: url(papka/find.png); liste stili konumu: iç;)

Örnekte, özelliğin yeteneklerini açıkça gösteren küçük bir resmi işaretleyici olarak kullandık. Liste stili görüntü: