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

Artık CSS’nin amacını ve kullanımını anlamaya başladığınıza göre, CSS’nin yapısını inceleyebiliriz.

CSS’yi HTML’ye Uygulamak

İlk olarak, bir belgeye CSS uygulamanın üç yöntemini inceleyelim: harici bir stil sayfası ile, dahili stil sayfası ile ve satır içi stiller ile.

Harici stil sayfası

Harici bir stil sayfası, .css uzantılı ayrı bir dosyada CSS içerir. Bu, CSS’yi bir belgeye tanıtmanın en yaygın ve kullanışlı yöntemidir. Tek bir CSS dosyasını birden çok web sayfasına bağlayabilir ve hepsini aynı CSS stil sayfasıyla şekillendirebilirsiniz. CSS ile başlarken yazımızda biz de web sayfasına harici bir stil bağlandık.

Bir HTML’den <link> öğesi ile harici bir CSS stil sayfasına başvururuz:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

CSS stil dosyası şöyle görünebilir:

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

p {
  color: red;
}

href özniteliği <link> öğesine dosya sistemindeki dosyayı tanıtır. Yukarıdaki örnekte CSS dosyası HTML belgesiyle aynı klasördedir, ancak onu başka bir yere yerleştirerek de yolu ayarlayabilirsiniz. İşte üç örnek:

<!-- bir klasörde-->
<link rel="stylesheet" href="styles/style.css">

<!-- bir klasörün içindeki bir klasörde-->
<link rel="stylesheet" href="styles/general/style.css">

<!-- bir seviye yukarıdaki klasörün içindeki başka bir klasörde -->
<link rel="stylesheet" href="../styles/style.css">

Dahili stil sayfası

Bir HTML belgesine dahili bir stil sayfası eklenebilir. Dahili bir stil sayfası oluşturmak için CSS’yi HTML içinde bulunan <style> öğesinin içine yerleştirirsiniz. Bu öğe de <head> öğesi içinde yer alır.

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

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

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

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

Ancak birden fazla sayfası olan siteler için dahili bir stil sayfası daha az verimli bir çalışma yöntemi haline gelir. Dahili stil sayfalarını kullanarak birden çok sayfaya tek tip CSS stili uygulamak için, stili kullanacak her web sayfasında dahili bir stil sayfası eklemeniz gerekir. Verimlilik, site bakımına da yansır. Dahili stil sayfalarındaki CSS ile basit bir stil değişikliğinin bile birden çok web sayfasında düzenleme gerektirmesi riski vardır.

Satır içi stiller

Satır içi stiller, bir style özniteliği içinde yer alan tek bir HTML öğesini etkileyen CSS bildirimleridir. Bir HTML belgesinde satır içi stilin uygulanması şöyle görünebilir:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

Mümkün olduğunda CSS’yi bu şekilde kullanmaktan kaçının. Bu En iyi uygulamanın tam tersidir. İlk olarak, bakım için CSS’nin en az verimli uygulamasıdır. Bir stil değişikliği, tek bir web sayfasında birden çok düzenleme gerektirebilir. İkinci olarak, satır içi CSS, HTML ve içerikle karışarak 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ız çok kısıtlayıcıysa, satır içi stilleri kullanmaya başvurmanız gerekebilir. Örneğin, belki de CMS’niz yalnızca HTML gövdesini düzenlemenize izin verir. Mümkün olduğu kadar çok e-posta istemcisiyle uyumluluk sağlamak için HTML e-postasında birçok satır içi stil görebilirsiniz.

CSS ile oynayalım

Aşağıdaki alıştırma için bilgisayarınızda bir klasör oluşturun. Klasöre istediğiniz ismi verebilirsiniz. Klasörün içinde iki dosya oluşturun ve aşağıdaki metni kopyalayın:

index.html:

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

    <p>Create your test HTML here</p>

  </body>
</html>

styles.css:

/* Create your test CSS here */

p {
  color: red;
}

Denemek istediğiniz CSS’yi bulduğunuzda, HTML <body> içeriğini biraz değiştirin ve ardından test CSS kodunuzu CSS dosyanıza ekleyin.

Seçiciler

Bir seçici, içeriğe stiller uygulamak için HTML’yi hedefler. CSS’ye Başlarken öğreticisinde çeşitli seçiciler keşfettik. CSS, içeriğe beklendiği gibi uygulanmıyorsa, seçiciniz, eşleşmesi gerektiğini düşündüğünüz şekilde eşleşmeyebilir.

Her CSS kuralı, tarayıcıya kuralların hangi öğeye veya öğelere uygulanacağını söylemek için bir seçiciyle veya bir seçici listesiyle başlar. Aşağıdaki tüm örnekler geçerli seçiciler veya seçiciler listeleridir.

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

Yukarıdaki seçicileri kullanan bazı CSS kuralları oluşturmayı deneyin. Seçiciler tarafından şekillendirilecek HTML kodlarını ekleyin. Yukarıdaki söz dizimlerinden herhangi biri size tanıdık gelmiyorsa, MDN’de arama yapmayı deneyin.

özgüllük

İki seçicinin aynı HTML öğesini seçtiği senaryolarla karşılaşabilirsiniz. p paragraf metnini maviye ayarlayan bir seçici ile aşağıdaki stil sayfasını düşünün. Ancak, seçilen öğelerin metnini kırmızıya ayarlayan bir sınıf da vardır.

.special {
  color: red;
}

p {
  color: blue;
}

HTML belgemizde, special sınıfına sahip bir paragrafımız olduğunu varsayalım. Her iki kural da doğru. Peki hangi seçici geçerli? Mavi peni mi kırmızı metni mi görmeyi bekliyorsunuz?

<p class="special">What color am I?</p>

CSS dili, bir çakışma durumunda hangi seçicinin daha güçlü olduğunu kontrol eden kurallara sahiptir. Bu kurallar kademeli ve özgül olarak nitelenir. Aşağıdaki kod bloğunda p için iki kural tanımlıyoruz ancak paragraf metni mavi olacaktır. Bunun nedeni, paragraf metnini maviye ayarlayan bildirimin stil sayfasında daha sonra görünmesidir. Daha sonraki stiller stil sayfasında daha önce görünen çakışan stillerin yerini alır. Bu kademeli kuraldır.

p {
  color: red;
}

p {
  color: blue;
}

Ancak, sınıf seçici ile öğe seçici arasındaki çatışmada – önceki örneğimizde olduğu gibi- sınıf üstün gelir ve paragraf metnini kırmızı yapar. Stil sayfasında daha sonra çelişen bir stil görünse bile bu nasıl olabilir? Bir sınıf, öğe seçiciden daha fazla özgüllüğe sahip olduğu gibi daha spesifik olarak derecelendirilir, bu nedenle diğer çakışan stil bildirimini iptal eder.

Bunu kendiniz de deneyin! HTML kodu ekleyin, ardından iki p { ... }kuralını stil sayfanıza ekleyin. Sonra, stili nasıl değiştirdiğini görmek için ilk p seçiciyi .special ile değiştirin.

Spesifiklik kuralları ve kademeler ilk başta karmaşık görünebilir. CSS’ye daha aşina hale geldikçe bu kuralları anlamak daha kolaydır. Özgüllüğün nasıl hesaplanacağı daha sonra ayrıntılı olarak bakacağız.

Şimdilik, özgüllük diye bir kuralın var olduğunu unutmayın. Bazen CSS beklediğiniz gibi uygulanmayabilir çünkü stil sayfasındaki başka bir şey daha spesifiktir. Bir öğeye birden fazla kuralın uygulanabileceğini kabul etmek, bu tür sorunları çözmenin ilk adımıdır.

Özellikler ve değerler

Temel düzeyde CSS iki bileşenden oluşur:

Özellikler: Bunlar, hangi stil özelliklerini değiştirmek istediğinizi belirten, insan tarafından okunabilen tanımlayıcılardır. Örneğin, font-size, width, background-color.
Değerler: Her özelliğe bir değer atanır. Bu değer, özelliğin nasıl stillendirileceğini gösterir.

Aşağıdaki örnek, tek bir özelliği ve değeri vurgulamaktadır. Özellik adı color ve değeri blue‘dur.

Bir özellik bir değerle eşleştirildiğinde, bu eşleştirmeye CSS bildirimi denir. CSS bildirimleri, CSS Bildirim Blokları içinde bulunur. Aşağıdaki örnekte üzeri çizilmiş alan CSS bildirim bloğunu tanımlar.

Son olarak, CSS bildirim blokları, CSS kural kümeleri (veya CSS kuralları ) üretmek için seçicilerle eşleştirilir. Aşağıdaki örnek iki kural içermektedir: biri h1 seçicisi için diğeri ise p seçicisi için. Renklendirilen alan h1 kuralını tanımlar.

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

Önemli: CSS özellikleri ve değerleri büyük/küçük harfe duyarlıdır. Her çiftteki özellik ve değer, iki nokta üst üste ile ayrılır. ( :)

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

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

Önemli: CSS’de (ve diğer web standartlarında), dil değişikliği veya belirsizliğin olduğu durumlarda ABD yazımının standart olduğu kabul edilmiştir. Örneğin, renk için color yazılmalıdır, colour çalışmayacaktır.

Fonksiyonlar

Değerlerin çoğu nispeten basit anahtar sözcükler veya sayısal değerler olsa da, işlev biçimini alan bazı değerler vardır. Örneğin calc() fonksiyonu CSS içinde basit matematik yapabilen bir işlevdir:

<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>

.outer {
  border: 5px solid black;
}

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

Bu şu şekilde işler:

Bir fonksiyon, işlev adından ve işlevin değerlerini içine alan parantezlerden oluşur. calc() örneğinde, blok genişliğinin %90 eksi 30 piksel olması söylenir. Hesap sonucu önceden hesaplanıp statik bir değer olarak girilebilecek bir şey olmadığında yararlıdır.

Başka bir örnek de transform özelliğinin çeşitli değerleri olabilir. Mesela rotate().

<div class="box"></div>

.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}

Yukarıdaki kodun çıktısı şöyle görünür:

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

transform
background-image, özellikle gradyan değerleri
color, özellikle rgb/rgba/hsl/hsla değerleri

@rules – kurallar

CSS @rules (“at-rules” olarak telaffuz edilir), CSS’nin ne yapması veya nasıl davranması gerektiğine ilişkin talimatlar sağlar. Bazı kurallar, yalnızca bir anahtar sözcük ve bir değer kadadr basittir. Örneğin, @import bir stil sayfasını başka bir CSS stil sayfasına aktarır:

@import 'styles2.css';

Karşılaşabileceğiniz yaygın bir @kural, medya sorgularıdır. @media medya sorguları oluşturmak için kullanılır. CSS stili uygulamak için koşullu mantıklar sağlar.

Aşağıdaki örnekte, stil sayfası, <body> öğesi için varsayılan bir pembe arka plan tanımlar. Ancak, tarayıcı görünüm alanı 30em’den genişse mavi bir arka plan tanımlayan bir medya sorgusu da bulunur.

body {
  background-color: pink;
}

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

Bu kılavuzlar boyunca başka kurallar ile de karşılaşacaksınız.

Görünüm alanı genişliğine göre stilleri değiştiren bir medya sorgusu ekleyip ekleyemeyeceğinize bakın. Sonucu görmek için tarayıcı pencerenizin genişliğini değiştirin.

kısayollar

Bazı özellikler, font, background, padding, border, ve margin gibi, kısayol tanımları olarak nitelenir. Bunun nedeni, kısayol özelliklerinin tek bir satırda birkaç değer ayarlamasıdır.

