WhaleDevops Dijital Reklam Ajansı

CSS Nedir?

css nedir

CSS Nedir? Türkçe karşılığı basamaklı stil şablonları olan CSS, HTML kodları içinde fazladan biçimlendirme seçeneği sunan bir yazılımdır.

CSS Ne İşe Yarar?

HTML ilk çıktığı dönemleri bilenleriniz muhakkak vardır. Kodlama içinde tek bir tip H1 yani başlık formatı vardı. Site başlığı hangi kalınlıkta hangi fontta yazdıysanız diğer bütün başlıklar da aynı fontta aynı kalınlıkta olmaz zorunda kalıyordu.  İşte CSS tam da bu noktada devreye girdi. Aynı başlık kodunu çok daha farklı formatlarda yazabilmemiz için bize olanaklar sundu.

CSS Avantajları;

  • Tüm tarayıcılar tarafından destekleniyor. 
  • Yazı tipi formatları CSS uzantılı dosyalara kayıt edilerek, kolay değişim sağlanabiliyor. 
  • Değişime ek olarak formatların kayıt edilmesi fazladan kod bulunmasını engelliyor. 
  • Sitenin kalitesini arttırıyor.

CSS ile ilgili biraz daha teknik bilgi vermeye çalışalım. Acaba CSS seçeneklerini kod yazarken nasıl uygulayabiliriz?

CSS Kod Yazma;

Kod yazarken CSS kullanma sanılan aksine son derece basittir. Çok basit bir örnekle açıklama çalışalım. Yazdığınız kod başlık için olsun;

H1; başlık kodu 

CSS; color:blue 

CSS; font-size:12px

Yazmanız gereken kod; h1 {color:blue; font-size:12px;} 

Yani dediniz ki mavi renkli 12px büyüklüğünde başlık yarat. İşte aslında bu kadar basit kod yazmak.

Tahmin edebileceğiniz üzere CSS kodları çok sayıda var. Bunlardan sadece birkaç tane örnek vermek istiyoruz.

css nedir

CSS Kodları Neler;

@font-face; istediğiniz yazı tipini kullanmanıza olanak sağlar. 

font; kalın, italik, altı çizili gibi Word programında da bulunan font özelliklerini tek seferde tanımlamanızı sağlar. 

font-size; kelimelerin boyutu belirtilirken kullanılır.  

font-variant; küçük harfleri büyük harflere çevirmek için kullanılır.  

font-weight; yazıları kalın ya da ince yapmak için kullanılır.  

color; yazıların renklerini belirtmek için kullanılır.  

letter-spacing; karakterler arası boşluğu arttırmak ya da azaltmak için kullanılır.  

line-height; satır yüksekliği için kullanılır. 

word-break; satır sonlarındaki kelimeleri düzenli bölmek için kullanılır.  

word-spacing; kelimeler arasında boşluğu ayarlamak için kullanılır.  

word-wrap; satır sonundaki kelimeleri düzgün bölmek için kullanılır.  

writing-modeyatay şeklinde olan kelimeleri dikey şekline çevirmek için kullanılır.  

text-transformyazı içindeki büyük ve küçük harfleri ayarlamak için kullanılır.  

text-align; yazının hizasını ayarlamak için kullanılır. 

text-decoration; kelimelerin üzerini çizmek ya da çizili olanları kaldırmak için kullanılır. 

text-shadow; kelimelere gölge vermek için kullanılır.

CSS Kodları Nasıl Kullanılır?

CSS kodlarından özetle yukarıda bahsettik. Gelin kodların en çok kullanılan bir kaçını biraz daha açalım ve nasıl kullanılacaklarına dair örnekler verelim. CSS kodlarını fontlar, metin özellikleri, padding, border gibi alt başlıklara ayırarak en çok kullananları daha detaylı anlatmaya çalışalım.

CSS Font Kodları Kullanımı;

Size; genellikle px veya em birimleri kullanılarak yazı boyutları belirtilir. 1 em = 16 px’ dir.

Örnek kod yazımı;  

<p style=”font-size:16px;”>16px yazı boyutu</p>

Yani; yazdığınız kelimeler 16 px boyutunda yazılsın demiş oluyorsunuz.

Family; kelimelerin hangi fonttan yazılmasını istediğinizi belirtirsiniz.

Örnek kod yazımı;  

p { 

    font-family: “Times New Roman”, Arial, serif; 

}

Yani; kelimelerin Times New Roman, Arial ve Serif fontlarında yazılmasını belirtmiş oldunuz. Dikkat edilmesi gereken en önemli nokta birden fazla font girmek istiyorsanız “ işaret kullanılmasıdır.

css nedir

Weight; kelimelerin kalınlık incelik durumlarını belirtir. Seçenekleriniz bold, bolder, lighter, normal ve rakamla kalınlık belirtmek vardır.

Örnek kod yazımı; 

<p style=”font-weight:bold;”>font-weight:bold;</p>

Yani; dediniz ki yazdığınız kelimeler kalın olsun.

Style; Word programında bildiğiniz italik ya da normal şekillerini belirtir.

Örnek kod yazımı;  

<p style=”font-style:italic;”>font-style:italic;</p>

Yani; yazdığınız kelimeler italik olsun demiş oldunuz.

Dikkat ederseniz kod yazım şekilleri neredeyse hep aynı. Şimdi de biraz metin özellikleri için en çok kullanılan kodlara göz atalım.

Color; tahmin edeceğiniz üzere kelimelerin renklerini belirlersiniz. İstediğiniz rengin İngilizce karşılığını direk yazabileceğiniz gibi renkleri kod ile de belirtebilirsiniz. Renk kodları ile ilgili daha detaylı bilgiye sahip olmak için renk kodları listesini inceleyebilirsiniz.

Örnek kod yazımı;  

<p style=“color:red;”>color:red;</p>

Yani; yazdığınız kelimelerin kırmızı renkte olmasını istediniz.

Align; yazının hizasını belirlersiniz. Seçenekleriniz sağ, sol, orta şeklindedir.

Örnek kod yazımı;  

<p style=”text-align:right;”>text-align:right;</p>

Yani; yazınızın sağa hizalı şekilde olmasını istediniz.

Decoration; kelimelerin altını üstünü çizebildiğiniz bir koddur. Altını çizme, üstünü çizme, üzerini seçme gibi seçenekleriniz vardır.

Örnek kod yazma; 

<p style=”text-decoration:underline;”>text-decoration:underline;</p>

Yani; yazınızın altı çizili olmasını istediniz.

Transform; küçük harf büyük harf değişikliğini yerine getirebilirsiniz.

Örnek kod yazımı; 

<p style=”text-transform:uppercase;”>hello world!  (uppercase)</p>

Yani; “hello world” kelimesi içinde yer alan küçük harflerin büyük harfe dönüşmesini istediniz.

Yukarıda detaylı olarak belirttiğimiz özellikler dışında border, padding başlıkları altında da pek çok özellik bulunur. Bütün CSS kodları ile ilgili detaylı bilgiye ulaşmak için internette yer alan CSS listesini inceleyebilirsiniz.

YORUMLAR



Henüz yorum yapılmamış.