Ders 6: Linkler

Sen zaten linkleri (yani değişim renk, yazı tipi, altı çizili vb) daha önceki derslerde öğrendiklerini uygulayabilir. Yeni bir şey CSS bağlantıyı ziyaret edilmemiş olup olmadığına bağlı olarak farklı Bu özellikleri tanımlamak için izin vermektedir, ziyaret, aktif veya imleç bağlantısını olup olmadığını. Bu sayede web fantezi ve yararlı efektler eklemek için yapar. Eğer sözde sınıfları sözde kullanımı bu etkileri kontrol etmek.

Bir sözde sınıfı nedir?

Bir sözde sınıfı bir HTML etiketi için bir özellik tanımlarken hesabı farklı koşullar ya da olayların içine almasına izin veriyor.

Bir örnek bakalım. Bildiğiniz gibi, bağlantılar ile HTML belirtilen <a> etiketleri. Bu nedenle kullanabilirsiniz bir CSS bir seçici olarak:

	  	Bir {  		color: blue;  	}  	  	

Bir bağlantı farklı devletler olabilir. Örneğin, ziyaret ettiği veya ziyaret olamaz. Bu ziyaret ve ziyaret edilmemiş bağlantılar için farklı stilleri atamak için sözde sınıfları kullanabilirsiniz.

	  	a: link {  		color: blue;  	}    	a: visited {  		color: red;  	}  	  	

Kullanın a: link ve a: visited ziyaret edilmemiş ve sırasıyla bağlantıları ziyaret etti. Aktif bağlantıları sözde sınıfı varaktif: a ve a: hover imleç linke olduğu zamandır.

Şimdi örnekler ve daha fazla açıklama ile sözde sınıfları dört her geçecektir.

Sözde sınıf link:

Sözde sınıfı : link kullanıcının ziyaret etmediği sayfalara giden bağlantılar için kullanılır.

Aşağıdaki kod örneğinde, ziyaret edilmemiş bağlantı açık mavi olacak.

	  	a: link {  		color: # 6699cc;  	}  	  	

Pseudo-class: ziyaret

Sözde sınıfı : visited kullanıcının ziyaret ettiği sayfaların giden bağlantılar için kullanılır. Örneğin, aşağıdaki kodu karanlık ziyaret edilen tüm linkler mor yapar:

	  	a: visited {  		color: # 660099;  	}  	  	

Pseudo-class: aktif

Sözde sınıfı : aktif aktif olan bağlantıları için kullanılır.

Bu örnek, etkin bağlantılar sarı bir arka plan rengini verir:

	  	a: active {  		background-color: # FFFF00;  	}  	  	

Pseudo-class: hover

Sözde sınıfı : hover kullanıldığında bir bağlantının üzerine fare işaretçisi dolaşıyor.

Bu ilginç efektler yaratmak için kullanılabilir. Bizim bağlantıları turuncu olması ve imleç onlara işaret zaman italik olarak istiyorsanız Örneğin, bizim CSS gibi görünmelidir:

	  	a: hover {  		renk: turuncu;  		font-style: italic;  	}  	  	

Örnek 1: imleç bir bağlantının üzerine Etkisi

Bu imleci bir bağlantının üzerine geldiğinde farklı etkiler yaratmak için özellikle popüler. Bu nedenle sözde sınıfı ile ilgili fazladan birkaç örneğe bakacağız hover: .

Örnek 1a: harfler arasındaki boşluk

Sizden Hatırlayacağınız gibi ders 5 , harfler arasındaki aralığı özelliğini kullanarak ayarlanabilir letter-spacing . Bu özel bir etki için bağlar için uygulanabilir:

	  	a: hover {  		letter-spacing: 10px;  		font-weight: bold;  		color: red;  	}  	  	

Örnek 1b: BÜYÜK HARF ve küçük

Olarak ders 5 mallarının baktı text-transform büyük ve küçük harfler arasında geçiş yapabilirsiniz. Bu, aynı zamanda bağlantı için bir etki oluşturmak için de kullanılabilir:

	  	a: hover {  		text-transform: uppercase;  		font-weight: bold;  		color: blue;  		background-color: sarı;  	}  	  	

Iki örnek farklı özellikleri birleştirmek için neredeyse sonsuz olanaklar hakkında bir fikir veriyor. Kendi efektleri oluşturabilirsiniz - bir deneyin!

Örnek 2: Kaldır linklerin altı çizili

Sık sorulan bir bağlantı çizgi kaldırmak nasıl?

Sen. Önemli web sitenizin kullanılabilirliğini düşürebilir olarak çizgi kaldırmak için gerekli olup olmadığını dikkatlice düşünmelisiniz web sayfalarına linkler altı çizili insanlar mavi için kullanılır ve onları üzerine tıklamanız gerektiğini biliyor. Hatta annem biliyor! Eğer bağlantılar çizgi ve renk değiştirirseniz kullanıcılar karıştı ve bu nedenle web sitesinin içeriği tam faydayı değil alacak iyi bir şans var.

İşte bu bağlantılar çizgi kaldırmak için çok basit olduğunu söyledi. Sizden bahsettiğim gibi ders 5 , mülkiyet text-decorationmetin altı çizili olup olmadığını belirlemek için kullanılabilir. Altını kaldırmak için, basitçe değeri text-decoration hiçbiri.

	  	Bir {  		text-decoration: none;  	}  	  	

Alternatif olarak ayarlayabilirsiniz text-decoration dört sözde sınıflar için diğer özellikleri ile birlikte.

	  	a: link {  		color: blue;  		text-decoration: none;  	}    	a: visited {  		renk: mor;  		text-decoration: none;  	}    	a: active {  		background-color: sarı;  		text-decoration: none;  	}    	a: hover {  		color: red;  		text-decoration: none;  	}  	  	

Özet

Bu derste daha önceki derslerde gelen bazı özellikleri kullanarak, sözde sınıfları hakkında öğrendim. Bu olanakları sağlayan bazı CSS bir fikir vermelidir.

In sonraki derste biz belirli elemanları ve eleman grupları için özelliklerini tanımlamak için nasıl öğretecek.