CSS nasıl yapılandırılır

Artık CSS'in amacını ve kullanımını anlamaya başladığına göre, CSS'in yapısını inceleyelim.

Önkoşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler,  HTML temelleri (IHTML'ye Giriş bölümünü incele) ve CSS'in nasıl çalıştığı hakkın bilgi.
Amaç: CSS'in temel sözdizimi yapılarını ayrıntılı olarak öğrenmek.

CSS'i HTML'ye uygulama

İlk olarak, bir belgeye CSS uygulamak için üç yöntemi inceleyelim: harici bir stil sayfasıyla, dahili bir stil sayfasıyla ve satır içi stillerle.

Harici stil sayfası

Harici bir stil sayfası, .css uzantısına sahip, içerisinde CSS kurallarını içeren ayrı bir dosyadır. Bu, CSS'i bir HTML belgesine getirmenin en yaygın ve kullanışlı yöntemidir. Tek bir CSS dosyasını birden çok web sayfasına bağlayarak hepsini aynı CSS stil sayfasıyla şekillendirebilirsin. CSS'e Başlarken bölümünde harici bir stil sayfasını web sayfamıza bağlamıştık.

Bir HTML <link> etiketi ile harici bir CSS stil sayfası dosyasına başvuruyoruz :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS deneyimim</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu benim ilk CSS örneğim</p>
  </body>
</html>

CSS stil sayfası dosyası aşağıdaki şekilde görünebilir:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

<link> etiketi href niteliğinde belirtilen yokdaki bir dosyaya işaret ediyor. Yukarıdaki örnekte, CSS dosyası HTML belgesiyle aynı klasördeydi, ancak dosya farklı bir klasöre de yerleştirilip yolu belirtebiliriz. İşte üç tane örnek:

<!-- CSS dosyası geçerli dizinin içindeki 'styles' alt klasörünün içerisinde  -->
<link rel="stylesheet" href="styles/style.css">

<!-- CSS dosyası geçerli dizinin içindeki 'styles' alt klasörünün içerindeki 'general' alt klasörünün içinde-->
<link rel="stylesheet" href="styles/general/style.css">

<!-- CSS dosyası geçerli dizinin bir üst klasöründe bulunan 'styles' klasörünün içinde -->
<link rel="stylesheet" href="../styles/style.css">

Dahili stil sayfası

Dahili bir stil sayfası, HTML belgesinin içinde bulur. Dahili bir stil sayfası oluşturmak için, CSS'i  HTML içindeki <head> etiketi içerisinde ki, <style> etiketi içerisinde yetleştirmeliyiz.

Dahili bir stil sayfasının HTML'si şöyle görünebilir:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS deneyimim</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu benim ilk CSS örneğim</p>
  </body>
</html>

Bazı durumlarda, dahili stil sayfaları faydalı olabilir. Örneğin, harici CSS dosyalarını değiştirmenin engellendiği bir içerik yönetim sistemiyle çalşıyorsundur.

Ancak birden fazla sayfası olan siteler için dahili stil sayfası daha az verimli bir çalışma yöntemi haline gelir. Dahili stil sayfalarını kullanarak, birden çok sayfaya tek bir CSS stili uygulamak için, stili kullanacak her web sayfaya dahili CSS sayfalarını eklemen gerekmektedir. Verimlilik kaybı site bakımınada yansır, çünkü dahili stil sayfalarında ki CSS içerisinde basit bir stil değişikliğini bile birden çok web sayfasında düzenlemek zorunda kalırsın.

Satır içi stiller

Satır içi stiller, bir style niteliği içinde bulunan tek bir HTML öğesini etkileyen CSS bildirimleridir. Bir HTML belgesinde satır içi stilin uygulanması şu şekilde görünebilir:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS deneyimim</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Merhaba Dünya!</h1>
    <p style="color:red;">Benim ilk CSS örneğim</p>
  </body>
</html>

Mümkünse CSS'i bu şekilde kullanmaktan sakının. En iyi uygulamanın tam tersidir. Birincisi, bakım için CSS'in en az verimli uygulamasıdır. Bir stil değişikliği, tek bir web sayfasında birden fazla düzenleme gerektirebilir. İkincisi, satır içi CSS kodlarıyla HTML içeriklerini karıştırarak her şeyin okunmasını ve anlaşılmasını zorlaştırır. Kodu ve içeriği ayırmak, web sitesinde çalışan herkes için bakımı kolaylaştırır.

Satır içi stillerin daha yaygın olduğu birkaç durum vardır. Çalışma ortamın çok kısıtlayıcıysa, satır içi stilleri kullanmaya başvurman gerekebilir. Örn; belki bir CMS'n yalnca HTML gövdesini düzenlemene izin verir. Ayrıca, olabildiğince çok e-posta istemcisiyle uyumluluk sağlamak için, e-posta içindeki HTML'de çok sayıda satır içi stil kullanabilirsin.

CSS ile oynamak

Aşağıdaki alıştırma için bilgisayarında bir klasör oluşturun. Klasörü istediğin gibi adlandırabilirsin. Klasörün içinde, iki dosya oluşturmak için aşağıdaki metni kopyalayın:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS deneyimim</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body> 

    <p>Test HTML'ni burada oluşturun</p>

  </body>
</html>

styles.css:

/* Create your test CSS here */

p {
  color: red;
}

Denemek ve değişiklik yapmak için hem HTML dosyandaki <body> etiketi arasına hemde CSS stil sayfana öğeler ve kurallar ekle.

Aşağıdaki etkileşimle düzenleyiciyi de kullanabilirsin..

 

Oku ve eğlen!

Seçiciler

Bir seçici, stil uygulayacağı içerik için HTML'yi hedefler. CSS'e başlarken dersinde çeşitli seçiciler keşfetmiştik. Eğer CSS içeriğe istenildiği gibi uygulanmıyorsa, seçicin istediğin şekilde eşleşmiyor olabilir.

Her CSS kuralı, tarayıcıya kuralların hangi öğe veya öğelere uygulanması gerektiğini söylemek için bir seçici veya seçici listesi ile başlar. Aşağıdaki tüm örnekler geçerli seçicilerdir.

h1                   /*seçici*/
a:link               /*seçici*/
.manythings          /*seçici*/
#onething            /*seçici*/
*                    /*genel seçici*/
.box p               /*seçici*/
.box p:first-child   /*seçici*/
h1, h2, .intro       /*seçici listesi*/

Yukarıdaki seçicileri kullanan bazı CSS kuralları oluşturmayı dene. Seçiciler tarafından şekillendirilecek HTML öğeleri ekle. Yukarıdaki sözdiziminden herhangi birine aşina değilsen, MDN'yi aramayı dene.

Not: bir sonraki kısımda seçiciler hakkında daha fazla bilgi edineceksini CSS seçicileri.

Özgüllük

İki seçicinin aynı HTML öğesini hedeflediği senaryolarla karşılaşabilirsin. Paragraf <p> metnini maviye ayarlayan ayrıca tanımlandığı öğenin rengini kırmızıya ayarlayan bir sınıf kuralı olan stil sayfasını düşünün

.special {
  color: red;
}

p {
  color: blue;
}

HTML belgemizde de bir special sınıfına ait paragrafımız olduğunu varsayalım. Her iki kural da uygulanır. Fakat hangi kural baskındır? Mavi veya kırmızı paragraf menini görmeyi bekliyor musun?

<p class="special">Benim rengim nedir?</p>

CSS dili, bir çakışma durumunda hangi seçicinin daha güçlü olduğunu kontrol etmek için bazı kurallara sahiptir. Bu kurallara art arda denetim ve özgüllük denir. Aşağıdaki kod bloğunda, seçici için iki kural tamınlarız. Ancak <p> paragraf metni mavi olacaktır. Bunun nedeni, paragraf metnini mavi olarak ayarlayan bildirimin diğer bildirimden daha sonra tanımlanmış olması. Seçimlerin çakışması durumunda sonraki stiller, kendilerinden önce tanımlanmış stil kurallarını geçersiz kılıp yerlerine geçerler. Bu art arda denetim kuralıdır.

p {
  color: red;
}

p {
  color: blue;
}

Bununla birlikte, sınıf seçicisi ile öğe seçicisi arasındaki çakışmaya sahip bir önceki örneğimizde, sınıf seçici kırmızı paragraf metnini oluşturarak baskın seçici olduğunu kanıtlar. Peki çakışan bir stil daha sonraki satırlada görünen bir seçiçiye nasıl baskın olabilir? Bir sınıf, öğe seçiciden daha fazla özgüllüğe sahip olduğu gibi daha karakteristik olarak derecelendirilir, bu nedenle diğer çakışan stil bildirimini iptal eder.

Kendin için bunu dene! Bir HTML ekle ve ardından bu iki kuralı stil sayfana ekle. Ardından p.special kuralının p{....} kuralına baskın geldiğini izle.

Özgüllük ve art arda denetim kuralları ilk bakışta karmaşık görünebilir. CSS'e aşına oldukça bu kuralları anlamak daha kolay olcak. Bir sonraki kısımda Ard arda denetim ve miras bölümü özgüllüğün nasıl hesaplanacağı da dahil olmak üzere bunu ayrıntılı olarak açıklamaktadır.

Şimdilik, özgüllüğün var olduğunu unutmayın. Bazen, stil sayfasındaki başka bir şeyin daha karakteristik olması nedeniyle CSS beklediğin gibi uygulanmayabilir. Bir öğeye birden fazla kuralın uygulanabileceğini anlamak, bu tür sorunları çözmenin ilk adımıdır.

Nitelikler ve değerler

En basit düzeyinde, CSS iki bileşenden oluşur:

  • Nitelik: Bunlar, değiştirmek istediğin stilin niteliklerini gösteren, okunabilir tanımlayacılardır. Örn; font-size, width, background-color.
  • Değer: Her niteliğe bir değer atanır. Bu değer, niteliğin nasıl biçimlendirileceğini gösterir.

Aşağıdaki örnek, tek bir niteliği ve değeri vurgulamaktadır. Nitelik adı color ve değeri blue.

A declaration highlighted in the CSS

Bir nitelik bir değerle eşleştirildiğinde, bu eşlemeye CSS bildirimi adı verilir. CSS bildirimleri CSS Bildirim Blokları içinde bulunur. Aşağıdaki örnekte, vurgulanan CSS bildirim bloğunu tanımlar.

A highlighted declaration block

Son olarak, CSS kural kümeleri(veya CSS kuralları) oluşturmak için CSS bildirim blokları seçicilerle eşleştirilir. Aşağıdaki örnekte iki kural içerir: biri <p> etiketi için, diğeri <h1> etiketi için. Renkli vurgulanan CSS kuralı <h1> etiketinin stilini tanımlar.

The rule for h1 highlighted

CSS niteliklerini belirli değerlere ayarlamak, bir belge için düzen ve stil tanımlamanın birincil yoludur. CSS motoru, bir sayfanın her öğesi için hangi bildirimlerin geçerli olduğunu hesaplar.

Önemli: CSS nitelikleri ve değerleri büyük/küçük harfe duyarlıdır. Her çifteki nitelik ve değer iki nokta üst üste ile ayrılır. (:)

Aşağıda listenen niteliklerin farklı değerlerini arayın. Farklı HTML öğelerine stil uygulayan CSS kurallar yazın:

Önemli: Bir nitelik bilinmiyorsa veya belirli bir nitelik için bir değer geçerli değilse, beyan geçersiz olarak işlenir. Tarayıcının CSS motoru tarafından tamamem yok sayılır.

Önemli: CSS'de (ve diğer web standartlarında), dil varyasyonunun veya belirsizliğin olduğu yerlerde ABD yazımının standart olduğu kabul edilmiştir. 

Fonksiyonlar

Değerlerin çoğu nispeten basit anahtar kelimeler veya sayısal değerler olsa da, bir işlev biçimini alan bazı değerler vardır. calc() fonksiyonu ele alalım, CSS içinde matematiksel işlev yapabilen bir fonksiyondur.

<div class="outer"><div class="box">İç kutu genişliği 90% - 30px.</div></div>
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

Bu şu şekilde çalışır:

Bu işlev, işlev adı ve işlevin değerlerini kapsayan parantezlerden oluşur. calc() yukarıdaki örnekte, kutunun genişliğini değerler içeren blok genişliğinin %90 eksi 30piksel olmasını tanımlar. Hesaplamanın sonucu, önceden hesaplanabilen ve sabit bir değer olarak girilebilen  değer değildir.

Başka bir örnek transform niteliği,  rotate()fonksiyonundan dönen değerleri alabilir.

<div class="box"></div>
.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn)
}

