Skip to content

Latest commit

 

History

History
125 lines (97 loc) · 2.04 KB

ornek.css.md

File metadata and controls

125 lines (97 loc) · 2.04 KB
Raw

CSS Nedir?

CSS, “Cascading Style Sheets" kelimelerinin kısaltılmasından oluştur ve türkçe anlamı Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları şeklindedir.

CSS en temel haliyle HTML etiketlerimizin görsel açından biçimlendirilmesini (Renk, yazı şekli, arka plan rengi, genişlik, yükseklik, pozisyon durumu vs) sağlar.

CSS’in sahip olduğu seçiciler vardır. Bunlar id ve class olarak ikiye ayrılır. HTML etiketlerinde tanımladığımız seçici isimleriyle birlikte CSS kullanarak etiketleri biçimlendiririz.

CSS'in Yapısı

CSS Seçici Terminolojisi

HTML + CSS + JS = Web Page

Satıriçi (Inline) CSS

<h1 style="color: blue"> Merhaba Dünya! </h1>

Sayfa İçi (Internal) CSS

<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>

Dosyadan (External) CSS Kullanımı

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

//style.css

h1 {
   color: blue;
}

Element İçin CSS Tanımı

h1 {
    font-size: 20px;
}
p {
    color: green;
}
div {
    margin: 10px;
}

Class Tanımı ve Kullanımı

<div class='container'>
    <h1> Burası başlıktır </h1>
</div>
...
...
.container {
    margin: 10px;
}

ID İle CSS Tanımı ve Kullanımı

<div>
    <p id='para1'> Burası bir paragraftır </p>
</div>
...
...
#para1 {
    color: green;
    font-size: 16px;
}

CSS'de Açıklama Kullanmak

   /* Paragraf Stilim */
   p
   {
      /* Renk kırmızı olacak */
      color: red;

      /* Ortalanmış olacak */
      text-align: center;
   }

CSS Seçici Tanımları

  .stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }
   
   div.stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }