✅ CSS3'teki listeler ve menüler

İçindekiler

NS web sayfalarımız için dinamik menüler oluşturun Bugün HTML5'te programlamak ve daha sonra ona kişisel bir görünüm ve his vermek çok yaygındır. CSS3 stil sayfalarına dayalı bir dil olduğu, yani sayfamıza şekil, renk ve yapı kazandıran kod, yazdığımız sayfanın dışında kodlanmış ayrı bir dosyaya giriyor.

Her şeyden önce, listelerin nasıl yapıldığını göreceğiz, çünkü sonuçta bir menü, onu daha şık hale getirmek için tasarlanmış bir listedir. Bu şekilde Html'de bir bağlantı listesi olarak yapılandırıldık ve daha sonra zaten kişiselleştirilmiş bir görünüm koyduk. CSS3.

Sıralı ve sırasız olmak üzere iki tür liste vardır. Daha sonra bir menüyü yapılandırmak için bir liste kullanacaksak, büyük olasılıkla sırasız bir liste kullanacağız, ancak seçenekleri göreceğiz.

Tamamen aynı şekilde yaratılmışlardır, tek fark, sipariş edilen için ayrılmış kelimede yatmaktadır.

HTML kodu aşağıdaki gibidir:


İlk eleman
ikinci eleman
Üçüncü eleman


İlk eleman
ikinci eleman
Üçüncü eleman

1. İlk eleman
2. İkinci unsur
3. Üçüncü unsur

Veya önce sıra olmadan tamamen aynı:

İlk eleman
ikinci eleman
Üçüncü eleman

HTML'de bir liste oluşturduğumuzda belirli ön biçimler vardır, yani belirli bir kenar boşluğu, yazı tipi rengi, madde işareti, dolgu vb. bu, listemizi oluştururken varsayılan olarak görünür. Kötü yanı görsel olarak çok iyi görünmüyor, iyi olan ise CSS sayesinde istediğimiz gibi değiştirmek son derece kolay.

Menümüze yerleştirebileceğimiz farklı vinyet türlerine bakarak başlayacağız. Varsayılan olarak listedeki her öğenin önünde siyah bir daire bulunur. Ancak dosyamızdan kareler, boş daireler veya bir resim koyabiliriz.

Madde işaretini CSS3'te değiştirecek kod şudur:

 #menu {liste stili-türü: kare;}

Örnek menüyü kullanarak kenar boşluğunu değiştirmek için bunu kullanmak kadar basittir. CSS3'teki kod:

 #menu {kenar boşluğu: 0 piksel;}

 #menu {kenar boşluğu: 0 piksel; dolgu: 2 piksel; }

CSS3 kodu

 #menu {kenarlık: 2 piksel;}

Kalınlığa ek olarak, bordür birçok olasılığı olan bir alandır, bir stil, bir renk, bir degrade seçebiliriz … ve bazı seçenekler göreceğiz.

Sınır-Tarzı
Kenar stilinden başlayarak, sınır tarzı, en çok kullanılan olasılıklar:

HiçbiriBunun yaptığı, kenarın kendisini kaldırmaktır. Bu varsayılan seçenektir, bu nedenle normalde menülerimiz için listeler oluşturduğumuzda, biz belirtmedikçe kenarlıklar görünmez.

SağlamBu, en çok kullanılabilecek kenardır. Siyah renkli, sürekli bir bordürdür.
GizlenmişO gizli, gizli oldukları için kenarları görselleştirmediğimiz başka bir seçenektir. Ancak, programlama amaçları için var. Kalın bir kenarlık görünmesini istemesek bile diğer komşu hücreler veya tablolarla kenarlıkları sınırlandırmak için kullanılır.
çıkıntıDiğerlerinden öne çıkmasını istiyorsak bu kenarı koyacağız. Kenarlığın, ekrandaki geri kalanın bir seviye üstüne yerleştirilmiş gibi görünmesini sağlar.
BaşlangıçBir önceki gibi, bu bir çıkıntı yapan kenardır, ancak bu, ekranın yüzeyinden, içinde taşıdığından bir seviye yukarıda gibi görünmüyor.
olukBu bordür stiline sahip sırttan farklı olarak, eleman diğerlerinin altına batmış gibi görünüyor.
iç metinGroove ile aynı şekilde, bu kenar çökmüş gibi görünmüyor ama aslında diğerlerinin bir seviye altında.
NoktalıBu stille, varsayılan olarak siyah olan noktalı bir çizgi ve boşluklardan oluşan bir kenarlık oluştururuz.
ÇiftSözcüğün dediği gibi, bir boşlukla ayrılmış iki sürekli siyah çizgiden oluşan çift kenarlıktır.

kesikliBu, noktalıya benzer özel bir kenarlık türüdür, ancak noktaların daha büyük çizgiler haline gelmesi, yani bir tür kesik çizgi olmasıdır.

Border'da olduğu gibi border-style'da da bir tarafın kenarlığını, hem üst limiti, hem alt limiti hem de tümünü tanımlamayı seçebiliriz. Sadece bir değer yazarsak tüm kenarlara konur ve bir yerine iki seçenek yazarsak birincisi üst ve alt kenarlar için ikincisi kenarlar içindir.

Şimdi bununla sınırı, boyutu ve stili tanımladık, ancak menü çok basit ve görsel olarak çok hoş değil. Varsayılan olarak oluşturuldukları için dikey menüler isteyebiliriz, ancak bunların yatay olmasını istiyorsak, listedeki her öğenin bir sonrakinin yanına yerleştirilmesi için float anahtar sözcüğünü eklememiz gerekir.

Bunu biraz daha ayrıntılı olarak açıklayacağım, "li" ile kodladığımız listenin her elemanı varsayılan olarak bir blok elemanının davranışına sahiptir, yani yerleştirildikten sonra bir satır sonu oluşturur ve başka bir elemanın yerleştirilmesini engeller. onun tarafında. Listemizin her elemanını bir öncekinin yanına yerleştirmek istiyorsak bu blok davranışını ortadan kaldırmalıyız.

Bunun için kod aşağıdaki gibi olacaktır:

 #menu {liste stili: yok; kenar boşluğu: 0 piksel; dolgu: 0; } #menu li {kenar boşluğu: 2 piksel; dolgu: 2 piksel; kenarlık: 2 piksel katı; yüzer: sol; }

yatay menü

Şimdi listemizin bir menü görevi görmesini ve bizi istediğimiz yere yönlendirmesini istiyorsak, elementlerimize bir link eklememiz gerekiyor. Bu çok basit. Html'deki kodumuza aşağıdakileri ekliyoruz:


İlk eleman
ikinci eleman
Üçüncü eleman

Sonunda görünüm için bazı seçenekleri göreceğiz.

Metin özellikleri
GenişlikSabit bir genişlik koymak istiyorsak. Örneğin genişlik: 100 piksel;
Metin-dekorasyonÖğemizin metninin bir şekilde dekore edilmesini istiyorsak. Birçok olasılık var, ancak en yaygın olanlardan bazıları:

altını çizmek: her şeyin altının çizilmesini istiyorsak
üst çizgi: alt çizgi ile aynı, tüm metne bir satır koyar, ancak bu sefer üstte altta değil.
goz kirpmak: Parlayan, aralıklı olarak ışık gibi yanıp sönen metinler oluşturun.
hat boyunca: Metnimizin üzerinin çizilmesini istiyorsak bu seçeneği yazacağız.
Yok: bu bir fazlalıktır, çünkü metin varsayılan olarak herhangi bir dekorasyon olmadan bu değerle gelir. Bununla birlikte, daha sonra göreceğimiz hover adlı bir kaynak kullanarak bir efekt kullandıktan sonra ilk seçeneğe dönmek istiyorsak bazen faydalı olabilir.

Metin hizalamaDaha sonra yön özelliği ile göreceğimiz metnin kendisi değil, blok elemanlarımızın içeriğinin yayınlanacağı yöndür, dikkatli olun. Seçenekler çok basit: soldan gitmesini istiyorsak sol, sağdan sola gitmesini istiyorsak sağ, metnin ortalanmasını istiyorsak orta ve metnin hizalanmasını istiyorsak iki yana yaslayın.

