CSS Etiketi Nedir?

CSS Etiketleri : Html sayfaların içinde sayfanın düzenin ve stil ayarlarını yapmak için kullanılır. CSS kodlarının temel kullanım amacı HTML element veya diğer objelere stil vermek ve konumlarını belirlemektir. Sizlere Web sayfasınız düzeninin kullanıcılar ve arama motoru optimizasyonu için ne kadar önemli olduğunu daha önceki makale yazılarımızda açıklayıcı bir şekilde belirtmiştir.

Kısaca sizlere söylemem gerekirse Css etiketi Web sitesine görüntü iyileştirme işleminde kullanılmaktadır.

CSS Etiketleri Sayfa içinde kullanılacaksa aşağıdaki gibi <body> etiketinin hemen altına <style> etiketi yazılarak içine CSS etiketlerini yazabilirsiniz.

..
  <style></style>
..

CSS etiketlerini sayfa içinde yazmak istemiyorsanız style.css adli bir dosya oluşturup .html sayfanızı içine inculude (çağırmak) edebilirsiniz.

..
  <link href="css/style.css" rel="stylesheet" type="text/css" />
..

CSS kullanımı 2 çeşit olarak ayrılmıştır.

  • Class (Sınıf) Kullanımı
  • ID (Tekil Stil) Kullanımı

 

Class (Sınıf) Kullanımı : Belirlenen bir stilin tüm sayfada defalarca kullanmak için oluşturduğumuz stildir tarzıdır. Class oluşturma örneğini aşağıda gösterelim.

..
 .kirmizi-renk{
  color:red;
 }
 .mavi-renk{
  color:blue;
 }
 .yesil-renk{
   color:yellow;
 }
..

 

ID (Tekil Stil) Kullanımı : Belirlenen stil aynı sayfanın içinde sadece bir kere kullanılabilir 2 kere aynı sayfada farklı objelerde kullanılmaz. ID oluşturma örneğini aşağıda belirtiyorum.

..
 #iletisim-formu{
   background-color:blue;
 }
..

 css örnekleri

css örnekleri

CSS Etiketleri Neden Kullanılmalıdır?

CSS etiketlerinin kullanım amaçlarından birisi de Web tasarımın mobil veya tablet görünümlerindeki ayarların yapılmasıdır. Çağımız sizinde çok iyi bildiğiniz gibi internet çağı ve herkesin sahip olduğu mutlaka İnternet‘e hızlıca girebilecek bir akıllı telefonu vardır. Bu akıllı telefonlardan her saniye tüm bilgilere hızlıca erişilebilir. Bu demek oluyor ki insanların sizin yaptığınız veya yaptırdığınız Web tasarımı her zaman inceleyebilirler ve telefondan bakıldığı taktirde kötü bir görünüme sahip olsun istemezsiniz. Bunun için Web Tasarımınızı mobil uyumlu yapmanız arama motoru optimizasyonu (SEO) ve Kullanıcıların Web sitesinde sürekliliği için çok önemlidir.

 

CSS Etiketleri

CSS Etiketlerinden sizlere bahsetmek istiyorum ve sizlere mümkün olduğunca en çok kullanılanlardan etiketlerden örnekler göstermeye çalışacağım.

Örnek CSS Kullanımı:

  • float : Oluşturulan objenin sayfa üzerindeki konumunu belirlemede kullanılır.
    • Parametreleri : left, right, none, unset, inherit, initial
  • position : Oluşturulan objenin sayfa içinde serbest, daha esnek konumlandırmasına imkan veren etikettir.
    • Parametreleri : absolute, relative, fixed, static, inherit, initial, sticky, unset
  • height : Oluşutulan objenin uzunluğunu belirlemede kullanılır.
    • Parametreleri : Uzunluk ölçülerini ile yazabilirsiniz.(200px)
  • width : Objenin genişliğini belirlemede kullanılmaktadır.
    • Parametreleri : Genişliği belirmek için uzunluk ölçülerinden yazabilirsiniz. (500px)
  • background : Objelerin arka plan özelliklerini belirlemede kullanılmaktadır.
    • Parametreleri : url(), color
  • font-size : Yazıların büyüklüğünü belirlemede kullanılmaktadır.
    • Parametreleri : Tüm uzunluk ölçülerini kullanabilirsiniz.
  • margin : Objelerin dışından boşluk vermek için kullanılan CSS etiketidir. Parametreleri saat yönünde olacak şekilde verilmelidir.  (üst sağ alt sol).
    • Örnek : margin: 10px 5px 20px 15px;
  • padding : Oluşturulan objenin içine boşluk vermek için kullanılan CSS etiketidir. Parametreleri saat yönünde olacak şekilde verilmelidir. (üst sağ alt sol).
    • Örnek : padding: 20px 12px 18px 21px;
  • color : Yazı nesnelerinin renklerini belirlemede kullanılır.
    • Parametreleri : Tüm renk kodları ve ingilizce renk isimlerini girebilirsiniz.
  • text-decoration : Yazıların altı çizili üstü içizi veya formunu belirlemede kullanılan CSS etiketidir.
    • Parametreleri : blink, dashed, dotted, double, inherit, initial, line-through, none, overline, solid, underline, unset, wavy
  • font-family : Objenin içindeki yazıların tiplerini belirlemede kullanılır.
    • Kullanım : Tüm yazı ailesi isimlerini kullanabilirsiniz.
  • text-align : Yazıların objeler içindeki konumunu belirlemede kullanılan CSS etiketidir.
    • Parametreleri : center, end, inherit, initial, justify, left, right, start, unset
  • text-transform : Yazıların tamamının hepsi büyük, hepsi küçük veya paragraf başlarının büyük olması vb seçimler yaptığımız CSS etiketidir.
    • Parametreleri : capitalize, inherit, initial, lowercase, none, unset, uppercase
  • display : Objelerin görünürlüğünü ayarladığımız CSS etiketidir.
    • Parametreleri : block, contents, flex, grid, inherit, initial, inline, none, table
  • list-style-type : Listelerin stillerini ayarladığımız CSS etiketidir.
    • Parametreleri : none, disc, decimal, armenian, cambodian, circle, devanagari, georgian, gujarati, gurmukhi, hangul

 

Mümkün olduğunca en çok kullanılan etiketleri sizlerle paylaşmaya çalıştım umarım işinize yarar. Şimdiden iyi çalışmalar diliyorum.

Css Etiketleri
Etiketlendi: