Önyüz Geliştirme

CSS

H. Turgut Uyar

Mart 2019

Lisans

Creative Commons

Atıf - GayriTicari - AynıLisanslaPaylaş 4.0 Uluslararası

yazarının adı belirtilmelidir
ticari amaçla kullanılamaz
türetilen eserler aynı lisansla paylaşılmalıdır

ayrıntılı bilgi

İçindekiler

genel yapı
yazı stilleri
renkler
boşluklar
yerleştirme

CSS

Cascading Style Sheets

düz metin

boş stil dosyasını oluşturalım

Stil bağlantısı

HTML dosyasının baş kısmında: link
stil dosyası olduğunu belirtmek için: rel
stil dosyası adresi: href

<head>
  <meta charset="utf-8"/>
  <title>Doğa Kaşifleri - Karga</title>
  <link rel="stylesheet" href="kik.css"/>
</head>

Stil ayarları

hangi elemanlara uygulanacak?
ayar ismi
ayar değeri

eleman {
  ayar_ismi: ayar_değeri;
  ayar_ismi: ayar_değeri;
}

Metin hizalama

text-align: HİZA_YÖNÜ;

sola: left
sağa: right
ortaya: center
çift yandan: justify

Metin hizalama

th {
  text-align: left;
}

Normalde başlık hücreleri ortaya hizalı.

Kuraldan sonra başlık hücreleri sola hizalı.

İçindekiler

genel yapı
yazı stilleri
renkler
boşluklar
yerleştirme

Yazı tipi

font-family: 'Seçenek 1', 'Seçenek 2', 'Seçenek 3';

her seçenek bir yazı tipi “ailesi”
sıradaki seçeneği bulamıyorsan sonrakine geç
son seçenek şunlardan biri olmalı:

serif, sans-serif, monospace

Google Fonts

serbestçe kullanılabilecek yazı tipleri

önce stil dosyasına alınmalı

@import url('https://fonts.googleapis.com/css?family=Cabin:400,700|Nunito:400,700');

biri gövde, biri başlıklar için iki yazı tipi seçelim

Varsayılan yazı tipi

body elemanına uygulanırsa

bütün sayfa için geçerli olur

Varsayılan yazı tipi

body {
  font-family: 'Cabin', sans-serif;
}

Normalde yazılar tarayıcının standart yazı tipiyle gösteriliyor.

Kuraldan sonra yazılar bizim seçtiğimiz Cabin yazı tipiyle gösteriliyor.

Çoklu elemanlar

birden fazla elemana aynı stil uygulanabilir
elemanları virgülle ayırarak:

eleman_1, eleman_2 {
   ayar_ismi: ayar_değeri;
}

h1, h2 {
  font-family: 'Nunito', sans-serif;
}

Yazı boyu

font-size: BOYUT;

boyut çeşitli birimlerde verilebilir

px
em — geçerli boya göre ölçek
rem — taban boya göre ölçek

Yazı boyu

body {
  font-family: 'Cabin', sans-serif;
  font-size: 1.125rem;
}

h1 {
  font-size: 3em;
}

Normalde yazılar tarayıcının standart yazı boylarıyla gösteriliyor.

Kuraldan sonra gövde yazı boyu ve başlığın bu boya oranı değişiyor.

Yazı tipi stili

font-style: STİL;

normal: normal
italik: italic

Yazı tipi stili

em {
  font-style: normal;
}

Kuraldan sonra vurgular normal gösteriliyor.

Yazı tipi ağırlığı

font-weight: AĞIRLIK;

normal: normal
kalın: bold
veya: 400, 700

Yazı tipi ağırlığı

em {
  font-style: normal;
  font-weight: bold;
}

Kuraldan sonra vurgular kalın gösteriliyor.

Alt-üst çizgileri

text-decoration: ÇİZGİ;

yok: none
altına: underline
üstüne: overline
ortasına: line-through

Alt-üst çizgileri