Yukarıdaki kodun çıktısı şuna benzer:

Aşağıdaki listelenen niteliklerin farklı değerlerini arayın. Farklı HTML öğelerine stil uygulayan CSS kuralları yazın:

@rules(kurallar)

CSS @rules ("et-rules" olarak teleffuz edilier), CSS'in ne yapması gerektiği ve nasıl davranması gerektiği konusunda talimatlar sağlar. Bazıları @rules sadece bir anahtar ve bir değerden ibarettir. Örn; @import bir stil sayfasını başka bir CSS stil sayfasına aktarır:

@import 'styles2.css';

Karşılaşabileceğin en yaygın @rule kurallarından birtanesi @mediamedya sorguları oluşturmak için kullanılr. Medya sorguları, CSS stilini uygualamak için koşullu mantık kullanır.

Aşağıdaki örnekte, stil sayfası <body> öğesi için pembe renkli bir arka plan tanımlayan bir medya sorgusu izler.

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

Eğitimler boyunda diğer @rules kurallarıyla karılaşacaksın.

Görünüm genişliğine göre stilleri değiştiren bir ortam sorgusu ekleyip ekeleyemeceğini görün. Sonucu görmek için tarayıcı pencerenin genişliğini değiştirin.

Kısaltmalar

font, background, padding, border, ve margin gibi bazı niteliklere kısaltmalar denir. Bunun nedeni tekbir satırda birden fazla değer alabilmeleridir.

Örneğin, bu tek satırlık kod:

/* dolgu ve kenar boşluğu gibi 4 ayrı değer uygulanır.
   Sırasıyla üst, sağ, alt, sol (üsten başlayarak saat
   yönünde). Ayrıca kısaltma olarak kullanılan başka
   niteliklerde vardır.*/
padding: 10px 15px 15px 5px;

şu dört kod satırına eşdeğerdir:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

Bu tek satır:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

Şu beş satıra eşdeğerdir:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

Kursun ilerleyen bölümlerinde, birçok kısaltma örneğiyle karşılaşacaksın. MDN'nin CSS referensı sayfaları herhangi bir kısaltma niteliği hakkında daha fazla bilgi için iyi bir kaynaktır.

Nasıl çalıştığına daha iyi aşina olmak için kendi CSS alıştırmanda yukarıdaki bildirimleri kullanmayı dene. Ayrıca farklı değerleri deneyebilirsin.

Uyarı: CSS kısaltmasını kullanmanın dikkat edilmesi gekeren yönü, atlanan değerlerin sıfırlanmasıdır. CSS kısaltmasında belirtilmeyen bir değer, tarayacının varsayılan değerine geri döner. Bu da,  önceden ayarlanmış değeri geçersiz kılabileceği anlamına gelir.

