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). Özel CSS liste stili kuralı

Merhaba, blog sitesinin sevgili okuyucuları. Bugün kumbarada bir yazı daha olacak. Basamaklı stil sayfalarının kurallarını kullanarak tasarıma odaklanacaktır. Burada her şey çok basit, ama yine de bu konuya ayrı bir yazı ayırmaya karar verdim.

Biraz önce, nasıl, nasıl ve nasıl çalışabileceğinizi öğrendik. Biraz önce, belirli stil özelliklerinin uygulanması gereken Html kod öğesini tam olarak belirtmek için tüm olası ve çeşitli kombinasyonlarını ayrıntılı olarak inceledik.

Liste stili - Html kodunda liste tasarımı

Bu nedenle, stil işaretleme dilinde, liste stili ile başlayan ve kişiselleştirmeye hizmet eden üç ayrı kural vardır. dış görünüş web belgelerinin kodunda (numaralı veya madde işaretli) listeler. Ek olarak, kod miktarını biraz azaltmanıza izin veren önceden hazırlanmış bir Css listesi stili kuralı vardır. Ama önce ilk şeyler.

Şimdi sizinle birlikte ele alacağımız şey şu şekilde kullanılabilir: HTML öğeleri LI ve Ul ve Ol öğeleri için (sırasıyla madde işaretli ve numaralı listeler). Bu etiketlere liste stili uygulama arasındaki fark ne olurdu?

Aslında, bir özelliğin miras alınıp alınmadığını doğrulayıcı web sitesinde (sağlanan bağlantıda okuyun) basamaklı stil sayfalarının belirtimi bölümünde öğrenebilirsiniz. Devralınan kuralların karşısındaki "Devralınan" sütununda "Evet" olacaktır:

İle başlayalım liste-tarzı-tipi için işaretleme türünü ayarlamanıza olanak tanır. bireysel elemanlar html listesi. Bu kural için aşağıdaki değerlere izin verilir:

1. Yok - hiç işaretleme olmayacak (liste-stil-tipi:yok; bu öğeye uygulandı ve bu nedenle bir işaretçisi yok)
2. Disk - dolu bir daire (liste stili tipi: disk bu satıra yeni uygulandı;)
3. Daire - işaret olarak daire
4. Kare - işaret olarak kare
5. Ondalık - Arap rakamları (liste stili türü:decimal;)
6. alt alfa - küçük harfle
7. üst alfa - Latin harfleri büyük harf
8. küçük romen - küçük harflerle Romen rakamları
9. üst romen - büyük harflerle Romen rakamları

Hemen yukarıdaki liste Ul veya Ol'un hangi unsurlarının yardımıyla oluşturuldu sizce? Zor bir soru. Bunun artık önemli olmadığı ortaya çıktı, ancak bu özel durumda Ol kullandım, ancak Ul olarak değiştirdiğimde, görünüm aynı kalacak, çünkü her öğe için kendi başına ayarlandı. CSS değeri stil türü kurallarını listeleyin.

Aslında, Ul ve Ol yalnızca varsayılan davranışta farklılık gösterir (Ul işaretleri ve Ol sayıları). Ancak isterseniz, liste stili türüyle kolayca bir tür listeyi diğerine dönüştürebilirsiniz. Rakamları veya harfleri etiketlemek için kullanılan yazı tipi, LI etiketlerinin içeriği için tanımladığınız yazı tipiyle tamamen aynıdır. Örneğin, liste için yazı tipi rengini değiştirerek değiştireceğiz ve işaret rengi:

1. Değiştirilen metin rengi (liste stili-türü:alt-roman;renk:kırmızı) ve değişen işaretçi rengi

Aşağıdaki CSS özelliğine geçelim - liste-tarzı-konumu. Bununla, işaretleyici ile alanın konumunu (yerleşimini) ayarlayabilirsiniz. Yalnızca iki olası değeri vardır:

Şunlar. aslında, liste stili konumunda, alanı işaretleyicilerle nereye yerleştirmek istediğimizi belirtiriz - LI öğesinin dışında (dış) veya içinde (iç). Varsayılan olarak, işaretli alan sınırların dışına çıkarılır, yani. dışındaki değer kullanılır.

Bunu bir örnekle görelim. Listenin ilk elemanına özellikle list-style-position:inside yazacağım ve bundan ne çıkacağını göreceğiz:

1. Burada her şey varsayılandır.
2. İşaretleme alanının iç kısmı bu şekilde yerleştirilecektir. Bu öğedeki ikinci satırın ve işaretçinin aynı seviyede olduğuna dikkat edin.
3. Burada her şey varsayılandır.

Liste stili görüntü ve önceden hazırlanmış CSS kuralı

Sırada List-style-image var - işaretçi olarak kullanılacak bir resim belirlemenizi sağlar. Bu kural, varsayılan olarak Yok olarak ayarlanmıştır (yani, işaretleyici olarak hiçbir resim kullanılmaz), ancak daha sonra bu listede işaretçi olarak işlev görecek olan, içindeki resmin yolunu belirterek Url () işlevini yazabilirsiniz:

Şöyle görünebilir:

Liste stili-görüntü: url(https://website/images/list_star.png);

1. Burada her şey varsayılandır.
2. Bir görüntüyü işaretçi olarak kullanmak böyle görünebilir. Bu amaç için daha uygun bir görüntü seçebileceğiniz açıktır.
3. Örneğin, buradaki gibi.

Hatırladığınız gibi, ilgili makalede resimlerin satır içi öğelere atıfta bulunduğunu söylemiştim (aslında, tarayıcı için bu aynı harftir, ancak bazen çok büyüktür).

İşte resim ve işaretçinin (harfler veya sayılar) yerini alıyor. Aynı zamanda, işaretleyici olarak büyük bir resim eklerseniz (yukarıdaki örneğin ikinci öğesinde olduğu gibi) liste öğesinin bulunduğu satırın yüksekliği artacaktır.

Liste stili görüntü işlevinde her iki görüntüyü de belirtebilirsiniz. Görüntü yüklenmezse, varsayılan işaretleyici veya numaralandırma veya bu liste öğesi için liste stili türünde ne yazılırsa kullanılır.

Yukarıda açıklanan üç CSS kuralının hepsini tek bir kurala yazmak için, stil listeleri için önceden hazırlanmış olan Liste stilini kullanmak mümkün olacaktır. Değerlerin belirtildiği sıra önemli değildir. Liste stilinde belirtmediğiniz değerler, varsayılan değerlerle tarayıcı tarafından açıkça yorumlanacaktır.

Varsayılan değerleri nerede görebilirim? Evet, her şey aynı yerde - ilgilendiğiniz özelliklerin karşısındaki "Başlangıç ​​​​değeri" sütunundaki W3C doğrulayıcısının CSS spesifikasyonunda:

Liste tarzı bir hazır yapıdaki bireysel mülklerin değerleri boşluklarla ayrılır. Konumlar, daha önce de belirtildiği gibi önemli değildir:

Pratikte, bu şöyle görünebilir:

Liste stili:üst roma url'sinin içinde(https://site/images/list_star.png);

Değerleri herhangi bir sırayla ve herhangi bir sayıda (birden başlayarak) kullanabilirsiniz. Bu arada, listeler yardımıyla, menüler çoğunlukla web sitelerinde oluşturulur ve Liste stili özelliği, menü listelerinden işaretçileri kaldırmak için, orada tamamen gereksiz olan:

liste stili-türü:yok;

Liste stili:yok;

Sana iyi şanslar! Yakında blog sayfaları sitesinde görüşürüz

ilginizi çekebilir

CSS'de görüntüle (blok, yok, satır içi) - bir web sayfasındaki Html öğelerinin görüntülenme türünü ayarlayın nth-child sözde sınıfını kullanarak sitedeki tablo, liste ve diğer Html öğelerinin satırlarının arka plan rengi nasıl değiştirilir?
CSS'de yüzdür ve temizle - yerleşim araçlarını engelle
Fare imlecini değiştirmek için Z-endeksi ve CSS İmleç kuralı ile konumlandırma
Konum (mutlak, göreli ve sabit) - HTML öğelerini CSS'de konumlandırmanın yolları (sol, sağ, üst ve alt kurallar)
CSS ne içindir, basamaklı stil sayfaları nasıl bağlanır? html belgesi ve bu dilin temel sözdizimi
CSS özellikleri Html metin dekorasyonu için metin süsleme, dikey hizalama, metin hizalama, metin girintisi
CSS'de yazı tiplerini şekillendirmek için Yazı Tipi (Ağırlık, Aile, Boyut, Stil) ve Satır Yüksekliği kuralları
CSS'de arka plan (renk, konum, görüntü, tekrar, ek) - tümü Html öğelerinin arka plan rengini veya arka plan görüntüsünü ayarlamak için
CSS - nedir, basamaklı stil sayfalarının nasıl bağlandığı HTML Kodu Stil ve Bağlantı ile
Css'deki öncelikler ve önemli, seçicilerin kombinasyonu ve gruplandırılması, kullanıcı ve yazar stilleri nedeniyle artışları

Liste işaretçisi olarak hizmet veren bir görüntünün adresini ayarlar. Bu özellik devralınır, bu nedenle belirteci geri yüklemek için ayrı liste öğeleri için none değeri kullanılır.

kısa bilgi

Sözdizimi

liste-tarzı-görüntü: yok | url(<адрес>)

Bu bölümde, stil özelliklerini tanımlayan stil özelliklerini inceleyeceğiz. paragraf seçenekleri. Kelimenin en geniş anlamıyla paragraflar - hem başlıkları hem de listeler, adres etiketleri ve harika alıntılar. Genel olarak, Bölüm 2'de tartışılan ve metni yapılandırmaya yönelik blok düzeyindeki öğeler.

Son olarak, bir Web sayfası öğesinin (yani blok veya satır içi) görüntüsünü ayarlamamıza ve öğeyi görünmez yapmamıza olanak tanıyan çok özel iki stil özniteliğine bakacağız. Bu stil nitelikleri nadiren ve yalnızca belirli davranışlarla bağlantılı olarak kullanılır (bkz. Kısım III).

Metin çıktı seçenekleri

kontrol eden stil nitelikleriyle başlayacağız. metin çıktısı metni yapılandıran blok elemanlarda. Onlardan çok az var. Ve hepsi yalnızca öğeleri bloke etmek için geçerlidir.

Metin hizalama stili özelliği, metnin yatay hizalamasını belirtir:

metin hizalama: sol|sağ|orta|yasla|devralma

Burada bulunan değerler sol (sola hizalı; normal web tarayıcı davranışı), sağ (sağa hizalı), orta (ortalanmış) ve iki yana yaslıdır (tam hizalı).

Örnekler:

P (metin hizalama: iki yana yasla)
H1 ( metin hizalama: orta )

Metin girintisi stili özelliği, "kırmızı çizgi" için girintiyi ayarlar:

metin girintisi:<отступ "красной строки">

Mutlak ve bağıl (paragrafın genişliğine göre) girinti değerlerine burada izin verilir. Varsayılan olarak, "kırmızı çizgi"nin girintisi sıfırdır. Metin girintisi stili özniteliğinin bir devralma değerini desteklemediğini unutmayın.

Örnek:

P (metin girintisi: 5 mm)

Şimdi paragraflarda bir "kırmızı çizgi" olacak.

Listeler blok elemanları arasında öne çıkıyor. Temel olarak, ilk olarak, diğer blok öğelerini (ayrı paragraflar) içerdiğinden ve ikinci olarak, Web tarayıcısının kendisi tarafından yerleştirilen işaretçileri ve numaralandırmayı içerirler. Burada belirteçler ve numaralandırma hakkında veya daha doğrusu parametrelerini belirlemeye yönelik stil nitelikleri hakkında konuşacağız.

list-style-type stili özelliği, liste öğeleri için madde işaretleri veya numaralandırma türünü belirtir:

liste-stil-türü: disk|daire|kare|decimal|decimal-leading-zero|

alt-roman|üst-roman|alt-yunan|alt-alfa|alt-latin|

üst-alfa|üst-latin|ermenice|gürcü|hiçbiri|devralma

Gördüğünüz gibi, bu stil özelliğinin birçok kullanılabilir değeri var. Hem farklı işaretçi türlerini hem de farklı numaralandırma yollarını belirtirler.

Siyah daire şeklinde disk işaretçisi (madde işaretli listeler için olağan davranış).

Daire - hafif bir daire şeklinde bir işaretleyici.

Kare - kare şeklinde bir işaretleyici. Web tarayıcısına bağlı olarak açık veya koyu olabilir.

Ondalık - Arap rakamlarıyla numaralandırma (numaralı listeler için olağan davranış).

Ondalık-başlık-sıfır - Başında sıfır olmak üzere 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 - 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ıyla numaralandırma.

Gürcüce - geleneksel Gürcü rakamlarıyla numaralandırma.

Yok - İşaretleyici veya numaralandırma yok (liste olmayanlar için olağan davranış).

NOT ÜZERİNE

Biz sadece CSS 3'ün sağladığı liste-stil-tipi öznitelik değerlerine baktık. Ancak CSS 2, Web tarayıcıları tarafından hala desteklenen birkaç değer daha sağladı. Bunları https://developer.mozilla.org/en/CSS/list-style-type adresinde bulabilirsiniz.

list-style-type stili özelliği, her ikisine de ayarlanabilir. listeler, ve tek tek liste öğeleri için. İkinci durumda, öğelerin farklı madde işaretlerine veya numaralandırmaya sahip olduğu bir liste oluşturulur. Bazen bu işe yarayabilir.

Kutu işaretli madde işaretli listenin tanımı şu şekildedir:

UL (liste stili tipi: kare)

Ve Liste 9.1'de, madde işaretli listedeki öğelerden biri için aynı işaretçiyi belirledik.

list-style-image style özelliği, herhangi bir grafik resmi liste öğesi işaretçisi olarak ayarlamanıza (bir grafik işaretleyici oluşturma) olanak tanır. Bu durumda, varsa, liste stili türü stil özniteliğinin değeri yoksayılır:

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

Grafik işaretleyici dosyasının İnternet adresi, arka plan resim dosyasının İnternet adresiyle aynı biçimde belirtilir (bkz. Bölüm 8):

UL ( liste stili-görüntü: url(/markers/dot.gif))

None değeri, grafik işaretleyiciyi kaldırır ve basit, grafik olmayan bir işaretçi döndürür. Bu normal bir davranıştır.

Liste-tarzı-görüntü stili özniteliği, hem listeler için hem de ayrı liste öğeleri için ayarlanabilir.

list-style-position stili özniteliği, bir liste öğesindeki bir madde işaretinin veya sayının konumunu belirtmenize olanak tanır:

liste-stil-konumu: içeride|dışarıda|devralma

Kullanılabilir iki değer vardır:

İçeride - işaretçi veya numaralandırma, olduğu gibi, liste öğesinin içindedir, bunlar onun bir parçasıdır;

Dış - işaretçi veya numaralandırma noktanın dışında liste(bu normal davranıştır).

Bu stil özniteliğine neden ihtiyaç duyulduğu açık değildir, çünkü listelerİşaretleyicinin veya numaralandırmanın paragraflardan çıkarıldığı , daha iyi okunabilir. Pekala, CSS standardında olduğu için, öyle olsun...

Örnek:

OL (liste stili konumu: içeride)

İşaretçinin stilini, konumunu ve ayrıca liste işaretçisi olarak kullanılacak resmi aynı anda ayarlamanıza izin veren evrensel bir özellik.

kısa bilgi

LIST-STYLE özelliği ile

Mülk Liste biçimi liste öğeleri için tüm işaretçi stillerini ayarlayan kısaltılmış bir yazma özellikleri biçimidir. Bu özellikler hem numaralı hem de madde imli listeler için geçerlidir - ayrı ayrı değerlendirilmeleri gerekir. Kısaltılmış gösterim biçimi herhangi bir özel özellik içermeyebilir, ancak gösterim sırasına uyulmalıdır: işaretleyici türü - konumu - görüntüye giden yol.

Uygulama alanı*: listelerin öğeleri ve özellik değeri olan diğer öğeler Görüntüle dır-dir liste öğesi.

Liste stili türü

Özellik kümeleri işaretleyici türü listenin her bir öğ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.
Meydan- kare işaretleyici.
ondalık- Arapça sayılar: 1, 2, 3 ....
ondalık-başlık-sıfır- Sıfırdan başlayan Arapça sayılar: 01, 02, 03 ... 09.
lowel-roman- Küçük harflerle Romen rakamları.
üst roma- Büyük harflerle Romen rakamları.
lowel-latin- küçük Latin harfleri: a, b, c ....
üst latin— büyük latin harfleri: A, B, C ….
Ermeni- Ermeni numaralandırma.
gürcü- Gürcü numaralandırma.
Yok- iptal.
miras

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

liste-tarzı-konumu

Özellik, öğenin işaretçisinin konumunu belirtir. İşaretçi ya öğenin içindedir ya da dışındadır.

Değerler:

içeri- işaretçi liste öğesinin içinde bulunur.
dışarıda— işaretleyici metin bloğunun dışına taşınır.
miras- ana öğeden kalıtım.

Örnek, değerler arasındaki farkı açıkça göstermektedir. içeri ve dışarıdaözellikleri liste-tarzı-konumu:

Liste-tarzı-görüntü

Özellik, numaralandırılmış veya maddeli liste. İşaretleyici görüntüsünün konumu, özellik kullanılarak kontrol edilebilir. liste-tarzı-konumu.

Değerler:

URL- yol grafik dosyası.
Yok- örneğin ana öğe için işaretçi görüntüsünü iptal eder.
miras- ana öğeden kalıtım.

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

Örnekte, özelliğin yeteneklerini açıkça gösteren işaretçi olarak küçük bir resim kullandık. Liste-tarzı-görüntü: