CSS Kullanarak Bağlantılara Nasıl Stil Verilir: Ayrıntılı Başlangıç ​​Eğitimi

Bu eğitimde, CSS ile web bağlantılarına nasıl stil verileceği hakkında konuşacağız. Bağlantılar, herhangi bir web sitesinin merkezi bir parçasıdır. Ziyaretçileri diğer bölümlerine yönlendirmenize, yaptığınız noktaların altını çizmek için kaynaklara başvurmanıza, okuyucuların daha alakalı blog gönderilerini keşfetmesine yardımcı olmanıza ve daha fazlasını sağlar.

Tasarımlarını nasıl değiştireceğinizi öğrenmek, bunların bağlantı olarak tanındığından ve web sitenizin geri kalanına uyduğundan emin olmanızı sağlar. CSS bunun için birçok farklı yol ve özellik sunar, bu yüzden bunları tek tek gözden geçirelim.

Bağlantı Standartları ve Varsayılan Bağlantı Stili

Bağlantılarınızın tasarımında nasıl değişiklik yapacağınıza geçmeden önce, onların makyajını anlayalım. HTML'de bir bağlantı öğesi şöyle görünür:

 <a href="https://torquemag.io/">TorqueMag</a>

Gördüğünüz gibi, birkaç bölümden oluşur:

• <a> – Bu, bir bağlantı öğesi oluşturma operatörüdür. Neden a ? Çünkü HTML'de bağlantılara bağlantı etiketleri de denir.
• href="" – Çift tırnak içindeki herhangi bir şey, bu bağlantının işaret ettiği yerdir. Tıklayan birinin ulaşacağı adrestir.
• TorqueMag – Bu, sayfada görünen bağlantı metnidir, örneğin bunun gibi (tıklamayın, bu bağlantılar hiçbir yere çıkmaz).
• </a> – Bağlantı öğesini kapatan ve tarayıcıya bağlantı metninin burada bittiğini söyleyen kısımlar.

Buraya kadar çok kolay.

Varsayılan Olarak Hangi Bağlantı Gibi Görünür

Bu tür bir bağlantının sayfada nasıl göründüğüne baktığınızda ilginç hale geliyor. Muhtemelen daha önce görmüşsünüzdür.

Bir HTML belgesindeki herhangi bir eski bağlantıyı bildirir ve herhangi bir stil bilgisi sağlamazsanız, varsayılan stili alır:

1. Bağlantı metni mavidir ve bağlantının altı çizilidir.
2. Farenizle üzerine geldiğinizde, imleç küçük bir el simgesine dönüşür.
3. Tıkladığınızda, bir saniye kırmızıya döner.
4. Bağlantıyı ziyaret ettiğinizde rengi mora dönecektir.
5. Klavyenizdeki tabulator tuşu ile bağlantıya gittiğinizde, çevresinde mavi bir çerçeve olacaktır.

Bu standartlar İnternet'in ilk zamanlarında oluşturuldu ve 90'lardan bu yana pek değişmedi. Komik olan şu ki, bunu bilinçli olarak hiç düşünmemiş olsanız bile, bir düzeyde muhtemelen yukarıdakilerin çoğunun sadece internette sörf yaparak farkındaydınız.

Bağlantı Durumlarını Öğrenmek

Yukarıdan da açıkça anlaşılan bir şey, bağlantıların nasıl göründüklerini etkileyen farklı durumlara sahip olmasıdır. Bunları, bireysel stillerini etkilemenize izin veren farklı CSS sözde sınıflarıyla hedefleyebilirsiniz. Bunlar:

• a – Bu, yukarıda bahsedilen bağlantı etiketidir. Tüm aşamalardaki tüm bağlantıları hedefler.
• a:link – Normal, ziyaret edilmemiş bağlantı için. Teknik terimlerle, :link , href özniteliğine sahip tüm bağlantı etiketlerini hedefler. Aslında çok fazla kullanılmamaktadır. Bir href özniteliği olmayan bağlantı etiketleri oldukça nadir olduğundan, çoğu zaman bu tür bir farklılaştırmaya gerek olmadığı için birçok kişi yalnızca a 'yi kullanır.
• a:visited – Geçerli kullanıcının daha önce ziyaret ettiği, yani tarayıcının geçmişinde bulunduğu bir bağlantıyı tanımlar.
• a:hover – Kullanıcı fare imlecini bir bağlantının üzerine getirdiğinde görünen stili hedefler.
• a:active – Bir bağlantı tıklaması sırasında kısaca görünen stil.
• a:focus – Odaklanan bir bağlantı, örneğin bir kullanıcının sekme tuşunu kullanarak gezindiği. hover ve focus genellikle birlikte şekillendirilir.

