Her WordPress Kullanıcısının Bilmesi Gereken Temel CSS

Bir WordPress sitesine sahip olan herkes, bir noktada, kodun bir kısmını değiştirmeleri gereken bir durumla karşılaşacaktır. Bu, bir profesyonel gibi JavaScript ve PHP yazan bir web geliştiricisi olmanızın beklendiği anlamına gelmez. Daha büyük olasılıkla, WordPress olsun ya da olmasın, herhangi bir web sayfasının temelleri olan HTML ve temel CSS ile uğraşmanız gerekecek.

İhtiyaç duyacağınız en yaygın ve yeni başlayanlar için uygun HTML kodları hakkında harika bir eğitimimiz var. Buna da bir göz atın ve okuyun. Bu sefer, sitenizi tam olarak istediğiniz gibi görünmenize ve hareket etmenize yardımcı olacak en temel CSS parçacıkları ve fikirleri konusunda size yol göstermek istiyoruz.

Youtube Kanalımıza Abone Olun

1. Seçiciler, Sınıflar ve Kimlikler

CSS'de her şeyin temeli bir seçicidir . Basitçe söylemek gerekirse, koda neyi hedefleyeceğini söyleyen bir kısaltmadır. Bir p {} ile sitedeki tüm paragrafları tek tek hedefleyebilirsiniz. (Seçici için geçerli olan herhangi bir kod, küme parantezleri arasına yerleştirilir.) Çoğu durumda, bu öğe seçiciler , web sayfasını oluşturduğunuz HTML etiketleriyle ( p {} <p> hedefleme veya h2 {} ve < gibi) hizalanır. h2> ).

Ondan sonra derslerin var . Bunlar, sizin (veya temanızın/WP'nin kendisinin) tanımladığı belirli seçici türleridir. Gönderiler için yalnızca H1 başlıklarını hedeflemek istiyorsanız, .post-title {} olabilir. Bir CSS sınıfı seçicisi, seçicinin önündeki nokta/nokta ile belirtilir. Bunlar, site genelindeki öğeleri hedeflemek için kullanılır, ancak basit bir H1 gibi temel öğeleri değil. Temel seçicilerde bir nokta veya başka bir gösterge bulunmadığına dikkat edin, bunlar temel HTML'dir.

CSS'deki kimlikler , bir sınıfla tamamen aynı şekilde çalışır. İki küçük fark dışında. Seçicinin önünde # ile gösterilirler ve özel stil gerektiren bir öğenin tek, belirli bir örneği (veya sınırlı sayıda örnek) için adlandırılırlar. #email-abone ol-sayfa hakkında {} veya #e-posta-abone ol-post-post {} gibi. Bu kimlikler, belirli bir öğe türünü hedeflemek yerine, tek tek öğeleri kendilerinin seçtiklerini gösterir.

p {
	color: red;
}

.class {
	color: white;
}

#id {
	color: blue;
}

Diğer Seçiciler

CSS temellerini tartıştığımız için, daha karmaşık seçicilere dalmayacağız, ancak bunlar var. Ayrıca, yalnızca bir bağlantının üzerine gelindiğinde geçerli olabilecek sözde sınıflar olarak adlandırılanları da hedefleyebilirsiniz. Veya yalnızca kendisine bağlı belirli bir parametreye sahip öğeleri hedefleyecek bir nitelik seçici . Ayrıca, p::after ve img::before kullanarak CSS'nin bir öğenin konumuna göre olmasını sağlayabilirsiniz .

Bunlar inanılmaz derecede gelişmiş ve doğru olması karmaşık olabilir, bu nedenle temel bilgileri öğrenmek için endişelenmeniz gereken bir şey değiller. Ancak, belgeyle etkileşime geçebileceğiniz çok daha özel yollar olduğunu bilmenizi istedik.

2. İki Nokta ve Noktalı Virgül

Yukarıda tüm CSS kodlarının kaşlı ayraçlar arasında olduğundan bahsetmiştik. Bu ayraçlar içinde, ancak, özelleştirme her çizgi bir noktalı virgül ile sona ermelidir (;). Bu, tarayıcıya belirli bir stilin tamamlandığını gösterir. Boşluk, okunabilirlik dışında CSS'de önemli değildir, ancak noktalı virgülün kendisi tartışılamaz.