YönBu seçenek ile yazdığımız metnin yönünü belirleyeceğiz, bu durumda sadece iki seçenek var:

litre: tarayıcılarda varsayılan olarak görünendir, çünkü sağdan sola yazıldığı bazı diller dışında, soldan sağa yazmak normaldir, bu seçeneği tanımlayan şeydir.
rtl: örneğin Arapça metinler yazmak istiyorsak kullanacağımız sağdan sola metnin diğer olası yönlülüğüdür.

Metin girintisiGirinti veya tablolardan gelmesi, söz konusu kriterin blok elemanlarımızın ilk satırında ve ayrıca tablolarda kurulmasından sorumlu bir özelliktir. Üç seçenek vardır:

ölçüm
yüzde
miras

Onlarda yüzde kullanırsak, içinde bulunduğu elemanın genişliğine atıfta bulunacağız.
Ayrıca hepsinde css3, piksel, ems için var olan herhangi bir ölçü biriminin pozitif veya negatif rakamlarını kullanabiliriz …

Metin dönüştürmeBüyük ve küçük harfle ilgili olduğunu göreceğimiz metinle ilgili son özellik:

büyük harf kullanmak: bu seçenekle, her kelimenin sadece ilk harfi büyük harflerle gösterilecektir.
büyük harf: tüm metni tam büyük harflerle görüntüler.
küçük harf- Tüm metni küçük harfle görüntüler.
Yok: metni yazıldığı gibi bırakır. Varsayılan olarak gelen budur.

kelime aralığıDoğrudan metinle ilgilenmese de kelimeler arasında bıraktığımız boşlukta bunu yapar. Değerleri "normal" veya geçerli bir ölçü olabilir. Bir ölçü koyarsak, değeri varsayılan olarak gelen normal ölçüye eklenir.

Şimdi yazı tipinin özelliklerine geçiyoruz.

Yazı tipi özellikleri
Yazı tipiBu özellik, yazı tipiyle ilgili olanların en eksiksizidir ve kullanımı söz konusu olduğunda birkaç seçeneğe sahiptir. İlk olarak, "font-style", "font-variant" ve "Font-weight" değerlerinden bir, iki, üç veya hiçbiri ile başlayabilirsiniz.

Daha sonra, harfin boyutunu "font-size" ile isteğe bağlı olarak, ardından "line-height" ile verilen ve her zaman font ailesinin tipi "font-family" ile biten boşlukları koymamız gerekir. Son olarak, aşağıdaki değerlerden birini girmeniz gerekecektir:

altyazı- Düğmeler veya açılır listeler için, yani kontroller ve form alanları için.
Menü: açılır menüleri veya diğer menü türlerini yapılandıracaksak.
simge: simgelerin altında görüntülenen metinler için.
mesaj Kutusu- İletişim kutuları için, hata açılır pencereleri, bilgi açılır pencereleri vb.
durum-baA: pencere durum çubukları için.
küçük başlıkn - Küçük form alanları ve kontroller için.

Font özelliğinde henüz görmediğimiz ve aşağıda açıklayacağımız diğer bazı seçenekleri kullandık:

Yazı stiliOnunla tanımlayacağız yazı stili. Sahip olabileceği değerler "normal" yani varsayılan değerdir, eğer mektubumuzun italik yani italik olmasını istiyorsak "italik"; veya "eğik" eğik harfe sahip olmak istiyorsak, bu, italik olarak olduğu gibi hepsinin değil, yalnızca karakterlerin eğimli olduğu bir tür italiktir.

Yazı tipi varyantıkurmak için kullanacağız. yazı tipi çeşitleri ve yalnızca iki seçeneğimiz var, varsayılan olarak gelen "normal" ve küçük büyük harflerin küçük harflerle aynı boyutta görünmesini sağlayan küçük büyük harfler olarak da adlandırılan "küçük büyük harfler" varyantı.

