Temel CSS metin tasarımı, Temel CSS font kullanımı, Temel CSS kullanımı ve temel CSS konuları bu yazıda anlatılmıştır.
Temel CSS Metin Tasarımı
Temel CSS kullanımını anlatmadan önce Temel CSS Metin Tasarımını biraz anlatalım. Temel CSS Metin Tasarım için en çok aşağıdaki komutlar kullanılmaktadır;
- margin: 2em;
Margin komutu css elemanı çevresindeki boşluk anlamına gelmektedir, margin :2em standart olan tanımlı boşluğun 2 katı olarak kullanılması için gerekli komuttur. margin: 0 2em 0 1.75em; gibi 4 yönde farklı margin bırakmak için dörtlü yazımı da mevcuttur ama her elemanın çevre margin leri eşit olursa daha estetik duracaktır.
- border: 5px solid red;
Border komutu çerçeve çizme komutudur, yukarıdaki komut 5 pixel kalınlığında düz ve kırmızı bir çerçeve çizecektir.
- border: 3px dotted #0000ff;
Yukarıdaki border komutu da 3px kalınlığında nokta nokta biçiminde mavi çerçeve çizecektir. denemek için aşağıdaki bütün çerçeve türlerini deneyebilirsiniz ;
dotted
dashed
solid
double
groove
ridge
inset
outset
ayrıca aşağıdaki gibi çok farklı çerçeve örnekleri de çalışma şansınız vardır.
border-top: 4px double blue;
border-right: 2px solid #333333;
border-bottom: 3px dashed darkviolet;
border-left: 5px dotted #00cc44;
Yukarıdaki örnekte üstte çift çizgili mavi , sağda 2 px gri kalın , altta koyu mor ve solda da farklı bir sınır çizmeniz mümkündür. Tabi bu görsel olarak berbat görünsede sadece bir örnektir, 4 taraftaki sınır çizgilerini farklı tarzlarda yapabileceğini farketmenize yardımcı olacaktır.
- padding: .5em;
Padding komutu border yani sınır ile içerideki yazı veya nesnenin arasındaki boşluğu belirtmektedir.
border: 5px solid red;
padding: .1em .2em 0 .3em;
örneğin yukarıdaki gibi kullanımı da mümkündür 4 yöndeki boşlukları ayrı ayrı belirleme şansınız vardır
Temel CSS Font Kullanımı
Temel CSS Font Kullanımı yazıların font türü , büyüklük kalınlık aralık gibi bütün tanımlamalarının yapılabildiği ve daha önce html in yetersiz kaldığı tüm noktalarda yeterli görsel tanımlamanın yapılabildiği önemli bir özeliktir. CSS font kullanımının temel işlevlerini aşağıda görebilirsiniz.
h1 {
font-family: “Trebuchet MS”, Helvetica, sans-serif;
font-size: 4em;
font-weight: 900;
font-style: italic;
color: #cc0000;
letter-spacing: .1em;
word-spacing: 1em;
line-height: 2em;
text-align: left;
text-indent: 1em;
}
- font-family: “Trebuchet MS”, Helvetica, sans-serif;
font-family komutu ile ilgili yazıdaki font türü belirlenmektedir.
- font-size: 2em;
font-size komutu font büyüklüğü komutudur, 2em örneğin 2 kat büyütme anlamına gelmektedir ama bu büyütme sayfalar üzerinde tam birebir boyut büyümesi olarak karşılık vermemektedir.
- font-weight: 900;
Font ağırlığı komutudur 100 ile 600 arası genellikle dikkate alınır , tarayıcılarda değişkenlik göstermektedir.
- font-style: italic;
font stilini belirlemektedir ve italic underlined gibi seçenekleri vardır.
- color: #cc0000;
RGB olarak renk kodu verilmektedir, isim tanımlayıcıları da bulunmaktaıdr.
- letter-spacing: .1em;
harfler arası mesafeyi belirtmektedir .1em %10 artırılmış metin aralığı demektir 2em iki katı artırılmış anlamına gelmektedir.
- word-spacing: 1em;
kelimeler arası mesafeyi belirtmektedir
- line-height: 2em;
Satır yüksekliğini belirtmektedir , 2em 2 katı satır yükseliği anlamına gelmektedir.
- text-align: left;
Sol tarafa yaslanmış metin anlamına gelmektedir, genellikle bu komuta gerek yoktur zaten metin sola öntanımlı olarak yerleşmektedir.
- text-indent: 1em;
Metinlerin içeri tab yapılmış gibi soldan kaymış olarak indente edilmesi için kullanılmaktadır.
Yukarıdaki CSS font düzenleme komutlarından en çok font-family , font-size , font-weight , font-style ve color kullanılmaktadır. Diğer komutlar çok nadir kullanılır ve çok da gerekli olmamaktadır. Öntanımlı olarak en iyi okunabilirlik düşünülerek fontlar dizayn edilmektedir ve harf aralıkları kelime aralıkları ve satır yükseklikleri ile çok fazla oynanması hiç önerilmez.
Temel CSS Kullanımı
Temel CSS kullanımı için dış css sayfa örneği aşağıdaki gibidir. Daha önce karşınıza çıkmamış olan link tagi ile tanımlanan CSS sayfa stili dosyası ile sayfadaki metin görsel tanımlamaları yapılmakta ve sayfadaki yazıların görsel düzeni stildosyasi.css sayfası içerisindeki tanımlamalara göre yapılmaktadır.
<html>
<head>
<title>temelbilgi.com</title>
<link rel=“stylesheet” type=“text/css” href=“stildosyasi.css”>
<body>
….
</body>
</html>
Yukarıda gördüğünüz <link rel=“stylesheet” type=“text/css” href=“stildosyasi.css”> komutunu incelersek;
Link tagi bu sayfanın ilişkili bir sayfa referansı içerdiğini belirtmeketdir , tarayıcı link ile belirtilen sayfayı da yükleyerek sayfayı düzenleyecek ve ekrana verecektir.
Buradaki Rel komusu ilgi konusunu belirtmektedir stylesheet türü bir ilişki olduğunu tanımlamakta ve tarayıcı bu dosyanın bir stil dosyası olduğunu anlamaktadır. Type da yine aynı şekilde text formatında yazılmış bir css stil dosyası olduğunu belirtmektedir, Href hyper reference demektir burada relatif veya url olarak dosya yolu yazılmalıdır. Dosyamız ile aynı dizinde bulnuduğu için yalnızca dosya adı yazılmaktadır. CSS Dosya tanımlaması dima böyle yapılmaktadır.
CSS dosyası içeriği aşağıdaki formata benzer biçimde yazılmış metin komutlarından oluşur ve yalnızca görsel tanımlama öğreleri içeren komut dosyalarıdır;
p {
font-family: Georgia, “Times New Roman”, Times, serif;
}
h1 {
font-family: “Trebuchet MS”, Helvetica, sans-serif;
}
Yukarıdaki içerik ile hazırlanmış bir CSS dosyasının görevi aşağıdaki gibidir.
P tagi ile tanımlanan metinlerin fontları Georgia, “Times New Roman”, Times, serif olarak tanımlanmaktadır yani paragraflarda bu fontlar kullanılacaktır. Bu sıralama sitemde bulunmama durumunda alternatifleri vermektedir.
H1 tagi ile tanımlanan en büyük başlık lar ise “Trebuchet MS”, Helvetica, sans-serif fontları ile yazılacaktır.
Bu bir örnektir, web sayfalarında hatta web siteleri genelinde aynı font kullanılmalıdır.
Temel CSS Font Kullanımı ve Temel CSS Metin Tasarımı konuları ile CSS Temellerini daha iyi kavrayabilirsiniz.
Farklı konularda bilgi almak için sitemizin bilgi kategorisini ziyaret edebilirsiniz.
.
