Tanım listesini oluşturmak için hangi etiket kullanılır? HTML: Numaralandırılmış ve madde işaretli liste. HTML kodunda özel ve iç içe geçmiş listeler

Listeler günlük yaşamın bir parçasıdır. Yapılacaklar listesi ne yapıldığını tanımlar. Navigasyon rotaları adım adım yol tarifleri sunar. Tarifler bir malzeme listesi ve bir talimat listesi gerektirir. Listeler hemen hemen her yerde bulunur, dolayısıyla neden internette de popüler olduklarını anlamak kolaydır.

Bir web sitesinde bir liste kullanmak istediğimizde HTML, aralarından seçim yapabileceğimiz üç farklı tür sunar: madde işaretli, numaralı ve açıklama listesi. Hangi tür listenin kullanılacağı ve bir listenin kullanılıp kullanılmayacağı içeriğe ve onu görüntülemek için anlamsal olarak en uygun seçeneğe bağlıdır.

HTML'de bulunan üç farklı liste türüne ek olarak, bu listeleri CSS yoluyla şekillendirmenin birkaç yolu vardır. Örneğin liste için hangi madde işareti türünü belirleyeceğimizi seçebiliriz. İşaretçi bir kare, bir daire, bir sayı, bir harf olabilir veya muhtemelen hiçbiri olmayabilir. Ayrıca listenin dikey veya yatay olarak nasıl görüntüleneceğine de karar verebiliriz. Bu seçeneklerin tümü web sayfalarımızın şekillendirilmesinde önemli bir rol oynamaktadır.

Madde işaretli listeler

Madde işaretli veya sırasız liste, sırasının önemli olmadığı ilgili öğelerin listesidir. HTML'de madde işaretli liste oluşturmak, bir engelleme listesi öğesi kullanılarak yapılır

