closeSitedeki bazı videolar Youtube'ta yaptığım bir hata nedeniyle çalışmamaktadır..

Ali Mengü | Kişisel Web Sayfasi

Css Dilini Taniyalim

CSS Dilini tanıyalım…

CSS dediğimizde aklımıza o kadar karışık kodlar gelmemelidir. Çünkü CSS o kadar karışık bir konu değildir. Eğer temel konuları kavrayabilirsek CSS bize çok olay gelecektir.

Css Kullanmanın Avantajları

1 CSS kullanırsak kısa yoldan sitemize veya bir yazıya güzel görünüm verebiliriz…

Ör: <h1>Tumhepsiburada</h1> <h1></h1> tagları arasında yer alan yazıyı CSS ile biçimlendirmek mümkündür ve bunu web sitemizin tümünde böyle kılabilmekteyiz… Bu <h1></h1> tagları arasındaki yazıya CSS ile şu şekilde yeni bir görünüm sağlayabiliriz:

h1 {

color: white;

font: italic 11px Arial, serif;

border: 1px solid red;

Kodumuzu inceleyelim:

 

h1{ : CSS kodumuzu isimlendirdik ve CSS parantezimizi açtık…

Color : Bu bize renk açısından her zaman CSS de lazım olacaktır.. CSS bir şeye renk vermek istersek CSS kodumuz içine ‘’Color:’’u ekler sonra rengin İngilizce yazımı ile rengi yazar ya da o rengin # ile başlayan ve rakam harflerden oluşan kodunu yazar ; (noktalı virgül) koyarız…

Font : Tumhepsiburada yazısının fontunu, font biçimini, font büyüklüğü gibi unsurlarını belirlemede yardımcı olacaktır. CSS kodumuzun içine ‘’Font:’’ kısmını ekledikten sonra biçim, yazı tipi, yazı büyüklüğünü ekleyerek yazının biçimlerini ayarlamış oluruz…

border : Tumhepsiburada yazısında kenar eklemek için kullanılır. ‘’border:’’i kodumuza ekledikten sonra yazıya ekleyeceğimiz kenarlığın kalınlığı px olarak yazılır sonra biçim girilir ve son olarak İngilizce renk veya renk kodu eklenir… 

2 Kullanım Kolaylığı

 

HTML de her etikete artı özellikler eklemek için başka bir etiket ve/veya

özellik eklememiz gerekmektedir. Bu işlemi geniş çaplı bir sitede

yaptığımızı düşünürseniz çok büyük zaman kaybı ve uğraş gerektiğini

göreceksiniz.

 

<h1><font color="blue">Baslık</font></h1>

 

Bunun gibi onlarca veya yüzlerce baslığınız olduğunu düşünün, gerçekten

çok zor. CSS de aynı işlem için

 

h1 {color: blue}

 

Kodunu yazmamız yeterli. Bu elemanın özelliklerinde değişiklik yapmak

istediğimizde sadece burada değiştirerek tüm sitede bu elemanın

özelliklerini değiştirmiş olacağız. Ayrıca bu işlemi sadece bu etiket için

değil diğer etiketlere de uygulayabiliriz.

 

h1, h2 {color: blue}

 

Ayrıca tek bir CSS dosyası ile sitenin tamamını yönetmek web

kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada değişlik

yaparak tüm sitemizi ara yüzünü yönetebiliriz isterse yüzlerce sayfa olsun.

3 Tasarım tutarlılığı

 

Tasarım konusunda size oldukça yararlı olacağından eminim… Çünkü bir CSS ile HTML tasarım arasında dağlar kadar fark vardır ama ikisi birleşince imkansızları bile başarmanız mümkünüdür. Örnek verecek olursak bir HTML tasarım yaptınız siteye yerleştirdiniz bir başlık yazısını tüm sayfalarda renk olarak ayarlamanız gerekmektedir fakat bu CSS de aynı değildir. CSS kullanılmış HTML tasarım yaptığınızda sadece

 

h1 {color: blue}

 

kodunu kullanarak bütün başlık yazılarını değiştirme imkanı sunuyor CSS…

 

4 Daha az boyut

 

HTML – CSS karışık oluşturulmuş bir tasarım siteyi daha az zorlamakta ve siteye girişte daha hızlılık sağlamaktadır. Ayrıca HTML de kullanacağınız tablo,resim vs elementleri CSS de bir kodda bir biçimde hallettiğiniz için tasarımınızın ve sitenizin boyutu %50’ye varan oranlarda düşüş olacaktır…

 

 5 Her dilde kullanılabilmesi

 

CSS öyle bir dildir ki PHP , ASP , HTML’de kullanılabiliyor. Misal bir Wordpress , Joomla veya HTML tasarım indirdiniz. İndirdiğiniz dosyaların içinde CSS bulunması gerekmektedir. Çünkü CSS bütün tasarımlarda renklendirme aracı olarak kullanılmaktadır. Sadece tasarımlarda değil tabi ki de kullandığınız programlar , sitenizde kullandığınız diğer kodlarla beraberde CSS büyük bir önem kazanmaktadır…

 

5 Gelecek vaat ediyor olması

 

Gelecekte HTML artık yavaş yavaş yüz tutmaya başladığını düşünürsek ki yerine XHTML geleceğini düşünürsek CSS gibi bir tümleşik standardın önemi anlaşılıyor…
Bugün toplam 14 ziyaretçi sitemizi dolaştı.
http://www.mypagerank.net/services/pagerankbutton/pagerankbutton.php?aut=de510918aee37d99078ff98e1f31074c56421665b926a44a75
İçerik bölümünün altındaki bilgi (mesela Copyright)
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol