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

Merhaba, blog sitesinin sevgili okuyucuları. Bugün basamaklı stil sayfalarının özellikleri hakkında başka bir makale olacak. CSS kurallarını kullanarak tasarıma odaklanılacaktır.

Genel olarak listeler blok öğeleri arasında farklılık gösterir. Bunun nedeni, tarayıcının kendisi tarafından yerleştirilen madde işaretlerini ve numaralandırmayı içermeleridir.

Liste stili özelliği - bir html sayfasındaki listenin tasarımı

CSS dilinde, madde işaretli ve numaralı listelerin tasarımından sorumlu olan liste stiliyle başlayan üç özellik vardır. Ayrıca, kod miktarını azaltmanıza olanak tanıyan önceden hazırlanmış liste tarzı bir kural da vardır.

Tüm bu özellikler her ikisi için de kullanılabilir HTML öğeleri li ve ul ve ol elemanları için. Tek fark, eğer kurallar li listesinin belirli bir değeri için yazılmışsa, o zaman sadece ona uygulanacaktır. Ve ul veya ul kapları için aynı css kuralları yazılırsa bu kapların içerdiği tüm li elemanlarına uygulanacaktır.

Özellikle başlayalım liste stili türü, hangi ayarlar işaretleyici türü veya numaralama liste öğeleri için:

Gördüğünüz gibi, list-style-type özelliğinin hem işaretçinin türünü hem de türünü belirtebilen birçok kullanılabilir değeri vardır. çeşitli türler numaralama.

disk - siyah daire biçiminde bir işaretleyici (madde işaretli listeler için varsayılan değer).
daire - doldurulmamış bir daire biçimindeki işaretleyici.
kare - kare şeklinde işaretleyici. Tarayıcıya bağlı olarak açık veya koyu olabilir.
ondalık - numaralandırma Arap rakamları(numaralandırılmış listeler için varsayılan).
ondalık-önde-sıfır - başında sıfır olacak şekilde 01'den 99'a kadar Arap rakamlarıyla numaralandırma.
alt-romen - küçük Romen rakamlarıyla numaralandırma.
üst-roma - büyük Romen rakamlarıyla numaralandırma.
alt Yunanca - küçük Yunanca harflerle 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.
ermeni - geleneksel Ermeni rakamlarını kullanarak numaralandırma.
Gürcüce - geleneksel Gürcü rakamları kullanılarak numaralandırma.
hiçbiri - işaretleme ve numaralandırma hiçbir şekilde yapılmayacaktır.

Farklı liste stili türü değerlerine sahip liste öğeleri tarayıcıda şu şekilde görünecektir:

Şu tarihte: CSS kullanma stillerde, listeyi oluşturmak için hangi öğenin (OL veya UL) kullanıldığı önemli değildir. OL ve UL yalnızca varsayılan davranış bakımından farklılık gösterir ve list-style-type özelliği sayesinde bir liste türünü kolayca diğerine dönüştürebilirsiniz.

Stil özelliği liste stili resmi olarak ayarlamanızı sağlar işaretleyiciöğeleri listele grafik görüntü . List-style-image niteliğini kullanırken, list-style-type niteliğinin değeri göz ardı edilir:

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

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

Resim dosyasının adresini belirttiğinizde resim işaretleyicinin yerine eklenecektir. kullanımında olduğu gibi, görüntü adresi olarak hem mutlak hem de göreli adresleri kullanabilirsiniz. Tarayıcı görüntüyü yükleyemezse, varsayılan işaretleyici veya numaralandırma veya özellikte liste stili türünde belirtilenler kullanılacaktır.

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

ilk liste öğesi;

ikinci liste öğesi;

listedeki üçüncü öğe.

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

ilk liste öğesi;
ikinci liste öğesi;
listedeki üçüncü öğe.

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

Liste stili serisinin son CSS özelliği ise liste stili konumu bu, bir liste öğesindeki madde işaretinin veya numaralandırmanı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 bir işaretleyici veya numaralandırma sanki bir listenin içindeymiş gibi 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 konumu değerlerine sahip örnek liste:

ilk paragrafta her şey varsayılan olarak;
ikinci paragrafta liste stili konumu içeride olarak ayarlanmıştır. Bu durumda ikinci satırın işaretçiyle aynı hizada yerleştirildiğine dikkat edin;
bu noktada liste stili konumu dışarıya eşittir.

Prefabrik CSS liste stili kuralı

Aşağıdaki CSS liste stili özelliği, listeleri şekillendirmek için bir hazır yapıdır. Yukarıda tartışılan üç CSS kuralının tümünü tek bir kurala yazmanıza olanak tanır. İçindeki değerleri belirtme sırası herhangi biri olabilir ve liste tarzında belirtmediğiniz parametreler tarayıcı tarafından varsayılan olarak alınacaktır.

Liste stili derleme kuralındaki değerler boşluklarla ayrılmalıdır:

liste stili: liste stili tipi liste stili resim liste stili konumu;

Stil listeleri için gerçek bir CSS kuralı şuna benzer:

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

Böylece liste stili özelliği, kod miktarını önemli ölçüde azaltmanıza olanak tanır, çünkü üç kural yerine yalnızca bir kural ayarlamak yeterlidir.

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

liste stili: yok;

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

liste stili türü: yok;

Tasarım hakkındaki hikaye bu kadar. HTML listeleri Basamaklı Stil Sayfaları ile bitireceğim. Başkaları hakkında bilgi edinmek için CSS özellikleri“” bölümünden yazıları okuyabilir ve blog güncellemelerine abone olmayı unutmayın. Tekrar görüşürüz!

İşaretçi stilini, konumunu ve liste işaretçisi olarak kullanılacak görüntüyü aynı anda ayarlamanıza olanak tanıyan evrensel bir özellik.

Kısa bilgi

Tanımlar

	Tanım	Örnek
<тип>	Değerin türünü belirtir.	<размер>
A&&B	Değerler belirtilen sıraya göre çıkarılmalıdır.	<размер> && <цвет>
bir \| B	Önerilen değerlerden (A veya B) yalnızca bir değer seçmeniz gerektiğini belirtir.	normal \| küçük harfler
bir \|\| B	Her değer bağımsız olarak veya diğerleriyle birlikte herhangi bir sırayla kullanılabilir.	genişlik \|\| saymak
	Değerleri gruplandırır.	[ kırpma \|\| geçmek ]
*	Sıfır veya daha fazla kez tekrarlayın.	[,<время>]*
+	Bir veya daha fazla kez tekrarlayın.	<число>+
?	Belirtilen tür, kelime veya grup isteğe bağlıdır.	ek?
(A, B)	En az A'yı tekrarlayın, ancak en fazla B kez tekrarlayın.	<радиус>{1,4}
#	Virgülle ayırarak bir veya daha fazla kez tekrarlayın.	<время>#

Değerler

İşaretçilerin stilini belirleyen üç değerin herhangi bir kombinasyonu, bir boşlukla ayrılır. Değer kombinasyonları verilen sıraya göre takip edilmelidir: önce işaretleyici türü, ardından konum ve görüntü gelir. Değerlerin hiçbiri gerekli olmadığından kullanılmayanlar atlanabilir.

Örnek

liste stili

Çok değişkenli polinom
Normal mutlak yakınsak seriler
Bir fonksiyonun integrali
Bir fonksiyonun eşdoğrusal ekstremumu

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 1.

Pirinç. 1. Liste stili özelliğini kullanma

Nesne modeli

Nesne.style.listStyle

Şartname

Her spesifikasyon birkaç onay aşamasından geçer.

Öneri - Spesifikasyon W3C tarafından onaylanmıştır ve standart olarak önerilmektedir.
Aday Tavsiyesi ( Olası öneri) - standarttan sorumlu grup, hedeflerini karşıladığından memnundur ancak standardı uygulamak için geliştirme topluluğunun yardımına ihtiyaç duyar.
Önerilen Öneri Önerilen Öneri) - bu aşamada belge nihai onay için W3C Danışma Konseyine sunulur.
Çalışma Taslağı - Topluluğun incelemesi için tartışılan ve değiştirilen taslağın daha olgun bir versiyonu.
Editörün taslağı ( Editör taslağı) - proje editörleri tarafından değişiklikler yapıldıktan sonra standardın taslak versiyonu.
Taslak ( Taslak spesifikasyon) - standardın ilk taslak versiyonu.

Tarayıcılar

Tarayıcı tablosunda aşağıdaki gösterimler kullanılır.

Web Dilleri Dizini'nden materyal

Kullanılan değerler

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

Bu özellik tüm nesneler için okunur/yazılır. Varsayılan değer: diskin dışında hiçbiri. Basamaklı Stil Sayfaları (CSS) özelliği devralınmıştır.

Notlar