em {
  font-style: normal;
  text-decoration: underline;
}

Kuraldan sonra vurgular altı çizili gösteriliyor.

Yazı rengi

color: RENK;

rengin ismi: white, black, red, …
RGB değeri

Yazı rengi

em {
  font-style: normal;
  color: #C00000;
}

Normalde vurgular italik ce siyah gösteriliyor.

Kuraldan sonra vurgular düz ve kırmızı gösteriliyor.

Arka plan rengi

background-color: RENK;

altlıkta şunları ayarlayalım:
- arka plan rengi, yazı rengi
- yazı boyu
- metin hizalaması

Altlıkta siyah arka plan, beyaz yazı, küçük boy, sağa dayalı.

Satır aralığı

line-height: YÜKSEKLİK;

yazı boyuna göre katsayı

Satır aralığı

body {
  font-family: 'Cabin', sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
}

İçindekiler

genel yapı
yazı stilleri
renkler
boşluklar
yerleştirme

Boşluklar

elemandan dışarıya doğru: margin
elemandan içeriye doğru: padding

Dış boşluklar

margin-YÖN: UZAKLIK;

sol: margin-left
sağ: margin-right
üst: margin-top
alt: margin-bottom

Dış boşluklar

footer {
  margin-top: 4em;
}

Normalde altlığın ana gövdeye uzaklığı az.

Kuraldan sonra altlığın ana gövdeye uzaklığı artıyor.

Dış boşluklar

yön belirtilmezse: bütün yönlerden aynı uzaklık

figure {
  margin: 0;
}

4 yön birden: üst sağ alt sol sırasıyla

auto niteliği kullanılırsa iki yandan aynı boşluk

İç boşluklar

padding: UZAKLIK;

dış boşluklarla aynı yazım

İç boşluklar

footer {
  margin-top: 4em;
  padding: 1em;
}

Normalde altlıktaki metnin etrafında boşluk yok.

Kuraldan sonra altlıktaki metnin dört yanında boşluk var.

İçiçe eleman seçimi

üstlükteki bağlantıların altı çizili olmasın

ama metin içindekiler eskisi gibi kalsın

alt eleman seçmek için:

üst_eleman alt_eleman {
   ayar_ismi: ayar_değeri;
}

İçiçe eleman seçimi

header a {
  text-decoration: none;
}

header nav a {
  margin-left: 1em;
}

Kuraldan sonra sadece üstlükteki bağlantıların altı çizili değil.

Düzenlemeler

üstlüğü düzenleyelim:
- renkler
- logo
- yazı tipleri
- boşluklar

İçindekiler

genel yapı
yazı stilleri
renkler
boşluklar
yerleştirme

Eleman boyutları

width: BOYUT;
height: BOYUT;

uzunluk ölçüsü
bulunulan alana göre %
diğer boyuta göre ölçekle: auto

Eleman boyutları

büyük resim bulunduğu alanın tüm enini kaplasın

img {
  width: 100%;
  height: auto;
}

bütün resimler %100 oluyor
sadece o resmi nasıl seçeceğim?

Tek eleman ayarı

HTML

kimlik niteliği: id
değeri sayfada tek olmalı

CSS

eleman#kimlik
veya: #kimlik

Tek eleman ayarı

<img src="karga.jpg"
     id="poster"
     width="1280"
     height="427"
     alt="Bir parkta ..."/>

img#poster {
  width: 100%;
  height: auto;
}

Kuraldan sonra resmin genişliği sayfayla aynı.

Maksimum genişlik

max-width: BOYUT;

logonun genişliği en fazla 360px olsun

Çoklu eleman seçme

tablonun çift satırlarının arka plan rengini değiştirelim

birden fazla eleman nasıl seçeceğim?

Eleman sınıfı ayarı

HTML

sınıf niteliği: class
bir çok elemanda olabilir

CSS

eleman.sınıf
veya: .sınıf

Eleman sınıfı ayarı

<tr>
  <th>Alem:</th>
  <td>Hayvanlar</td>
</tr>
<tr class="cift">
  <th>Şube:</th>
  <td>Kordalılar</td>
</tr>
<tr>
  <th>Sınıf:</th>
  <td>Kuşlar</td>
</tr>
<tr class="cift">
  <th>Takım:</th>
  <td>Ötücü kuşlar</td>
</tr>

tr.cift {
  background-color: #E0E0E0;
}

Kuraldan sonra çift numaralı hücrelerin arka planları gri.

Tasarım düzenlemeleri

içerik kısmına yanlardan boşluk bırakalım

büyük resim kenarlara dayalı
başlığın arka plan rengi var

kuralı hangi elemana uygulayacağız?

Eleman gruplama

gruplama elemanı: div
çoğu zaman class niteliğiyle kullanılır

Eleman gruplama

<div class="icerik">
  <p>İri yapılı, ...</p>
  ...
  <section>
    ...
  </section>
</div>

.icerik {
  max-width: 50em;
  margin: 0 auto;
}

Kuraldan sonra içerik kısmı daha dar ve ortaya hizalı.

Kod açıklamaları

hangi elemanı kapattığını takip etmek zorlaşıyor

açıklama yazmak okurken yardımcı olur:

<!-- ile başla
--> ile bitir

<div class="icerik">
  <p>İri yapılı, ...</p>
  ...
  <section>
    ...
  </section>
</div> <!-- icerik -->

Tasarım düzenlemeleri

başlığın arka plan rengini ayarlayalım
kenarlara ve büyük fotoya dayayalım

Tasarım düzenlemeleri

<div class="afis">
  <div class="icerik">
    <h1>Karga</h1>
  </div> <!-- icerik -->
</div> <!-- afis -->

.afis {
  background-color: #E0E0E0;
}

.afis h1 {
  margin-top: 0;
}

img#poster {
  display: block;
}

Paragraf içi eleman gruplama

ilk harfin boyunu büyütüp arka plan rengini değiştirelim

İlk harf daha büyük ve arka planı farklı.

div paragraf düzeyinde gruplama için
paragraf içi: span

Paragraf içi eleman gruplama

<p><span class="ilk-harf">İ</span>ri yapılı,
  düz gagalı, ...</p>

.ilk-harf {
  font-family: Georgia, serif;
  font-size: 3em;
  float: left;
  width: 1em;
  margin-right: 0.15em;
  background-color: #E0E0E0;
  text-align: center;
}

Sütunlar

galeri fotolarını sütunlara dizelim
her sütun için bir div tanımlayalım
sütunları gruplamak için de bir üst div

Sütunlar

<div class="sutun">
  <figure>
    ...
  </figure>
</div> <!-- sutun: 1 -->

<div class="sutunlar">

   <div class="sutun">
       ...
   </div> <!-- sutun: 1 -->

   ...

   <div class="sutun">
       ...
   </div> <!-- sutun: 4 -->

</div> <!-- sutunlar -->

Eleman dizme

display: flex;

.sutunlar {
  display: flex;
  justify-content: space-between;
}

Galeri fotoları dört sütun halinde dizilmiş.

resimleri yuvarlatalım
resim yazılarını ortalayalım

Yuvarlak fotolar

<section class="galeri">
  <h2>Galeri</h2>
    ...
</section> <!-- galeri -->

.galeri img {
  border-radius: 50%;
}

.galeri figcaption {
  text-align: center;
}

Galeri fotoları yuvarlak, foto yazıları ortadan hizalı.

Yerleştirme düzenlemesi

yazıları birinci, tabloyu ikinci sütuna alalım

Çoklu sınıf

bir elemana birden fazla sınıf atanabilir
boşlukla ayırarak

<div class="sutun ucte-iki">
  ...
</div>

.ucte-iki {
  width: 66.7%;
}

CSS bölümünün sonu