CSS’yi anlayın!

CSS’yi anlayın!

css

Merhaba;

Css her internet sitesi tasarımcısının bilimesi gerekin dillerin önde gelenlerinden birisidir.Fakat bu işi yeni başlayanlar,css’yi korkulası bir dil olarak bilmemeleri için bu dersi hazladım.Öncelikle Css’nin ne olduğunu öğrenelim.

Nedir bu Css?

Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları, bilinen kısa adıyla CSS), HTML’e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir.

Css’nin mantığını anlamak için bir örnek üzerinde çalışacağız.Şimdi bu derste ne yapacağız onu söyleyeyim.Başlangıç seviyesinde olduğunuzu var saydığım için Frontpage adlı programda ana tablo ve verileri oluşturacağız.Ardından bu tablo ve verilerimizi Css ile şekil ve renklendireceğiz.

Sitemizin İskeletini oluşturuyoruz

Ben FrontPage üzerinde çalışıyorum(Yeni başlayanlar için Frontpage kolay ara yüzü ile yardımcı olacaktır.)

Şimdi aşağıdaki gibi tablolarımızı oluşturalım.

Frontpage ve Css

Tablolar ile uğraşmak istemeyenler için kodlar burada.Kodları “Kod” adlı bölümden yapıştırabilirsiniz.

[php]&lt;/pre&gt;<br />
&lt;html&gt;</p>
<p>&lt;head&gt;<br />
&lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1254"&gt;<br />
&lt;title&gt;Hibestil&lt;/title&gt;<br />
&lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1254"&gt;<br />
&lt;title&gt;Hibestil&lt;/title&gt;<br />
&lt;/head&gt;</p>
<p>&lt;body&gt;<br />
&lt;div align="center"&gt;<br />
&lt;table border="0" width="706" &gt;<br />
&lt;tr&gt;<br />
&lt;td width="355"&gt;<br />
Logo kısmı&lt;/td&gt;<br />
&lt;td width="341"&gt;<br />
&amp;nbsp;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;</p>
<p>&lt;/div&gt;<br />
&lt;div align="center"&gt;</p>
<p>&lt;table border="0" &gt;<br />
&lt;tr&gt;<br />
&lt;td &gt;Ana Sayfa&amp;#9474;Hakkımda&amp;#9474;Portfolyo&amp;#9474;İletişim&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;</p>
<p>&lt;/div&gt;<br />
&lt;div align="center"&gt;</p>
<p>&lt;table border="0" &gt;<br />
&lt;tr&gt;<br />
&lt;td class="orta" id="orta" rowspan="11"&gt;Bu bir örnek css temadır.&lt;p&gt;<br />
&lt;font color="#FFCC00"&gt;&amp;#8286;&amp;#8362;&lt;/font&gt;Her kul ölümü tadacaktır.&lt;font color="#FFCC00"&gt;&amp;#8362;&amp;#8286;&lt;/font&gt;&lt;/p&gt;<br />
&lt;p&gt;&lt;font color="#FFCC00"&gt;&amp;#8286;&amp;#8362;&lt;/font&gt;Bu sayfa kış köşesi şu sayfa yaz köşesi ortada su şişesi.&lt;font color="#FFCC00"&gt;&amp;#8362;&amp;#8286;&lt;/font&gt;&lt;/p&gt;<br />
&lt;p&gt;&lt;font color="#FFCC00"&gt;&amp;#8286;&amp;#8362;&lt;/font&gt;Matem(hüzün)+Atik(çeviklik)=Matematik(Hüzünlüçeviklik)&lt;font color="#FFCC00"&gt;&amp;#8362;&amp;#8286;&lt;/font&gt;&lt;/p&gt;<br />
&lt;p&gt;&amp;nbsp;&lt;/td&gt;<br />
&lt;td class="arama" id="arama"&gt;<br />
&lt;input type="text" name="aramaform" size="20" value="Ara!" &gt;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;Menü&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td &gt;Ana Sayfa&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td &gt;Hakkımızda&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;Portfolyo&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;İletişim&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;Reklamlar&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;Bel Fıtığı&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;Alo Sülükçü Osman&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;A.B.D’ de bedava kazıklanın!&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;&amp;nbsp;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;div &gt;</p>
<p>&lt;div align="center"&gt;</p>
<p>&lt;table border="0" &gt;<br />
&lt;tr&gt;<br />
&lt;td &gt;Hibestil.com-Css Yeni Başlayanlar İçin İlkAdım<br />
Teması&lt;p&gt;Powered By:Hibpress:)&lt;/p&gt;<br />
&lt;p&gt;Altkısım&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;/body&gt;</p>
<p>&lt;/html&gt;<br />
&lt;pre&gt;[/php]

