1. 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.
2. 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.
3. 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.
4. Temel CSS bilgisi
• Bir CSS Kuralının Anatomisi
– Selector: Seçici
– Declaration: Bildirim
– Property: Özellik
– Value: Değer
5. 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.
6. Temel CSS bilgisi
• HTML Dosyalarına CSS Eklemek
– Harici .css dosyası oluşturmak
– Dahili stil oluşturmak
– Satır içi stil oluşturmak
7. 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.
8. Temel CSS bilgisi
• Harici .css dosyası oluşturmak
– 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.
9. Temel CSS bilgisi
• Harici .css dosyası oluşturmak
– 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.
10. 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;}
11. 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.
12. 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>
13. 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.
14. 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>
15. 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.
16. Temel CSS bilgisi
• CSS Seçicileri
– Element seçici
p {
text-align: center;
color: red;
}
17. Temel CSS bilgisi
• CSS Seçicileri
– id (nitelik) seçici
#para1 {
text-align: center;
color: red;
}
18. Temel CSS bilgisi
• CSS Seçicileri
– Sınıf (nitelik) seçici
.center {
text-align: center;
color: red;
}
22. 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.
23. 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.
24. 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.
25. Temel CSS bilgisi
• CSS Seçicileri
– Sözde Sınıf (pseudo-class) Seçiciler
• 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;
}
27. 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.
28. Temel CSS bilgisi
• CSS Seçicileri
– Sözde Element (pseudo-elements)
Seçiciler
secici::sozde-element {
ozellik: deger;
}
29. Temel CSS bilgisi
• CSS Seçicileri
– Sözde Element (pseudo-elements)
Seçiciler
• ::first-letter
• ::first-line
• ::before
• ::after
30. 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.
31. 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.
32. 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
33. Temel CSS bilgisi
• Renklerin kullanımı
– 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.
34. Temel CSS bilgisi
• Renklerin kullanımı
– 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.
36. 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
37. 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;
38. Temel CSS bilgisi
• Yazı tipi özellikleri
– font-family
– font-size
– font-style
– font-variant
– font-weight
39. Temel CSS bilgisi
• Metin düzenleme özellikleri
– color
– letter-spacing
– line-height
– text-align
– text-decoration
– text-indent
– text-shadow
– text-transform
– word-spacing
40. Temel CSS bilgisi
• Liste özellikleri
– list-style-type
– list-style-image
– list-style-position
![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.](https://image.slidesharecdn.com/8-241122151849-5e42ae98/85/8-haft-design-web-designer-web-for-web-w-30-320.jpg)
![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.](https://image.slidesharecdn.com/8-241122151849-5e42ae98/85/8-haft-design-web-designer-web-for-web-w-31-320.jpg)
