WordPress için CSS Öğrenmek İçin 10 Basit İpucu

CSS öğrenmek, özellikle nereden başlayacağınızı ve takıldığınız zaman hangi terimleri arayacağınızı bilmiyorsanız, bunaltıcı olabilir.

CSS bir stil dili olduğundan ve Javascript veya PHP gibi tam kapsamlı bir programlama dili olmadığından, öğrenmesi oldukça kolaydır, özellikle de biraz HTML bilgisine sahipseniz (ki bu yazının amaçları doğrultusunda sahip olduğunuzu varsayıyorum).

Blog anketimizde, ezici bir çoğunluğunuz oyununuzu geliştirmek ve CSS'yi daha yakından tanımak istediğinizden bahsetti ve bu nedenle kısa süre önce CSS öğrenmeye başlamanıza yardımcı olacak 150'den fazla kaynaktan oluşan bir liste yayınladık. bu gönderi.

Bugün size yıllar önce ilk başladığımda CSS öğrenmeme yardımcı olan iş akışını ve ipuçlarını göstereceğim. Birinci ipucu ile başlayın ve listede CSS ustalığına doğru ilerleyin.

Okumaya devam edin veya şu bağlantıları kullanarak devam edin:

• Temel İnşaat
• Basit Seçiciler ve Özellikler ile Pratik Yapın
• Kutu Modelini Ezberleyin
• Yaparak öğrenmek
• İçeriği Genişliğe ve Yüksekliğe Göre Yerleştirin
• Şamandıralar ve Konumlandırma
• Gelişmiş CSS
• Bir Siteyi CSS ile Çoğaltmak
• önişlemciler
• çerçeveler

1. Temel Yapı

Her şeyden önce: Kendi CSS'nizi nasıl yazacağınızı öğrenmek için, onu nasıl düzgün biçimlendireceğinizi bilmeniz gerekir. Aslında bunu yapmanın iki doğru yolu vardır, ancak bunlardan biri daha organize olmanıza yardımcı olur.

İnsanların WordPress siteleriyle çalışmak istediklerinde öğrendikleri ilk dilin HTML olması yaygın olduğu için, önce HTML'ye benzer bir şekilde yazarak CSS sözdizimini öğrenmeye yardımcı olur.

İşte CSS'nin aldığı temel yapı:

Sitenizde bir öğe için uygulamak istediğiniz çok fazla stil olmadığında bu yeterince basittir, ancak CSS'ye daha aşina olmaya başladığınızda, bir öğe için birden fazla stile ihtiyacınız olacak ve işte burada bir Bunun gibi bir yapı hızla dağınık hale gelebilir.

Bu yüzden CSS'nizi yazmanın daha verimli ve düzenli bir yolu var:

Şimdi bu örnekte kullanılan terimleri araştırmaya başlayabilirsiniz. Bu terimlerin her biri CSS'nin temel yapı taşlarıdır: sınıf, kimlik, seçici, özellik ve değer. Özellikler ve değerler aynı zamanda bildirim denilen şeyi oluşturur.

Bu, kendi CSS'nizi nasıl yazacağınızı öğrenmek için harika bir başlangıç ​​noktasıdır ve bir kez başladığınızda, tüm bunları WordPress dosyalarınızda nereye yazmanız gerektiğini merak edebilirsiniz.

WordPress kurulumunuzda .css ile biten herhangi bir dosya muhtemelen tahmin ettiğiniz gibi bir CSS dosyasıdır. Aramanız gereken ana dosya stil sayfanızdır ve bu dosya style.css olarak etiketlenmiştir. Bu, temanızın tasarımının çoğunun veya tamamının renkler, yazı tipleri, temel resimler ve muhtemelen temanızın düzeninin bir kısmı açısından tutulduğu yerdir.

Ayrıca, custom.css adlı önceden hazırlanmış bir temada bir dosya fark edebilirsiniz ve burası genellikle temada herhangi bir değişiklik yapmanızı istedikleri yerdir. Bu dosyada değişiklik yaptığınızda, temanın stil sayfasındaki mevcut stillerin üzerine yazmalıdır.

Temanıza eklentiler eklerseniz, klasörlerinde CSS dosyalarıyla birlikte gelebilirler ve eklentinin görünümünü ve hissini şekillendirmek için kullanılırlar.

2. Basit Seçiciler ve Özellikler ile Pratik Yapın

Sıradaki, temel seçiciler ve özellikler ve bunların bir temada nasıl çalıştıkları hakkında bilgi edinmek. Örneğin başlıklar için h1 , h2 ve h3 ve paragraf metni için p gibi seçicilerin yanı sıra font-family ve background-color gibi özellikler.

Bu yeni becerileri uygulamanın ve aslında kendi WordPress blogunuzu başlatmanıza gerek kalmadan yaptığınız değişiklikleri görmenin kolay bir yolu var. W3Schools, CSS hakkında tonlarca bilgiye ve kodlarını değiştirebileceğiniz canlı örneklere sahiptir ve bir düğmeye basarak yaptığınız değişiklikleri anında görebilirsiniz.

Bir örnek gördüğünüzde, Kendiniz deneyin düğmesini tıklamanız yeterlidir ve bazı temel CSS'leri test edebileceğiniz bir pencere açılır.

3. Kutu Modelini Ezberleyin

Hepsini hafızaya almak yerine en yaygın bilgi parçalarına atıfta bulunmanın bir savunucusuyum. Belki de hafızamın çoğu zaman eksik olduğunu düşündüğümdendir, ama bunu söylemeyi tercih ederim çünkü internette çok fazla harika referans var.

Bir kalp atışı içinde bilmediğiniz seçicileri ve özellikleri kolayca arayabilirsiniz. Tek yapmanız gereken Google veya Bing gibi favori arama motorunuza basit bir sorgulama ve ihtiyacınız olan tüm bilgiler oradan sadece bir tık uzakta.

Neyse ki, öğrenmesi zor değil ve dürüst olmak gerekirse, ezberleyebiliyorsam, onunla da bir sorununuz olmamalı. Özünde, bir içerik alanı, dolgu, kenarlık ve kenar boşluğu içerir.

4. Yaparak Öğrenin

CSS'ye aşina olmaya başladığınızda, tamamen temel bir tasarıma sahip bir tema seçerek ve stil sayfasını düzenleyerek stilini değiştirerek onu gerçekten uygulamaya koymak harika bir fikirdir.

Basit değişikliklerin bir temayı bazen nasıl büyük ölçüde, bazen de çok fazla etkilemediğini anlamak önemlidir. Sonuç olarak, yapabileceğiniz kadar pratik yapmak, yaptığınız değişiklikleri görsel olarak görmenize ve kod yazma eylemlerinizi nihai sonuca bağlamanıza yardımcı olabilir.

Daha büyük şemada, noktaları bir kez birleştirebildiğinizde, yalnızca hızlı bir şekilde CSS yazamazsınız, ayrıca gelecekte web tasarımı ve geliştirme için kritik bir görev haline gelen sorunları giderebilmelisiniz.

WordPress sitenize ücretsiz olarak yükleyebileceğiniz, üzerinde pratik yapabileceğiniz bazı harika temalar. Bunların hepsi bir temanın nasıl görünmesi ve çalışması gerektiğine dair mükemmel temsiller değildir, ancak hepsi basit CSS ile bir temayı nasıl değiştirebileceğinizi öğrenmek için harika başlangıç ​​noktalarıdır.

Beyaz Spektrum

White Spektrum teması, ana içerik alanını, kenar çubuğunu, üstbilgiyi ve altbilgiyi içeren ortak bir düzene sahip basit bir temadır.

Yazı tipleri ve bağlantılar söz konusu olduğunda bir renk sıçraması dışında, çalışmak için sade ve basit bir temadır.

Kurucu

Yukarıdaki bu minimalist temalarda bile, henüz tanımadığınız ne kadar çok şeyle biraz bunalmış hissedebilirsiniz ve sorun değil. Bu gönderinin her bölümünü işaretledikçe, hepsi biraz daha bir araya gelmeye başlamalıdır.

5. İçeriği Genişliğe ve Yüksekliğe Göre Düzenleyin

Bu temalardan birini yükledikten sonra, içerik alanlarının ve seçicilerin farklı uzunluk ve genişliklerini girerek düzeni de değiştirmeye başlayabilirsiniz.

Bir sonraki adımın habercisidir ve bir WordPress temasındaki farklı yerleşim alanlarına aşina olmanızı sağlar.

6. Şamandıralar ve Konumlandırma

Bu, CSS'nin biraz zorlaşmaya meyilli olduğu yerdir, çünkü yalnızca CSS ile ve özellikle yüzer ve konumlandırma ile bir düzen oluşturabilirsiniz. Sorun şu ki, bu özellikler tüm mizanpajları oluşturmak için tasarlanmamıştır ve CSS mizanpajlarını güncellemek için bir taslak vardır.

Şimdilik bu, birçok insanın düzenini tam olarak doğru şekilde almasının yaygın bir yoludur. Yukarıdaki liste de dahil olmak üzere halihazırda mevcut olan temaları gözlemlemek ve bunların kayan nokta ve konum kullanımlarıyla nasıl farklılık gösterdiğini görmek harika bir fikirdir.

7. Gelişmiş CSS

Bu noktada, CSS'ye gerçekten alışmaya başlıyorsunuz, ancak keşfedilecek daha çok şey var:

• Sözde sınıflar – Fareyle üzerine gelme ve görüntüleri diğer öğelerle ilgili belirli bir yere yerleştirme gibi bir öğenin belirli bir durumunu tanımlamak için kullanılır.
• Karmaşık seçiciler – Daha gelişmiş seçiciler kullanarak şekillendirme konusunda daha da spesifik olabilirsiniz.
• CSS3 animasyonları – Fareyi resimlerin ve düğmelerin üzerine getirdiğinizde solma, patlama veya diğer geçişler oluşturma.
• CSS3 medya sorgularıyla yanıt verebilirlik – Duyarlı bir tema oluşturmanın en kolay yollarından biri medya sorgularını kullanmaktır.
• Dönüşümler – Seçili içerik alanlarının boyutunu ve şeklini kontrol eder.
• Kurallar – Yazı tipleri ve stil sayfaları gibi şeyleri temanıza aktarmak için kullanılır.
• Gradyanlar – Bir resim kullanmanıza gerek kalmadan temanıza bir degrade ekleme.

Bunlar, temanızın tasarımının gerçekten şekillendiğini görmeye başlayabileceğiniz öğelerin çoğu. Becerilerinizi test etmeye başlamanın tam zamanı.

8. Bir Siteyi CSS ile Kopyalayın

Kemerinizdeki tüm bu bilgilerle, daha sağlam bir kemer almanız gerekebilir, ancak daha da önemlisi, bir temanın temel kabuğunu kullanarak ve kendi CSS stillerinizi sıfırdan ekleyerek becerilerinizi gerçekten uygulamaya koyabilirsiniz.

Öğreniminizi ilerletmek için yapabileceğiniz en yararlı şeylerden biri, bilginizi gerçek dünya uygulamalarında uygulamaktır. Beğendiğiniz bir site bulmaya çalışmanızı ve ardından onu boş bir WordPress temasında tamamen CSS ile olabildiğince çoğaltmanızı öneririm.

Elbette, muhtemelen her şeyi mükemmel bir şekilde elde edemezsiniz ve muhtemelen yalnızca CSS ile kopyalayamayacağınız birçok öğe vardır, ancak bu, CSS'de rahat olmanızı sağlamak için harika bir yoldur.

İşte kullanabileceğiniz bazı harika ve ücretsiz başlangıç ​​temaları:

• BoşSlate

  

  Bu, olabildiğince çıplak kemikler. Bu temada yalnızca HTML5 vardır, bu nedenle stillerin çakışması konusunda endişelenmeden CSS'nizi eklemekte özgürsünüz. Yine de, temanızı şekillendirmeye başlamak için ihtiyacınız olan her şeyle birlikte gelir.

• HTML5 Boş

  

  HTML5 Blank, çok fazla olmasa da bazı stiller içeren, standart bir WordPress temasıdır. CSS'nizi sıfırdan başlatmaya çok hevesli değilseniz harika bir başlangıç.

• alt çizgi

  

  Biraz maceracıysanız ve daha gelişmiş bir başlangıç ​​teması denemek istiyorsanız, Underscores mükemmel bir seçenektir, ancak önceden yüklenmiş iki tema örneği stiliyle birlikte geldiğinden gönülsüzler için değil. Ayrıca, onu harika bir öğrenme aracı yapan bazı gelişmiş teknikler ve kodlamalar içerir.

Ayrıca GitHub'da HTML5 Reset WordPress Teması da var. Biraz daha gelişmiş özellikler içeriyor, ancak sonuçta onu değerli bir başlangıç ​​teması yapan şey bu.

9. Önişlemciler

CSS'nin içini ve dışını öğrendikten sonra, ön işlemciler ve özellikle SASS ve LESS hakkında bilgi edinmek harika bir fikirdir. Bunların her ikisi de CSS'nizi düzenlemenize yardımcı olur, böylece yazması çok daha kolay ve gelecekteki düzenlemeler için daha erişilebilir olur.

Ön işlemciler, CSS'nizi temiz ve takip etmesi kolay hale getirir ve bu, web geliştiricileri arasında hızla önemli bir beceri haline geldi. Hangisinin en iyi olduğu konusunda devam eden bir tartışma olsa da, SASS bugüne kadar en çok kullanılan önişlemci olma eğilimindedir.

WordPress bağlamında SASS'ta şansınızı denemek isterseniz, Bones temasına göz atın. Çoğunlukla HTML5'ten oluşur, böylece zaten dahil olan yerleşik SASS bitiyle stil oluşturmayı deneyebilirsiniz.

10. Çerçeveler

Web geliştirmede çerçeveler, dinamik web siteleri oluşturmak için bir yapıdır. Sonuç olarak, bir çerçevenin amacı, işlevselliği kaybetmeden siteleri daha hızlı hale getirmektir.

CSS'yi indirdikten sonra, bir çerçeve kullanarak tema geliştirmenizi hızlandırabilirsiniz.

En popüler çerçevelerden biri Twitter Bootstrap. Kutudan çıktığı andan itibaren duyarlı olacak şekilde yaratılmıştır ve hem SASS hem de LESS'in yanı sıra birçok özel CSS bileşenini kullanır.

Toplama

Öğrenmek için bir müfredat ve yol boyunca size yardımcı olacak ipuçları ile donanmış olan CSS, üstesinden gelmeniz için çok zor olmamalıdır. Ayrıca, şimdi kendi WordPress temanızı şekillendirmek için elinizi denemeye hazır olmalısınız.

CSS ve WordPress öğrenmeyle ilgili daha fazla kaynak için, diğer yayınlarımızdan bazılarına göz atın: WordPress için CSS Öğrenme ve Referans Verme Mega Rehberi: 150'den Fazla Kaynak ve WordPress'ten Başlangıç ​​Düzeyinden Profesyonel'e: 200'den Fazla Kariyer Artırıcı Kaynak.

• CSS