Şimdi tüm tablolarımızı oluşturduk ve içlerine veriler(yazı v.b) girdik.Bundan sonra yapmamız gereken, tablolarımızın sınıflarını belirlemek.Bu belirleme işini Html’da  class=”logo” gibi kodlama ile yapıyoruz.Şimdi de bu sınıflandırmayı nasıl yapacağımızı öğrenelim.

 

HTML’da Sınıf oluşturmak

Sınıflandırma yaparken öncelikle aynı sınıfı tekrar girmemeye dikkat edin. Çünkü aynı sınıfları tekrar girdiğimizde ilerde her şey birbirine girebilir.

Kafanız karıştı gibi, neden birbirine gireceğini açıklayayım.Bizim verdiğimi class’lar yani sınıfları CSS’de o sınıfı şekillendirmek için kullanacağız.Bu kısmı fazla uzatmadan tablolarımızı sınıflandırmaya başlayalım.

Frontpage,dreamweaver

1)Sınıflandıracağımız bir tabloya sağ tıklayıp “Tablo Özellikleri” seçin.

Dreamweaver

2)Kaşınıza gelen pencereden “Stil…” adlı butona tıklayın

Frontpage

3)Burada “Sınıf” adlı kısma bir isim girin. Aynı işlemi aynı adla “Kimlik” kısmına girin.

Bundan sonra geriye kalan tüm tablolara “sınıf” ve “kimik” girin. Ben bütün tablolara uyglamayı anlatıyorum. Sınıflandırmayı  eğer  doğru şekilde yaptıysanız, sonucunda kodlar şu şekilde olacaktır:

[php]</p>
<p>&lt;html&gt;</p>
<p>&lt;head&gt;<br />
&lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1254"&gt;<br />
&lt;title&gt;Hibestil&lt;/title&gt;<br />
&lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1254"&gt;<br />
&lt;title&gt;Hibestil&lt;/title&gt;<br />
&lt;/head&gt;</p>
<p>&lt;body class="gövde" id="gövde"&gt;<br />
&lt;div align="center"&gt;<br />
&lt;table border="0" width="706" &gt;<br />
&lt;tr&gt;<br />
&lt;td class="ustkisim" id="ustkisim" width="355"&gt;<br />
Logo kısmı&lt;/td&gt;<br />
&lt;td class="reklam" id="reklam" width="341"&gt;<br />
&amp;nbsp;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;</p>
<p>&lt;/div&gt;<br />
&lt;div align="center"&gt;</p>
<p>&lt;table border="0" class="menü" id="menü" &gt;<br />
&lt;tr&gt;<br />
&lt;td class="menü" id="menü"&gt;Ana Sayfa&amp;#9474;Hakkımda&amp;#9474;Portfolyo&amp;#9474;İletişim&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;</p>
<p>&lt;/div&gt;<br />
&lt;div align="center"&gt;</p>
<p>&lt;table border="0" &gt;<br />
&lt;tr&gt;<br />
&lt;td class="orta" id="orta" rowspan="11"&gt;Bu bir örnek css temadır.&lt;p&gt;<br />
&lt;font color="#FFCC00"&gt;&amp;#8286;&amp;#8362;&lt;/font&gt;Her kul ölümü tadacaktır.&lt;font color="#FFCC00"&gt;&amp;#8362;&amp;#8286;&lt;/font&gt;&lt;/p&gt;<br />
&lt;p&gt;&lt;font color="#FFCC00"&gt;&amp;#8286;&amp;#8362;&lt;/font&gt;Bu sayfa kış köşesi şu sayfa yaz köşesi ortada su şişesi.&lt;font color="#FFCC00"&gt;&amp;#8362;&amp;#8286;&lt;/font&gt;&lt;/p&gt;<br />
&lt;p&gt;&lt;font color="#FFCC00"&gt;&amp;#8286;&amp;#8362;&lt;/font&gt;Matem(hüzün)+Atik(çeviklik)=Matematik(Hüzünlüçeviklik)&lt;font color="#FFCC00"&gt;&amp;#8362;&amp;#8286;&lt;/font&gt;&lt;/p&gt;<br />
&lt;p&gt;&amp;nbsp;&lt;/td&gt;<br />
&lt;td class="arama" id="arama"&gt;<br />
&lt;input type="text" name="aramaform" size="20" value="Ara!" class="aramaform" id="aramaform"&gt;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td class="yanmenubas" id="yanmenubas"&gt;Menü&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td class="yanmenu" id="yanmenu"&gt;Ana Sayfa&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td class="yanmenu" id="yanmenu"&gt;Hakkımızda&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td class="yanmenu" id="yanmenu"&gt;Portfolyo&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td class="yanmenu" id="yanmenu"&gt;İletişim&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td class="yanmenubas" id="yanmenubas"&gt;Reklamlar&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td class="yanmenu" id="yanmenu"&gt;Bel Fıtığı&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td class="yanmenu" id="yanmenu"&gt;Alo Sülükçü Osman&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td class="yanmenu" id="yanmenu"&gt;A.B.D’ de bedava kazıklanın!&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td class="yanmenubos" id="yanmenubos"&gt;&amp;nbsp;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;div &gt;</p>
<p>&lt;div align="center"&gt;</p>
<p>&lt;table border="0" &gt;<br />
&lt;tr&gt;<br />
&lt;td class="alt" id="alt"&gt;Hibestil.com-Css Yeni Başlayanlar İçin İlkAdım<br />
Teması&lt;p&gt;Powered By:Hibpress:)&lt;/p&gt;<br />
&lt;p&gt;Altkısım&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;/body&gt;</p>
<p>&lt;/html&gt;<br />
&lt;pre&gt;[/php]

Css sayfasını oluşturmak ve oluşturduğumuz sayfa ile bağlamak 

Bu bölümde artık Html şablonumuzu oluşturduk. Şimdi sıra oluşturduğumuz sayfayı şekillendirmeye ve renklendirmeye geldi. Bu işlemi yapmak için bir adet style.css adlı dosyaya ihtilacımız var.Bu sayfayı oluşturmak için FrontPage’de “Yeni/Ek sayfa şablonları/Stil Sayfaları/Yeni Boş Stil Sayfası” bağlantısından ulaşabilir veya masaüstünde yeni bir .txt dosyası açıp dosya ismini style.css olarak değiştirebilirsiniz.

Az önceki bilgileri kullanarak bir Style.css sayfası oluşturun. Stil sayfamızı yazmaya başlamadan önce oluşturduğumuz  style.css sayfasını daha önceden yaptığımız html sayfasına bağlamalıyız.

Bir html sayfasına FrontPage’de CSS sayfası bağlamak için aşağıdaki adımları izleyin;

Html ile oluşturduğumuz sayfada;

Biçim/Stil Sayfası bağlantıları/Ekle” yolu ile yeni bir Stil sayfası bağlantısı ekleyin.

Frontpage Css

Eğer Style sayfası bağlantısını doğru vermiş iseniz ekrandaki görüntü şu sekilde olacaktır:

Bu işlemleri yaptığımızda oluşturduğumuz web sayfasında hiçbir değişiklik olmayacaktır çünkü style.css sayfamızda hiçbir veri yok.Bu aşamadan sonra Style.css sayfamızı yazmaya başlayacağız.

Style.css sayfası

Css’yi az bilen veya hiç bilmeyen bir seviyede anlattığımız için başlangıçta bir Css sayfasında neler vardır ve bunların anlamları nelerdir açıklayacağım.

A)Açıklama Kısmı

/*Burası Açıklama*/

Şeklinde yazılır./* ile başlar */ ile biter

B)Sınıfları Css’de biçimlendirme

.logo{ }

Şeklinde yazılır. logo daha önceden tabloya verdiğimiz sınıfın ismidir. Başına “ . ” gelitirilir ve .logo şeklinde yazılır. { ve } arasına az sonraki gelecek bölümdekilerden istenen yazılabilir.

C)Tanımlanan sınıfları biçimlendirmek için bazı kodlar

height:100px;

Height: Yükseklik anlamına gelir.height yazıldıktan sonra, : sonra,yükseklik Piksel cinsinden (px) yazılır sonra, ; yazılır.

width:550px;

Width:Genişlik anlamındadır. width yazıldıktan sonra yukardaki işlemler tekrarlanır.

border-radius:5px;

Köşe yumuşatmak için kullanılır. Bir tablonun köşelerinin yuvarlaklığı yani yumuşaklığın ayarlamak için 15px yazan kısma istenilen değer girilebilir.

background-color: #000;

Background-color: Arka plan rengini ayarlamak için kullanılır.Bunun yerine arkaplan’ı resim yapmak için background:url(rusumat/logo.png) şeklinde adres ile yazılabilir.

 font: medium Arial;

Font biçimini belirlemek için kullanılır.Font büyüklüğünü belirlemek için font-size kullanılır.

Evet böylelikle bir dersin daha sonuna geldik. Bu dersimizde bir Html sayfaya CSS’yi uygulamayı öğrendik.

Sonuçtaki oluşturduğumuz style.css  dosyası şu şekilde;

[php] &lt;/b&gt;</p>
<p>/*<br />
* Hibestil-Css Çalışma<br />
Temayı tepe tepe kullanın :)<br />
* http://www.hibestil.com<br />
*/<br />
/*Sayfanın genel kısmı css verileri*/<br />
.gövde{background:url(Rusumat/arkaplan.jpg);position:center;}<br />
/*Sayfanın genel kısmı css verileri bitti*/</p>
<p> /*Üst Kısım——————————————————————————————————————————————————————*/</p>
<p> /*Logonun bulunduğu tablonun css verileri*/<br />
.ustkisim {<br />
align:center;<br />
height:100px;<br />
width:550px;<br />
border-radius:5px;<br />
background-color:tranparent;<br />
color: #ffffff;<br />
margin-left:15px;<br />
margin:20px;<br />
font: medium Arial;<br />
/*Logonun bulunduğu tablonun css verileri bitti*/<br />
}</p>
<p> /*Logonun ayarları*/<br />
.logo{<br />
height:150px;<br />
width:300px;<br />
/*Logonun ayarları bitti*/<br />
}<br />
/*Arama formu css verileri*/<br />
.aramaform{<br />
height:25px;<br />
width:240px;<br />
background:#000;<br />
color:#fff;<br />
border:0px;<br />
}<br />
.arama{<br />
height:25px;<br />
width:247px;<br />
background:#000;<br />
color:#fff;<br />
text-align: center;<br />
border-radius:10px;<br />
}</p>
<p> /*Bu kısımda üst sağ bölümdeki reklam var*/<br />
.reklam{<br />
height:85px;<br />
width: 150px;<br />
/*Sağ bölümdeki reklam ayarları bitti*/<br />
}</p>
<p> /*Üst kısımdaki menünün stil ayarları*/<br />
.menü{<br />
height:25px;<br />
width:700px;<br />
font-size:medium;<br />
font-family:Arial;<br />
border-radius:5px;<br />
background-color:#FFCC00;<br />
text-align: center;<br />
/*Menü stil ayarları bitti*/<br />
}</p>
<p> /*Sitenin ana kısımı.Bu bölümde yan menü ve yazıların girildiği kısım var.———————————————————————————————————-*/</p>
<p> /*Yazıların girildiği tablo css verileri*/<br />
.orta {<br />
height:500px;<br />
width:450px;<br />
border-radius:5px;<br />
background-color:#fff;<br />
color: #000;<br />
margin-left:15px;<br />
font: medium Arial;<br />
text-align: center;<br />
/*Yazıların girildiği tablo css verileri bitti*/<br />
}</p>
<p> /*Yan menü başlıkları yani kategorilerin css verileri*/<br />
.yanmenubas{<br />
height:1px;<br />
width:247px;<br />
border-radius:5px;<br />
background-color:#FFCC00;<br />
color: #000;<br />
margin-left:15px;<br />
font: medium Arial;<br />
text-align: center;<br />
/*Yan menü başlıkları yani kategorilerin css verileri bitti*/<br />
}</p>
<p> /*Yan menü yani kategorilerin css verileri*/<br />
.yanmenu {<br />
height:1px;<br />
width:247px;<br />
border-radius:5px;<br />
background-color:#fff;<br />
color: #000;<br />
margin-left:15px;<br />
font: medium Arial;<br />
text-align: center;<br />
/*Yan menü yani kategorilerin css verileri bitti*/<br />
}</p>
<p> /*Alt Kısım——————————————————————————————————————————————————————*/</p>
<p> /*Alt bilgilerin stil ayarları*/<br />
.alt{<br />
height:100px;<br />
width:700px;<br />
color: #ffffff;<br />
border-radius:5px;<br />
background-color:#000;<br />
text-align: right;<br />
font-size:10px;<br />
font-family:Arial;<br />
/*Alt bilgilerin stil ayarları bitti*/<br />
}</p>
<p>[/php]

Çalışma dosyasını buradan indirebilirsiniz. CSS hakkında daha fazla bilgi isterseniz Fatih Hayrioğlu hocamızın CSS’ye giriş adlı kitabını şu adresten indirebilirsiniz;

http://fatihhayrioglu.com/csse-baslamak-kitabi-hazir/

İnşallah ileriki zamanlarda Psd to Html/Css dersi ile karşınızda olacağız.

Selamun Aleyküm…

Yazı nasıldı ama?
1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (1 votes, average: 5,00 out of 5)
Loading...
Etiketler : class, CSS, Css anlatım, Css ders, Css nedir, Fatih Hayrioğlu, FrontPage, Html, Html to Css, Kod, Kodlama, Stil, style.css,
adet güzel yorum :)
  1. Yarım saattir sitenizi geziyorum:) Öncelikle anlatımlar için hem tebrik hem teşekkür ederim ! Elinize emeğinize sağlık 🙂 css öğrenmek istiyorum diyen biri için en kolay ve yalın hali ile muhteşem bir anlatım yapmışsınız (:

Yorumlar,bizi seven insanlar!
Daha fazla Tasarım
Web Sitelerine Kullanıcı Bakışı

Merhabalar, Günümüzde yaşamı kolaylaştırmak için tüm sistemler internet üzerinden taşınıyor. Örneğin devlet şu anda tüm gücüyle kurumlarını sanallaştırma için çırpınıyor.Milli eğitim bakanlığının...

Kapat