koddla

Yazılımcıları bilgi ile güçlendirir.

CSS (Stil Sayfaları), web içeriğini stilleyen koddur. CSS temelleri makalesinde başlamak için ihtiyacınız olan şeylere bakacağız. Şu soruları yanıtlayacağız: Metni nasıl kırmızıya boyarız? Bazı içeriklerin web sayfası düzeninde belirli bir konumda görüntülenmesini nasıl sağlayabilirim? Web sayfamı arka plan resimleri ve renklerle nasıl dekore ederim?

CSS nedir?

HTML gibi, CSS de bir programlama dili değildir. CSS işaretleme dili de değildir. CSS bir stil sayfası dilidir. CSS, HTML öğelerini seçerek stil vermek için kullandığınız şeydir. Örneğin, aşağıdaki CSS paragraf metnini seçerek rengi kırmızıya ayarlar:

p {
  color: red;
}

Hadi deneyelim! Metin düzenleyicisi kullanarak, üç satır CSS’yi (yukarıda) yeni bir dosyaya yapıştırın. Dosyayı style.css olarak isimlendirip styles klasörüne kaydedin.

Kodun çalışmasını sağlamak için, bu CSS’yi HTML belgenize uygulamamız gerekir. Aksi takdirde, stil HTML’nin görünümünü değiştirmez. (Projemizi takip etmiyorsanız, dosyalarla ve HTML temelleriyle başa çıkma’yı okumanız tavsiye edilir.)

  1. index.html dosyanızı açın. Aşağıdaki satırı head bölümüne yapıştırın (<head> ve </head> etiketleri arasına): 
    <link href="styles/style.css" rel="stylesheet">
  2. Kaydedin ve tarayıcınızda index.html‘i açın. Şöyle bir şey görmelisiniz:

Mozilla logosu ve bazı paragraflar. Paragraf metni css tarafından kırmızıya şekillendirilmiştir.Paragraf metniniz kırmızıysa, tebrikler! CSS’niz çalışıyor.

CSS kural kümesinin anatomisi

Nasıl çalıştığını anlamak için kırmızı paragraf metninin CSS kodunu inceleyelim:

CSS p bildirim rengi kırmızı

Tüm yapıya kural kümesi denir. (Kural kümesi terimi genellikle yalnızca kural olarak adlandırılır.) Tek tek bölümlerin adlarına dikkat edin:

Seçici (selector): Kural kümesinin başındaki HTML öğesi adıdır. Stil verilecek öğeleri tanımlar (bu örnekte, <p>). Farklı bir öğeye stil vermek için seçiciyi değiştirin.

Tanımlama (declaration): Bu tek bir kural. Öğenin özelliklerinden hangisine stil vermek istediğinizi belirtir. color: red;

Özellikler (property): Bir HTML öğesine stil vermenin bir çok yolu bulunur. CSS’de, kuralda hangi özellikleri etkilemek istediğinizi seçersiniz. Bu örnekte color özelliği.

Özellik değeri (property value): Özelliğin sağında —iki nokta üst üste işaretinden sonra— özellik değeri vardır. Bu, belirli bir özellik için olası görünümlerin çoğundan birini seçer. Bu örnekte red.

Sözdiziminin diğer önemli bölümlerine dikkat edin:

  • Seçici dışında, her kural kümesi parantezlerle sarılmalıdır. ({})
  • Her bildirimde, özelliği değerinden veya değerlerinden ayırmak için iki nokta üst üste kullanmanız gerekir.(:)
  • Her kural kümesinde, her bildirimi bir sonrakinden ayırmak için noktalı virgül kullanmanız gerekir.(;)

Bir kural kümesindeki birden çok özellik değerini değiştirmek için bunları noktalı virgülle ayrılmış olarak yazın:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Birden çok öğe seçme

Ayrıca birden çok öğe seçebilir ve hepsine tek bir kural kümesi uygulayabilirsiniz. Birden çok seçiciyi virgülle ayırırız. Mesela:

p, li, h1 {
  color: red;
}

Farklı seçici türleri

Birçok farklı seçici türü vardır. Yukarıdaki örnekler, belirli bir türün tüm öğelerini seçen öğe seçicilerini kullandı. Ama daha spesifik seçimler de yapabiliriz. Aşağıda, daha yaygın seçici türlerinden bazıları yer alır:

Seçici adıNe seçer?Örnek
Öğe seçici (bazen etiket veya tür seçici olarak adlandırılır)Belirtilen türdeki tüm HTML öğeleri.p
tüm <p> öğelerini seçer
Kimlik seçiciBelirtilen kimliği olan sayfadaki öğe. Bir HTML sayfasında her kimlik değeri benzersiz olmalıdır.#my-id
<p id="my-id"> veya <a id="my-id"> öğesini seçer
Sınıf seçiciBelirtilen sınıfa sahip sayfadaki öğe(ler). Bir sayfada aynı sınıfın birden çok örneği görünebilir..my-class
<p class="my-class">
<a class="my-class">
Öznitelik seçiciBelirtilen özniteliklere sahip sayfadaki öğeleri.img[src]
<img src="myimage.png"> elementini seçer ama <img> elementini seçmez
Sahte sınıf seçiciBelirtilen öğeleri, ancak belirtilen durumdayken seçer (Örneğin, imleç bir bağlantının üzerine geldiğinde.)a:hover
<a>‘yı seçer, ancak yalnızca fare işaretçisi bağlantının üzerine geldiğinde.

Keşfedilecek daha birçok seçici bulunur. Daha fazla bilgi için MDN Seçiciler kılavuzuna bakın.

Yazı tipleri ve metin

Bazı CSS temellerini incelediğimiz için style.css dosyasına daha fazla kural ve bilgi ekleyerek görünümünü iyileştirelim.

  1. İlk olarak, daha önce kaydettiğiniz Google Fonts çıktısını bulun (Web siteniz nasıl görünecek? kısmında incelemiştik). index.html içinde <link> öğesi ile head içinde bir yere (<head></head> etiketleri arasında herhangi bir yere) ekleyin. Şöyle bir şeye benzemeli: 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    Bu kod, Open Sans yazı tipi ailesini web sayfanızla ilişkilendiren bir stil sayfasına bağlar.
  2. Ardından, style.css dosyanızda bulunan varolan kuralı silin. İyi bir testti, ama çok fazla kırmızı metinle devam etmeyelim.
  3. Aşağıdaki satırları ekleyin. font-family, metin için kullanmak istediğiniz yazı tiplerini ifade eder. Aşağıdaki kural ile tüm sayfa için genel bir temel yazı tipi ve yazı tipi boyutu tanımladık. <html> tüm sayfanın üst öğesi olduğundan, içindeki tüm öğeler aynı font tipi ve boyutunu alırlar.

html {
  font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high  */
  font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google fonts */
}

Not: /* ve */ arasındaki her şey CSS’de yorumdur. Tarayıcı, kodu işlerken yorumları yoksayar. CSS yorumları, kodunuz veya mantığınız hakkında yararlı notlar yazmanın bir yoludur.

  1. Şimdi HTML gövdesinin içinde metin olacak öğeler için yazı tipi boyutlarını ayarlayalım (<h1>, <li>ve <p>). Başlığı da ortalayalım. Son olarak, gövde içeriğini daha okunabilir hale getirmek için ikinci kural kümesini (aşağıda) satır yüksekliği ve harf aralığı ayarlarıyla genişletelim.
h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

Değerleri istediğiniz gibi ayarlayın. Çalışmalarınız şuna benzer görünmelidir:

mozilla logosu ve bazı paragraflar. Sans-Serif yazı tipi ayarlanmış, yazı tipi boyutları, satır yüksekliği ve harf aralığı ayarlanmış ve ana sayfa başlığı ortalanmıştır

CSS: kutular hakkında her şey

CSS yazma konusunda fark edeceğiniz bir şey: çoğu kural kutularla ilgilidir. Bu, boyut, renk ve konum ayarlamayı içerir. Sayfanızdaki çoğu HTML öğesi, diğer kutuların üzerine oturan kutular olarak düşünülebilir.

büyük bir kutu yığını veya sandıklar üst üste oturdu

CSS düzeni çoğunlukla kutu modelini temel alır. Sayfanızda yer kaplayan her kutunun özellikleri vardır:

  • padding, içeriğin etrafındaki boşluk. Aşağıdaki örnekte, paragraf metninin etrafındaki boşluktır.
  • border, dolgunun hemen dışındaki sürekli çizgi.
  • margin, sınırın dışındaki boşluk.
üç kutu birbirinin içinde oturdu. Dışarıdan içeriye kenar boşluğu, kenarlık ve dolgu olarak etiketlenirler

Bu bölümde ayrıca şunları kullanıyoruz:

  • width bir öğenin boyutu.
  • background-color, bir öğenin içeriğinin ve doldurmasının arkasındaki renk.
  • color, öğenin içeriğinin rengi (genellikle metin).
  • text-shadow öğenin içindeki metin üzerinde bir alt gölge ayarlar.
  • display bir öğenin görüntü modunu ayarlar. (daha fazla bilgi edinmek için okumaya devam edin)

Devam etmek için daha fazla CSS ekleyelim. style.css ‘nin altına bu yeni kuralları eklemeye devam edin. Ne olduğunu görmek için farklı değerleri deneyin.

Sayfa rengini değiştirme

html {
  background-color: #00539F;
}

Bu kural, sayfanın tamamı için bir arka plan rengi ayarlar. Renk kodunu istediğiniz renge göre değiştirin.

Gövdeyi şekillendirme

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

