Youtube Channel
cssd1
Ders 1
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…