CSS - Linklerin Yapısı | Detaylı & Resimli // Ar-Ge Kulübü
Merhaba dostlar, konuma hoş geldiniz. Bugün sizlerle beraber linklerin CSS yapısını daha detaylı inceleyeceğiz. Projelerimizde genellikle bunları kullanacağız. Ayrıca kişisel site tasarımlarında v.s. aklınıza gelebilecek her yerde kullanabileceksiniz o kadar önemli bir konu bu.
Dediğim gibi konu çok önemli, anlaması da biokadar kolaydır. Bu yüzden dikkatli inceleyelim. Size elimden geldiğince detaylı anlatmaya çalışacağım. Umarım anlaşılır olur, haydi başlayalım!
Öncelikle linklerin yapısını bir öğrenelim. CSS yapısı gerçekten çok basit. Ondan önce link oluşturma (HTML) yapısını tekrar edelim. Bir link oluşturmak için:
<a href="link">linkyazısı</a> komutu kullanılmalıdır. Elinizde bir sürü link varsa ve bu linkleri farklı tasarlamak istiyorsanız da id veya class değeri atamalısınız. Şimdi linklerin CSS modüllerine gelelim:
a:link (ziyaret edilmemiş link)
a:visited (ziyaret edilmiş link)
a:hover (fare link üzerinde)
a:active (fare tıkladığında)
Evet dostlar, yukarıda modülleri gördüğünüzde CSS'te linklere ayrı durumlara göre ayrı CSS uygulayabiliriz. Bunun uygulamalı hâlini önceki projemden göstereceğim. Bu şekilde daha iyi ilerleyebileceğiz. Önceki dersleri tekrar etmeyi unutmayın. Haydi o zaman link durumlarını bir inceleyelim!
Evet, önceki proje dersimizde hatırlıyorsanız link butonumuza bir box-shadow vermiştik. Bu box-shadowdan ilerleyeceğim. Öncelikle ben bu komutu geri çekiyorum. Yani butonumu ilk haline döndürüyorum.
Evet, şimdi öncelikle ben butonun üstüne gelindiğinde box-shadow olmasını istiyorum. Bu yüzden ele alacağım komut: a:hover olacak. O yüzden stil koduma a:hover{} yazıyorum ve box-shadow kodumu buraya ekliyorum.
box-shadow: 3px 3px 47px 10px seagreen;
Ardından faremi butonun üstüne getirdiğimde box-shadow'un belirdiğini görüyorum.
Ardından ben bu özelliği a:visited ile kombolamak istiyorum, yani butona tıkladığımda butonun kırmızı arkaplana dönüşmesini istiyorum. Bu yüzden:
box-shadow: 3px 3px 47px 10px red;
Kodumu ekliyorum. Bu sayede tıkladığımda arkaplan yapısı kırmızı olacak:
(Burada tıklamaya basılı tutarak ss aldım.)
Evet, genel link yapısı bu kadar kolay ve kullanışlı bir yapıydı. Diğerlerini siz anladınız zaten mantığını. Kesinlikle ayrı olarak deneyin. Aklınızda kalıcı olacaktır. Bu sayede hem tekrar etmiş olacaksınız, hem de yapıyı aklınızda kesinleştireceksiniz. Vazgeçemeyeceğiniz CSS kodları arasında olacak. Bununla çok güzel stiller ortaya çıkarabileceksiniz. O zaman konuyu okuduğunuz için teşekkür ediyorum...
Ar-Ge Kulübümüz açıldı, @Ɲémesis hocam harika bir kulüp kurmuş. Sizi de bu kulübe bekliyoruz. Birlikte kodlarken eğlenebilir, harika projelere imza atabiliriz. Ayrıca bu kulüpte başarılı olan arkadaşlar yazılım ekibine de girebilir. Başvurmak için:
https://www.turkhackteam.org/konular/ar-ge-kulubu-alimlar-acik.1949976
Hepinize iyi günler diliyorum.
Merhaba dostlar, konuma hoş geldiniz. Bugün sizlerle beraber linklerin CSS yapısını daha detaylı inceleyeceğiz. Projelerimizde genellikle bunları kullanacağız. Ayrıca kişisel site tasarımlarında v.s. aklınıza gelebilecek her yerde kullanabileceksiniz o kadar önemli bir konu bu.
Dediğim gibi konu çok önemli, anlaması da biokadar kolaydır. Bu yüzden dikkatli inceleyelim. Size elimden geldiğince detaylı anlatmaya çalışacağım. Umarım anlaşılır olur, haydi başlayalım!
Öncelikle linklerin yapısını bir öğrenelim. CSS yapısı gerçekten çok basit. Ondan önce link oluşturma (HTML) yapısını tekrar edelim. Bir link oluşturmak için:
<a href="link">linkyazısı</a> komutu kullanılmalıdır. Elinizde bir sürü link varsa ve bu linkleri farklı tasarlamak istiyorsanız da id veya class değeri atamalısınız. Şimdi linklerin CSS modüllerine gelelim:
a:link (ziyaret edilmemiş link)
a:visited (ziyaret edilmiş link)
a:hover (fare link üzerinde)
a:active (fare tıkladığında)
Evet dostlar, yukarıda modülleri gördüğünüzde CSS'te linklere ayrı durumlara göre ayrı CSS uygulayabiliriz. Bunun uygulamalı hâlini önceki projemden göstereceğim. Bu şekilde daha iyi ilerleyebileceğiz. Önceki dersleri tekrar etmeyi unutmayın. Haydi o zaman link durumlarını bir inceleyelim!
Evet, önceki proje dersimizde hatırlıyorsanız link butonumuza bir box-shadow vermiştik. Bu box-shadowdan ilerleyeceğim. Öncelikle ben bu komutu geri çekiyorum. Yani butonumu ilk haline döndürüyorum.
Evet, şimdi öncelikle ben butonun üstüne gelindiğinde box-shadow olmasını istiyorum. Bu yüzden ele alacağım komut: a:hover olacak. O yüzden stil koduma a:hover{} yazıyorum ve box-shadow kodumu buraya ekliyorum.
box-shadow: 3px 3px 47px 10px seagreen;
Ardından faremi butonun üstüne getirdiğimde box-shadow'un belirdiğini görüyorum.
Ardından ben bu özelliği a:visited ile kombolamak istiyorum, yani butona tıkladığımda butonun kırmızı arkaplana dönüşmesini istiyorum. Bu yüzden:
box-shadow: 3px 3px 47px 10px red;
Kodumu ekliyorum. Bu sayede tıkladığımda arkaplan yapısı kırmızı olacak:
(Burada tıklamaya basılı tutarak ss aldım.
)Evet, genel link yapısı bu kadar kolay ve kullanışlı bir yapıydı. Diğerlerini siz anladınız zaten mantığını. Kesinlikle ayrı olarak deneyin. Aklınızda kalıcı olacaktır. Bu sayede hem tekrar etmiş olacaksınız, hem de yapıyı aklınızda kesinleştireceksiniz. Vazgeçemeyeceğiniz CSS kodları arasında olacak. Bununla çok güzel stiller ortaya çıkarabileceksiniz. O zaman konuyu okuduğunuz için teşekkür ediyorum...
Ar-Ge Kulübümüz açıldı, @Ɲémesis hocam harika bir kulüp kurmuş. Sizi de bu kulübe bekliyoruz. Birlikte kodlarken eğlenebilir, harika projelere imza atabiliriz. Ayrıca bu kulüpte başarılı olan arkadaşlar yazılım ekibine de girebilir. Başvurmak için:
https://www.turkhackteam.org/konular/ar-ge-kulubu-alimlar-acik.1949976
Hepinize iyi günler diliyorum.