Ayrıca, gerçek CSS stili ile değer arasına normal bir iki nokta üst üste (:) yerleştirirsiniz . Yine, buradaki boşluk hiç önemli değil . Bir tarafında boşluk olabilir, ikisi birden veya hiçbiri olabilir ve CSS yine de oluşturulacaktır.

Bu boşluk bırakabilir ise, genellikle yapmamalısın kabul ediyor unutmayın. Bununla birlikte, çoğu web sitesi ve CSS küçültme sunan temalarda, tüm boşluklar ne olursa olsun kaldırılır.

3. CSS Yorumları

CSS koduna belgeler eklemeniz gerekiyorsa, bunu yorumlarla yapabilirsiniz. CSS yorumları /* ve */ sembolleri ile açılıp kapatılır. Kodunuzu yorumlamak, yalnızca CSS'ye daha sonra dönebilmeniz için değil, daha sonraki geliştiriciler için de önemlidir. Genel olarak, CSS yorumları belirli bir snippet'in ne yaptığını belirtmek için kullanılır.

Yukarıda, kodun bir sonraki parçacığın ne yaptığını söylediğini görebilirsiniz. CSS dosyanız zamanla çok dolambaçlı hale gelebileceğinden, bunu yapmaya devam etmek çok önemlidir.

/* This is what a CSS Comment Looks Like */

img {
	display:none;
}

4. !önemli

!important etiketinin CSS için ne kadar önemli olabileceğini abartmak zor. Amaçlanan kelime oyunu. CSS'nin en sık kullanılan öğelerinden biridir, ancak aynı zamanda en çok yanlış ve aşırı kullanılan öğelerden biridir.

Görüyorsunuz, !important , hangi satırda olursa olsun, o seçici için diğer herhangi bir stili geçersiz kılmak olduğunu beyan eder. Stil sayfasında herhangi bir yerde. Bu nedenle, belirli bir öğenin her zaman belirli bir renge sahip olduğundan emin olmak istiyorsanız, bunu yapmak için !important öğesini kullanırsınız. !important etiketinin tamamının değer ile noktalı virgül arasında olduğuna dikkat edin, sonra değil.

#author-name {
	color:red!important;
}

#author-name {
	color:blue;
}

5. ekran: yok;

Bu özel CSS pasajı, yeni başlayanların öğrenmesi için en önemlilerinden biridir. Tek yaptığı, hedeflediğiniz öğeyi basitçe ortadan kaldırmaktır. Örneğin, başlık menüsü olmayan bir sayfaya ihtiyacınız varsa, örneğin şu kodu girmeniz yeterlidir:

Bunu hemen hemen her sayfada görünen bir sınıfla yapmak, onu siteden tamamen kaldırabilir. Bu yüzden bunu neye uyguladığınıza dikkat etmelisiniz.

Bunu, gönderinin kendisinden meta veriler gibi tek tek öğeleri kaldırmak için belirli WordPress Gönderilerinde veya Sayfalarında kullanabilirsiniz. Divi'de, bu kodu kullanarak bireysel blog modülünü gönderiden alıntı olmayacak şekilde özelleştirebilirsiniz:

.home-page-blog .post-content {
	display:none;
}

6. görünürlük: gizli;

Çok kısaca, görünürlük:gizli; Bir öğeyi ekrandan kaldırmak için CSS. Bununla display:none; arasında bir fark olduğunu unutmayın . kodunuzda.

Ekran; yok; kod, öğeyi sayfadan tamamen kaldıracaktır. Tarayıcı, öğeyi tamamen kaldırıldığı için hiçbir şekilde oluşturmayacaktır. Görünürlük ile:gizli; öğe yine de sayfaya işlenir ve yüklenir, ancak görünmezdir. Tüm işlevsel amaçlar için hala orada. Kullanıcı sadece göremiyor.

Bu nedenle, genellikle bunu yalnızca bir şey için işleve ihtiyacınız varsa, ancak gösterilmesini istemiyorsanız kullanırsınız. Bir izleme pikseli veya ekrandaki diğer öğelerle etkileşime girecek diğer parçalar gibi.

#code-module { 
visibility:hidden; 
}

7. Kenar Boşluğu ve Dolgu