<body> için tanımları tek tek gözden geçirelim:

  • width: 600px; Bu, gövdeyi her zaman 600 piksel genişliğinde olmaya zorlar.
  • margin: 0 auto; margin veya padding gibi bir özellikte iki değer ayarladığınızda ilk değer öğenin üst ve alt tarafını etkiler (bu durumda 0‘a ayarlanır); ikinci değer sol ve sağ tarafı etkiler. (Burada, kullanılabilir yatay boşluğu sol ve sağ arasında eşit olarak bölen özel bir değerdir). 
  • background-color: #FF9500; Bu, öğenin arka plan rengini ayarlar. Bu proje, <html> elementi için koyu mavinin aksine, gövde arka plan rengi için kırmızımsı bir turuncu kullanır. (Farklı renkleri denemekten çekinmeyin.)
  • padding: 0 20px 20px 20px; Bu, doldurma için dört değer ayarlar. Amaç, içeriğin etrafına biraz alan koymaktır. Bu örnekte, gövdenin üstünde dolgu yoktur ve sağda, altta ve solda 20 piksel vardır. Değerler bu sırada, üst, sağ, alt, sol olarak ayarlanır.
  • border: 5px solid black; Bu, kenarlık genişliği, stili ve rengi için değerleri ayarlar. Bu durumda, gövdenin her tarafında beş piksel genişliğinde, düz siyah bir kenarlıktır.

Ana sayfa başlığını konumlandırma ve şekillendirme

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Gövdenin tepesinde korkunç bir boşluk olduğunu fark etmişsinizdir. Bunun nedeni, tarayıcıların <h1> elementine (diğerlerinin yanı sıra) varsayılan bir stil uygulamasıdır. Bu kötü bir fikir gibi görünebilir, ancak amaç stilsiz sayfalar için temel okunabilirlik sağlamaktır. Boşluğu ortadan kaldırmak için, tarayıcının varsayılan stilini ayarlayalım: margin: 0;

Ardından, başlığın üst ve alt dolgularını 20 piksel olarak ayarladık.

Bundan sonra, başlık metnini HTML arka plan rengiyle aynı renk olarak ayarladık.

Son olarak, öğenin metin içeriğine text-shadow ile bir gölge uyguladık. Verebileceğimiz dört gölge değeri şunlardır:

  • İlk piksel değeri, metinden gölgenin yatay uzaklığını ayarlar: ne kadar uzağa hareket eder.
  • İkinci piksel değeri, gölgenin metinden dikey uzaklığını ayarlar: ne kadar aşağı hareket eder.
  • Üçüncü piksel değeri gölgenin bulanıklaştırma yarıçapını ayarlar. Daha büyük bir değer verirsek daha bulanık görünümlü bir gölge üretiriz.
  • Dördüncü değer gölgenin temel rengini ayarlar.

Görünümü nasıl değiştirdiğini görmek için farklı değerlerle denemeler yapmayı deneyin.

Görseli ortalama

img {
  display: block;
  margin: 0 auto;
}

Daha sonra, görseli daha iyi görünmesi için ortalıyoruz. Gövde için yaptığımız hileyi (margin: 0 auto) tekrar kullanabiliriz. Ancak, CSS’nin burada çalışması için ek bir ayar gerektiren farklılıklar bulunuyor.

<body> bir blok öğesidir, yani sayfada yer kaplar. Bir blok öğesine uygulanan kenar boşluğu, sayfadaki diğer öğeler tarafından dikkate alınacaktır. Buna karşılık, görseller satır içi öğelerdir, otomatik kenar boşluğu hilesinin bu görüntü üzerinde çalışması için, display: block; kullanarak blok düzeyinde davranış vermeliyiz.

Not: Yukarıdaki yönergeler, gövdede ayarlanan genişlikten daha küçük bir görsel kullandığınızı varsayar. (600 piksel). Görseliniz daha büyükse, sayfanın geri kalanına taşarak gövdeyi aşar. Bunu düzeltmek için şunları yapabilirsiniz: 1) görsel genişliğini grafik düzenleyicisi ile ayarlayabilir veya 2) görsel öğesindeki width özelliğini kullanarak daha küçük bir değerle boyutlamak için CSS kullanabilirsiniz.

Not: Bir blok öğesi ile satır içi öğe arasındaki farkları tam olarak anlamıyorsanız çok endişelenmeyin. CSS çalışmanıza devam ettikçe daha mantıklı olacaktır.

Son

Bu makaledeki tüm yönergeleri izlediyseniz, buna benzer bir sayfanız olmalıdır:

mozilla logosu, ortalanmış ve üstbilgi ve paragraflar. Şimdi güzel bir şekilde stillenmiş görünüyor, tüm sayfa için mavi bir arka plan ve ortalanmış ana içerik şeridi için turuncu arka plan.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Back to top