Unutulmaması gereken nokta, birden fazla bağlantı durumu için stili aynı anda değiştirirken, bunu aşağıdaki sırayla yapmanız gerektiğidir.

1. a
2. a:link
3. a:visited
4. a:focus
5. a:hover
6. a:active

Bağlantılar için stil oluşturma durumları birbirinin üzerine inşa edilir ve basamaklar halinde basamaklanır. Bu nedenle, amaçlandığı gibi çalıştıklarından emin olmak için sıra önemlidir.

Kullanıcı Beklentilerini Karşılamak

CSS aracılığıyla bağlantı stilinde nasıl değişiklik yapabileceğinize geçmeden önceki son nokta, kullanıcı beklentileri hakkında konuşmaktır. Varsayılan bağlantıları büyük olasılıkla bağlantı olarak kolayca tanımanızın nedeni, belirli varsayılanların çok uzun süredir kullanıcı olarak bize kök salmış olmasıdır.

Sonuç olarak, biz ve diğer herkes, bağlantıların nasıl göründüğü konusunda çok net beklentilere sahibiz. Karşılanmadığı takdirde, insanların bağlantıları oldukları gibi tanımasını zorlaştırabilecek beklentiler. Bu nedenle, web sitenizin tasarımı üzerinde çalışırken, bu beklentilere yakın durmanız iyi olur.

Pratik anlamda bu şu anlama gelir:

• Bağlantıların bir şekilde vurgulandığından emin olun. Bağlantıları sayfada öne çıkardığınız sürece renkler veya alt çizgi sorun olmaz. İtalik veya kalın yazı gibi şeylerden kaçının.
• Fareyle üzerine gelindiğinde ve daha az ölçüde tıklandığında bağlantıların değişmesini sağlayarak geri bildirim sağlayın ( a:active , hatırladınız mı?). Etkileşimli bir öğeyi belirtmek için imlecin bir el sembolüne dönüşmesiyle de uğraşmamalısınız.

Aşağıda, yukarıdakilerin tümünü nasıl değiştireceğinizi anlatacağız. Ancak, kullanıcılarınızı hayal kırıklığına uğratmamak için bunu ölçülü bir şekilde yapmanız gerektiğini unutmayın.

Bağlantı Metninizin Stilini CSS ile Nasıl Değiştirirsiniz?

İlk önce bağlantının metin kısmını nasıl değiştireceğimizden bahsedelim, çünkü onun etini oluşturan şey bu.

Bağlantı Metni Rengini Değiştirme

Bu bölümde ele aldığımız şeyler, CSS ile renklerin nasıl bildirileceği konusundaki makalemize nispeten benzer. Yani, gerçekten ayrıntılara girmek istiyorsanız, o yazıya da bir göz atmanızı tavsiye ederim.

Bağlantı metninin rengini birkaç farklı şekilde değiştirebilirsiniz: renkli sözcükler ve HEX kodu, rgb() / rgba() , hsl() / hsla() vb. gibi farklı renk gösterim sistemleri.

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

Yukarıdakilerin sayfada nasıl göründüğü aşağıda açıklanmıştır:

En yaygın olarak, HEX veya rgb() gibi bir şey kullanacaksınız. Basit test senaryoları dışında renk adlarının kullanılması oldukça nadirdir.

Hangi renk sistemini kullanacağınız, tarayıcı uyumluluğu veya şeffaflığa ihtiyacınız olup olmadığı gibi farklı faktörlere bağlıdır. Ancak, görebileceğiniz gibi, bağlantılara renk atamak color özelliği aracılığıyla oldukça basittir ve diğer tüm bağlantı durumları için aynı şekilde çalışır. Sonuç olarak, metin rengini :hover veya :focus için de kolayca değiştirebilirsiniz.

