Yatay çizgiler
Yayınlanan: 2021-09-01HTML sayfalarınızın daha çarpıcı ve iyi yapılandırılmış görünmesini sağlamanın birçok yolu vardır. Daha spesifik olarak, yatay bir çizgi, sitenizin içeriğini daha dengeli, daha net ve göz atılması daha kolay hale getirmede özel bir rol oynayabilir. Web sitelerimizde bazı büyük değişiklikler yapmaya karar verdiğimizde, çizgiler gibi küçük şeyler fark yaratabilir. Bu tür küçük şeyler sitenizin mesajını daha kapsamlı hale getirir. Ayrıca, web kaynağınızın görsel çekiciliğini ve hedef kitlenizin verilerinizi algılama şeklini değiştirebilirler.
Ancak, web sayfanıza uyacak ve sayfanızda manipüle ettiğiniz alana daha iyi hakim olmanızı sağlayacak özelleştirilmiş çizgiler de oluşturabilirsiniz. Bununla birlikte, HTML sayfalarınızdaki yatay çizgileri nasıl özelleştireceğinize daha yakından bakalım.Yatay çizgi, web sayfanızın dekorasyonu olarak kullanılan bir HTML öğesidir. Bununla birlikte, aşağıdakiler gibi bir dizi başka amaç için de kullanışlı olabilir:
- İçeriğinizin farklı parçalarını görsel olarak bölen ve bir fikrin bitip diğerinin başladığını vurgulayan bir ayırıcı.
- Bir web sayfasının bazı anlamlı bölümlerine vurgu yapan bir vurgulayıcı.
- Yatay bir çizgi, bir web sitesinde çok çeşitli amaçlara ulaşmanın en popüler ve en kolay yollarından biri olarak kabul edilir. İlk bakışta basit gibi görünse de, özel gereksinimlerinize göre ayarlayabileceğiniz çok işlevli bir unsurdur. Web sayfanızın HTML kodundaki basit değişiklikleri kullanarak, yatay çizginin aşağıdaki özelliklerini ayarlayabilirsiniz:
Uzunluk;
Genişlik;
Renk;
Hizalama.
Ayrıca yatay çizginin blok elemanları ifade ettiğini belirtmekte fayda var. Bu, bir web sayfasında ayrı bir satıra yerleştirildiği ve satırın yanına eklediğiniz metnin altına yerleştirileceği anlamına gelir.
Yatay çizgiler, sayfanızı farklı bölümlere ayırmada çok kullanışlıdır, basit bir yatay çizgi eklemek için < hr > yazmanız yeterlidir ve şunu elde edersiniz:
Yatay Çizgi Nasıl Oluşturulur
Basit bir < hr > etiketi kullanarak bir satır ayarlayabilirsiniz. "Yatay Kural"ın kısaltmasıdır ve klasik harici parametreleri ayarlar. Onu diğerlerinden ayıran şey, bir bitiş etiketine ihtiyaç duymaması ve kendi başına var olabilmesidir. Etiketteki ek değerleri kullanarak bir öğenin dış özelliklerini değiştirebilirsiniz:
Şuna benziyor. Örneğin, 100 piksellik bir uzunluk istiyorsak, şöyle bir etiket belirleriz: hr width = "100.
Hizalama.
Çizgiyi sol veya sağ kenarlarda ve ayrıca ortada hizalayabilirsiniz. Bu özellik, tam sayfa bir satır hizalanamayacağından, genişlik parametresini önceden belirlediyseniz geçerlidir. Hizalama için, "hizalama" etiketinde ek bir nitelik belirleyin ve buna bir yön ekleyin: merkez - merkez için, sol için - sol için ve sağ için - sağa hizalama için. Bu durumda, bitmiş etiket şöyle görünecektir: 150 piksel uzunluğunda yatay bir çizgi için merkez hizalamasını ayarlamamız gerekirse, bitmiş etiket şöyle görünecektir: hr align = "center" width = " 150". Nitelik uzunluk ölçüsü genişliğine bağlı olsa bile, hizalama ölçüsü olan "hizalama"nın 1. konuma yerleştirildiğini unutmayın.Genişlik.
İsteğe bağlı olarak, kalın veya ince bir alt çizgi oluşturarak genişliği de belirleyebilirsiniz. Bu kriter hiçbir şeye bağlı değildir ve uzunluk veya hizalama belirtilmeden bağımsız olarak kullanılabilir. Bunun için etiketteki size niteliğini ve piksel cinsinden istenen genişliğe eşit sayısal bir değer kullanırız. Numara, boyut özelliğinden ve "=" simgesinden sonra tırnak içinde belirtilir.
Bu nedenle, 15 piksel genişliğinde bir satır oluşturmamız gerekirse, şu etiketi oluşturmamız gerekir: hr size = "15".
Renk.
Ayrıca bağımsız bir gösterge olarak ayarlanır. Bunu değiştirmek için color niteliğini renk adıyla birlikte kod şeklinde veya İngilizce olarak kullanın. Renk, "=" sembolünden sonra tırnak içinde belirtilir.
Böylece, standart bir beyaz çizgi için etiket iki şekilde yazılabilir: hr color = "#FFFFFF" veya hr color = "white"
Siyah, # 000000 kodu kullanılarak oluşturulabilir.
Renkli yatay çizgi nasıl yapılır?
Yatay çizgiler, bir metin bloğunu diğerinden ayırmak için iyidir. Üstte ve altta yatay çizgiler bulunan küçük metin, okuyucuya sıradan metinden daha fazla dikkat çeker.
< hr > etiketini kullanarak, görünümü kullanılan niteliklere ve tarayıcıya bağlı olan yatay bir çizgi çizebilirsiniz. Etiket, blok öğelerine atıfta bulunur, bu nedenle satır her zaman yeni bir satırda başlar ve bundan sonra tüm öğeler bir sonraki satırda görüntülenir. < hr > etiketinin birçok özelliği sayesinde, bu etiket aracılığıyla oluşturulan satırın işlenmesi kolaydır. Stillerin gücüyle birleştiğinde, belgenize bir satır eklemek çocuk oyuncağıdır.
Varsayılan olarak, çizgi gri renkte ve hacim efektiyle görüntülenir. Bu tür bir çizgi her zaman sitenin tasarımına uymaz, bu nedenle geliştiricilerin çizginin rengini ve diğer parametrelerini stiller yoluyla değiştirme arzusu anlaşılabilir. Ancak, tarayıcılar bu konuda belirsizdir, bu nedenle aynı anda birkaç stil özelliğini kullanmanız gerekecektir. Özellikle, Internet Explorer'ın eski sürümleri, çizgi rengi için color özelliğini kullanırken, diğer tarayıcılar bir arka plan rengi kullanır. Ancak hepsi bu kadar değil, bu durumda sıfır dışında bir çizgi kalınlığı (yükseklik özelliği) belirttiğinizden ve border özelliğini yok olarak ayarlayarak çizginin etrafındaki kenarlığı kaldırdığınızdan emin olun. Saat seçici için tüm özellikleri bir araya getirerek, popüler tarayıcılar için evrensel bir çözüm elde ediyoruz.
< ! DOCTYPE html > < html > < head > < meta karakter kümesi = "utf-8" > < title> Yatay çizgi rengi </title > < style > hr { border: none; / * Kenarlığı kaldırın * / background-color: red; / * Çizgi rengi * / renk: kırmızı; / * IE6-7 için çizgi rengi * / yükseklik: 2 piksel; / * Çizgi genişliği * / } < /style > < /head > < body > < sa > < p > Metin dizesi < /p > < sa > < /body > < /html >Örnekler:
Bu:
< hr color="#c7c34c" size="2" width="50%" >şunu verir:
Renk: çizginin rengi:
< hr color="#c7c34c" size="2" width="50%" >Boyut: Piksel olarak ifade edilen Çizginin Yüksekliği:
< hr size="x" >Genişlik: Yüzde (%) veya piksel olarak ifade edilen çizginin genişliği (benim örneğimde orijinal boyutun %50'sidir):
< hr width="x%"> veya < hr width="x" >Daha ileri:
Bu:
< hr width="400" color="#000000" size="4" >verir:
Bu durumda stili kullandık:
Kenarlık genişliği 3 pikseldir (3 piksel)
noktalı
Temel renk siyah : #000000
Mavi renkli noktalar: #0099CC
Hala gerekirse daha fazlasını açıklamak için son bir örnek ;):
Bu
< hr width="400" color="#FFFFFF" size="6" >verir:
Bu durumda hemen yukarıda:
Kenarlık genişliği 2 pikseldir (2 piksel)
kesikli
Temel renk beyazdır : #FFFFFF
Gümüş renkli tireler: #C0C0C0
Olası stiller şunlardır:
-noktalı
-kesikli
-sağlam
-çift
-oluk
-başlangıç
-inset
-çıkıntı
Yatay çizgiler hakkında söyleyeceklerim bu kadar!