8.haft design web designer web for web w

Temel CSS bilgisi
• CSS (Cascading Style Sheets - Basamaklı
Stil Sayfaları)
• Web sayfalarının tarayıcıda nasıl
görüneceğini kontrol eden bildirimsel bir
dildir.
• CSS, HTML ve JavaScript ile birlikte webin
temelini oluşturan üç temel teknolojiden
biridir.

Temel CSS bilgisi
• CSS ile bir HTML dosyasında yer alan tüm
ögelere biçim verebilir, sayfadaki yerleşim
düzenlerini kontrol edebilir, animasyonlarla
hareketlendirebilir ve görsel efekt
uygulanabilir.

Temel CSS bilgisi
• Bir CSS Kuralının Anatomisi
– Kurallar, HTML ögelerine nasıl biçim
verileceğini belirleyen özellikleri ve değerlerini
içerir. CSS kurallarını, HTML ögeleriyle
ilişkilendirmek için seçicilerden yararlanılır.

Temel CSS bilgisi
• Bir CSS Kuralının Anatomisi
– Selector: Seçici
– Declaration: Bildirim
– Property: Özellik
– Value: Değer

Temel CSS bilgisi
• Bildirim bloğunu oluşturmak için { ... }
kullanılır.
• Tüm CSS bildirimleri süslü parantezler
arasına yazılır.
• CSS bildirimleri, özellik: değer; söz dizimi
kullanılarak tanımlanır.
– CSS özellikleri; ölçü birimi (px, %, em vb.),
renk kodu (hex, rgb, rgba) ve metin gibi farklı
formatlarda değerler alabilir.

Temel CSS bilgisi
• HTML Dosyalarına CSS Eklemek
– Harici .css dosyası oluşturmak
– Dahili stil oluşturmak
– Satır içi stil oluşturmak

Temel CSS bilgisi
• Harici .css dosyası oluşturmak
– Bir web sitesinin tüm sayfaları benzer bir
görünüme ve yerleşim düzenine sahiptir.
– Bu, kullanıcı deneyiminin devamlılığını
sağlamak amacıyla web tasarımcılar
tarafından özellikle oluşturulan bir kurgudur.

Temel CSS bilgisi
– Tüm CSS kurallarınızı tek bir dosyada
toplamak, aynı tasarım dilini web sitesindeki
tüm sayfaları kolaylıkla dağıtmaya olanak
sağlar.
– Geliştiricilere hata ayıklama, güncelleme ve
bakım süreçlerinde kolaylık sağlar.

Temel CSS bilgisi
– Bu yöntemde; CSS kurallarının tamamı .css
uzantılı harici stil dosyalarında depolanır ve
HTML dosyalarıyla <link> etiketi kullanılarak
ilişkilendirilir.
– CSS'leri bir ya da birden fazla dosyada
saklanabilir.

Temel CSS bilgisi
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
mystyle.css
body {background-color: lightblue;}
h1 {color: navy;
margin-left: 20px;}

Temel CSS bilgisi
• Dahili stil oluşturmak
– CSS kuralı HTML kodlarının <head>
bölümüne <style> etiketi kullanarak eklenir.
– Web sitesi geliştirirken bazı durumlarda tek bir
HTML sayfasına özgü CSS kuralları
oluşturmak gerekebilir.
– <style> etiketi, bu tür durumlarda bize
esneklik sağlar.

Temel CSS bilgisi
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: linen;}
h1 {color: maroon;
margin-left: 40px;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Temel CSS bilgisi
• Satır içi stil oluşturmak
– Sadece tek bir HTML öğesine özgü CSS
kuralları oluşturmak için kullanılır.
– Satır içi CSS kuralları, sadece eklendiği HTML
öğesini etkiler. Satır içi stil oluşturmak için ilgili
HTML öğelerinin style özelliği kullanılır.

Temel CSS bilgisi
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-
align:center;">This is a
heading</h1>
<p style="color:red;">This is a
paragraph.</p>
</body>
</html>

Temel CSS bilgisi
• CSS Seçicileri
– Stillendirilecek HTML ögelerini "bulmak" (veya
seçmek) için kullanılır.
– CSS kurallarını HTML öğeleri ile
ilişkilendirmek için kullanılan işaretçilerdir.
– Her bir CSS kuralı, web tarayıcılarına hangi
kuralların hangi HTML öğelerine veya öğe
gruplarına uygulanması gerektiğini anlatmak
için bir seçiciyle başlar.

Temel CSS bilgisi
• CSS Seçicileri
– Element seçici
p {
text-align: center;
color: red;
}

Temel CSS bilgisi
• CSS Seçicileri
– id (nitelik) seçici
#para1 {
text-align: center;
color: red;
}

Temel CSS bilgisi
• CSS Seçicileri
– Sınıf (nitelik) seçici
.center {
text-align: center;
color: red;
}

Temel CSS bilgisi
• CSS Seçicileri
– Evrensel Seçici
* {
text-align: center;
color: red;
}

Temel CSS bilgisi
• Seçicileri Gruplamak
h1, h2, h3 {
text-align: center;
color: red;
}

Temel CSS bilgisi
• CSS Seçicileri
– Birleştiriciler

