Top

CSS Dersleri Bölüm 1 – Giriş ve Söz dizimi

CSS Dersleri Bölüm 1 – Giriş ve Söz dizimi

Css öğrenmeye başlamadan önce  HTML veya XHTML bilmeniz gerekmektedir. Bilmiyorsanız buraya tıklayarak öğrenmeye başlayabilirsiniz.

Css Nedir?

Css yığma stil dosyasıdır.

  • Stiller HTML elementlerinin nasıl gösterileceğini tanımlarlar.
  • Stiller bir problemi çözmek için eklenmişti HTML 4.0’a.
  • Harici Stil dosyaları birçok işten kurtarır.
  • Harici stil dosyaları CSS dosyalarında tutulur.

CSS’e ait bir demo var. Bunu görüntülemek için buraya tıklayın; ilk üçü farklı stillere sahip, without yazan stilsiz görünüm ve alttaki üçü de stil dosyalarının içerikleridir.

Stilleri büyük bir problemi çözdü

HTML, bir belgeyi biçimlendirmek için etiketler içeren bir şekilde tasarlanmamıştı.

Bir belgenin içeriğini belirlemek için tasarlanmıştı; tıpkı:

<h1>Bu bir başlık</h1>
<p>bu bir paragraf</p>

HTML 3.2’de <font> etiketi gibi etiketler eklendiğinde web geliştiricileri için bir kabus oldu bu durum. Büyük siteleri geliştirmek, fontları ve renk bilgilerini tek tek er sayfa için değiştirmek uzun ve pahalı bir süreç haline geldi.

Bu problemi çözmek içinse; WWW konsorsiyumu CSS’i oluşturdu.

HTML 4.0’da tüm formatlar HTML belgesinden arındırıldı ve ayrı bir css dosyasında barındırılmaya başlandı.

Günümüzde tüm tarayıcılar css’i desteklemekte.

CSS bizi iş yükünden kurtardı

CSS HTML elemanlarının nasıl gösterileceğini tanımlar.

Bu sayede birçok sayfaya bağlı olan css dosyasını değiştirdiğimizde tüm sayfalarımız da değişecektir. Bizleri uğraştan kurtaracaktır.

CSS’te söz dizimi

Birinci örnek için tıklayın;

ikinci örnek için tıklayın.

Bir CSS kuralı iki ana bölümden oluşur; birisi seçici, bir veya daha fazla da tanımlayıcısından oluşur.

Yukarıdaki resim için h1 elementinin(stil vermek istediğiniz element ya da ) olduğu kısım seçici, declaration’ların olduğu yerler de tanımlayıcılar ve tanımlayıcılar da h1 gibi elementin özellikleri ve değerlerinden oluşur ve süslü parantez kapanır noktalı virgülden sonra.

CSS örneği

p
{
color:red;
text-align:center;
}

bu örnek paragraf etiketini kırmızı renge ve yazıyı da merkeze alarak şekillendirir.

CSS Yorumları

Yorumlar yazdığınız kodları açıklamak içindir ve sonraki zamanlarda düzenleme yaparken size yardımcı olur. Yorumları tarayıcılar yok sayar.

Bi CSS yorumu /* ile başlar ve */ ile biter.

Örnek;

/*Burası yorum satırı ve  p paragrafı temsil ediyor etiket olarak*/
p
{
text-align:center;
/*Bu da başka bir yorum tanımlama kısmında yer alıyor.*/
color:black;
font-family:arial;
}

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan HTML5 ve CSS3 en iyi bu kaynaktan öğrenilir! başlıklı makalemizde canvas, css3 ve dikeyeksen hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious