CSS yapı taşları

Bu kılavuz, CSS’nin ilk adımlarının kaldığı yerden devam ediyor – artık dile ve sözdizimine aşina olduğunuza ve bunları kullanma konusunda bazı temel deneyimlere sahip olduğunuza göre, biraz daha derine dalmanın zamanı geldi.

Bu kılavuz, CSS’nin ilk adımlarının kaldığı yerden devam ediyor – artık dile ve sözdizimine aşina olduğunuza ve bunları kullanma konusunda bazı temel deneyimlere sahip olduğunuza göre, biraz daha derine dalmanın zamanı geldi. Bu kılavuz, kademe ve kalıtım özelliklerine, elimizdeki tüm seçici türlerine, birimlere, boyutlandırmaya, stil arka planlarına ve kenarlıklarına, hata ayıklamaya ve çok daha fazlasına bakacak.

Buradaki amaç, size CSS yazmak için bir araç takımı sağlamak ve metin stili ve CSS düzeni gibi daha spesifik disiplinlere geçmeden önce tüm temel teorileri anlamanıza yardımcı olmaktır.

Önkoşullar

Bu kılavuza başlamadan önce aşağıdakileri bilmenizi bekliyoruz:

  1. Bilgisayar kullanma ve Web’i pasif olarak kullanma (yani webde dolaşma, içeriği tüketme) ile ilgili temel aşinalık.
  2. Temel yazılımı yükleme bölümünde ayrıntılı olarak açıklandığı gibi temel bir çalışma ortamı ve Dosyalarla başa çıkma bölümünde ayrıntılı olarak açıklandığı gibi dosyaların nasıl oluşturulup yönetileceğine ilişkin bir anlayış.
  3. HTML’ye Giriş kılavuzunda tartışıldığı gibi, HTML ile temel aşinalık.
  4. CSS ilk adımlar kılavuzunda tartışıldığı gibi, CSS’nin temellerinin anlaşılması.

Not: Kendi dosyalarınızı oluşturamadığınız bir bilgisayar/tablet veya başka bir cihaz üzerinde çalışıyorsanız, kod örneklerini (çoğu) JSBin veya Glitch gibi çevrimiçi bir kodlama programında deneyebilirsiniz.


Bu kılavuz, CSS dilinin en önemli kısımlarını kapsayan aşağıdaki makaleleri içerir. Yol boyunca, anlayışınızı test etmenize izin verecek birçok alıştırmayla karşılaşacaksınız.

Kademe ve kalıtım

Bu yazının amacı, CSS’nin HTML’ye nasıl uygulandığını ve çakışmaların nasıl çözüldüğünü kontrol eden, CSS’nin en temel kavramlarından bazılarına (kademe, özgünlük ve kalıtım) ilişkin anlayışınızı geliştirmektir.

Bu yazı kılavuzun diğer bölümleri ile daha az ilgili ve biraz daha akademik görünse de, bunları anlamak daha sonra size çok fazla fayda sağlayacak! Bu bölümü dikkatli bir şekilde incelemenizi ve devam etmeden önce kavramları anladığınızı kontrol etmenizi öneririz.

CSS seçicileri

CSS seçicileri HTML öğelerini hedeflemek için kullanılır. Stil için öğeleri seçerken hassasiyete izin veren çok çeşitli CSS seçicileri bulunur. Bu makalede ve alt makalelerinde, nasıl çalıştıklarını görerek farklı türleri ayrıntılı olarak inceleyeceğiz: Alt makaleler şunları içerir:

Kutu modeli

CSS’deki her şeyin etrafında bir kutu vardır ve bu kutuları anlamak, CSS ile mizanpajlar oluşturabilmenin veya öğeleri diğer öğelerle hizalamanın anahtarıdır. Bu yazıda kutu modelinin nasıl çalıştığını ve onunla ilgili terminolojiyi anlayarak daha karmaşık mizanpaj görevlerine geçebilmeniz için bir giriş yapacağız.

Arka planlar ve kenarlıklar

Bu yazıda CSS arka planları ve kenarlıkları ile yapabileceğiniz bazı yaratıcı şeylere göz atacağız. Gradyanlar, arka plan resimleri, yuvarlatılmış köşeler, arka planlar ve kenarlıklar gibi CSS’deki birçok stil öğesine bakacağız.

Farklı metin yönlerini işleme

Son yıllarda CSS, sağdan sola ve aynı zamanda yukarıdan aşağıya içerik (Japonca gibi) dahil olmak üzere farklı yönlülüğünü daha iyi desteklemek için gelişti – bu farklı yönlere yazma modları denir. Çalışmanızda ilerledikçe ve mizanpajla çalışmaya başladığınızda, yazma modlarını anlamak size çok yardımcı olacaktır.

Taşan içerik