Açıklamalar

Herhangi bir kodlama çalışmasında olduğu gibi, CSS ile birlikte açıklama yazmak iyi bir uygulamadır. Bu, daha sonra düzeltmeler veya geliştirmeler için geri döndüğünde kodun nasıl çalıştığını hatırlamana yardımcı olur. Ayrıca başkalarının da kodu anlamasına yardımcı olur.

CSS açıklamaları /* ile başlar ve */ ile biter. Aşağıdaki örnekteki açıklamalar, kodun farklı bölümlerinin başlangıcını işaret etmektedir. Bu, kod tanımlamasında büyüdükçe gezinmeye yardımcı olur. Bu tür açıklamalar yerinde olduğunda, kod düzenleyicinde açıklama aramak, bir kod bölümünü verimli bir şekilde bulmanın bir yolu haline gelir.

/* Temel öğe elamanını biçimlendirin. */
/* -------------------------------------------------------------------------------------------- */
body {
  font: 1em/150% Helvetica, Arial, sans-serif; 
  padding: 1em; 
  margin: 0 auto; 
  max-width: 33em;
}

@media (min-width: 70em) {
  /* Genel yazı tipi boyutunu özel olarak inceleyelim. Büyük ekran
     veya pencerede daha iyi okunabilirlilik için yazı tipi
     boyutunu arttırıyoruz. */
  body {
    font-size: 130%;
  }
}