Yazı tipi ağırlığıOnunla beri en çok kullanılan özelliklerden biridir. Harflerin kalınlığını kontrol edebiliriz (dikkatli olun, daha sonra göreceğimiz her harfin boyutu ile aynı değildir). Sayısal olarak konuşursak, 100'den 900'e kadar yüzlerce, yani 100, 200, 300, 400, 500, 600, 700, 800 ve 900 olmak üzere 9 seçeneğe sahiptir. 400'e eşit olan "normal" yazılı değerler de vardır. , 700'e tekabül eden ve kalın diyeceğimiz ve merakla yazı tipi stilinde değil burada görünen "kalın". Yazı tipinin sahip olduğu kalınlık sayısına bağlı olarak sayısal değerlere atanan "kalın" veya "daha hafif" ve bazen "orta" veya "ağır" gibi değerler de vardır.

Yazı BoyutuBu özellik ile eğer yazı tipi boyutunu kontrol edeceğiz. "Mutlak boyut", "göreceli boyut", "yüzde birimi" ve "ölçü birimi" olmak üzere dört değer mevcuttur. Bu özellikte en çok kullanılan em, ex, px,%, in, cm, mm, pt veya pc gibi css'de tanımlanmış birkaç mutlak ve göreli ölçü birimi vardır. Bu ölçülere ek olarak, en küçüğü için xx-small, en büyüğü için x-small, küçük, orta, büyük, x-large veya xx-large gibi çalışan ve kullanılabilecek bazı kelimeler vardır. Bu altı kelime, farklı html başlık etiketlerinin boyutlarına karşılık gelir.

ile

ve bunlar mutlak ölçü boyutlarıdır, bu nedenle tarayıcı veya ekran çözünürlüğünden bağımsız olarak her zaman aynı görünürler. "Daha küçük" ve "daha büyük" sözcükleri, onu içeren öğenin yazı tipi boyutuna bağlı olacak göreli ölçümler olarak da kullanılabilir.

Satır yüksekliğiMetin özelliklerinde zaten tanımlanmıştır.
Font ailesiYaygın olarak kullandığımız özellik yazı tipini veya yazı tipini seçmenizi sağlar. Önce yazı tipinin adını veya yazı tipini koyarız ve isteğe bağlı olarak tarayıcımızın veya sistemimizin ilkine sahip olmaması veya desteklememesi durumunda diğer yazı tipi adları tarafından takip edilebilir. Tarayıcımıza bağlı olduğundan varsayılan bir yazı tipi türü yoktur, ancak çok yaygın olanı "Times New Roman"dır. Times New Roman, Garamond, Georgia veya Cambria gibi bazı fontların yer aldığı bazı genel font tipi değerleri "serif" olabilir; "Sans-serif" ve türleri Verdana, Arial, Tahoma, Helvetica veya Futura. "Monospace" ve diğerleri arasında Courier New veya Monaco örnekleri. Ve Comic sans veya Impact türleriyle "fantezi". Elbette, aralarından seçim yapabileceğimiz daha birçok yazı tipi var.

Harf boşluğuBununla yapabiliriz harfler arasındaki boşluğu kontrol et, ve "normal" değerleri ve geçerli bir ölçü ile, metin özelliklerinin sözcük aralığı analoğuyla tamamen aynı şekilde çalışır.

RenkSonunda göreceğiz metnimize koymak istediğimiz rengin özelliği. Varsayılan olarak siyahtır. Rengi seçmenin birkaç yolu vardır, bunlardan biri 17 farklı renk kelimesinden geçer: aqua, siyah, kırmızı, sarı, mavi, fuşya, Yeşil, limon, turuncu, gri, bordo, zeytin, lacivert, mor , gümüş, deniz mavisi ve beyaz.

Başka bir seçenek de bir renk koymaktır. RGB yüzdesi, bu sadece kırmızı ®, yeşil (G) ve mavi (B) renklerine karşılık gelen üç yüzdeyi belirtmektir:

 renk: rgb (%22, %76, %14); (3 yüzde %100 vermek zorunda değildir)

Başka bir yol ise RGB ondalık bu, RGB yüzdesiyle tamamen aynı şekilde çalışır, ancak yüzde olarak üç değer koymak yerine ondalık değerler olarak koyulur: