Bir front-end(Arayüz) geliştiricisimi olmak istiyorsunuz?
Bir stylesheet (şablon-stil) dili olup, çoğu zaman CSS olarak kısaltılan Cascading Style Sheets, HTML ya da XML ile yazılmış (SVG ya da XHTML gibi çeşitli XML dillerini içeren) belgelerin sunumları tanımlamak için kullanılır. CSS, yapılandırılmış elemanların ekranda, kağıt üzerinde, konuşmada yahut diğer medya aygıtlarında nasıl ifade edileceğini belirler.
CSS, open web'in temel dillerinden biridir ve W3C standartlarına sahiptir. CSS1, CSS2.1, CSS3 hakkında bir şeyler duymuş olabilirsiniz. Ancak CSS4 hiçbir zaman resmi bir sürüm haline gelmedi.
CSS3'ün, kapsamı önemli ölçüde arttı ve farklı CSS modüllerindeki ilerleme o kadar farklı olmaya başladı ki, önerileri modül başına ayrı ayrı geliştirmek ve yayınlamak daha etkili hale geldi. W3C, CSS spesifikasyonunu veriyonlama yerine periyodik olarak CSS spesifikasyonunun en son kararlı sürümünün anlık görüntüsünü alıyor..
- CSS Referansı
Deneyimli Web Geliştiricileri için CSS'in her özellik ve konseptini tanımlayan kapsamlı bir referans.
- CSS Dersi
Tüm yeni başlayanlara yardım için bir adım adım giriş kısmı. Bu kısım, ihtiyaç duyulabilecek tüm temel bilgileri içerir.
- CSS3 Örnekleri
CSS teknolojilerini bir aksiyon içinde gösteren bir demo kolleksiyonu ki yaratıcılık için destekleyicidir.
Hedefinize ulaşabilmeniz için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.
Eğitim Aşamaları
Bu CSS Eğitimi CSS'i sıfırdan öğreten birden fazla modül içerir — önceden bilmeniz gerekmez.
- CSS'ye ilk adım
- CSS (Cascading Style Sheets), Web sayfalarını biçimlendirmek ve düzenlemek için kullanılır. Örneğin: içeriğinizin yazı tipini, rengini, boyutunu ve aralığını değiştirmek, birden çok sütuna bölmek veya animasyonlar ve diğer dekoratif özellikler eklemek için kullanılır.
- Bu adımda CSS'in nasıl çalıştığı, sözdiziminin neye benzediği ve bunu HTML sayfalarına stil ekleyebilmek için nasıl kullanmaya başlayabileceğinizle ilgili temel bilgiler verir.
- CSS'in yapı taşları
-
Bu adım ilk adımın kaldığı yerden devam ediyor — artık dile ve sözdizimine aşına oldunuz ve onu kullanma konusunda biraz temel deyim kazandınız, biraz daha derine dalma zamanı. Bu adım, kalıtıma, sahip oluduğunuz tüm seçici türlerine, birimlere, boyutlandırmaya, arka planların ve kenarlıkların stilini belirleme, hata ayıklama ve çok daha fazlasını inceler.
Buradaki amak, size daha etkili CSS yazmak için bir araç seti sağlamak ve metin şekillendirme ve CSS düzeni gibi daha özgül kurallara geçmeden önce tüm temel kavramları anlamanıza yardımcı olmaktır.
- Metin stilini belirleme
- CSS dilinin temelleri ele alındığında, odaklanmanız gereken bir sonraki CSS konusu, CSS ile yapacağınız en yaygın şeylerden biri olan metnin stilini oluşturmaktır. Burada yazı tipi, kalınlık, italik, satır ve harf aralığı, alt gölgeler ve diğer metin özelliklerini ayarlama dahil olmak üzere metin şekillendirme temellerine bakıyoruz. Sayfanıza özel yazı tiplerini, listeleri ve bağlantıları şekillendirmeye bakarak bu konuyu tamamlıyoruz.
- CSS düzeni
- Bu noktaya kadar CSS'in temellerini, metnin nasıl stilize edileceğini ve içeriğinizin içinde bulunduğu kutuları nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanındaki diğer bileşenler ile doğru yere nasıl yerleştireceğinize bakmanın zamanı geldi. Burada CSS düzenine derinlemesine dalabilmemiz, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski teknikleri kullanabilmemiz için gerekli ön koşulları ele alacağız.
- Yaygın sorunları çözmek için CSS kullanın
- Bu adım, bir websayfası oluştururken yaygın sorunları çözmek için CSS'si nasıl kullanılacağını açıklayan içerik bölümlerine bağlantılar sağlar.
Kaynaklar
- CSS kaynağı: Deneyimli Web geliştiricileri için, CSS'sin her özelliğini ve konseptini açıklayan kapsamlı bir kaynak.
- CSS temel kavramları:
- Dilin sözdizimi ve biçimleri
- Özgüllük, kalıtım ve Cascade
- CSS birim ve değerleri
- Kutu modelelri ve Kenar boşluğu
- The containing blok kapsamları
- Yığınlar ve blok biçimlendirme bağlamları
- İlklendirilen, hesaplanan, kullanılan, ve gerçek değeler
- CSS kısaltma özellikleri
- CSS Flexible Box özellikleri
- CSS Grid özellikleri
- Medya sorguları
- Animasyon
Tarifler kitabı
CSS düzen tarifleri kitabı sitelerinize uygulamanız gerekebilecek ortak düzen kalıpları için tarifleri bir araya getirmeyi amaçlamaktadır. Projelerinizde başlangıç noktası olarak kullanabileceğiniz kod sağlamanın yına sıra, bu tarifler yerleşim özelliklerinin kullanılabileceği farklı yolları ve bir geliştirici olarak uygulayabileceğiniz seçimleri irdeler.
CSS geliştirme araçları
- CSS'sinizin gerçeli olup olmadığını kontrol etmek için W3C CSS Validation Service'si kullanabilirsiniz. Bu, paha biçilemez bir hata ayıklama aracıdır.
- Firefox Developer Tools, Denetçi ve Stil Düzenleyici araçlarıyla bir sayfanın canlı CSS'sini görüntülemenizi ve düzenlemenizi sağlar.
- Firefox için Web Developer uzantısı, izlenen sitelerde canlı CSS'si izlemenizi ve düzenlemenizi sağlar
- Web topluluğu, kullanmanız için başka çeşitli CSS araçlarını'da oluşturdu.
Meta bugs
- Firefox: bug 1323667
Ayrıca Bakınız
- CSS demoları: En yeni CSS teknolojileri ile oluşturulmuş örnekleri keşfederek kendinize destek elde edin
- CSS'nin sıklıkla uygulandığı web dilleri: HTML, SVG, MathML, XHTML, and XML.
- CSS'den kapsamlı bir şekilde yararlanan Mozilla teknolojileri: Firefox, ve Thunderbird euzantıları ve temaları.
- Mozilla e-posta listesi
- CSS hakkındaki Stack Overflow soruları