WordPress’in dünya çapında pek çok insanın tercih ettiği içerik yönetim sistemi (CMS) olmasının birçok nedeni vardır. Bunun çoğu, sınırlı kodlama bilgisine sahipken veya hatta hiç bilgi sahibi olmadan, WordPress temalarını ve eklentilerini kullanarak işlevsel ve yaratıcı web siteleri oluşturabilmeniz gerçeğinde yatmaktadır. Bununla birlikte web sitenizin gerçekten çarpıcı görünmesini sağlamak için, temanızın veya eklentilerinizin sağlayabileceği işlevlerin ötesine geçen küçük tasarım ince ayarları yapmanız gerekecektir. Web sitenizde bu tarz değiştiren değişiklikleri gerçekleştirmek için biraz CSS bilgisine ihtiyacınız var.
Pek çok WordPress kullanıcısı buna aşina olmayabilir, bu kapsamlı WordPress CSS kılavuzunu oluşturmaya karar verdik. CSS’nin ne olduğunu ve WordPress’e nasıl CSS ekleyebileceğinizi inceleyeceğiz. Ayrıca temel örneklerden başlayarak daha karmaşık örneklere kadar CSS sözdizimini ayrıntılı olarak açıklayacağız. Bu şekilde, CSS’nin nasıl oluşturulduğunu derinlemesine anlayacak ve web sitenizi buna göre şekillendirmek için uygulayabileceksiniz. Bunu söyledikten sonra başlayalım.
İşte ele alacağımız konular:
-
CSS Nedir ve Ne Zaman Kullanılır?
-
CSS Nasıl Çalışır?
-
WordPress’e CSS Nasıl Eklenir?
-
CSS Kalıtımı ve Özgüllüğü
-
Bazı Gelişmiş CSS Kuralları
-
CSS Hakkında Daha Fazlasını Öğrenmek
CSS Nedir ve Ne Zaman Kullanılır?
Kodlama örneklerine geçmeden önce, CSS’nin ne olduğunu açıklayalım. Her şeyden önce, geliştiricilerin HTML, PHP ve JS ile birlikte WordPress temaları ve eklentileri oluşturmak için kullandıkları dillerden biridir. Diğer üçü web sitesi biçimlendirme, sunucu tarafı ve istemci tarafı işlevlerini tanımlamak için kullanılırken, CSS tasarım amaçlı kullanılır. Artık buna benzer sayfalar görmemenizin nedeni budur:
Daha kesin olarak, CSS veya Basamaklı Stil Sayfaları, web tasarımcılarının web sayfalarını tasarlamak için kullandıkları bir dildir. 1994 yılında Håkon Wium Lie tarafından geliştirilmiştir ve CSS Çalışma Grubu tarafından sürdürülmektedir. Dil, web sitesi düzenlerini tanımlamak, belirli HTML öğelerine temel tasarım özellikleri vermek ve web sitenizin duyarlı tasarım sürümlerini yönetmek için kullanılabilir. Ayrıca CSS yıllar içinde geliştikçe, animasyonları kullanarak web sitenize etkileşim eklemek için de kullanılabilir, bunların çoğu daha önce yalnızca JS (JavaScript) ile yapılmıştır.
Fakat gelişmiş CSS’ye alışmak biraz zaman alsa da, bu, tüm WordPress kullanıcılarının web sitelerinin küçük bölümlerini ihtiyaçlarına göre şekillendirmek için CSS kodunu kullanmaktan çekinmeleri gerektiği anlamına gelmez. Belirli bir öğenin rengini değiştirmek, etrafına dolgu ve kenar boşluğu eklemek, tipografi özelliklerini değiştirmek, onu gizlemek ve hatta daha önce belirtilen tüm özellikleri farklı ekran boyutları için değişken bir şekilde değiştirmek gibi küçük ayarlamalar genellikle temel CSS bilgisinin ötesinde sınırlı CSS bilgisi gerektirir. ve bazı CSS seçicileri.
Bu yazıda, bu tür CSS kod parçacıklarını anlamak ve oluşturmak için gerekenlere kapsamlı bir genel bakış sunmaya çalışacağız. Ayrıca daha gelişmiş CSS özelliklerinden bazılarına değineceğiz ve daha sonra gözden geçirebileceğiniz bazı yararlı kaynaklara işaret edeceğiz. Hadi başlayalım.
CSS Nasıl Çalışır?
Rehberimizin ana bölümü olan bu bölümde, sözdiziminin temellerinden başlayarak daha gelişmiş özelliklerine kadar CSS’nin nasıl çalıştığını tartışacağız. Bu konu oldukça uzun olduğu için, onu artan zorlukta olan birkaç alt bölüme ayırmaya çalıştık. Ek olarak CSS’ye kapsamlı bir genel bakış sunmak için elimizden gelenin en iyisini yapmaya çalışsak da, bazı şeyler atlanmış olabilir. Bu yüzden kaçırmış olabileceğimiz konular hakkında daha fazla bilgi edinmek ve ele aldığımız konuları daha iyi anlamak için inceleyebileceğiniz kaynakların bir listesini sona ekledik.
Temel bilgilerle başlıyoruz.
CSS’nin Temelleri
CSS kodu oluşturmaya başlamak için, CSS’nin temellerini, yani CSS sözdizimini derinlemesine anlamak önemlidir. Genel bir CSS kuralı aşağıdaki formu kullanır:
css-selector {
property: value;
}
Bunlar, bu adlardaki her CSS kuralının en önemli 3 kısmıdır. CSS seçici, sayfanızda belirli stil seçeneklerini uygulamak istediğiniz bir HTML öğesini veya bir grup HTML öğesini tanımlamak için kullanılan bir kod parçasıdır. Özellik, o HTML öğesinin (veya öğelerinin) değiştirmek istediğiniz yönüdür (örn. renk, dolgu, kenar boşluğu vb.), değer ise bu özelliğe atadığınız şeydir. Bu ikisi birlikte, özelliğin teknik terimi olan bir bildirim oluşturur: değer; yukarıdaki örnekteki kısım. Ayrıca hem özellikten sonraki iki nokta üst üste(:) hem de bildirimin sonundaki noktalı virgül(;) zorunludur, oysa iki noktadan sonraki boşluk isteğe bağlıdır ve CSS bildirimini daha okunaklı kılmak için kullanılır. Örneğin renk: mavi; mavi rengin color özelliğine değer olarak atandığı bir bildirimdir.
Bununla birlikte süslü parantezler ({ }) içine yerleştirilmedikçe ve uygun bir CSS seçiciye atanmadıkça bir bildirim anlamsızdır. Bu durumda, kod parçacığının tamamı bir CSS kuralı olarak anılırken, süslü parantezler ve içindeki bildirim içeren kısım, söz konusu bir CSS kuralının bildirim bloğu olarak adlandırılır.
Örnek:
h1 {
color: #1f1f1f;
}
Bu CSS kuralı, web sitenizdeki tüm H1 HTML öğelerine belirli bir rengi nasıl atayabileceğinizi gösterir. Renk değeri, kullanabileceğiniz renk kodlarından yalnızca biri olan onaltılık bir kod kullanılarak belirtildi. Ek olarak CSS seçici ile bildirim bloğu arasına boşluk eklediğimize ve bildirimden önce biraz girinti koyduğumuza dikkat edin. Her iki şey de genellikle CSS kodunun okunabilirliğini artırmak için yapılır.
Bununla birlikte o HTML öğesinin istenen stilini elde etmek için genellikle tek bir CSS seçiciye birden çok bildirim belirtmek gerekir. Bu durum söz konusu CSS seçiciye atanan bildirim bloğu içine ek bildirimler yerleştirilerek kolayca yapılabilir. Yani, tek bir CSS seçiciye birden fazla CSS kuralı atamak için aşağıdaki sözdizimini kullanabilirsiniz.
css-selector {
property1: value1;
property2: value2;
…
propertyN: valueN;
}
Bu durumda, kodlama parçacığına CSS kural kümesi adı verilir. Şimdi daha önce verdiğimiz tek bir CSS kuralı örneğinin CSS kural kümesi haline nasıl genişletilebileceğinin yollarından birine bakalım.
Örnek:
h1 {
font-family: “Times New Roman”, sans-serif;
font-size: 35px;
line-height: 1.2em;
font-weight: 700;
color: #1f1f1f;
margin: 25px 0px;
}
Bu CSS parçacığı ile web sitesindeki H1 HTML öğesi için çeşitli tipografi ayarlarının yanı sıra bu öğenin etrafındaki kenar boşluğunu belirtebiliriz. Kenar boşluğu, iki değerle ifade edilen kestirme kenar boşluğu özelliği kullanılarak ayarlanmıştır. İlk değer 25px’lik üst ve alt kenar boşluğunu belirtirken, ikincisi 0px’lik sol ve sağ kenar boşluğunu belirtir. Ayrıca line-height özelliği için kullandığımız değer, kullanabileceğiniz göreli uzunluk birimlerinden biri olan em’de belirtilmiştir.
Bu durum CSS sözdiziminin temelleri hakkındaki bölümü sonlandırıyor. Şimdiye kadar, web sitenize uygulayabileceğiniz bazı basit CSS kurallarının ve kural setlerinin amacını anladınız. Fakat bunu tam olarak kullanmak için, CSS seçicileri hakkında biraz daha bilgi sahibi olmanız ve en uygun olanı bulmak için web sitenizi nasıl inceleyebileceğinizi bilmeniz gerekir. Bunu aşağıdaki bölümde ele alacağız.
Ek olarak CSS kuralları ve kural kümelerinin yanı sıra, CSS’nin kabul ettiği at-kuralları adı verilen başka kural türleri de olduğunu belirtmekte fayda var. Bu kavramlar biraz daha gelişmiş olduğundan, bunları sonraki bölümlerimizden birinde ele alacağız.
CSS Seçicileri
CSS kurallarınız için uygun CSS seçiciyi seçmek, herhangi bir web sitesi öğesi tasarlama sürecinin ayrılmaz bir parçasıdır. Fakat birçok seçici türü ve bunlara uygulayabileceğiniz kurallar olduğundan, ayrıntılı bir CSS seçiciye genel bakış yapmaya karar verdik. CSS seçici oluşturmanın tüm nüanslarını anlamak için bu bölümü dikkatlice, hatta birkaç kez okumanızı tavsiye ederiz. CSS kodu oluşturmak için ön koşul olan web sitenizi nasıl inceleyebileceğinizi de ele aldık.
-
Bir web sitesini incelemek
Web sitenizdeki belirli bir HTML öğesini biçimlendirmek için kullanacağınız uygun CSS seçiciyi bulmak için önce onu nasıl kontrol edeceğinizi bilmeniz gerekir. Bu durum web sitenizi tercih edilen bir tarayıcıda açarak ve sayfada herhangi bir yere, ideal olarak daha fazla stil vermek istediğiniz öğeye sağ tıklayarak yapılır.
Bu durum mevcut tarayıcınızın geliştirici araçlarını ve daha önce sağ tıkladığınız HTML öğesinde etkin olan Öğeler sekmesini açacaktır.
Oradan, mükemmel CSS seçiciyi bulmak için sayfanın HTML yapısında gezinebilirsiniz. HTML yapısında ilerlerken, en uygun CSS seçiciyi aramada görsel bir yardımcı olarak, kodun kendinizi üzerine konumlandırdığınız veya üzerine getirdiğiniz kısmı ekranda vurgulanacaktır.
Bu görevde size daha fazla yardımcı olmak için, kullanabileceğiniz seçici türlerinin kısa bir listesini göstereceğiz.
-
Temel CSS Seçicileri
Kullanabileceğiniz en kolay seçici, sözde tip seçicidir. Bu durum tam bir HTML öğesinin etiketini bir CSS seçici olarak kullanmak anlamına gelir. Açıklığa kavuşturmak için, sayfanızın kodunda
Tip seçicilerden sonra, sıklıkla kullanılan CSS seçicileri de sınıflar ve kimliklerdir. Bunlar, sayfanın HTML işaretlemesi içindeki HTML öğelerinin nitelikleri olarak bulunabilir. Her ikisi de belirli HTML öğelerini hedeflemek için kullanılır. Aradaki fark, ID özniteliğinin benzersiz olması ve ona sahip olan belirli HTML öğesini hedeflemek için kullanılmasıdır; oysa CSS sınıfları, tümü bu sınıf özniteliğini paylaşan bir HTML öğeleri dizisini seçmek için kullanılır.
Bu yüzden bir HTML öğesi, her biri onu tutan öğeler dizisine farklı bir CSS kural kümesi eklemek için kullanılan birden çok sınıfa sahip olabilir, fakat yalnızca o öğeye uygulanan belirli CSS kurallarını eklemek için yalnızca tek bir kimlik olabilir. HTML kodunun id=” ve class=” kısımlarından sonra işaretleme içerisinde ID ve sınıf(lar)ın adı okunabilir. Daha sonra belirli bir öğeyi hedeflemek için kimlik için # işaretini ve sınıf(lar) için nokta işaretini(.) ve ardından sırasıyla o kimliğin veya sınıfın adını kullanın.
Örnek:
Bu kod, unique kimliğine sahip boş bir div öğesini ve custom-item ve info adlı iki CSS sınıfını gösterir.
<div id=”unique” class=”custom-item info”></div>
Bu öğeyi kimliğini kullanarak hedeflemek için CSS seçici olarak #unique kullanın, sınıflarını kullanarak hedeflemek istiyorsanız CSS seçici olarak .custom-item veya .info kullanın. Ayrıca her iki sınıfı da .custom-item.info biçiminde tek bir seçici olarak kullanabilirsiniz; bu, tekil sınıf seçicilerden birini kullanmaktan daha yüksek özgüllüğe sahip bir seçicidir. Bununla birlikte CSS seçicilerin özgüllüğü konusunu daha sonra tartışacağız.
Ek olarak herhangi bir türden tüm HTML öğelerini hedeflemek için kullanılabilen evrensel seçiciden bahsedeceğiz. Yıldız işareti ile gösterilir
-
.
Daha Gelişmiş CSS Seçiciler
Bu seçici türlerini takiben, biraz daha karmaşık olanlara geçiyoruz. Öznitelik seçiciler, belirli CSS özniteliklerinin varlığına veya değerine dayalı olarak HTML öğelerini hedefleyen olası seçicilerin bir dizisini temsil eder. Bu seçiciler oldukça gelişmiş olduğundan, belirli özellik seçici örnekleri için resmi MDN belgelerini incelemenizi öneririz.
Ayrıca bir HTML öğesinin veya bir grup öğenin belirli bir durumunu hedefleyen sözde sınıf seçicilerden de bahsedeceğiz. İki nokta üst üste (:) ile gösterilir ve ardından o durumun adı gelir. En bilinen örnekler, bir link öğesinin :link, :visited, :hover ve :active durumlarıdır. Ek olarak seçili HTML öğesinin belirli bir bölümünü biçimlendirmenizi sağlayan sözde öğe seçicileri de vardır. Çift kolon (::) ile gösterilirler ve ardından öğenin belirli bir bölümünün adı gelir. En sık kullanılanlar ::before ve ::after’dir; bunlar, sayfanızın HTML’sinin içine, belirli bir HTML öğesinden hemen önce veya sonra, bir…