Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan kapsamlı bir CSS eğitim dersidir. Eğitmen, önceki videolarda HTML eğitimi verdiğini ve ileride Bootstrap eğitimi yapacağını belirtmektedir.
- Video, CSS'in temel kavramlarından başlayarak ileri seviye özelliklere kadar uzanan bir yapıya sahiptir. İlk olarak CSS'in ne olduğu ve HTML ile ilişkisi anlatılmakta, ardından renk kodları, class ve id seçiciler, kenarlık, boşluk, metin hizalama gibi temel özellikleri gösterilmektedir. Daha sonra buton oluşturma, hover efekti, responsive tasarım ve Google Fonts kullanımı gibi pratik uygulamalar ele alınmaktadır.
- Eğitim boyunca kod örnekleri ve sonuçları ekranda gösterilerek, izleyicilere adım adım CSS kullanımını öğreten bir öğrenme deneyimi sunulmaktadır. Ayrıca, mobil uyumlu tasarım için "line-clamp", maksimum genişlik ve yükseklik değerleri, flexbox gibi teknikler de detaylı olarak açıklanmaktadır.
- 00:01CSS Eğitimi Tanıtımı
- Bu video, CSS konusunda hızlandırılmış bir saatlik eğitimi sunmaktadır.
- Eğitimin öncesinde "Bir Saatte HTML" adlı bir video hazırlanmış ve sonrasında "Bir Saatte Bootstrap Eğitimi" videosu yayınlanacak.
- HTML bir insanın iskelet kısmını, CSS ise bu iskelete beden ve kıyafet giydirme işlemi olarak tanımlanmaktadır.
- 01:12CSS'in Temel Kavramları
- CSS, yazı rengi, boyutu, fontu, buton tasarımı ve arka plan rengi gibi tasarım işlemleri için kullanılır.
- CSS kodları genellikle HTML dosyasının head etiketleri arasına yazılır, ancak body etiketinin içinde de kullanılabilir.
- CSS kodları <style> etiketi içinde yazılır ve bu etiket açılıp kapatılır.
- 03:00CSS Kod Yapısı
- CSS kod yapısı seçici, özellik ve değerlerden oluşur.
- Seçici, hangi elementin etkilenmesi gerektiğini belirtir (örneğin div, h1 gibi).
- Özellik ve değerler süslü parantez içinde yazılır, özellik önce yazılır, sonra iki nokta ve değer yazılır, noktalı virgülle sonlandırılır.
- 06:02Renkler ve Seçiciler
- Renkler yazı olarak (red, blue, green) veya renk kodları (hex, rgb, hsl) olarak belirtilebilir.
- Class seçicileri birden fazla elemente seçici özelliği eklemek için kullanılır ve başına nokta işareti konulur.
- ID seçicileri başına işareti konularak kullanılır ve direkt element seçicileri ise element ismiyle belirtilir.
- 10:30CSS'nin Çalışma Mantığı
- CSS kodları yukarıdan aşağıya doğru çalışır.
- Aynı class'a iki farklı değer atanırsa, alttaki değer geçerli olur ve üstteki değer geçersiz kalır.
- 11:31CSS Kenarlık Özellikleri
- H1 etiketlerine kenarlık eklemek için "border" özelliği kullanılır.
- Kenarlık için kalınlık, tür ve renk belirtilir: border: 10px solid grey.
- Kenarlık türleri arasında solid (düz), dotted (noktalı), dashed (çizgili) ve double (çift katmanlı) bulunur.
- 15:20İç ve Dış Boşluk Ayarları
- İç boşluk için "padding" özelliği kullanılır, örneğin padding: 10px.
- Dış boşluk için "margin" özelliği kullanılır, örneğin margin: 20px.
- Margin ve padding için sağ, sol, üst ve alt yönler için ayrı değerler verilebilir: margin-right, margin-left, margin-top, margin-bottom.
- 18:35Yazı Hizalama ve Div Özellikleri
- Yazı hizalaması için "text-align" özelliği kullanılır: left (sola yasla), center (ortala), right (sağa yasla).
- Div elementine id seçici ile erişilir ve padding, border gibi özellikler uygulanabilir.
- Div'in genişliği ve yüksekliği "width" ve "height" özellikleri ile ayarlanabilir, piksel veya yüzde değerleri kullanılabilir.
- 24:10Resim Özellikleri
- Resim eklemek için "img" elementi ve "src" özelliği kullanılır.
- Resmin yüksekliği ve genişliği CSS ile değiştirilebilir.
- Resmin üstüne boşluk bırakmak için margin özelliği kullanılabilir.
- 24:38CSS ile Resim Düzenleme
- Resim için img elementi kullanılarak genişlik ve yükseklik piksel değerleri verilebilir.
- Margin top özelliği ile resim üstten boşluk bırakılabilir.
- Yükseklik otomatik olarak belirlenmesi için "auto" değeri kullanılabilir, böylece resim kaliteli bir şekilde büyür.
- 27:24Kenarlık ve Oval Kenarlık Özellikleri
- Border radius özelliği ile elementlerin kenarları oval hale getirilebilir.
- Piksel değerleri arttırıldıkça oval kenarlık daha belirgin hale gelir.
- Resim için de border radius özelliği kullanılarak oval kenarlık verilebilir.
- 28:45Buton Tasarımı
- Buton için button elementi kullanılarak basit bir buton oluşturulabilir.
- Butonun stil özellikleri hem CSS içinde hem de elementin içinden style özelliği ile verilebilir.
- Butonun yazı boyutu, arka plan rengi, yazı rengi ve boyutu gibi özellikleri düzenlenebilir.
- 33:38Buton Hover Efekti
- Buton üzerine gelindiğinde (hover) arka plan rengi değişebilir.
- Aynı özellik hem element içinde hem de CSS içinde verildiğinde, element içindeki özellik önceliklidir.
- !important ifadesi kullanılarak CSS'deki özelliklerin öncelikli uygulanması sağlanabilir.
- 36:50Mobil Uyumluluk Sorunu
- Ekran küçültüldüğünde yazılar ve resimler divlerin dışına çıkabilir.
- Resim ekran genişliğine uymazsa genişlik piksel yerine yüzde değerleri kullanılabilir.
- Mobil uyumlu (responsive) tasarım için ekran boyutuna göre düzenlemeler yapılması gerekir.
- 37:31CSS ile Mobil Uyumlu Tasarım
- "line-clamp" özelliği kullanılarak div'in içeriğinin dışarı taşması sorunu çözülüyor.
- Buton için de aynı "line-clamp" özelliği uygulanarak metnin dışarı taşması engelleniyor.
- Resim için "max-width" özelliği kullanılarak en fazla 500 piksel genişliğinde ve yüksekliği otomatik olarak ayarlanıyor, böylece mobil uyumlu bir resim oluşturuluyor.
- 40:30Blog Tasarım Örneği
- Blog veya yazı için bir tasarım oluşturuluyor: resim, yazı başlığı, hakkında metin ve "devamını oku" butonu içeren bir alan.
- "yatay-alan", "sol-alan" ve "sağ-alan" sınıfları kullanılarak bir kutu oluşturuluyor ve ikiye ayrılıyor.
- Resim için "img" sınıfı oluşturuluyor ve "inline" olarak kullanılarak satır içerisinde yerleştiriliyor.
- 43:40Tasarım Düzenlemeleri
- Sağ alana "margin-top" özelliği eklenerek resim ve metin arasında boşluk bırakılıyor.
- Resme "border-radius" özelliği eklenerek kenarları oval hale getiriliyor.
- Yazıların ortalanması için "text-align: center" özelliği kullanılıyor ve "devamını oku" butonu ekleniyor.
- 46:03Flexbox Kullanımı
- Aynısı tasarıma bir alt satıra kopyalanıyor ve "yatay-iki", "sol-alan-iki", "sağ-alan-iki" sınıfları oluşturuluyor.
- "display: flex" özelliği kullanılarak yatay-iki div'in içerisindeki elementler yan yana yerleştiriliyor.
- Sağ-alan-iki'ye "margin-left" özelliği eklenerek araya boşluk bırakılıyor ve resmin yüksekliği maksimum 200 piksel olarak ayarlanıyor.
- 49:37HTML ve CSS ile Buton Oluşturma
- HTML sayfasına üstte bir başlık ekleniyor ve yatay iki alanının genişliği 800 piksel olarak artırılıyor.
- Metnin altına bir buton oluşturuluyor ve butonun konumu düzgün olması için metin paragraf etiketi içerisine alınıyor.
- Butona CSS ile yazı boyutu, iç boşluk, kenar yarıçapı, kenar stili ve renk özellikleri veriliyor.
- 52:09Butonun Hover Etkisi
- Butona üzerine geldiğinde arka plan rengi değişmesi için background-color özelliği kullanılıyor.
- Yazı renginin de değişmesi için color özelliği ve important anahtar kelimesi kullanılıyor.
- Bu şekilde butona üzerine geldiğinde gri, üzerine gelmediğinde beyaz renk oluyor.
- 52:55Yazı Fontunu Değiştirme
- Sayfadaki tüm yazıların fontunu değiştirmek için * seçici kullanılıyor ve font-family özelliği ile Arial fontu belirleniyor.
- UTF-8 karakter setini kullanmak için meta charset="utf-8" ekleniyor.
- Google Fonts üzerinden Türkçe karakter desteği olan farklı fontlar eklenebiliyor.
- 57:14Birden Fazla Seçici Kullanımı
- Birden fazla seçiciye aynı özellik uygulamak için virgül kullanılıyor (h1, h2, h3).
- Hem class seçici hem de element seçici kullanılabiliyor.
- Yatay ve dikey alanlarda farklı fontlar kullanılabilir.
- 59:58CSS Dosyası Oluşturma
- CSS kodları HTML sayfasının içine yazmak yerine ayrı bir .css dosyasında tutulabilir.
- Ayrı dosyadaki CSS kodlarını HTML sayfasına eklemek için <link> etiketi kullanılıyor.
- CSS dosyası aynı dizindeyse <link rel="stylesheet" href="style.css"> şeklinde dahil ediliyor.