Web tasarım ve geliştirme işlerinde bağlantılar web sitelerinin önemli öğelerinden biridir Bağlantılar sayesinde ziyaretçiler bir sayfadan başka bir sayfaya kolayca geçiş yapabilirler ve bu da kullanıcı deneyimini artırır Ancak, bağlantıları özelleştirmek için CSS seçicilerini doğru kullanmak birçok tasarımcı ve geliştirici için zor bir iş olabilir
Bağlantılar renk, boyut, konum gibi özelliklerle özelleştirilebilir Bu özellikler için CSS seçicilerini doğru kullanarak web sitenizdeki bağlantıları daha da özelleştirebilirsiniz Bağlantıları hedef almak için kullanabileceğiniz seçiciler arasında ID, komşu ve çocuk seçicileri bulunur
ID seçicisi, bağlantıya bir ID atayarak hedef alınarak bağlantıyı özelleştirmenize olanak tanır Komşu seçicileri bağlantıdan önce veya sonra gelen elementleri hedef al
Web tasarım ve geliştirmede bağlantılar bir web sitesinin vazgeçilmez öğelerinden biridir. Bağlantılar ziyaretçilerin bir sayfadan diğerine hareket etmesini sağlayarak kullanıcı deneyimini geliştirir. Ancak, CSS seçicileri kullanarak bağlantıları özelleştirmek birçok web tasarımcısı ve geliştiricisi için zor olabilir. Neyse ki, CSS seçicilerini anlamanın ve kullanmanın birkaç yolu vardır.
Bağlantı stili, renk, boyut ve konum gibi özelliklerle özelleştirilebilir. Bu alanda uzman olmayabilirsiniz, ancak CSS seçicilerini kullanarak web sitenizdeki bağlantıları nasıl özelleştirebileceğinizi öğrenirseniz, sitenizin özelliklerini bir hayli geliştirebilirsiniz.
Birinci olarak, temel bağlantı stillerini öğrenmelisiniz. Bu stil seçenekleri arasında normal, ziyaret edilmiş veya fare üzerine geldiğinde değişen stiller bulunur. Ayrıca, belirli sayfalarda belirli bağlantıları hedef almak için link seçicilerinizi de kullanabilirsiniz. Bunlar ID, komşu ve çocuk seçicileridir.
- ID Seçici: Bağlantıya bir ID atayarak ID seçicisi ile hedef alın.
- Komşu Seçicileri: Bağlantıdan önce veya sonra gelen elementleri hedef alarak bağlantıları özelleştirin.
- Çocuk Seçicileri: Bağlantının doğrudan içinde yer aldığı ebeveyn elementini hedef alarak bağlantıyı özelleştirin.
Birçoğu, birden fazla bağlantıyı aynı sınıf adı ile özelleştirmek için sınıf seçicisini kullanır. Sınıf seçicileri, birden fazla özellik seti içeren bağlantıları hedef almak için kullanışlıdır. Ayrıca, link durumuna bağlı olarak CSS ile farklı stiller de uygulayabilirsiniz. Örneğin, farenin üzerine geldiğinde, ziyaret edilen hallerde veya aktif linklerde değişiklik yapmak mümkündür.
- :hover Durumu: Fare üzerine gelindiğinde linki özelleştirmek için CSS :hover seçicisini kullanın.
- :visited Durumu: Ziyaret edilen bir bağlantı için özel stiller uygulamak için CSS :visited seçicisini kullanın.
- :active Durumu: Tıklanmış ama henüz tamamlanmamış bir bağlantıyı hedef almak için CSS :active seçicisini kullanın.
Bağlantı elementlerinde CSS seçicileri kullanarak nasıl özelleştirebileceğiniz hakkında bu rehberi umarım faydalı bulmuşsunuzdur. Artık web sitenizdeki bağlantıları verimli bir şekilde özelleştirmek için ihtiyacınız olan bilgilere sahipsiniz.
Temel Bağlantı Stilleri
Web sitenizdeki bağlantıları özelleştirmek, kullanıcıların dikkatini çekmek ve sitenizin kullanılabilirliğini artırmak için oldukça önemlidir. Bağlantı elementlerinde kullanabileceğiniz CSS seçicileri ile bağlantıları kolayca özelleştirebilirsiniz. Temel bağlantı stilleri, CSS özelliklerinin en sık kullanıldığı özelliklerdendir. Bu stil örnekleri, link elementleri oluşturulduğunda kullanılır ve orijinalyle aynı görüntüyü sağlamak için kullanılır. Temel bağlantı stilleri şunlardır: normal, ziyaret edilmiş, ziyaret edilmemiş ve fare üzerinde etki alan bağlantılar.
| Stil | Tanım |
|---|---|
| normal | Temel bağlantı rengi ve varsayılan altı çizgi |
| ziyaret edilmiş | Kullanıcının ziyaret ettiği bir bağlantının rengi ve üzerindeki altı çizgi. |
| ziyaret edilmemiş | Genellikle mavi, bağlantı rengi ve altı çizgi. |
| fare üzerinde etki alan | Fare üzerine gelindiğinde bağlantının değişen rengi ve altı noktalı çizgi. |
Tüm bağlantılar varsayılan olarak mavi renkte görünür. Bununla birlikte, renk, yazı tipi ve altı çizgi gibi CSS özelliklerini değiştirerek bağlantıları özelleştirebilirsiniz. Temel bağlantı stillerini değiştirerek, bağlantıların daha farklı ve dikkat çekici görünmesini sağlayabilirsiniz. Bu, kullanıcıların sitenizin amaçlarına daha kolay ve hızlı bir şekilde ulaşmalarını sağlama konusunda yardımcı olacaktır.
Link Seçicileri
CSS seçicileri, belirli bir sayfada belirli bağlantıları hedef almak için kullanışlıdır. Bir sayfada birden fazla bağlantı olabilir ve her birinin farklı bir URL'si olabilir. Sayfada her bağlantının hedef aldığı nokta farklı olabilir veya aynı sayfaya farklı yerlerden bağlantılar verebilirsiniz. CSS seçicileri kullanarak, belirli bağlantıları hedef alarak bunları ayrı ayrı özelleştirebilirsiniz.
Link seçicileri, bağlantıların belirli özelliklerine (url, alt etiketi, ID vb.) göre bağlantı hakkında stil özelliklerini tanımlamak için kullanılır. Örneğin, belirli bir bağlantıya özel bir stil uygulamak istiyorsanız, o bağlantıya bir ID verebilirsiniz. Daha sonra CSS'de, ID seçicisi ile o bağlantıyı hedef alarak istediğiniz özellikleri tanımlayabilirsiniz.
Link seçicileri ile ayrıca bir sayfada belirli bir bağlantı türünü hedefleyebilirsiniz. Örneğin, sayfanızda birçok "haber" bağlantısı varsa, tüm bu bağlantıları sınıf seçicisi ile hedef alabilirsiniz. Ayrıca, bağlantıdan önce veya sonra gelen elementleri hedef alarak bağlantıları özelleştirmek için komşu seçicileri de kullanabilirsiniz.
Link seçicileri, web sitenizin URL yapısını ve bağlantılarını anlama açısından da son derece önemlidir. İlgili seçiciler kullanılarak, web sitesi sahipleri, web sitelerinde kapsamlı hata kontrolü sağlayabilir ve ölü bağlantıları (404 sayfaları gibi) bulabilir.
ID Seçici
Bağlantı elementlerini özelleştirmek için CSS seçicileri kullanmak oldukça kolaydır. Bağlantıları hedef almak için kullanabileceğiniz seçiciler arasında ID seçicisi de bulunmaktadır. Bağlantıya bir ID atayarak, ID seçicisi ile belirli bir bağlantıyı özelleştirebilirsiniz.
Bunun için, HTML kodları içinde bağlantıya bir ID atayın. Örneğin, <a href="#" id="ornekID">Bağlantı Örneği</a> şeklinde bir bağlantı oluşturabilirsiniz. Bu kodda 'ornekID' benzersiz bir ID değeridir.
Sonra, CSS kodlarına geçin ve bağlantıyı hedef almak için ID seçicisini kullanın. Örneğin, #ornekID {color: red;} kodunu kullanarak 'ornekID' ID'sine sahip bağlantının rengini kırmızı yapabilirsiniz.
Bağlantıya bir ID atayarak, belirli bir bağlantıyı hedef alabilirsiniz. Bu sayede, CSS kodlarınızı daha spesifik hale getirerek, bağlantılarınızı daha özelleştirilmiş hale getirebilirsiniz.
Komşu Seçicileri
CSS seçicileri, bağlantı elementlerinin stillerini özelleştirmenize olanak tanır. Bunun için, CSS kodlarında komşu seçicilerini kullanabilirsiniz. Bu seçiciler, bağlantıdan önce veya sonra yer alan elementleri hedefleyerek bağlantıları özelleştirir.Örneğin, bir bağlantı öncesinde gelen bir elementini hedef alarak bağlantının rengini değiştirebilirsiniz ya da bağlantıdan sonra gelen elementini hedefleyerek bağlantının altındaki liste öğelerinin stilini değiştirebilirsiniz.Komşu seçicilerini kullanmak için, '+' simgesini kullanabilirsiniz. Bu simge, hedeflenecek elementin bağlantıdan hemen önce veya sonra yer aldığını belirtir. Örneğin, aşağıdaki kodda '+' simgesi, hedeflenecek elementin bağlantıdan hemen sonraki element olduğunu gösteriyor:```a + p { color: red;}```Bu kod, bağlantıdan sonra gelen elementinin rengini kırmızı olarak ayarlar. Bağlantıdan önce gelen bir elementi hedeflemek için ise '+' simgesini yerine '~' simgesini kullanmanız gerekiyor.Komşu seçicilerinin yanı sıra, bağlantıdan sonra veya öncesinde kaç elementin yer alacağını belirlemenize de olanak tanıyan ''n'' sayısı seçicisini de kullanabilirsiniz. Bu sayı, hedeflenecek elementlerin kaçıncı sırada yer aldığını belirtir. Örneğin, aşağıdaki kodda, bağlantıdan sonraki 2.
elementinin rengi kırmızı olarak ayarlanır:```a ~ p:nth-of-type(2) { color: red;}```Komşu seçicileri, bağlantı stillerini daha spesifik hale getirmek ve tasarımınızda çeşitlilik yaratmak için kullanabileceğiniz yararlı bir araçtır. Ancak, kullanırken aşırıya kaçmamalı ve sayfanın okunabilirliğini bozacak kadar karmaşık hale getirmemelisiniz.
Çocuk Seçicileri
Bağlantılar elementler içinde yer alır ve bu elementlerin diğer çocuklarına göre CSS seçicileri kullanılarak özelleştirilebilirler. Bağlantının doğrudan içinde yer aldığı ebeveyn elementini hedef alarak links CSS seçicilerini kullanabilirsiniz. Bu, yalnızca belirli bir bağlantıyı değil, aynı zamanda tüm bağlantıları belirli bir ebeveyn elementi içindeki şekillerine göre özelleştirmenize de olanak tanır.
Örnek Kod Bağlantıyı bir listenin içinde hedefleme ul li a { color: red; } Bağlantıyı bir DIV'in içinde hedefleme div a { font-size: 18px; }
Yukarıdaki örneklerde, tüm Liste elementlerindeki bağlantıları kırmızıya dönüştüren bir ilk örnek, ikinci örnek ise tüm Div elementlerindeki bağlantıların yazı tipi boyutunu 18px'e ayarlar.
- Bağlantının hedeflendiği belirli elementin doğru biçimde tanımlanması önemlidir.
- Bağlantı özelleştirmeleri, ebeveyn elementinin belirli bir özelliğine göre yapılabilir.
Bağlantıların belirli bir sayfada farklı görsel stillerle özelleştirilmesi, özellikle ziyaretçilerin web sayfası içinde gezinirken etkileşim ilgisini doğru bir şekilde sağlamayı destekler. Yalnızca sayfanın tasarımını güzelleştirmekle kalmaz, aynı zamanda sayfa ziyaretçilerinin ihtiyaçlarını tamamen karşılayacak hale getirir.
Sınıf Seçicileri
Bağlantı elementleri arasında aynı stile sahip olanlara sınıf adları atanabilir. Böylece, tek tek her bir bağlantıya stil eklemek yerine, aynı sınıf adı olan tüm bağlantıları birlikte özelleştirebilirsiniz.
Sınıf seçicileri, CSS kodunuzu daha okunaklı ve yönetilebilir hale getirmenize de yardımcı olur. CSS'te bir sınıf adı belirlemek için "." karakteri kullanarak sınıf adını tanımlayabilirsiniz.
Örneğin, tüm bağlantılarınızda aynı ayarları kullanmak istiyorsanız ve bu ayarları ".link" olarak adlandırmak istiyorsanız, CSS kodunuzda aşağıdaki gibi belirtebilirsiniz:
```.link { color: #FF0000; text-decoration: none; font-weight: bold;}```
Belirlediğiniz sınıf adını, HTML kodunuzdaki bağlantı elementleri arasında "class" özelliği ile belirtmeniz gerekir. Örneğin, aşağıdaki kodda "bağlantı 1" ve "bağlantı 2" elementleri aynı sınıf adını kullanırlar:
```Bağlantı 1Bağlantı 2```
Böylece, CSS kodunuzda belirlediğiniz stiller otomatik olarak tüm "link" sınıfı adını kullanan bağlantı elementlerine uygulanacaktır.
Sınıf seçicileri, birden fazla bağlantıyı aynı özelliklere sahip olarak belirlemeniz gerektiğinde oldukça faydalıdır. Hem kodlama sürecinizi hızlandırır hem de stil dosyanızın daha yönetilebilir bir hale gelmesini sağlar.
Link Durumları
Bağlantılarımızın farklı durumlarında farklı stiller kullanarak daha etkili bir web sitesi oluşturabiliriz. Örneğin, ziyaret edilen bir bağlantı için farklı bir stil kullanarak kullanıcıların daha önce görülmüş içeriklerden farklı olacağını gösteririz. Köprü stilini değiştirme işlemi için kullanmak yerine aşağıdaki örneklere bakalım.
:hover Durumu
Fare üzerine geldiğinde bağlantı rengini ve alt çizgilerini değiştirmek için CSS :hover seçiciyi kullanabiliriz. Böylece kullanıcılara navigasyon yolu göstermenin yanı sıra, bağlantıları daha ilgi çekici hale getirerek site trafiğimizi artırabiliriz.
:visited Durumu
Ziyaret edilen bir bağlantı için özel bir stiller uygulayabiliriz. Örneğin, ziyaret edilen bağlantıların rengini değiştirebiliriz. Bu, kullanıcıların daha önce ziyaret ettikleri sayfaları hafızalarında daha kalıcı hale getirerek, web sitemize geri dönmelerini sağlayabilir.
:active Durumu
Tıklanmış ancak henüz tamamlanmamış bir bağlantıyı hedef almak için CSS :active seçicisini kullanabiliriz. Kullanıcılara tıklama işleminin tamamlandığını göstermek için bağlantı rengini veya stilini değiştirebiliriz. Bu, kullanıcıların web sitemizde gezinmeleri ve sayfaları tamamlamaları için gereken güveni sağlar.
Sonuç olarak, bağlantılarımızın durumuna bağlı olarak farklı stiller kullanarak daha ilgi çekici, daha verimli bir web sitesi oluşturabiliriz. :hover, :visited ve :active seçicileri gibi CSS seçicilerini kullanarak bağlantılarımızın görünümünü özelleştirebilir, kullanıcı deneyimini artırabilir ve web sitemize daha fazla trafik çekebiliriz.
:hover Durumu
:hover Durumu, CSS seçicilerinde belirli bir bağlantının fare imleci üzerindeyken nasıl görünmesi gerektiğini belirtmek için kullanılır. Bu durum, kullanıcının bağlantıya ne zaman tıkladığını bilmeden önce onunla etkileşim kurabileceği durumları kapsar.
Hover efektinin uygulanması yalnızca bağlantının stilini değiştirmesiyle kalmaz, aynı zamanda kullanıcının gözünde bağlantının önemini ve vurgusunu arttırır. Örneğin, bağlantının altını çizmek, arka plan rengini değiştirmek veya daha belirgin bir şekilde çerçevelendirmek hover efektinin işlevlerinden bazılarıdır.
Örnek: a:hover { color: red; text-decoration: underline; }
Bu örnek, bir bağlantının fare imleci üzerine geldiğinde rengini kırmızıya ve altını çizgili hale getirir.
Hover efektlerinin uygulanması, sitenin tasarımsal bütünlüğünü de etkileyebilir. Bu nedenle, site tasarımcıları hover efektlerinin kullanımının özenli bir şekilde yapılmasına dikkat etmelidirler.
:hover durumunun kullanımı, kullanıcılara web sitesinde etkileşimli bir his sunar ve bağlantıların kullanıcının dikkatini çekmek için kullanılması için harika bir fırsattır.
:visited Durumu
CSS :visited seçicisi, ziyaret edilmiş bir bağlantıya özel stiller uygulamak için kullanılır. Bu durumda, kullanıcı zaten bu bağlantıya tıkladığından link artık ziyaret edilmiş kabul edilir. Bu seçici, linklerin ziyaret edilen sınıfına geçtikten sonra değiştirilmesi gerektiğinde kullanışlıdır.
Örnek olarak, ziyaret edilen bir bağlantı için farklı bir renk kullanabiliriz. Aşağıdaki örnek kod, ziyaret edilen bir bağlantı için kırmızı renk özelliği uygular:
a:visited { color: red; }
elementinin rengini kırmızı olarak ayarlar. Bağlantıdan önce gelen bir elementi hedeflemek için ise '+' simgesini yerine '~' simgesini kullanmanız gerekiyor.Komşu seçicilerinin yanı sıra, bağlantıdan sonra veya öncesinde kaç elementin yer alacağını belirlemenize de olanak tanıyan ''n'' sayısı seçicisini de kullanabilirsiniz. Bu sayı, hedeflenecek elementlerin kaçıncı sırada yer aldığını belirtir. Örneğin, aşağıdaki kodda, bağlantıdan sonraki 2.
elementinin rengi kırmızı olarak ayarlanır:```a ~ p:nth-of-type(2) { color: red;}```Komşu seçicileri, bağlantı stillerini daha spesifik hale getirmek ve tasarımınızda çeşitlilik yaratmak için kullanabileceğiniz yararlı bir araçtır. Ancak, kullanırken aşırıya kaçmamalı ve sayfanın okunabilirliğini bozacak kadar karmaşık hale getirmemelisiniz.
Çocuk Seçicileri
Bağlantılar elementler içinde yer alır ve bu elementlerin diğer çocuklarına göre CSS seçicileri kullanılarak özelleştirilebilirler. Bağlantının doğrudan içinde yer aldığı ebeveyn elementini hedef alarak links CSS seçicilerini kullanabilirsiniz. Bu, yalnızca belirli bir bağlantıyı değil, aynı zamanda tüm bağlantıları belirli bir ebeveyn elementi içindeki şekillerine göre özelleştirmenize de olanak tanır.
| Örnek | Kod |
|---|---|
| Bağlantıyı bir listenin içinde hedefleme | ul li a { color: red; } |
| Bağlantıyı bir DIV'in içinde hedefleme | div a { font-size: 18px; } |
Yukarıdaki örneklerde, tüm Liste elementlerindeki bağlantıları kırmızıya dönüştüren bir ilk örnek, ikinci örnek ise tüm Div elementlerindeki bağlantıların yazı tipi boyutunu 18px'e ayarlar.
- Bağlantının hedeflendiği belirli elementin doğru biçimde tanımlanması önemlidir.
- Bağlantı özelleştirmeleri, ebeveyn elementinin belirli bir özelliğine göre yapılabilir.
Bağlantıların belirli bir sayfada farklı görsel stillerle özelleştirilmesi, özellikle ziyaretçilerin web sayfası içinde gezinirken etkileşim ilgisini doğru bir şekilde sağlamayı destekler. Yalnızca sayfanın tasarımını güzelleştirmekle kalmaz, aynı zamanda sayfa ziyaretçilerinin ihtiyaçlarını tamamen karşılayacak hale getirir.
Sınıf Seçicileri
Bağlantı elementleri arasında aynı stile sahip olanlara sınıf adları atanabilir. Böylece, tek tek her bir bağlantıya stil eklemek yerine, aynı sınıf adı olan tüm bağlantıları birlikte özelleştirebilirsiniz.
Sınıf seçicileri, CSS kodunuzu daha okunaklı ve yönetilebilir hale getirmenize de yardımcı olur. CSS'te bir sınıf adı belirlemek için "." karakteri kullanarak sınıf adını tanımlayabilirsiniz.
Örneğin, tüm bağlantılarınızda aynı ayarları kullanmak istiyorsanız ve bu ayarları ".link" olarak adlandırmak istiyorsanız, CSS kodunuzda aşağıdaki gibi belirtebilirsiniz:
```.link { color: #FF0000; text-decoration: none; font-weight: bold;}```
Belirlediğiniz sınıf adını, HTML kodunuzdaki bağlantı elementleri arasında "class" özelliği ile belirtmeniz gerekir. Örneğin, aşağıdaki kodda "bağlantı 1" ve "bağlantı 2" elementleri aynı sınıf adını kullanırlar:
```Bağlantı 1Bağlantı 2```
Böylece, CSS kodunuzda belirlediğiniz stiller otomatik olarak tüm "link" sınıfı adını kullanan bağlantı elementlerine uygulanacaktır.
Sınıf seçicileri, birden fazla bağlantıyı aynı özelliklere sahip olarak belirlemeniz gerektiğinde oldukça faydalıdır. Hem kodlama sürecinizi hızlandırır hem de stil dosyanızın daha yönetilebilir bir hale gelmesini sağlar.
Link Durumları
Bağlantılarımızın farklı durumlarında farklı stiller kullanarak daha etkili bir web sitesi oluşturabiliriz. Örneğin, ziyaret edilen bir bağlantı için farklı bir stil kullanarak kullanıcıların daha önce görülmüş içeriklerden farklı olacağını gösteririz. Köprü stilini değiştirme işlemi için kullanmak yerine aşağıdaki örneklere bakalım.
:hover Durumu
Fare üzerine geldiğinde bağlantı rengini ve alt çizgilerini değiştirmek için CSS :hover seçiciyi kullanabiliriz. Böylece kullanıcılara navigasyon yolu göstermenin yanı sıra, bağlantıları daha ilgi çekici hale getirerek site trafiğimizi artırabiliriz.
:visited Durumu
Ziyaret edilen bir bağlantı için özel bir stiller uygulayabiliriz. Örneğin, ziyaret edilen bağlantıların rengini değiştirebiliriz. Bu, kullanıcıların daha önce ziyaret ettikleri sayfaları hafızalarında daha kalıcı hale getirerek, web sitemize geri dönmelerini sağlayabilir.
:active Durumu
Tıklanmış ancak henüz tamamlanmamış bir bağlantıyı hedef almak için CSS :active seçicisini kullanabiliriz. Kullanıcılara tıklama işleminin tamamlandığını göstermek için bağlantı rengini veya stilini değiştirebiliriz. Bu, kullanıcıların web sitemizde gezinmeleri ve sayfaları tamamlamaları için gereken güveni sağlar.
Sonuç olarak, bağlantılarımızın durumuna bağlı olarak farklı stiller kullanarak daha ilgi çekici, daha verimli bir web sitesi oluşturabiliriz. :hover, :visited ve :active seçicileri gibi CSS seçicilerini kullanarak bağlantılarımızın görünümünü özelleştirebilir, kullanıcı deneyimini artırabilir ve web sitemize daha fazla trafik çekebiliriz.
:hover Durumu
:hover Durumu, CSS seçicilerinde belirli bir bağlantının fare imleci üzerindeyken nasıl görünmesi gerektiğini belirtmek için kullanılır. Bu durum, kullanıcının bağlantıya ne zaman tıkladığını bilmeden önce onunla etkileşim kurabileceği durumları kapsar.
Hover efektinin uygulanması yalnızca bağlantının stilini değiştirmesiyle kalmaz, aynı zamanda kullanıcının gözünde bağlantının önemini ve vurgusunu arttırır. Örneğin, bağlantının altını çizmek, arka plan rengini değiştirmek veya daha belirgin bir şekilde çerçevelendirmek hover efektinin işlevlerinden bazılarıdır.
| Örnek: | a:hover { |
|---|---|
| color: red; | |
| text-decoration: underline; | |
| } |
Bu örnek, bir bağlantının fare imleci üzerine geldiğinde rengini kırmızıya ve altını çizgili hale getirir.
Hover efektlerinin uygulanması, sitenin tasarımsal bütünlüğünü de etkileyebilir. Bu nedenle, site tasarımcıları hover efektlerinin kullanımının özenli bir şekilde yapılmasına dikkat etmelidirler.
:hover durumunun kullanımı, kullanıcılara web sitesinde etkileşimli bir his sunar ve bağlantıların kullanıcının dikkatini çekmek için kullanılması için harika bir fırsattır.
:visited Durumu
CSS :visited seçicisi, ziyaret edilmiş bir bağlantıya özel stiller uygulamak için kullanılır. Bu durumda, kullanıcı zaten bu bağlantıya tıkladığından link artık ziyaret edilmiş kabul edilir. Bu seçici, linklerin ziyaret edilen sınıfına geçtikten sonra değiştirilmesi gerektiğinde kullanışlıdır.
Örnek olarak, ziyaret edilen bir bağlantı için farklı bir renk kullanabiliriz. Aşağıdaki örnek kod, ziyaret edilen bir bağlantı için kırmızı renk özelliği uygular:
Bu örnekte, a:visited seçicisi, ziyaret edilmiş tüm bağlantılara uygulanır ve renk özelliği, ziyaret edilmiş bağlantıların metnini kırmızıya dönüştürür. Bu, kullanıcının daha önce ziyaret ettiği sayfaları hatırlamasına yardımcı olabilir ve ilgili bağlantılara daha kolay erişim sağlayabilir.
Benzer şekilde, :hover ve :active durumları için farklı stiller de uygulayabiliriz. Bu durumlar, fare imleci üzerindeyken veya tıklanmışken linkler için özel stiller sağlar. Bu seçicilerin kullanımı, bağlantı elementlerini daha ilgi çekici hale getirebilir ve kullanıcılara daha iyi bir gezinme deneyimi sağlayabilir.
:active Durumu
CSS :active seçicisi, tıklanmış ancak henüz tamamlanmamış bir bağlantıyı hedef almak için kullanılır. Örneğin, bağlantıya tıkladığınızda ama sayfaya gitmek için tıklamayı henüz tamamlamadığınızda, bağlantının aktif olduğunu söyleyebiliriz. Bu seçici, ziyaretçinin bağlantıya tıkladığı zaman görsel bir geri bildirim sağlamanın yanı sıra, kişinin tıklamayı tamamlamadan önce bağlantının hangi durumda olduğunu anlamasına yardımcı olur.
Bir bağlantıya :active seçicisini uygulamak için, CSS'te bağlantı elementine önceki tanımlamalardaki özelliklerin aynısını atayın. Bu özelliklerden bazıları, örneğin metin rengi, yazı tipi, arka plan rengi vb. olabilir. Ancak, :active seçicisi için bir özellik değişikliği yapmak istiyorsanız, seçicinin atandığını doğrulamak için geçersiz bir stil tanımlayarak :active durumuna geçişi görüntüleyebilirsiniz.