Web sitesi oluştururken çeşitli etmenler göz önünde bulundurularak web sitesinin genel bir renk şemasını oluşturmamız gerekmektedir. Siteye hakim olacak genel renk belirlendikten sonra CSS ile sitemizdeki bölümlerin genel stil tanımlamalarını yapmaya başlayabiliriz. Arka plan rengi veya resmi, sitenin geneline hakim olacak renkler, yazıların ve başlıkların renkleri, fontları, resimlerin çerçeve özellikleri, genel hizalamalar, site içindeki bağlantıların özellikleri… Özellikle harici stil tanımlamasından yararlanarak sitemizin tümünde kullanacağımız genel stil özelliklerini bir stil dosyasında toplayabiliriz. Ve ilerde sitemizin genel görüntüsünü değiştirmek istediğimizde önceden hazırladığımız bu stil dosyasındaki stil tanımlamalarını değiştirmemiz yeterli olacaktır.
Yazımızın devamında sayfamızda oluşturabileceğimiz stiller hakkında giriş düzeyinde bilgi verilmektedir.
Stil tanımlama yöntemleri
- Özel Stil Tanımlama
- Yerel Stil Tanımlamaları
- Dahili Stil Tanımlamaları
- Harici Stil Tanımlamaları
- Etiketler için stil tanımlama
- Tek bir etiket için stil tanımlaması
- Etiket kombinasyonları için stil tanımlama:
- A) Özel Stil Tanımlama Yöntemleri
- Yerel Stil tanımlamaları: Sayfamız içerisinde bulunan metinler için yapılan tanımlamadır. BODY bloğu içinde kullanılır. Her defasında yeniden tüm özellikler yazılır ve tanımlanan belge içinde ve başka bir sayfada kullanılmak istenirse stilin tüm özelliklerini yeniden yazmak gerekmektedir. Yerel-tanimlama.html sayfasında örnek uygulama gösterilmiştir.
<p style="font-size: 20px; font-family: Arial, Helvetica, sans-serif; color: red; font-weight: bold;"> Burada yer alan yazılarlar yerel stil tanımlamasına göre renklendirilmiştir. </p>
- Dahili Stil Tanımlamaları:
Sayfamızda HEAD bloğunda STYLE bloğu içinde tanımlarız. Her bir stil grubu için verilen ismi sayfa içinde defalarca kullanabiliriz ancak HEAD bloğunda tanımlanan bu stil harici bir sayfadan kullanılmaz. Genel kullanımı şöyledir:
<html><head>
<style type=”text/css”>
<!--
.birincistil { özellikbir; özellik2; özellikN;}
.ikincistil
{
özellikbir;
Özellik2;
özellikN
}
-->
</style>
</head></html>
Yukarıda tanımladığımız 2 stili sayfamız içerisinde etiketlere class=”birincistil” şeklinde çağrarak kullanabiliriz. Örneğin <p class=”birincistil”> yazi </p> şeklinde bir tanımlamada <p> etiketi içerisindeki yazi <head> bloğu içinde tanımlanan “birincistil” isimli stilin özelliklerine bürünecektir. Dahili-tanimlama.html sayfasında örnek uygulama gösterilmiştir.
- Harici Stil Tanımlamaları: Stil tanımlamaları boş bir sayfada tanımlanıp .css uzantısıyla kaydedilerek oluşturulur. Stil tanımlamalarının kullanılacağı her sayfanın <head> kısmına aşağıdaki kodu yazarak harici stil sayfamızda oluşturduğumuz stilleri kullanabilir:
<link rel="stylesheet" type="text/css" href="/stil-adi.css">
Stil-adi.css isimli stil dosyamızda tanımladığımız tüm stilleri Dahili stil tanımlamasında olduğu gibi class=”stiladi” şeklinde istediğimiz etiketlere çağırarak kullanabiliriz. Harici-tanimlama.html sayfasında örnek uygulama gösterilmiştir.
B) Etiketler İçin Stil Tanımlama Yöntemleri
- Tek bir etiket için stil tanımlama:
HTML içinde bulunan etiketler için yapılan tanımlamadır (p,table,td,h1,a,form,div…). Etiketler için yapılan tanımlamalarda Özel Stil Tanımlama Yöntemlerinde anlattığımız isimlendirmenin aksine söz konusu stil isminin başına . işareti koymayız, doğrudan etiket ismini yazıp genel stil özelliklerini yazarız. Örnek olarak <P> paragraf etiketi için tanımlanan stil özellikleri sayfa içinde kullanılan tüm <P> etiketleri için tanımlanmış olacaktır ve tüm <P> etiketleri stilin özelliklerini gösterecektir. etiket-tanimlama.html sayfasında örnek uygulama gösterilmiştir.
2.Etiket kombinasyonları için stil tanımlama:
Sayfamızda kullandığımız etiketleri kombinasyon halinde kullanıldığımızda özel tanımlama yapma gereği duyabiliriz. Örneğin sayfamızda DIV etiketi içindeki yazıları mavi renkte, P etiketi içindeki yazıları sarı renkte kullanmak istiyoruz.
Div {color:blue;}
P{color:yellow} şeklindeki stil tanımlaması bizim işimize yarayacaktır. Ancak DIV etiketi içinde kullanılan P etiketleri için yazının kırmızı olmasını isteyebiliriz. Bu durumda yararlanacağımız stil tanımlaması şu şekilde yapılmalıdır.
Div p {color:red}
Yukarıda tanımladığımız div,p, ve div p isimli stil tanımlamalarını sayfamızda kullanabiliriz. Sayfamızdaki DIV etiketleri Mavi,P etiketleri Sarı ve DIV etiketi içindeki P etiketleri Kırmızı olacaktır.
<body>
<div>Burası DIV etiketi içindeki bir kısım olduğu için yazımız mavi olacaktır. </div>
<p> Burası P etiketi içindeki bir kısım olduğu için yazımız sarı olacaktır. </p>
<div> <p> Burası DIV etiketi ve P etiketi içinde olduğu için yazımız Kırmızı olacaktır. </p> </div>
</body>
etiket-tanimlama2.html sayfasında örnek uygulama gösterilmiştir.
GENEL STİL TANIMLAMALARINDA KULLANILAN ÖZELLİKLER
Stillerde tanımlama yaparken dikkat etmemiz gereken genel özellikler:
- Stil ismini nokta ile başlatarak istediğimiz etikette kullanabiliriz. Stil isimlerine isim verirken genel programlamada dikkat edilen etmenler göz önünde bulundurulmalıdır (Türkçe karakter, özel karakterler ve boşluk kullanılmaz).
- .isim şeklinde başlayan stil tanımlamamız parantez içinde yapılır { }.
- Her bir özellikten sonra ; işareti kullanılır.
- Özellikler yan yana yazılabileceği gibi her bir özellik bir alt satıra da yazılabilir ki önereceğimiz kullanım şekli de budur.
- Her bir özelliğin değerini yazarken araya : işareti konur. Örneğin color:red; gibi.
- <style type”text/css”> satırından sonra kullanılan <!- - ile başlayıp stil bloğunun sonunda - - > ile biten kodun anlamı CSS tanımayan tarayıcıların (web browser yani Explorer ve firefox gibi) bu kodu atlamasını sağlamaktır.
font-family:Arial, Helvetica, sans-serif; /*Yazı fontu*/
font-size:12px; /*Yazının büyüklüğü*/
font-weight:bold; /*Yazının Kalınlığı*/
color:white; /*Yazının rengi*/
background-color:#006600; /*Arka plan rengi*/
cursor:help; /*Mouse imlecinin tipini belirler, burada imleci soru işareti şeklinde tanımladık.*/
text-decoration:underline; /*Yazının altının çizgili olması*/
text-align:justify; /*Yazının genel hizalamasını iki yana yasla şeklinde tanımladık*/
border:dotted; /* BORDER: Yazıyı çerçeve içinde yazmamızı sağlayan kısımdır. dotted yerine solid yazarak tek bir çizgi halinde çerçeve oluşturabiliriz. */
border:red; /*Çerçeve rengi*/
border:3px; /*Çerçeve Kalınlığı*/
border-bottom:5px solid #FF0000; /*çerçevenin her bir parçasını istediğimi şekilde düzenleyebiliriz. Burada çerçevenin alt birimini 5 px kalınlığında solid ve turuncu renkli yapık.*/
line-height:25px; /*Satır Yüksekliği*/
letter-spacing:1px; /*harfler Arası Boşluk*/
word-spacing:10px; /*Kelimeler arası boşluk*/
margin:5px; /*Margin yazının dışıyla olan uzaklığı.*/
margin-right:100px;
padding:10px; /*yazının çerçeveyle olan uzaklığıdır.*/
padding-left:50px; /*margin ve padding'in left-right-top ve bottom olmak üzere dört yönü vardır ve her brim için ayrı bir tanımlama yapabiliriz.*/
text-indent:100px; /*Paragrafın içerden ne kadar başlayacağını belirtir.*/
Stil-ozellikleri.html kısmında örnek uygulama gösterilmiştir.
