CSS nedir?Ve WordPress ile ne zaman kullanılır
WordPress gibi içerik yönetim sistemleri ile bugün bir web sitesi oluşturmak çok kolaydır. Programlamayı öğrenmenize bile gerek yok. WordPress temasını yükleyin ve bitene kadar web sitenizi ayarlayın. Bilinmeyen birçok kişi, geliştiriciler en sevdiğiniz WordPress temalarını oluşturmak için çok sayıda HTML, CSS, PHP ve JavaScript kodları yazar. İşte HTML, CSS, PHP ve JavaScript’in anlamı:
Hipermetin işaretleme dili için kısa olan HTML, bir web sayfası yapısı sağlar. Bu, sayfalarda gördüğünüz tüm öğeleri hem başlıklar, paragraflar, menüler vb. Bu standart bir işaretleme dilidir ve web sayfaları için yapı taşları sağlar.
CSS, basamaklı stil tabakaları için kısadır. CSS, web tasarımcıları tarafından web sayfaları tasarlamak için kullanılan dildir. Renk, yazı tipi stili, arka plan, sütun boyutu, yanıt verme ve diğer tüm web sayfası stillerini kontrol eder. CSS olmadan, web sayfaları sıkıcı ve okunması zor olacaktır.
PHP, köprü metin önişlemcisi için özyinelemeli bir kısaltmadır. PHP, sunucuda bir komut dosyası dilidir. Bu, statik web siteleri, dinamik web siteleri ve web uygulamaları geliştirmek için kullanılır. Tüm WordPress siteleri, veritabanından alınan dinamik içeriği derlemek için PHP’ye çok bağımlıdır. PHP eylemine iyi bir örnek, WooCommerce’de çalışan e -ticaret web sitesidir.
Genellikle JS olarak kısaltılan JavaScript, web sayfalarını etkileşimli hale getirmenize yardımcı olan dil komut dosyası dili ve sunucu tarafıdır.
Bugünkü yazıda CSS’ye odaklanacağız. Bu kılavuzdan maksimum sonuç elde etmek için HTML hakkında biraz bilgi sahibi olmak önemlidir. Bunun nedeni, daha önce söylediğimiz gibi, CSS HTML belgelerini düzenlemek için kullanılır. Çoğu yönerge için aşağıdaki HTML belgelerini kullanacağım:
<Önde
CSS Nedir?
Bu başlık
Bu bir paragraf.
Bu başka bir paragraf.
CSS olmadan, yukarıdaki HTML belgesi tarayıcıda şöyle görünüyor:
Güzel değil ama yukarıdaki şablon CSS’nin çalışmalarını göstermemize izin verecektir. Deneysel amaçlar için yukarıdaki kukla kodu kopyalamaktan çekinmeyin. Daha fazla uzatmadan, iş dünyasına gidelim çünkü tartışılması gereken birçok şey var.
Peki, CSS nedir? Basamaklı stil sayfaları (CSS), web tasarımcılarının ve geliştiricilerinin web sayfalarının görünümünü kontrol etmelerini sağlayan bir stil dilidir (HTML veya PHP gibi komut dosyası dili gibi işaretlemeden beklemeyin). Popüler web web sitesi W3Schools.com’a göre, “CSS, çeşitli cihazlar ve ekran boyutları için tasarım, düzen ve ekran varyasyonları dahil olmak üzere web sayfalarınızın stilini belirlemek için kullanılır.” Bu, WordPress web sitenize stil ayarlaması yapmak için bir web sitesi geliştirmeyi veya çadırın altında dalış yapmayı planlayıp planlamadığınızı öğrenmek için önemli bir dildir. Birkaç CSS hilesi ile web sitenizin görünümünü birkaç cihazda değiştirebilirsiniz. Ama hepsi bu değil. CSS zaman zaman önemli ölçüde arttı ve şimdi etkileşim eklemenize ve hatta Animal.style web sitesinde bulunan örnekler gibi animasyonlar oluşturmanıza izin veriyor. Chris Coyier ayrıca CSS-Tricks.com’da CSS olmadan birçok ilginç CSS animasyonu yaptı. Web sayfaları görünüme zarar verecek. Örneğin, CSS ile verandamızın görünümü: Her şey temiz, iyi ve güzel, değil mi? İşte CSS olmadan aynı bölümün görüntülenmesi:
Aman Tanrım, görmek için güzel bir görüş değil. Ve yani, Bay ve Bayan, CSS neden önemlidir. Bir web sayfası söz konusu olduğunda, sunum her şeydir. CSS, 1994 yılında Hakon Wium Lie tarafından keşfedildi ve CSS Çalışma Grubu adlı World Wide Web Konsorsiyumu’nda (W3C) bir grup insan tarafından yönetildi. Ama nasıl çalışır? Sayfanızı düzenlemek için CSS’yi kullanmak için önce CSS sözdizimini anlamanız gerekir. Bu karmaşık değil, bu yüzden endişelenme. Netleştirmeye yardımcı olmak için, işte CSS: Body { Arka plan rengi: açık mavi;
}
H1 {
Beyaz renk;
Metnin hizalanması: orta;
}
P {
Yazı tipi ailesi: Verdana;
Yazı tipi boyutu: 20px;
} Yukarıdaki örnekten görüldüğü gibi, CSS’nin birkaç parçası vardır.
Body, H1 ve P seçiciler olarak adlandırılır ve HTML belgelerindeki belirli öğeleri hedeflemenize yardımcı olurlar. Örneğin, yukarıdaki seçim, HTML belgelerimizdeki içeriği, başlıkları ve paragrafları hedeflememizi sağlar.
Arka plan rengi, renk, metin alyası, yazı tipi-ailesi ve yazı tipi boyutu özellik olarak bilinir.
LightBlue, Center, Verdana ve 20 piksel değerler denir. Değeri özelliğe eklersiniz ve değer daha sonra hedeflenen HTML öğesine iletilir. Yukarıdaki örnekten, vücudun açık mavi bir arka planı olacak, başlık beyaz olacak ve bahçenin ortasında olacak ve paragraf Verdana yazı tipini kullanacak. Bilirsiniz, böyle bir şey:
Yukarıdaki CSS kodu, CSS’nin temel bir örneğidir. CSS kompleksi bugünkü yazı kapsamı dışındadır, ancak endişelenmeyin çünkü sonuna doğru bazı kaynaklar ekleyeceğiz. HTML’ye CSS nasıl eklenir HTML belgenize CSS Ekle Nispeten basit bir konudur. HTML belgenize üç farklı şekilde CSS ekleyebilirsiniz. Web geliştirmede harici CSS, en iyi uygulama HTML ve CSS kodunu ayrı dosyalar halinde saklamaktır. Daha sonra, HTML belgenizin bölümüne yerleştirdiğiniz öğesini kullanarak CSS dosyasına bağlanabilirsiniz.
İlk olarak, CSS kodunuz için bir CSS dosyası oluşturmanız gerekir. CSS dosyaları genellikle .css uzantısı ile biter. Mine, HTML belgesiyle aynı klasöre kaydettiğim Style.css’dir. İkincisi, aşağıda gösterildiği gibi HTML belgenizin bölümüne öğeleri ekleyin:
<Önde CSS Nedir?
Bu başlık
Bu bir paragraf.
Bu başka bir paragraf.
A, B, C kadar basit, web sayfanızı tarayıcıya yüklediğinizde, CSS ve stil dosyalarını alır “… html belgeleri stil sayfasındaki bilgilere göre.” Harici bir CSS kullanarak. Dosya, CSS uygulamanın en iyi yoludur. Dahili CSS Bir web sayfasına benzersiz bir stil eklemek istiyorsanız, örneğin basit bir sayfa sitesi oluşturursanız, bir dahili stil sayfası kullanmayı seçebilirsiniz.
HTML belgelerinizin bölümüne öğesine bir dahili stil sayfası eklersiniz:
<Önde
CSS Nedir?
gövde {
Arka plan rengi: açık mavi;
}
H1 {
Beyaz renk;
Metnin hizalanması: orta;
}
P {
Yazı tipi ailesi: Verdana;
Yazı tipi boyutu: 20px;
}
Bu başlık
Bu bir paragraf.
Bu başka bir paragraf.
CSS kodu HTML belgenizde olduğundan, özellikle çok fazla CSS kodunuz varsa, genellikle daha büyük bir web sayfasına yol açar.
CSS’deki CSS, bazı öğelere öznitelikleri ekleyerek doğrudan bir öğeye uygulanır:
<Önde
CSS Nedir?
Bu başlık
Bu bir paragraf.
Bu başka bir paragraf.
W3C’deki kişiler, “temiz” bir kod oluşturmadığı için CSS’yi uygulamak için yukarıdaki yaklaşımı kullanmanızı önermez. Bu aynı zamanda aşırı ve zaman alıcıdır. Ve dahili CSS gibi, bu daha büyük bir HTML dosyasına yol açar. CSS’nin ne olduğunu ve web sitenize nasıl uygulanacağını biliyorsunuz. WordPress kullanıyorsanız, aşağıda gösterildiği gibi görünüm> Tema Düzenleyicisi’ne giderek CSS tema dosyanıza erişebilirsiniz:
Bunu yapmak sizi doğrudan temalı sayfanıza yönlendirecektir:
WordPress yukarıdaki yaklaşımı önermez, çünkü doğrudan ayarlamalarda bulunan varsayılan CSS düzenleyicisinde CSS değişikliklerinin önizlemesini düzenleyebilir ve görebilirsiniz. Varsayılan CSS düzenleyicisine erişmek için, aşağıda vurgulandığımız gibi görünüm> özelleştirin:
Bundan sonra, aşağıda gösterildiği gibi sol kenar çubuğundaki ek CSS’yi arayın ve tıklayın.
Veya, aşağıdaki ekran görüntülerinde gösterildiği gibi, WordPress yönetici gösterge panelinizin üst kısmındaki CSS Custom’ı tıklayarak varsayılan CSS düzenleyicisine erişebilirsiniz.
Yukarıdaki menü öğesine tıklamak sizi aşağıdaki CSS düzenleyicisine götürür:
CSS3 Kutu Düzeni
Basamaklı Stil Sayfası – W3.org
CSS, ilk başta çözülmesi zor bir fasulye gibi görünebilir, ancak bu şimdiye kadar öğrendiğiniz en kolay dillerden biridir. Bu karmaşık değildir çünkü C# veya PHP gibi bir programlama dili değildir. Bu yalnızca web sayfalarınıza renk ve stil ekleyen bir dizi kuraldır. CSS’miz yoksa, çoğu – değilse – tüm web siteleri korkunç görünecektir. CSS sadece web sitesinin görünümünü değil, aynı zamanda kullanımını da arttırdığı için düzenlemek ve hatta kullanılması zor olacak. Birçok ücretsiz çevrimiçi öğretici ile, çok denediğiniz sürece CSS öğrenmek ve ustalaşmak kolaydır. Ayrıca, eğitim sitesini ziyaret etmek veya bir test sitesi oluşturmak için zaman ayırın. CSS’yi nasıl kullanıyorsunuz? Bize yorumlarda söyleyin.