Kenar Boşlukları ve Doldurma, CSS'ye yeni başlayanlar tarafından yanlış anlaşılıyor. İlk başta aynı görünüyorlar, ancak bir kez kazdığınızda tamamen farklı olduklarını göreceksiniz.

Marj , bir elemanın etrafındaki boşluktur. Görünmez ve şeffaftır ve hatta olumsuz olabilir. Daha büyük bir sol kenar boşluğuna sahip olmak, öğeyi sağa doğru itecektir. Daha büyük bir üst kenar boşluğu daha sonra öğeyi aşağıya doğru iter. Negatif bir marj bunun tersini yapar. Örneğin, negatif bir üst kenar boşluğu, öğeyi yukarı çekecektir.

Padding , daha sonra öğenin boyutunu arabelleğe alır. Soldaki dolgu, öğenin arka planını sola doğru uzatır. Esasen fiziksel kütlesini arttırıyor. Soğuk bir günde ikinci bir kazak eklemek gibi. Vücudunuza daha fazla dolgu alırsınız. Eskisinden daha kalınsın. CSS'deki dolgu da bu şekilde çalışır ve bu nedenle negatif dolguya sahip olamazsınız .

Kod olarak kullanırken, varsayılan kenar boşluğunu kullanabilirsiniz :15px; veya dolgu:1vw; seçicinin etrafındaki eşit aralık için. Veya yalnızca o tarafı etkilemek ve her biri için farklı düzeylere sahip olmak için üst kenar boşluğu, sol kenar boşluğu, sağ kenar boşluğu veya alt kenar boşluğu seçeneklerini kullanabilirsiniz. Dolgu da, dolgu-sol ile vb.

h2 {
	margin-bottom:25px;
	padding-left:15vh;
}

8. Boyama Öğeleri

Çeşitli öğelerin rengini değiştirmek, bir siteye başladığınız ilk günden itibaren ince ayar yapmaya başlayabileceğiniz şeylerden biridir. CSS'de bir rengi iki şekilde tanımlayabilirsiniz.

Ana yol, 6 basamaklı onaltılık kodunu kullanmaktır: örnek olarak beyaz için #ffffff veya siyah için #000000 . Herhangi bir RGB rengini hex kodu ile tanımlayabilirsiniz ve bunları bilmiyorsanız endişelenmeyin. Buna yardımcı olacak birçok web sitesi ve araç var.

İkinci yol, önceden tanımlanmış bir renk sözcüğü kullanmaktır. Mavi , siyah ve kırmızı gibi temel renkler önceden tanımlanmıştır ve bunları herhangi bir onaltılık kodu hatırlamanıza gerek kalmadan kullanabilirsiniz. Ancak birincil tonlar ihtiyacınız olan şey değilse, en iyi seçenek onaltılık kodlardır.

Renk Kodlarını Kullanma

Renk kodlarını fiilen kullanmanın birkaç yolu vardır. Değiştirilmesi gereken herhangi bir metin için color:#ffffff; ve bu seçicideki herhangi bir metin değişecektir. Aynı işlemi color ile H1 ve H2 gibi başlık başlıkları için de yapabilirsiniz.

p {
	color:white;
	background-color:#000;
}

h3	{
	background:green;
	border: #110011;
}

background-color:red; gibi şeyleri değiştirme veya arka plan:yeşil; bir elemanın kullanımı kadar kolaydır. Bir renk değeri ekleyin. Ayrıca color:#000; a:hover gibi, üzerine gelindiğinde bağlantının rengini değiştiren seçiciler için değerler. Hatta sınır:mavi; istediğiniz herhangi bir öğenin etrafına renkli bir kenar koymak için.

CSS Temellerini Özetlemek

CSS bunaltıcı olabilir. Ve renkleri değiştirmek ve öğeleri göstermek/gizlemekten çok daha fazlasını yapabilirsiniz. Bununla birlikte, CSS'yi yeni öğreniyorsanız ve bir web sitesini kod aracılığıyla nasıl değiştireceğinizi öğreniyorsanız, bu belirli temel bilgileri içselleştirmek, daha önce hiç kod düzenleyici açmamış olsanız bile, kodu okumada ve ince ayarlarda rahatlık sağlayacaktır.

Sitelerinizde sıklıkla kullandığınız bazı temel CSS nedir?

Darkwark / Shutterstock.com tarafından makale özellikli resim