h1 {font-size: 1.5em;}

/* DOM'da yuvalanmış belili öğeleri biçimlendirin  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {
  background-color: red; 
  border-radius: 3px;
}

div p {
  margin: 0; 
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

"Kod açıklamaları" CSS kodunu deneme için devre dışı bırakmak için de yararlıdır. Aşağıdaki örnekte, .special sınıfı açıklama içerisine alınıp devre dışı bırakılmıştır.

/*.special { 
  color: red; 
}*/

p { 
  color: blue; 
}

CSS'ne açıklamalar ekle!

Beyaz boşluk

Beyaz boşluk; gerçek boşluklar, sekmeler ve yeni satırlar(Enter) anlamına gelir. Tarayıcıların HTML'deki beyaz boşluğu yok sayması gibi, tarayıcılar da CSS içindeki beyaz boşluğu yok sayar. Beyaz boşluklar okunabilirliliği nasıl geliştirdiklerini görebilirsin.

Aşağıdaki örnekte, her bildirim (Kural bağlangıcı ve bitişi) kendi satırına sahiptir. Bu da CSS yazmanın iyi bir yolur. CSS'i okumayı ve anlamayı kolaylaştırır.

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

Aşağıdaki örnek, yukarıdaki CSS kodunun sıkıştırılmış(fazlalık boşlukların temizlenmiş) halidir. Yukarıdaki örnekle aynı işi yapmaktadır fakat okunurluluğu oldukça zordur.

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; border-radius: 3px;}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}
/*Ve hatta*/
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} div p, #id:first-line {background-color: red; border-radius: 3px;} div p {margin: 0; padding: 1em;} div p + p {padding-top: 0;}

Kendi projelerin için, kodunu kişisel tercihine göre biçimlendireceksin. Takım projeleri için, bir takımın veya projenin kendi stil rehberi olduğunu göreceğin çalışmalarında olacaktır.

Önemli: CSS bildirimlerindeki beyaz boşuk değerleri ayırsa da, nitelik adlarında hiçbir zaman boşluk olmaz.

Örneğin, bu geçerli bir CSS beyanıdır:

margin: 0 auto;
padding-left: 10px;

Fakat bu beyanlar geçersizdir:

margin: 0auto;
padding- left: 10px;

Aralık hatalarını görüyor musun? ilk olarak margin niteliği 0auto değerini geçerli bir değer olarak tanımaz. Tanımın 0auto yu iki ayrı değer olarak alması amaçlanmıştır. 0 ve auot olarak. İkinci padding- geçerli bir nitelik olarak tanınmıyor. Doğru nitelik adı (padding-left) hatalı bir boşlukla ayrılmıştır.

Her zaman birbirinden farklı değerleri en az bir boşlukla ayırdığından emin olmalısın. Nitelik adlarını ve nitelik değerlerini, bölünmüş tek dizeler olarak bir arada tutun.

/* bölünmüş tek dizeler */
margin: 0 auto; /*tek dize*/
padding-left: 10px; /*tek dize*/

/* aşağıdaki kodlar çalışır fakat okuması zor*/
margin: 
0
auot;
padding-left:
10px;

Boşluğun CSS'i nasıl bozabileceğini öğrenmek için test CSS'izin içinde boşluk bırakarak oynamayı dene.

Sıradaki ne?

Tarayıcının bir web sayfasını görüntülemek için HTML ve CSS'i nasıl kullandığını anlamak faydalıdır. Sonraki makale CSS nasıl çalışır, bunu açıklar.

Bu kısımda

  1. CSS nedir?
  2. CSS'e başlarken
  3. CSS nasıl yapılandırılır
  4. CSS nasıl çalışır
  5. Öğrendiklerini uygulama