Mülk liste Stili evrensel bir bileşik özelliğidir. Hem tür hem de görüntü ayarlandığında, listStyleImage olarak ayarlanmadığı sürece görüntü değeri öncelikli olur (standart liste madde işaretlerinden biri yerine resim gösterilir) hiçbiri veya bağlantı ( URL'si) görüntüde yanlış yüklenmiş veya güncel değil.

Mülk liste Stili aynı zamanda ayarlanan tüm öğeler için de geçerlidir liste öğesi mülk için görüntülemek. Liste işaretçisini kalın noktalar olarak görünecek şekilde ayarlamak için kenar boşluğu özelliğini ayrıntılı olarak belirtmeniz veya bir değer ayarlamanız gerekir. içeri bu öğelerdeki listStylePosition özelliği için.

Özellik değerleri liste Stili herhangi bir sırayla tanımlanabilir. Bir boşlukla ayrılmaları gerekir.

Örnekler

Aşağıdaki örnekler özelliğin kullanımını göstermektedir liste Stili ve özellik liste stili Liste stilini ayarlamak için

Örnekte sınıflar kullanılıyor ul Ve UL.kompakt ve aynı zamanda nitelik liste stili iki sırasız liste belirtmek için. Sınıf için UL.kompakt açıklanan çizimi değiştirmek için ul, değeri ayarlamanız gerekir hiçbiri liste stili resim özelliği için.

İkinci örnek özelliği kullanıyor liste Stili. Liste için belirtilen görsel mevcut değilse işaretleyici kullanılacaktır içi boş daire(boş daire).

Üçüncü örnek, özelliğin olduğunu gösterir. liste Stiliözelliğine sahip elemanlar için geçerlidir. görüntülemek değerini alır liste öğesi.

HTML referansı HTML dersleri Web sitesi oluşturmaya ilişkin video kursları

LIST-STYLE özelliği

Mülk	Değerler	Pr*	Hc*
liste stili	[liste-stili-resim; liste stili konumu; liste stili türü ], devral	*	+
liste stili türü	disk, daire, kare, ondalık, ondalık sayının başında sıfır, alt-roma, üst-roman, alt-latin, üst-latin, ermenice, gürcü, yok, devral	*	+
liste stili konumu	içeride, dışarıda, miras almak	*	+
liste stili resmi	URL, yok , devral	*	+

Mülk Liste stili— liste öğeleri için tüm işaret stillerini tanımlayan, yazma özelliklerinin kısaltılmış biçimi. Bu özellikler hem numaralı hem de madde işaretli listeler için geçerlidir; bunların ayrı ayrı değerlendirilmesi gerekir. Gösterimin kısa biçimi herhangi bir bireysel özelliği içermeyebilir ancak yazılma sırasına uyulmalıdır: işaretçi türü - konumu - görüntüye giden yol.

Uygulama kapsamı*: özellik değerinin belirlendiği öğeleri ve diğerlerini listeler Görüntülemeköyle liste öğesi.

Liste stili türü

Özellik setleri işaretleyici 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şaretleyici.
daire- daire işaretçisi.
kare— kare işaretleyici.
ondalık — Arapça sayılar: 1, 2, 3 ….
ondalık-baştaki-sıfır- Sıfırdan başlayan Arapça sayılar: 01, 02, 03 ... 09.
düşük romantizm- Küçük harflerle Roma numaralandırması.
üst roman- Büyük harflerle Roma numaralandırması.
lowel-latince— küçük Latin harfleri: a, b, c….
üst Latince— büyük Latin harfleri: A, B, C….
Ermeni- Ermeni numaralandırması.
gürcü- Gürcüce numaralandırma.
hiçbiri- iptal.
miras almak

Örnekte iki tane kullanılıyor farklı anlamlarözellikler Liste stili türü:

Liste stili konumu

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

Değerler:

içeri— işaretçi liste öğesinin içinde bulunur.
dıştan— işaretçi metin bloğunun dışına taşınır.
miras almak— ana öğeden miras.

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

Liste stili resmi

Özellik, numaralandırılmış veya madde işaretli bir listedeki bir öğe için işaretleyici görevi görecek resmin yolunu belirtir. İşaretleyici görüntüsünün konumu bu özellik kullanılarak kontrol edilebilir Liste stili konumu.

Değerler:

URL'si— grafik dosyasının yolu.
hiçbiri— örneğin ana öğe için işaretleyici görüntüyü iptal eder.
miras almak— ana öğeden miras.

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

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

Web Dilleri Dizini'nden materyal

Kullanılan değerler

Astar

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ınmıştır.

Notlar

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

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

Bir özelliğe ilişkin liste işaretçisi resmini göstermek için marj minimuma ayarlanmalıdır 30 punto.

Örnekler

Aşağıdaki örnekler özelliğin kullanımını göstermektedir listStyleImage ve özellik liste stili resmi Liste işaretçisi görüntüsünü ayarlamak için.

İlk örnek seçiciyi kullanıyor ul ve özellik liste stili resmi.

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