Örneğin, bu kod satı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;

İlerleyen bölümlerinde, birçok başka kısayol özellikleri örneğiyle karşılaşacaksınız. MDN’nin CSS referansı, herhangi bir kısayol özelliği hakkında daha fazla bilgi için iyi bir kaynaktır.

Nasıl çalıştığına daha aşina olmak için kendi CSS alıştırmanızda bildirimleri (yukarıda) kullanmayı deneyin. Ayrıca farklı değerlerle de deneme yapabilirsiniz.

Uyarı: CSS kısayol kullanmanın daha az belirgin bir yönü, atlanan değerlerin nasıl sıfırlandığıdır. CSS kısayolunda belirtilmeyen bir değer, başlangıç değerine geri döner. Bu, CSS kısayolunda bir ihmalin önceden ayarlanmış değerleri geçersiz kılabileceği anlamına gelir .

Yorumlar

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

CSS yorumları /* ile başlar ve */ ile biter. Aşağıdaki örnekte, yorumlar kodun farklı bölümlerinin başlangıcını işaretler. Bu, kod büyüdükçe kod tabanında gezinmeye yardımcı olur. Bu tür yorumlar yapıldığında, kod düzenleyicinizde yorum aramak, bir kod bölümünü verimli bir şekilde bulmanın bir yolu haline gelir.

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

@media (min-width: 70em) {
  /* büyük ekranlarda font boyutunu büyüt*/
  body {
    font-size: 130%;
  }
}

h1 {font-size: 1.5em;}

/* iç içe öğelerin stili*/
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {
  background-color: red;
  border-radius: 3px;
}

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

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

“Yorum yapma” kodu, test yaptıgınız zamanlarda bazı kod bölümlerini geçici olarak devre dışı bırakmak için de yararlıdır. Aşağıdaki örnekte, .special kodu “yorumlanarak” devre dışı bırakılır.

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

p {
  color: blue;
}

CSS’nize yorum ekleyin.

Beyaz boşluk

Beyaz boşluk, gerçek boşluklar, sekmeler ve yeni satırlar anlamına gelir. Tarayıcılar HTML’deki boşlukları görmezden geldiği gibi, CSS içindeki boşlukları görmezden gelir. Beyaz boşluğun önemi okunabilirliği nasıl iyileştirebileceğindedir.

Aşağıdaki örnekte, her bildirimin (kuralın başlangıç/bitişi) kendi satırı vardır. Bu tartışmasız CSS yazmanın iyi bir yoludur. CSS’yi korumayı 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;
}

Sonraki örnek, eşdeğer CSS’yi daha sıkıştırılmış bir biçimde gösterir. İki örnek de aynı şekilde çalışsa da, aşağıdakini okumak daha 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;}

Kendi projeleriniz için kodunuzu kişisel tercihinize göre biçimlendireceksiniz. Ekip projeleri için ise bir ekibin veya projenin kendi stil kılavuzuna sahip olduğunu görebilirsiniz.

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

Örneğin, bu bildirimler geçerli CSS’dir:

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

Ancak bunlar geçersizdir:

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

Boşluk hatalarını görüyor musunuz? Birincisinde, margin özelliği için 0auto geçerli bir değer olarak tanınmaz. 0auto değerinin iki ayrı değer olması amaçlanmıştır: 0 ve auto. İkincisinde tarayıcı padding-‘yi geçerli bir özellik olarak tanımıyor. Doğru özellik adı ( padding-left) hatalı bir boşlukla ayrılmış.

Her zaman birbirinden farklı değerleri en az bir boşlukla ayırdığınızdan emin olmalısınız. Özellik adlarını ve özellik değerlerini bitişik dizeler olarak bir arada tutun.

Boşluğun CSS’yi nasıl bozabileceğini öğrenmek için test CSS’nizde boşlukla oynamayı deneyin.

Sıradaki ne var?

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