Sohbet Forum - Türkçe Forumlar ve Eğlence Forum Siteleri

- Web 2.0 (http://www.sohbetforum.org/web-2-0/)

- - CSS Hakkında [İp Uçları] (http://www.sohbetforum.org/web-2-0/3237-css-hakkinda-ip-uclari.html)

CSS Hakkında [İp Uçları]

Yazıya Link Verme Özellikleri

CSS şu dört selektörü destekler:

A:link
A:visited
A:active
A:hover

A:Link - Bu sayfadaki bütün normal linkler için bir stil oluşturur.
A:visited - Bu sayfadaki ziyaret edilen linkler için bir stil belirler.
A:active - Bu sayfa üzerindeki aktif linkler için bir stil belirler. Bir linkin aktif olması demek, onun tıklanabilir olması demektir.
A:hover - Bu mouse üzerine geldiğinde olabilecek değişmeleri belirleyen bir stildir.

Kullanabileceğiniz CSS Özellikleri:

color (renk)
text-decoration (yazıya süs)
font-weight (yazı kalınlık inceliği)
font-style (yazı stili)
font-family (yazı gurubu)
font-size (yazı boyutu)
background-color (arkaplan rengi)

LİNK ÖRNEKLERİ:

Altıçizili ve Renkli Linkler

Haydi birkaç link efekti hazırlayalım. Bir linkin mouse üzerinde geldiğinde renginin değişmesi ve altının çizili olmasını istiyoruz. Bunun için aşağıdaki kodu kullanabilirsiniz.

A:link {text-decoration: bold; color: red;}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: black;}

Arkaplanı Renkli Linkler

Bazı web sitelerinde mouse'u üzerine getirince bir linkin arkaplan resminin değiştiğini görmüşsünüzdür. Bunun nasıl yapıldığını görelim:

A:link {background: #FFCCCC; text-decoration: none}
A:visited {background: #FFCCCC; text-decoration: none}
A:active {background: #FFCCCC; text-decoration: none}
A:hover {background: #FFFFFF; font-weight:bold; color: black;}

NOT: Netscape ve Firefox tarayıcılarının eski sürümlerinde çalışmayacaktır.

Linklerin boyutunu değiştirmek

Bir diğer efekt de, mouse üzerine geldiği zaman yazının boyutunun değişmesidir. Bunu yapmak için aşağıda yer alan kodu kullanabilirsiniz.

A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {font-size:20; font-weight:bold; color: red;}

Cevap: CSS Hakkında [İp Uçları]

CSS Yazı Rengi

Bir web sayfasında yazının rengini değiştirmek isterseniz, yapmanız gereken çok kolaydır. Aşağıdaki kodu kullanmanız yeterlidir.

p {color: #CC0033;}

CSS Yazı Fontları

Yazı fontunu değiştirmek istediğiniz zaman CSS'nin "FONT FAMILY" özelliğini kullanmalısınız. Şu şekilde:

p {font-family: Georgia,Times New Roman,Times,serif; }

Birden çok font yazmanın anlamı şudur: Eğer web sitenizi ziyaret eden kişinin bilgisayarında birinci font yoksa ikinci font devreye girecektir. Dolayısı ile yazılarınızın karmaşık görünmesi diye bir durum ihtimali azalacaktır.

CSS Text Size

Font boyutunu değiştirmek için birkaç farklı yol vardır:

Points
Pixels
Keywords
Percent

CSS Points

Points, Microsoft Word'teki gibi yazı boyutunu değiştirmenize imkan verir.

p {font-size: 25pt; }

CSS Pixels

Bir pixel'in ne olduğunu açıklamak çok müşküldür. Ama, bir pixel TV ya da bilgisayar monitöründe gördüğünüz en küçük parçadır, dersek heralde biraz açıklayıcı olmuş olacaktır. Pixel olarak boyut değiştirmek için aşağıdaki kodu kullanabilirsiniz.

p {font-size: 25px; }

CSS Keywords

Keyword, yani anahtar sözcüklerle yazı boyutu değiştirmek de CSS ile mümkündür. Ancak tarayıcılar bazen bunları farklı yorumlayabilir. Çeşitleri şunlardır:

xx-small
x-small
small
medium
large
x-large
xx-large

Kullanımı ise şu şekildedir:

p {font-size: small; }

CSS yazı stillerinizi deneyerek kullanmanız, farklı tarayıcılarda test etmeniz çalışmanızın sıhhati açısından önemlidir.

Cevap: CSS Hakkında [İp Uçları]