Css 1(Yazılara farklı özellikler)
Dikkat Bu Anlatım BS'De Sadece Bizde Vardır Eger Baska Bi Sitede Varsa Kesinlikle Alıntıdır Saygilarımla KareTasarim
|
CSS 1
(Cascading Style Sheets = Yığılmalı Stil Kağıtları)
|
|
|
| CSS nedir? Ne işe yarar? |
|
CSS (ingilizce açılımı Cascading Style Sheets olan türkçeye çevrildiğin de ise Yığılmalı Stil Kağıtları) bizi HTML'in kalıplaşmış olan stil etiketlerinden bir bakıma kurtarıyor. Nasıl mı?
Sanırım CSS biraz karışık gelecek ilk başlar da sizlere. (Bana da öyle gelmişti). Ama artık başlıkların boyutlarını belirlediğimiz "H1" etiketlerinden tutun da tablo oluştururken kullandığımız "table" etiketlerine kadar sayfamızın bütün etiketlerini kontrol altına alabiliyoruz..
CSS şu ise yarar:
Bir çok cümlemiz var. Ama bunlardan bir kaçı büyük bir kaçı da küçük olmalı. Saatlerce <font size=""> <font face=""> <font color=""> ile uğraşmaktansa CSS ile işimizi kolayca halledebiliriz..
Şimdi örnekler ile inceleyelim bu karmaşık dünyayı:)
|
Açılın CSS geliyoooooorr  |
|
CSS kod kümesi sayfamızın <head> </head> etiketleri arasına yazılır. HTML etiketlerinden biraz farklı olmasına rağmen CSS kodlamasını da en kısa zaman da öğrenebileceğinizi sanıyorum.
Şimdi birkaç cümleden oluşan bir yazı düşünelim. Bu yazının bazı kısımlarının Büyük harf (bold) bazı yerlerinin altı çizili (underline) bazı yerlerinin ise renk (color) bakımından değişik olması gerektiğini düşünelim.
|
| Bir Sonbahar Günü.... |
<html>
<head>
<style type="text/css">
<!--
p {font-family: Verdana; font-size: 10px; color:#000000}
.bold {font-family: Verdana ;font size:10px; font-weight: bold; color:#000000}
.yesilyazi {font-family: Verdana; font size:10px; color: #00CC33}
.altinyazi {font-family: Verdana; font size: 10px; color: #FF6633}
.maviyazi {font-family: Verdana; font size: 10px; color: #006699}
.italik {font-family: Verdana; font size: 10px; color: #000000; font-style: italic}
.alticizili {font-family: Verdana; font-size: 10px; color:#000000; text-decoration: underline}
-->
</style>
<head>
<body>
<p> Sonbahar nasıldır? Bilirsiniz..
Bir gün baktığınız da yağmur, bir gün baktığınız da ise güneş <span class="bold">(tüm soğukluğuna rağmen) </span> sizlerledir.
<span class="yesilyazi> Sizi bunaltan sıcaklar biraz olsun hafiflemiş, geçen yaz diktiğiniz ağacın yaprakları sararmış. Küsmüş mü ne? </span>
<span class="altinyazi"> Yazın sana gülümseyen güneş! Şimdi nerede?</span>
<span class="alticizili"> Tüm bunlara rağmen güzeldir Sonbahar.</span>
<span class="maviyazi"> Benim gibi soğuk ve bıktırırcasına acımasız.</span>
<span class="italik">Deli deli esen rüzgarlarda...</span>
</p>
</body>
</html>
|
| Bir Sonbahar günü... |
|
Sonbahar nasıldır? Bilirsiniz..
Bir gün baktığınız da yağmur, bir gün baktığınız da ise güneş (tüm soğukluğuna rağmen) sizlerledir.
Sizi bunaltan sıcaklar biraz olsun hafiflemiş, geçen yaz diktiğiniz ağacın yaprakları sararmış. Küsmüş mü ne?
Yazın sana gülümseyen güneş! Şimdi nerede?
Tüm bunlara rağmen güzeldir Sonbahar.. Benim gibi soğuk ve bıktırırcasına acımasız.
Deli deli esen rüzgarlarda...
|
| Şimdi bu yazıyı biraz daha yakından inceleyelim: |
|
Yukarıda aynı şekil iki yazı görüyorsunuz.
Birincisin de bir HTML kod sayfası, ikincisin de ise Yazının son halini. Yani sayfada görebildiğimiz şeklini..
Tekrar birinci sayfamıza baktığımız da (ki zaten siz hemen anladınız bu CSS denen şeyin ne olduğunu :^ ) ) sayfanın <head></head> bölümde süsülü parantezler ile yaptığımız kodlamayı görüyoruz..
Sayfamızda <p>(paragraf) ile kodladığımız kısımlar Font ailesinden Verdana, Size (genişliği) 10 px ve rengi de Siyah olmak üzere belirlendi.. Ve sayfa da <p> kodlamasını yaptığımız da hep aynı şekilde görünecektir.
Ama eğer stil kodlamanızı bir etikete değil de kendi belirlediğiniz isime göre yapmak istiyorsanız:
.yeni (! baştaki noktaya dikkat !) yazıyor ve stil kodlamamızı böylece yapmış oluyoruz. Ama bunu sayfaya da söylememiz için <span class="yeni"></span>etiketlerinin arasına yazmak istediğimiz cümleyi yazmalıyız...
|
| |
|
Gezdiğiniz sayfaların HTML kodlamasına baktığınız zaman da CSS stillerin farklı şekillerini görebilirsiniz..
Tabii CSS stil kodlaması başka bir dosya ile sayfaya bağlanmamış ise.. Bunu da daha sonra öğreneceğiz...
|
|
|
|
Bu dersimizde de rengarenk sayfalar yapmamız da bize yardımcı olacak CSS stillerden bahs ettik.
Sayfalarımızın görüntüsünü güzelleştiren CSS stillerden başka sayfamızda kullanacağımız grafikler ile de çok güzel görünümler elde edebiliriz. Bunun için Photoshop programı bize çok yardımcı olacaktır. Malina' nın Photoshop Derslerini takip etmenizi ve bunun faydasını göreceğinizi de söylemeden geçemeyeceğim.. Çünkü ben çok faydasını gördüm..
Son olarak da bir sonraki dersimiz de linklerimize renk renk CSS stiller kazandıracağız.. Böylece üzerine geldiğimiz de rengi değişen linklerin de nasıl yapıldıklarını öğrenmiş olacağız..
|
