Stil Şablonları
Stil şablonları (CSS-Cascading Style Sheets) sayfalarınız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliğidir.
CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz. Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz. CSS kodları HTML kodlarının içine yazılır. Türüne göre body veya head bölümlerinde yer alabilir. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilir.
<html><head>
<style ”text/css”>
<!--
……….
-->
</style></head>
CSS kodu oluşturmanın en basit yolu HTML kodlamasında olduğu gibi herhangi bir metin editöründe (Not Defteri vs.) elle kodlama yapmaktır. Çünkü harici CSS dosyaları (örneğin “style.css”) da dahil olmak üzere CSS kodları da HTML dokümanları gibi ASCII (plain-text) formatındadır. Bu nedenle CSS kodlaması basit text editörleri yardımıyla yapılabilir.
Yerel stil şablonu: Yerel stil şablonları HTML belgesinin body bölümüne yazılır. Sadece bir kereliğine, yazıldıkları yerde etkili olur.
Örnek verecek olursak;
CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz. Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz. CSS kodları HTML kodlarının içine yazılır. Türüne göre body veya head bölümlerinde yer alabilir. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilir.
- Stil Şablonlarının Komut Yapısı
<html><head>
<style ”text/css”>
<!--
……….
-->
</style></head>
CSS kodu oluşturmanın en basit yolu HTML kodlamasında olduğu gibi herhangi bir metin editöründe (Not Defteri vs.) elle kodlama yapmaktır. Çünkü harici CSS dosyaları (örneğin “style.css”) da dahil olmak üzere CSS kodları da HTML dokümanları gibi ASCII (plain-text) formatındadır. Bu nedenle CSS kodlaması basit text editörleri yardımıyla yapılabilir.
- Stil Şablonlarının Çeşitleri, Seçiciler
Stil Şablonlarının Çeşitleri
Yerel stil şablonu: Yerel stil şablonları HTML belgesinin body bölümüne yazılır. Sadece bir kereliğine, yazıldıkları yerde etkili olur.
Örnek verecek olursak;
<html>
<head> <title>Css</title> </head> <body> <h2>CSS Kullanımı</h2><br> <h2 -size:20pt; color:blue>CSS Kullanımı</h2> </body> </html> |
CSS KullanımıCSS Kullanımı |
Verilen kodları tarayıcıda çalıştırdığımızda iki tane “CSS Kullanımı” ifadesiyle karşılaşırız. Bunların her ikisi de h2 olmasına rağmen yazım şekilleri farklıdır. Çünkü ikinci etikete etki etmek üzere bir stil şablon eklenmiştir.
Genel stil şablonları: HTML belgesinin head bölümüne yazılır ve belgenin tümünü etkiler.
Örnek verecek olursak;
Genel stil şablonları: HTML belgesinin head bölümüne yazılır ve belgenin tümünü etkiler.
Örnek verecek olursak;
<html>
<head> <title>Css</title> <style > <!-- h2 {font-size:20pt; color:blue} --> </style> </head> <body> <h2>Web Tasarımı </h2> </body></html> |
Web Tasarımı |
Harici stil şablonları: Global stil şablonunu, sitemiz içerisindeki tüm sayfalarda aynı stil özelliklerini kullanmak istediğimizde kullanırız. Uygularken, stillerimizi yukarıda örneklerini verdiğimiz şekilde hazırlarız. Fakat bu stil listesini html dosyamızın içerisinde değil de boş bir sayfaya yazarız ve css uzantılı bir şekilde kaydederiz. Ardından da html dosyamızın içerisine yine <head> … </head> etiketleri arasına <link rel="stylesheet" href="dosya_ismi.css"> şeklinde ekleriz.
<html><head>
<title>Css</title> <style > <!-- p {font-size : 12pt; font-family : Arial; font-weight : bold; font-style :italic; color : #00FFFF;} --> </style></head> <body> <p>Stil Şablonları</p> </body></html> |
Stil Şablonları |
font-family: Font tipini belirler. (Arial, Courier, Verdana…)
font-weight: Fontun kalınlık incelik durumunu belirler.
Örnek verecek olursak;
font-weight: Fontun kalınlık incelik durumunu belirler.
- Bold: Fontu kalın yapar.
- Normal: Fontun normal halde olmasını sağlar. Bu özellik yazılmadığında normal özellik alınır.
- Italic: Yazının sağa doğru yatık olmasını sağlar.
- Color: Fontun rengini belirler.
Örnek verecek olursak;
<html><head>
<title>Css</title> <style > <!-- p{text-transform : upercase; text-decoration : underline; text-align : left; line-height : 20px; text-indent : 15px; } --> </style><head> <body> <p>Stil Şablonları</p> </body></html> |
Stil Şablonları |
text-transform :
text-decoration :
text-align:
Örnek verecek olursak;
- lowercase: Yazının tümünü küçük harf yapar.
- uppercase: Yazının tümünü büyük harf yapar.
- capitalize: Yazıyı istenilen şekilde bırakır.
text-decoration :
- underline: Yazının altının çizili olmasını sağlar.
- overline: Yazının üstünün çizili olmasını sağlar.
- line-through: Yazının üzerinin çizili olmasını sağlar.
- none: Yazının herhangi bir yerine çizgi çekilmemesini sağlar.
text-align:
- left: Yazının sola bitişik olmasını sağlar.
- center: Yazının ortada olmasının sağlar.
- right: Yazının sağa bitişik olmasını sağlar.
- line-height: Yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px gibi değerler alır.
- text-ident: Yazının soldan ne kadar boşlukla içeriden başlayacağını belirler. 5px, 10px gibi değerler alır.
- Seçiciler (Selectors)
Örnek verecek olursak;
<html><head><title>Id seçicileri</title>
<METAcontent=text/html;CHARSET=iso-8859-9 httpequiv= Content-Type> <style > <!-- #idSecici { background:teal; color:white; font-weight:bold; font-family:arial; }--> </style></head><body> <u id=idSecici>ID Seçiciler</u> </body></html> |
|
Class Selectors (Sınıf Seçicileri): Bu seçiciyi sayfanızdaki h1 gibi etiketlerin tümünün aynı olmasını istemediğiniz durumlarda kullanabilirsiniz. Böylelikle genel bazı özellikleri koruyarak farklı özellikleri değiştirebilirsiniz. Sınıf seçicisinin iki türü vardır.
Örnek verecek olursak;
Örnek verecek olursak;
<html>
<head> <title>Css</title> <style > <!--h2.yesil {color:green} h2.gri {color:gray}--> </style> </head> <body> <h2 >YEŞİL sınıf seçicisi ile </h2> <br> <h2 >GRİ sınıf seçicisi ile </h2> </body> </html> |
YEŞİL sınıf seçicisi ileGRİ sınıf seçicisi ile |
- Stil Şablonlarının Genel Kullanım Şekilleri
CSS’i HTML üzerinde kullanmak için 3 yöntem (yerel-genel-harici) olduğunu daha önce belirtmiştik. Şimdi ise komple bir CSS dosyasını HTML üzerinde nasıl kullanacağımızı görelim.
A Etiketinin CSS ile Kullanımı:Bu etiket ile diğer bir web sayfasına veya bir mail adresine gönderme yapabiliriz. Bu etiketin belli durumlarda aldığı değişik değerler vardır. Yani link tıklandığında etiket artık visited (ziyaret edilmiş) pozisyonuna geçecektir. Biz CSS yardımıyla a etiketinin aldığı posizyonlara istediğimiz biçimi verebiliriz. Şimdi a etiketinin aldığı pozisyonları görelim:-İlk pozisyon linke herhangi bir tıklama olmadığındadır. Bu değer linkin sayfada görülecek ilk halidir.
-Visited : Link tıklandıktan sonra etiketin aldığı değerdir.
-Active : Linkin aktif olduğu durumdur. Yani imleç linkin tıklandığı andaki durumdur.
-Hover : Linkin üzerine gelindiğinde nasıl bir biçimde olması isteniyorsa stil o şekilde verilir.
Örnek verecek olursak;
<html><head><title>Css</title>
<style > <!- A.normal { background-color:white; color:blue; } A.ziyaret:visited { background-color:white; color:maroon; font-weight:normal; } A.aktif:active { background-color:white; color:red; font-weight:normal; } A.degisken:hover {background-color:blue; color:white; font-weight:bold; } --> </style></head> <body> <a href="#" >Linkin normal durumu</a><br> <a href="#" >Linki tıklayın ve degiştiğini görün</a><br> <a href="#" >Linkin aktif durumu</a><br> <a href="#" >Linkin üzerine geldiğinde stil değişecek</a><br> </body> </html> |
Bağlantılı CSS Dosyalarının Hazırlanması: Dosyanın uzantısı css
olmalı.
Bu css dosyasını HTML dosyamızın içerisinde çağırılmalıdır.
Konu ile ilgili daha fazla bilgi edinmek için tıklayınız.
Konu ile ilgili daha fazla bilgi edinmek için tıklayınız.