Arka Plan Rengini Ayarla

Metin rengini değiştirmenin yanı sıra, bağlantılarınızın arka plan rengini ve farklı durumlarını da değiştirebilirsiniz. Bu, background-color özelliğini kullanmak kadar kolaydır.

İşte yukarıdaki örnek için işaretleme:

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

Diğer Metin Stili Seçenekleri

Bağlantılar metinden başka bir şey olmadığı için, CSS'deki metni biçimlendirmenin diğer tüm yolları onlar için de geçerlidir. Bu, bağlantılara ve farklı durumlarına başka özellikler atayabilir ve kullanıcılar üzerlerine geldiğinde yazı tipi boyutunu, yazı tipi ailelerini veya diğer şeyleri değiştirmelerini sağlayabilirsiniz.

Bu, belirli tasarımlar için anlamlı olabilir, ancak bunlar, CSS aracılığıyla bağlantıları şekillendirmenin daha az yaygın yollarıdır.

İşte yukarıdaki etkileri elde etmek için işaretleme:

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

Altı çizili çalışma

Başlangıçta öğrendiğimiz gibi, varsayılan olarak bağlantıların altı çizilir. Bundan kurtulmak istiyorsanız, text-decoration: none; ( text-decoration özelliğinin en yaygın kullanımı budur).

 a { text-decoration: none; }

Bazı insanlar, normal bağlantı için değil, yalnızca fareyle üzerine gelindiğinde alt çizgi eklemeyi tercih eder. Bunu yapmak da kolaydır.

 a { text-decoration: none; } a:hover { text-decoration: underline; }

Ayrıca border: bottom; text-decoration: underline; bağlantılarınızın altına bir satır eklemek için. İnsanlar bunu kullanıyordu çünkü daha iyi stil seçenekleri sunuyordu. Ancak bu günlerde standart underline yöntem için daha fazla özelleştirmeye izin veren yeni özelliklerimiz var.

Örneğin, text-underline-offset , text-decoration kullanırken metin ile altındaki çizgi arasındaki mesafeyi kontrol etmenizi sağlar. text-decoration-thickness , özel bir satır genişliği ayarlamanıza olanak tanır. Yani artık border yoluna gitmek eskisi kadar gerekli değil.

Bunun dışında, animasyon da dahil olmak üzere bağlantıların altındaki satırla çalışmanın gerçekten birçok yolu var. Muhtemelen bununla ilgili başka bir makale yazabilirsin.

Hover'da İmleç Stilini Değiştirme

Daha önce bahsettiğimiz gibi, bir bağlantının üzerine geldiğinizde, fare imleci küçük bir oktan işaret eden küçük bir ele dönüşür.

Şimdiye kadar, tıklanabilir bir HTML öğesiyle uğraştığınızın evrensel işareti budur. Bununla birlikte, imleci, artı işareti üzerindeki yeniden boyutlandırma oklarından bir yükleme göstergesine kadar başka şeylere de değiştirebileceğinizi bilmiyor olabilirsiniz.

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

Merak ediyorsanız, etkilerini görmek için yukarıdakileri yerel bir geliştirme ortamında deneyin. Burada bulabileceğiniz daha birçok seçenek var.

Ancak, işaretçi çok evrensel olduğundan, kullanıcıların beklediği kesinlikle budur ve genellikle buna bağlı kalmalısınız. Herhangi bir nedenle bağlantılarınız için çalışmıyorsa, aşağıdaki kod parçasıyla düzeltebilirsiniz:

 a { cursor: pointer; }

Web sitenizde kendi imleçlerinizi kullanmak istiyorsanız, özel resimler kullanmak bile mümkündür. Örneğin, müzik ürünleri için bir Alman çevrimiçi mağazası, kendi temalı işaretçi imlecini kullanır.

Tarayıcı geliştirici araçlarınız aracılığıyla nasıl yaptıklarını incelerseniz, aşağıdaki kod parçasını bulacaksınız:

 a { cursor: url(../images/hand.cur),pointer; }

Gördüğünüz gibi, adresi bir görüntü dosyasına vererek özel bir imleç kullanabilirsiniz.