Temel CSS bilgisi
• CSS Seçicileri
– Torun Seçici (boşluk)
• Bir CSS seçicinin tüm torun (yani herhangi bir
seviyedeki) HTML ögelerini seçmek kullanılır.
– Çocuk seçici (>)
• Bir CSS seçicinin tüm çocuk (yani sadece bir alt
seviyedeki) HTML ögelerini seçmek kullanılır.

Temel CSS bilgisi
• CSS Seçicileri
– Komşu kardeş seçici (+)
• Bir CSS seçicinin hemen ardından gelen komşu
kardeş HTML ögesini seçmek kullanılır.
– Genel kardeş seçici (~)
• Bir CSS seçicinin ardından gelen tüm kardeş
HTML ögelerini seçmek kullanılır.

Temel CSS bilgisi
• CSS Seçicileri
– Sözde Sınıf (pseudo-class) Seçiciler
• Web bağlantılarına özgü 4 farklı sözde sınıf
bulunur: link, visited, hover ve active'dir.
Bağlantılara özgü sözde sınıfları kullanarak bir
CSS kuralı oluştururken sıralama önemlidir.

Temel CSS bilgisi
• CSS Seçicileri
• Bir HTML ögesinin farklı durumlarına özel CSS
kuralları tanımlamak için sözde sınıf (pseudo-
class) seçiciler kullanılır.
secici:sozde-sinif {
ozellik: deger;
}

Temel CSS bilgisi
• CSS Seçicileri
– :only-child
– :first-child
– :last-child
– :first-of-type
– :last-of-type
– :nth-of-type(n)
– :nth-last-of-type(n)
– :only-of-type
– :link
– :visited
– :hover
– :active

Temel CSS bilgisi
• CSS Seçicileri
– Sözde Element (pseudo-elements)
Seçiciler
• Bir HTML ögesinin önceden tanımlanmış belirli
bölümlerine CSS kuralları tanımlamak için sözde
element (pseudo-element) seçici kullanılır.
• Sözde element seçicileri kullanarak; Bir HTML
öğesinin ilk harfini, ilk satırını, öncesini, sonrasını
ya da fareyle seçilmiş bir bölümü biçimlendirilebilir.

Temel CSS bilgisi
• CSS Seçicileri
Seçiciler
secici::sozde-element {
ozellik: deger;
}

Temel CSS bilgisi
• CSS Seçicileri
Seçiciler
• ::first-letter
• ::first-line
• ::before
• ::after

Temel CSS bilgisi
• CSS Seçicileri
– Özellik Seçiciler
• [ozellik]
– Belirtilen özelliğe sahip ögeler seçilir.
• [ozellik=deger]
– Özellik, tam olarak belli bir değerle eşleşirse seçilir.
• [ozellik~=deger]
– Özellik, belli bir değerle yada sözcük listesindeki bir
değerle eşleşirse seçilir.

Temel CSS bilgisi
• CSS Seçicileri
– Özellik Seçiciler
• [ozellik^=deger]
– Özellik, verilen ön ek ile eşleşirse seçilir.
• [ozellik$=deger]
– Özellik, verilen son ek ile eşleşirse seçilir.
• [ozellik*=deger]
– Özellik, verilen değerlerden en az birini içeriyorsa seçilir.

Temel CSS bilgisi
• Renklerin kullanımı
– Renk Adı: white, black, red, blue, purple vb.
– Hexadecimal Renk Kodu: 16'lık sayı
tabanında bir RGB renk kodu.
• #rrggbb – 00 ile FF arasında hexadecimal
değerleri kullanmak

Temel CSS bilgisi
– rgb() ve rgba() fonksiyonları: 0-256 arasında
sayı değerleri belirterek rgb (red, green, blue)
renkler tanımlamaya olanak sağlarlar.
– rgba() fonksiyonu kullanarak hem rengi hem
de rengin görünürlüğü (alpha) ayarlanabilir.

Temel CSS bilgisi
– hsl() ve hsla() fonksiyonları: hsl (hue: 0-360
arası sayı değeri, saturation: yüzde, lightness:
yüzde) renkler tanımlamanıza olanak
sağlarlar.
– hsla() fonksiyonu kullanarak hem rengi hem
de rengin görünürlüğü (alpha) ayarlanabilir.

Temel CSS bilgisi

Temel CSS bilgisi
• Arkaplan özellikleri
– background-color: Arkaplan rengi eklemek
– background-image: Arkaplan resmi eklemek
– background-repeat: Arkaplana eklenen resmin
tekrar etme durumunu kontrol etmek

Temel CSS bilgisi
• Arkaplan özellikleri
– background-attachment: Arkaplana eklenen
resmin kaydırma çubuğuna bağlılığını kontrol
etmek
– background-position: Arkaplana eklenen
resmin konumunu belirlemek
• Kısa yazım yapısı:
background: #ffffff url("img_tree.png") no-repeat right
top;

Temel CSS bilgisi
• Yazı tipi özellikleri
– font-family
– font-size
– font-style
– font-variant
– font-weight

Temel CSS bilgisi
• Metin düzenleme özellikleri
– color
– letter-spacing
– line-height
– text-align
– text-decoration
– text-indent
– text-shadow
– text-transform
– word-spacing

Temel CSS bilgisi
• Liste özellikleri
– list-style-type
– list-style-image
– list-style-position

8.haft design web designer web for web w

More Related Content

Similar to 8.haft design web designer web for web w

More from compengwaelalahmar

8.haft design web designer web for web w