Web sitelerinize yatay, ayırıcı stilde çizgiler eklemek için bir seçenek, bu satırların görüntü dosyalarını siteye eklemeyi içerir. ancak bu, tarayıcınızın olumsuz bir etkisi olabilecek bu dosyaları almasını ve yüklemesini gerektirir. üzerinde site performansı. Ayrıca CSS eklenecek border özelliği sınırlar bir öğenin üstünde veya altında çizgiler gibi davranarak ayırıcı çizginizi etkili bir şekilde oluşturur.
Veya—daha iyisi—kullanın HTML yatay kural için eleman.
Yatay Kural Öğesi
Yatay kural çizgilerinin varsayılan görünümü ideal değil. Daha güzel görünmelerini sağlamak için, bu öğelerin görsel görünümünü sitenizin nasıl görünmesini istediğinizle uyumlu olacak şekilde ayarlamak üzere CSS ekleyin.
Temel bir İK etiketi, tarayıcının onu görüntülemek istediği şekilde görüntüler. Modern tarayıcılar tipik olarak, çizgiyi oluşturmak için yüzde 100 genişliğe, 2 piksel yüksekliğe ve siyah bir 3B kenarlığa sahip stilsiz İK etiketleri görüntüler.
Genişlik ve Yükseklik Tarayıcılar Arasında Tutarlı
Web tarayıcılarında tutarlı olan tek stiller, Genişlik ve stiller. Bunlar hattın ne kadar büyük olacağını tanımlar. Genişliği ve yüksekliği tanımlamazsanız, varsayılan genişlik yüzde 100 ve varsayılan yükseklik 2 pikseldir.
Bu örnekte genişlik, ana öğenin yüzde 50'sidir (aşağıdaki bu örneklerin hepsinin satır içi stilleri içerdiğine dikkat edin. Bir üretim ortamında, bu stiller aslında tüm sayfalarınızda yönetim kolaylığı için harici bir stil sayfasına yazılır):
style="width: %50;">
Ve bu örnekte yükseklik 2em'dir:
style="yükseklik: 2em;">
Sınırları Değiştirmek Zor Olabilir
Modern tarayıcılarda tarayıcı, sınırı ayarlayarak çizgiyi oluşturur. Bu nedenle, style özelliği ile kenarlığı kaldırırsanız, satır sayfada kaybolacaktır. Gördüğünüz gibi (pekala, çizgiler görünmez olacağından hiçbir şey görmeyeceksiniz) bu örnekte:
style="border: yok;">
Kenarlık boyutunu, rengini ve stilini ayarlamak, çizginin farklı görünmesini sağlar ve tüm modern tarayıcılarda aynı etkiye sahiptir. Örneğin, bu gösterimde kenarlık kırmızı, kesik çizgili ve 1 piksel genişliğindedir:
style="border: 1px kesikli #000;">
Arka Plan Resmiyle Dekoratif Bir Çizgi Yapın
Bir renk yerine, yatay kuralınız için bir arka plan resmi tanımlayın, böylece tam olarak istediğiniz gibi görünecek, ancak yine de işaretlemenizde anlamsal olarak görüntülenecektir. Bu örnekte üç dalgalı çizgiden oluşan bir görüntü kullandık. olarak ayarlayarak arka plan görüntüsü tekrar olmadan, neredeyse kitaplarda gördüğünüz gibi görünen içerikte bir kesinti yaratır:
style="yükseklik: 20 piksel; arka plan: #fff url (aa010307.gif) tekrarsız kaydırma merkezi; kenarlık: yok;">
İK Unsurlarını Dönüştürmek
CSS3 ile ayrıca çizgilerinizi daha ilgi çekici hale getirebilirsiniz. İK unsuru geleneksel olarak bir yatay ancak CSS transform özelliğiyle görünümlerini değiştirebilirsiniz. İK öğesinde favori bir dönüşüm, dönüşü değiştirmektir.
İK öğenizi biraz çapraz olacak şekilde döndürün:
saat {
-moz-dönüşüm: döndür (10 derece);
-webkit-dönüşüm: döndürme (10 derece);
-o-dönüşüm: döndür (10 derece);
-ms-dönüşüm: döndür (10 derece);
dönüştürmek: döndürmek (10 derece);
}
Veya tamamen dikey olacak şekilde döndürebilirsiniz:
saat {
-moz-dönüşüm: döndürme (90 derece);
-webkit-dönüşüm: döndürme (90 derece);
-o-dönüşüm: döndür (90 derece);
-ms-dönüşüm: döndür (90 derece);
dönüştürmek: döndürmek (90 derece);
}
Bu teknik, HR'yi belgedeki mevcut konumuna göre döndürür, bu nedenle istediğiniz yere ulaşmak için konumlandırmayı ayarlamanız gerekebilir. Bir tasarıma dikey çizgiler eklemek için bunu kullanmanız önerilmez, ancak ilginç bir efekttir.
Sayfalarınıza Satır Getirmenin Başka Bir Yolu
Bazı insanların İK öğesini kullanmak yerine yaptığı bir şey, diğer öğelerin sınırlarına güvenmektir. Ancak bazen bir İK, sınırlar oluşturmaya çalışmaktan çok daha kullanışlı ve kullanımı daha kolaydır. Bazı tarayıcıların kutu modeli sorunları, kenarlık oluşturmayı daha da zorlaştırabilir.