Bir:odak üzerinde değişiklik yapın

focus için şekillendirme önemli bir erişilebilirlik yardımcısıdır, bu nedenle etrafta kaldığından emin olun. Varsayılan olarak vurgu, çevresinde bir kutu görünmesini sağlayan outline özelliği aracılığıyla gerçekleşir.

Neden outline ve border değil soruyorsun?

Çünkü outline sayfada yer kaplamaz. Bunun yerine öğenin arka planının üstüne oturur. Bu şekilde, bir bağlantıya odaklanmak, sayfa düzeni atlamalarını veya benzerlerini değiştirmez.

Peki, odaklanmış bir bağlantı için başka hangi stil seçeneklerine sahipsiniz?

Bir sürü. background-color color , font-size , box-shadow kadar her şeyi alır, adını siz koyun.

Yukarıdakilere nasıl ulaşılacağı aşağıda açıklanmıştır:

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

a:focus kullanarak, temelde istediğiniz her şeyi yapabilirsiniz. Bununla birlikte, en ilginç uygulamalardan biri, outline özelliğini kullanarak tarayıcı varsayılanını kolayca özelleştirebilmeniz olabilir.

 a:focus { outline: 3px dotted green; }

Yukarıdakilerin sayfada nasıl göründüğü aşağıda açıklanmıştır:

Bağlantı Düğmeleri ve Kutular

Tabii ki, bağlantılar sadece metin bağlantıları değildir. Bazı yerlerde, genellikle gezinme menüleri gibi kutular, formların parçaları veya harekete geçirici mesajlar olarak görünürler.

Bunu başarmak çok zor değil. Temel olarak, bağlantı metninin etrafına boşluk eklemenin yollarını bulmanız ve bir düğme veya kutu olarak görünmesini sağlamak için bir arka plan veya kenarlık/anahat sağlamanız yeterlidir. Bunun dışında, hala daha önce kullandığımız bağlantı elemanıdır.

Bunu başarmanın, esnek kutu veya ızgara gibi sistemlere basitçe dolgu eklemekten birkaç yolu vardır. Aşağıda bunu nasıl yapabileceğinize dair sadece bir örnek var, daha birçok seçenek var.

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

Bu durumda, CSS hem bağlantının stilini hem de içinde bulunduğu kapsayıcıyı içerir. Elbette, farklı senaryolar için farklı davranışlar eklemek için öncekiyle aynı bağlantı durumlarını kullanabilirsiniz.

Bağlantılarınıza Simgeler Ekleyin

Açıklamayı hak eden hızlı bir şey, bağlantılarınıza simgeler ekleme olanağına sahip olmanızdır. Bazı kişilerin, bir şeyin kullanıcıları mevcut sayfadan uzaklaştıracak bir dış bağlantı olduğunu daha da netleştirmek için yaptığı şeydir.

İşte bunu nasıl yapacağınız. İlk önce HTML:

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

Ardından, CSS:

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

a[href^="http"] , yalnızca href="" içinde http ile başlayan bir adresi olan bağlantı etiketlerini hedefler. Bunlara, işaretleme, simge olan bir arka plan görüntüsü ekler, onu tekrar etmeyecek şekilde ayarlar, tamamen sağa hareket ettirir ve dikey olarak ortalar. İşaretlemenin geri kalanı simge boyutunu tanımlar ve onunla metin arasında biraz boşluk oluşturur.

Son Düşünceler: Bağlantılar için CSS Stili

Temel bilgileri öğrendikten sonra, bağlantıların stilini CSS aracılığıyla değiştirmek o kadar da zor değil. En önemli kısım, farklı operatörler ve sözde sınıflar tarafından hedeflenen farklı durumları üstlendiklerini anlamaktır. Bundan sonra, tasarımlarını istediğiniz herhangi bir şeye değiştirmek için ortak CSS özelliklerini kullanmak yeterlidir. Artık başlamak için ihtiyacınız olan tüm bilgilere sahipsiniz.

Bağlantıları CSS aracılığıyla biçimlendirmenin en sevdiğiniz yolu nedir? Paylaşmak için başka ipucu var mı? Lütfen yorumlarda bunu yapın!