Bu yazıda CSS’deki bir diğer önemli kavrama bakacağız — taşma. Taşma, bir kutunun içinde rahatça barındırılamayacak kadar çok içerik olduğunda meydana gelir. Bu yazıda, taşmanın ne olduğunu ve nasıl yönetileceğini öğreneceksiniz.

CSS’de öğeleri boyutlandırma

Şimdiye kadarki yazılarda CSS kullanarak bir web sayfasındaki öğeleri boyutlandırmanın çeşitli yollarıyla karşılaştınız. Ancak, tasarımınızdaki farklı özelliklerin ne kadar büyük olacağını anlamak önemlidir ve bu yazıda, öğelerin CSS aracılığıyla boyut almasının çeşitli yollarını özetleyeceğiz. Gelecekte size yardımcı olacak boyutlandırmayla ilgili birkaç terim tanımlayacağız.

Görüntüler, medya ve form öğeleri

Bu yazıda, CSS’de belirli özel öğelerin nasıl ele alındığına bir göz atacağız. Resimler, diğer ortamlar ve form öğeleri normal kutulara göre CSS ile stillendirme yeteneğiniz açısından biraz farklı davranır. Neyin mümkün olup olmadığını anlamak biraz hayal kırıklığı yaratabilir. Bu yüzden bu yazı bilmeniz gereken bazı temel şeyleri vurgulayacak.

Tablo stilleri

Bir HTML tablosu tasarlamak dünyadaki en göz alıcı iş olmasa da bazen bunu yapmak zorundayızdır. Bu makale, bazı özel tablo stil teknikleri ile HTML tablolarının iyi görünmesi için bir kılavuz sağlar.

CSS’de hata ayıklama

Bazen CSS yazarken CSS’nizin beklediğiniz gibi davranmadığı bir sorunla karşılaşırsınız. Bu makale, bir CSS sorununun nasıl ayıklanacağı konusunda size rehberlik edecek. Tüm modern tarayıcılarda bulunan geliştirme araçları ile neler olup bittiğini anlamanıza yardımcı olacak.

CSS’nizi düzenleme

Daha büyük stil sayfaları ve büyük projeler üzerinde çalışmaya başladığınızda, büyük bir CSS dosyasını korumanın zor olabileceğini keşfedeceksiniz. Bu makalede, CSS’nizi kolayca bakımı yapılabilir kılmak için en iyi uygulamalara bakacağız. Ayrıca bakımın kolaylaştırılmasına yardımcı olmak için başkaları tarafından da kullanımda olacak çözümlerden bazılarına kısa bir göz atacağız.

Değerlendirmeler

CSS becerilerinizi test etmek ister misiniz? Aşağıdaki değerlendirmeler, yukarıdaki yazılarda kapsanan CSS’yi ne kadar anladığınızı test edecek.

Temel CSS kavrama

Bu değerlendirme, temel söz dizimi, seçiciler, özgüllük, kutu modeli ve daha fazlasını anladığınızı test eder.

Süslü antetli kağıt oluşturma

If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment, we’ll challenge you to create an online template to achieve such a look.

Havalı görünümlü bir kutu

Burada, göz alıcı bir kutu oluşturmak için arka plan ve kenarlık stilini kullanma konusunda biraz pratik yapacaksınız.

Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

konular

Okumaya devam et!
Sonraki Yazı: Kademe (cascade) ve kalıtım (inheritance)

Bu yazının amacı, CSS’nin HTML’ye nasıl uygulandığını ve çakışmaların nasıl çözüldüğünü kontrol eden, CSS’nin en temel kavramlarından bazılarına (kademe, özgünlük ve kalıtım) ilişkin anlayışınızı geliştirmektir.

Bir div’i yatay olarak nasıl ortalarım?

CSS kullanarak başka bir div’in içinde olan div elementini yatay olarak nasıl ortalayabilirim? Birkaç yolu var.

Farklı metin yönlerini işleme

Şimdiye kadar CSS öğrenmemizde karşılaştığımız birçok özellik ve değer, ekranımızın fiziksel boyutlarına bağlandı.

JavaScript ile bir öğenin sınıfını nasıl değiştirebilirim?

JavaScript kullanarak bir HTML öğesinin sınıfını nasıl değiştirebiliriz? Veya onclick gibi bir eyleme yanıt olarak class’ı nasıl değiştirebiliriz? Sınıfları değiştirmek için modern HTML5 Teknikleri Modern tarayıcılar, bir kitaplığa ihtiyaç duymadan sınıfları değiştirmeyi kolaylaştıran yöntemler sağlayan classList’i eklediler: Ne yazık ki, bunlar v10’dan önce Internet Explorer’da çalışmaz, ancak giderek daha fazla desteklendiğini söyleyebiliriz.

Arka planlar ve Kenarlıklar

Bu yazıda, CSS arka planları ve kenarlıkları ile yapabileceğiniz bazı yaratıcı şeylere göz atacağız.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak.

koddla
Tema Mundana by WowThemes.net.