. Listedeki her bir öğe bir öğeyle işaretlenmiştir
• .

  Varsayılan olarak çoğu tarayıcı öğeye dikey kenar boşluğu ve sol dolgu ekler

  , ve her öğeden önce
  • tek renkli bir nokta koyar. Bu noktaya liste işaretçisi denir ve CSS kullanılarak değiştirilebilir.
    • Turuncu
    • Yeşil
    • Mavi

    Madde işaretli listeyi göster

    Numaralandırılmış listeler

    Numaralandırılmış veya sıralı öğe listesi

    Madde işaretli listeye çok benzer şekilde, bireysel madde işaretleri aynı şekilde oluşturulur. Listeler arasındaki temel fark, sıralı bir liste için öğelerin sunulma sırasının önemli olmasıdır.

    Sıra önemli olduğundan, numaralı listede varsayılan madde işareti olarak nokta yerine sayılar kullanılır.

    1. Kayısı Caddesi boyunca yürüyün
    2. Vinogradnaya'ya dönün

    Numaralandırılmış liste gösterimi

    Numaralandırılmış listelerin ayrıca başlangıç ​​ve tersine çevrilme gibi benzersiz nitelikleri de vardır.

    özniteliği başlat

    Start niteliği, numaralandırılmış listenin başlaması gereken sayıyı belirtir. Varsayılan olarak listeler 1'den başlar, ancak listenin 30'dan veya başka bir numaradan başlaması gereken durumlar da olabilir. Bir öğe üzerinde start niteliğini kullandığımızda

    , böylece numaralı listenin sayımının hangi numaradan başlaması gerektiğini doğru bir şekilde belirleyebiliriz.

    Start özelliği yalnızca tam sayı değerlerini kabul eder; ancak numaralandırılmış listeler, Romen rakamları gibi farklı numaralandırma sistemleri kullanabilir.

    30. Kayısı Caddesi boyunca yürüyün
    31. Vinogradnaya'ya dönün
    32. Gölgeli Sokakta Dur

    Başlangıç ​​özelliğinin gösterimi

    ters çevrilmiş özellik

    Bir öğeye eklendiğinde ters çevrilmiş nitelik

    listenin ters sırada görüntülenmesini sağlar. 1'den 5'e kadar numaralandırılmış beş öğeden oluşan liste tersine çevrilebilir ve 5'ten 1'e kadar numaralandırılabilir.

    Ters çevrilmiş öznitelik bir Boolean özniteliğidir ve bu nedenle herhangi bir değer almaz. Doğru ya da yanlış olabilir. False varsayılan değerdir; öğede ters çevrilmiş öznitelik göründüğünde değer doğru olur

    .
    1. Kayısı Caddesi boyunca yürüyün
    2. Vinogradnaya'ya dönün
    3. Gölgeli Sokakta Dur

    Tersine çevrilmiş özelliğin gösterimi

    değer özelliği

    Değer özelliği tek tek öğelere uygulanabilir

    1. Listedeki değerini değiştirmek için numaralandırılmış bir listede. Değer özelliğine sahip bir liste öğesinin altında görünen herhangi bir liste öğesinin sayısı buna göre yeniden hesaplanacaktır.

       Örnek olarak, eğer ikinci liste öğesi 9'a ayarlanmış bir değer niteliğine sahipse, bu liste öğesinin numarası sanki dokuzuncu sayıymış gibi çıktı olarak verilecektir. Sonraki tüm liste öğeleri 9'dan başlayarak numaralandırılacaktır.

       1. Kayısı Caddesi boyunca yürüyün
       9. Vinogradnaya'ya dönün
       10. Gölgeli Sokakta Dur

       Değer özelliği gösterimi

       Açıklama Listeleri

       Çevrimiçi olarak göreceğiniz başka bir liste türü (ancak madde işaretli veya numaralı listeler kadar sık ​​değil) açıklamalar listesidir. Bu tür listeler, örneğin bir sözlükte olduğu gibi, çeşitli terimleri ve bunların açıklamalarını tanımlamak için kullanılır.

       HTML'de bir açıklama listesi oluşturmak bir blok öğesi kullanılarak yapılır

       . Öğeyi kullanmak yerine

       Liste öğelerini işaretlemek için bir açıklama listesi iki blok öğesi gerektirir:

       dönem için ve

       Açıklama için.

       Bir açıklama listesi birbiri ardına birçok terim ve açıklama içerebilir. Ek olarak böyle bir liste, açıklama başına birden fazla terimin yanı sıra terim başına birden fazla açıklama içerebilir. Tek bir terimin birden fazla anlamı olabilir ve birden fazla açıklamaya tabi olabilir. Tersine, bir açıklama birden fazla terime uyabilir.

       Bir açıklama listesi öğesi eklerken

       elemana gitmeli

       . Terim ve hemen ardından gelen açıklama birbiriyle ilişkilidir. Bu nedenle bu elemanların sırası önemlidir.

       Varsayılan olarak öğe

       öğeler gibi dikey dolgu içerir

       Ve
       . Ayrıca eleman
       varsayılan olarak sol kenar boşluğunu içerir.
       çalışmalar
       Öğretilen konu hakkında özellikle kitaplar aracılığıyla bilgi edinmeye zaman ve dikkat ayırmak.
       proje
       Bir binanın, giysinin veya başka bir öğenin inşa edilmeden veya yapılmadan önce nasıl görüneceğini ve çalışacağını gösteren, sunulan bir plan veya çizim.
       Somut bir nesnede somutlaştırılmadan veya gerçekleştirilmeden önce mevcut hedefler, planlar veya niyetler.
       işletme
       İş
       Bir kişinin düzenli mesleği, mesleği veya zanaatı.
       Açıklama Listesi Gösterimi
       İç İçe Listeler
       Listeleri çok güçlü kılan özellik ise iç içe geçme özelliğidir. Her liste başka bir listenin içine yerleştirilebilir ve birden çok kez yuvalanabilir. Ancak listeleri sonsuza kadar iç içe yerleştirme yeteneği size bunu yapma özgürlüğünü vermez. Listeler özellikle en anlamsal anlamı korudukları yere ayrılmalıdır.
       Listeleri iç içe yerleştirmenin püf noktası, her listenin ve liste öğesinin nerede başlayıp nerede bittiğini bilmektir. Özellikle madde işaretli ve numaralı listelerden bahsedersek, doğrudan içeride görünebilen tek öğe
       Ve
       bir elementtir
       1. . Tekrar edelim; elementlerin doğrudan soyundan gelen tek element
          Ve
          , dır-dir
          1. .

             Ancak elemanın içinde

          2. herhangi bir öğe dahil olmak üzere standart bir öğe kümesi eklenebilir
             veya
             .

             Bir listeyi iç içe yerleştirmek için liste öğesini kapatmadan önce yeni bir liste başlatın. İç içe geçmiş liste tamamlanıp kapatıldığında, ekteki liste öğesini kapatın ve orijinal listeyle devam edin.

             1. Köpeği yürüt
             2. Çamaşırları katlamak
             3. Mağazaya gidin ve satın alın:
                • Süt
                • Ekmek
                • Peynir
             4. Çimleri biçmek
             5. Akşam yemeği pişir

             İç içe geçmiş listelerin gösterimi

             İç içe geçmiş listeler biraz kafa karıştırıcı olabileceğinden ve yanlış yapıldığında istenmeyen stilleri görüntüleyebileceğinden, onlara hızlıca bir göz atalım. Elementler

             Ve
             yalnızca öğeler içerebilir
             1. . Öğe
             2. istediğiniz herhangi bir normal öğeyi içerebilir. Ancak eleman
             3. her iki elementin de doğrudan soyundan olmalıdır
                , veya
                .

                Listeler diğer listelerin içine yerleştirildiğinde, işaretçilerinin yuvalamanın derinliğine bağlı olarak değişeceğini de belirtmekte fayda var. Önceki örnekte, numaralandırılmış bir listenin içine yerleştirilmiş madde işaretli listede işaretçi olarak nokta yerine daire kullanılır. Bu değişiklik, madde işaretli listenin numaralı listenin bir düzeyinde iç içe olması nedeniyle oluşur.

                Neyse ki, madde işaretlerinin herhangi bir düzeyde nasıl görüneceğini kontrol edebiliyoruz, buna daha sonra bakacağız.

                Stil Listesi Öğeleri

                Madde işaretli ve numaralandırılmış listeler, varsayılan olarak liste öğesi madde işaretlerini kullanır. Madde işaretli listelerde bunlar düz renkli noktalar olma eğilimindeyken, numaralandırılmış listelerde bunlar sayılar olma eğilimindedir. CSS kullanılarak bu işaretleyicilerin stili ve konumu özelleştirilebilir.

                liste stili türü özelliği

                List-style-type özelliği, liste öğesi işaretçisinin içeriğini ayarlamak için kullanılır. Mevcut değerler karelerden ve ondalık sayılardan Ermenice numaralandırmaya kadar değişir ve öğelere CSS stili eklenebilir

                ,
                veya
                1. .

                   List-style-type özelliğine ilişkin herhangi bir değer, madde işaretli veya numaralandırılmış bir listeye eklenebilir. Bunu aklınızda tutarak, madde işaretli listede numaralandırmayı, numaralı listede ise sayısal olmayan madde işaretlerini kullanabilirsiniz.

                   • Turuncu
                   • Yeşil
                   • Mavi

                   Ul ( liste stili türü: kare; )

                   List-style-type özelliğinin gösterimi

                   liste stili türü değerleri

                   Daha önce de belirtildiği gibi, list-style-type özelliği bir avuç farklı değer içerir. Aşağıdaki tablo bu değerleri ve bunlara karşılık gelen içerikleri göstermektedir.

                   Bir Görüntüyü Liste İşaretçisi Olarak Kullanma

                   List-style-type özelliğinin varsayılan değerlerinin yeterli olmadığı ve kendi liste işaretçimizi tanımlamak istediğimiz bir zaman gelebilir. Bu çoğunlukla her öğe için bir arka plan resmi yerleştirilerek yapılır.

                2. .

                   Süreç, herhangi bir varsayılan liste stili türü özellik değerinin kaldırılmasını ve öğeye bir arka plan görüntüsü ve kenar boşlukları eklenmesini içerir.

                3. .

                   Daha fazla ayrıntı - list-style-type özelliğinin none olarak ayarlanması mevcut liste işaretleyicilerini kaldıracaktır. Arka plan özelliği, arka plan resmini konumuyla birlikte ayarlayacak ve gerekirse tekrarlayacaktır. Ve padding özelliği metnin solunda arka plan resmi için boşluk sağlayacaktır.

                   • Turuncu
                   • Yeşil
                   • Mavi

                   Li ( arka plan: url("arrow.png") 0 50% tekrarlama yok; liste stili türü: yok; sol dolgu: 12 piksel; )

                   Bir Görüntüyü İşaretleyici Olarak Gösterme

                   liste stili konumu özelliği

                   Varsayılan olarak liste madde işaretleri öğedeki içeriğin soluna konumlandırılır

                4. . Bu konumlandırma stili, dış olarak tanımlanır; bu, tüm içeriğin liste işaretçisinin dışında doğrudan sağda görüneceği anlamına gelir. list-style-position özelliğiyle, external'ın varsayılan değerini inside veya inherit olarak değiştirebiliriz.

                   dışarıda liste işaretleyicisi öğenin soluna yerleştirilir

                5. ve hiçbir içeriğin bu işaretleyicinin altına akmasına izin vermeyin. Inside değeri (nadiren kullanılan ve görülebilen) liste işaretçisini öğenin ilk satırına yerleştirir
                6. ve gerekirse içeriğin işaretçinin etrafına sarılmasına olanak tanır.
                   • Kapkek...
                   • Yağmurlama...

                   Ul ( liste-stili-pozisyon: içeride; )

                   Liste stili konum özelliği gösterimi

                   Genel özellik listesi stili

                   Yakın zamanda tartıştığımız liste özellikleri, list-style-type ve list-style-position, tek bir genel özellik olan list-style'da birleştirilebilir. Bu özellikte liste özellik değerlerinden birini veya tamamını aynı anda kullanabiliriz. Bu değerlerin sırası şu şekilde olmalıdır: list-style-type ve ardından list-style-position.

                   Ul ( liste stili: içteki daire; ) ol ( liste stili: alt roman; )

                   Yatay liste ekranı

                   Bazen listeleri dikey yerine yatay olarak görüntülemek isteriz. Belki bir gezinme listesi oluşturmak için listeyi birkaç sütuna bölmek veya birkaç liste öğesini tek bir satıra yerleştirmek istiyoruz. İçeriğe ve istenen görünüme bağlı olarak, listeleri tek bir satır halinde görüntülemenin birkaç yolu vardır; örneğin öğelerin görüntüleme özelliği değerini alarak

                7. inline veya inline-block gibi veya float özelliği aracılığıyla.

                   Liste ekranı

                   Bir listeyi tek satırda görüntülemenin en hızlı yolu, elemanları

                8. inline veya inline-block değerine sahip display özelliği. Bu, tüm unsurları koyacaktır
                9. her liste öğesi arasında eşit aralıklarla tek satırda.

                   Elemanlar arasındaki boşluklar ise

                10. sorunlara neden oluyorsa, Ders 5, İçeriği Konumlandırma'da tartıştığımız tekniklerin aynısı kullanılarak kaldırılabilirler.

                    Çok daha sık olarak satır içi değer yerine satır içi blok değerini kullanacağız. Satır içi blok değeri, öğelere dikey dolgu ve başka alan eklemeyi kolaylaştırır

                11. , satır içi değer ise bunu yapmaz.

                    display özelliğinin değeri inline veya inline-block olarak değiştirildiğinde, nokta, sayı veya başka bir liste işaretçisi kaldırılır.

                    • Turuncu
                    • Yeşil
                    • Mavi

                    Li ( görüntü: satır içi blok; kenar boşluğu: 0 10 piksel; )

                    Satır içi bloklu bir listenin gösterilmesi

                    Kayan noktalı listeler

                    Görüntüleme özelliğini satır içi veya satır içi blok olarak değiştirmek hızlıdır ancak liste işaretçilerini kaldırır. İhtiyaç duyulursa her öğeye bir kayan nokta eklemek

                12. display özelliğini değiştirmekten daha iyi bir seçenektir.

                    Tüm elemanlar için kurulum

                13. left gibi float özellikleri tüm elemanları yatay olarak hizalar
                14. aralarında hiçbir boşluk kalmayacak şekilde doğrudan yan yana. Float'ı kullandığımızda
                15. , liste işaretçisi varsayılan olarak görüntülenir ve öğenin üstüne konumlandırılır
                16. onun yanında. Liste işaretçisinin diğer öğelerin üstünde görünmesini önlemek için
                17. yatay kenar boşluğu veya dolgu eklenmelidir.
                    • Turuncu
                    • Yeşil
                    • Mavi

                    Li ( kayan nokta: sol; kenar boşluğu: 0 20 piksel; )

                    Floatlı bir listenin gösterimi

                    Tüm kayan öğelerde olduğu gibi bu da sayfanın akışını bozar. Kayan noktayı temizlemeyi ve sayfayı normal akışa döndürmeyi unutmamalıyız - en yaygın yöntem clearfix'tir.

                    Gezinme listesi örneği

                    Sık sık sırasız listeler kullanan gezinme menüleri tasarlıyor ve buluyoruz. Bu listeler genellikle daha önce bahsedilen iki yöntemden biri kullanılarak yatay olarak düzenlenir. Burada, örneğin, sırasız bir liste kullanılarak düzenlenmiş yatay bir gezinme menüsü yer almaktadır.

                18. satır içi blok olarak görüntülenir.

                    Navigasyon ul ( font: kalın 11px "Helvetica Neue", Helvetica, Arial, sans-serif; kenar boşluğu: 0; dolgu: 0; text-transform: büyük harf; ) .navigation li ( display: inline-block; ) .navigation a ( arka plan: #395870; arka plan: doğrusal degrade(#49708f, #293f50); sağ kenarlık: 1 piksel katı rgba(0, 0, 0, .3); renk: #fff; dolgu: 12 piksel 20 piksel; metin dekorasyonu: yok; ) .navigation a:hover ( arka plan: #314b60; box-shadow: iç metin 0 0 10px 1px rgba(0, 0, 0, .3); ) .navigation li:first-child a ( border-radius: 4px 0 0 4px; ) .navigation li:son-çocuk a ( sağ kenarlık: 0; kenarlık yarıçapı: 0 4px 4px 0; )

                    Gezinme Listesi Gösterimi

                    Pratikte

                    Artık HTML ve CSS'de nasıl liste oluşturulacağını bildiğimize göre, Stiller Konferansı sitemize bir göz atalım ve listeleri nerede kullanabileceğimizi görelim.

                    Artık öğelerdeki gezinme menüleri

                    Ve