Yeni başlayanlar için CSS: CSS kutu modelleri ve bunları nasıl doğru kullanılır
Kendi WordPress sitenizi çalıştırdığınızda, tasarım ve işlev üzerinde daha fazla kontrol elde etmek istediğiniz doğaldır. Sitenin görünümünde kapsamlı bir değişiklik yapmanın en iyi yollarından biri CSS. CSS’deki becerilerle, sayfanın üzerindeki sayfanın düzeninden başlayan her şeyi yazı tipine ve arka plan görüntüsüne değiştirebilirsiniz. Bunun için öğrenilmesi gereken en temel kavramlardan biri CSS kutusu modelidir. Bu, web tasarımının temel prensibidir. Bunu anlamak, dileklerinize göre durmadan sitenizin düzenini ayarlamanızı sağlar. Yeni başlayanlar için bu yazıda size CSS kutusu modelinin ne olduğunu ve nasıl çalıştığını açıklayacağız. Her şeyden önce bunu teorik olarak tartışacağız ve daha sonra net hale getirmek için bir dizi pratik örnekle çalışacağız.
Web tasarımcı şapkanızı giyin ve başlayalım. CSS Kutu Modeli – İlk adım olarak nasıl çalıştığı, CSS kutu modelinin arkasındaki fikre dalalım. Her yerde kutular! CSS’yi etkili bir şekilde kullanmak için anlamanız gereken ilk şey, web sayfasında gördüğünüz her şeyin bir dikdörtgenden oluşmasıdır. Gördüğünüz herhangi bir web sitesi sadece yan, yukarıda, aşağıda, aşağıda düzenlenmiş ve birbirleriyle yuvalanmış dikdörtgen bir kutudur. Başlık? Dikdörtgen dördü. Yan bıçaklar? Dikdörtgen dördü. Üstün resim? Ayrıca dikdörtgen. Tabii ki, genellikle buna dikdörtgen değil, HTML öğesi diyoruz. Ve çeşitli türleri var.
Blok VS satır öğeleri HTML öğeleri iki farklı tipte gelir: satır içi ve blok öğeleri. CSS kutu modelinin kullanımı üzerinde de etkisi olan bazı çarpıcı farklılıklar var. Blok öğesinin ana özelliklerinden biri, konteynerin tüm alanını yerleştirildikleri yere götürmeleridir. Aksi belirtilmedikçe (CSS aracılığıyla yani), aşağıdaki diğer unsurları hareket ettirerek mevcut alanı işgal etmek için uzanırlar. onlar. Bu blokquote blok öğeleri için bir örnektir. Arka plan rengini ekledim, böylece sadece metnin göründüğü alanın değil, ekranın her tarafına gerildiğini görebilirsiniz. Buna ek olarak, blok öğesi diğer bloklar veya satırlar içerebilir ve yüksekliği içeriğe uyacak şekilde otomatik olarak ayarlayacaktır. Örnekler başlık etiketleri, div kutuları, paragraflar ve listelerdir. Listenin tamamını burada bulabilirsiniz. Çizginin bir kısmı aslında bir WordPress kullanıcısı olarak, farkında olmasanız bile, belki de çok tanıdıksınız. İçerik oluşturduğunuzda ve metni kalın veya eğimli olarak ayarladığınızda, WordPress editörü bu etkiyi elde etmek için etrafına … veya … ekler.
İçerik kodunuzu görmek için Metin Düzenleyicisi sekmesine tıklayın ve göreceksiniz.
Tersine, elemanları engellemek için, element hattı sadece ihtiyaç duydukları kadar alan alır. Ayrıca yeni satırlara geçmediler veya aşağıdaki diğer öğeleri itmediler. Onlar hakkında daha fazla bilgiyi bu yerde bulabilirsiniz. Bununla birlikte, bu davranış nedeniyle, çoğu CSS kutusu modeli yalnızca blok öğeleri için geçerlidir. Nedenini anlayacaksınız. Peki, CSS kutu modeli nasıldır!? Bilmeyebileceğiniz şey, her HTML öğesi yaptığınızda, elementin temel olarak etrafına sarılmış bir kutu ile donatılmış olmasıdır. Bu kutu, CSS aracılığıyla bağımsız olarak manipüle edebileceğiniz çeşitli katmanlardan oluşur. Bunu yapmak, birbirleriyle ilişkili olarak öğeler ayarlamanıza ve birçok yönden düzenlemenize olanak tanır. Bu katmanlardan oluşan şey budur:
Yüksek – Tahmin edebileceğiniz gibi, bu öğenin yüksekliğini gösterir. Genellikle içerik tarafından kontrol edilir, ancak gerekirse belirli bir yükseklik de uygulayabilirsiniz. Bir kez daha, bu sadece blok öğeleri için işlev görür.
Sınır – Sınır, görmeseniz bile her HTML öğesinin etrafında koşar. Farklı boyutlar, stiller ve renkler alabilirler. Aşağıda daha fazla bilgi.
Dolgu – Bu, elemanın sınırları ile içindeki içerik arasındaki boşluğu gösterir. Bu, örneğin, HTML öğesindeki metin hala okunabilmesi için önemlidir.
Marj – Son olarak, marj sınırın dışındaki alan gösterir. Bu, sayfanın düzeni, konum konumu ve mesafe için farklı ve çok önemli öğeler arasındaki boşluğu etkili bir şekilde kontrol eder. Temel olarak CSS kutusu modelidir. Diyagramda gördüğünüzde bu daha netleşir:
Yukarıdaki her katmanda da uygun bir CSS özelliğine sahip olduğundan, kutu modeli HTML öğesinin boyutunu, konumunu ve görünümünü belirlemenin en temel yolunu temsil eder. Sonuç olarak, bu, web sayfalarınızla ilgili birçok şeyi değiştirmenizi sağlar. Nasıl çalıştığını görmek için bazı örneklere bakalım. CSS Kutu Modelleri Nasıl Kullanılır – Kutu modellerinin teorisini pratikte anlamanıza yardımcı olacak örnekler, içinde blok öğesi bulunan bir örnek sayfa oluşturdum.
<Önde
CSS Kutusu Modelleri için Örnek Sitelorem iPsum Dolor oturma amet, elit adipiscing contecur.
Bu temel olarak div kutusunda birkaç metin örneği içeren bir HTML belgesidir. Tarayıcıda şuna benziyor:
Ekranda nerede gerildiğini görebilmeniz için kutuya birkaç arka plan rengi verdiğimi unutmayın. Bu, gelecek değişiklikleri anlamayı kolaylaştıracaktır. Şimdiye kadar, bununla eşleşen CSS:.
Arka plan-rengi: DeepskyBlue;
} Şimdi ona bazı değişiklikler yapalım. Yapacağımız ilk şeyin genişliğini değiştirmek genişlik ilan etmektir. Belirtildiği gibi, şu anda otomatik olarak%100’e ayarlanmıştır. Eğer değiştirmek istersem, genişlik özelliği ile uğraşmak zorundayım. Onu yönetmenin birkaç yolu var. Piksel gibi sabit bir genişlik veya yüzde gibi orantılı değer kullanabilirsiniz. İkincisi, duyarlı tasarım gibi şeyler için çok önemlidir. Ancak, basitlik uğruna, piksel kullanacağım. Bunu buraya stil sayfama ekliyorum: örnekler {
Genişlik: 300 piksel;
} Şimdi sayfayı yeniden kullandığımda, örneğim şuna benziyor:
Div kutusunun şimdi nasıl sağa kadar uzandığıyla nasıl sınırlı olduğunu hemen göreceksiniz. Ayrıca, içerdiği metin için alan sağlamak için yüksekliğin otomatik olarak ayarlandığını da görebilirsiniz. Hadi daha da artıralım. Elementin yüksekliğini CSS yoluyla arttırmak, içerik dikdörtgenlerde düzgün bir şekilde uygun olsa da, yüksekliği daha da arttırmak için iyi bir neden vardır. Örneğin, öğelerin mükemmel kareler olmasını istersem ne olur? Bunu CSS kutu modelimizde bir sonraki olan genişlik özelliği ile kolayca başarabilirim.
Yükseklik için genişlik ile aynı olasılığa sahibiz. Sabit bir değer veya oran seçebilirsiniz. Ben, bunu buraya stil sayfama ekledim: örnekler {
Arka plan-rengi: DeepskyBlue;
Yükseklik: 300 piksel;
Genişlik: 300 piksel;
} Sonuç olarak, örnek sayfam şimdi şöyle görünüyor:
Gördüğünüz gibi, eleman istenen şekle girmiştir, çünkü genişlik ve yükseklik şimdi aynı değere sahiptir. Bir sonraki sınırı tanıtarak sınırı değiştirmek istiyorum. Belirtildiği gibi, sınır zaten var, göremezsiniz. Sınır mülkiyeti üzerinden değiştirmenin zamanı geldi. Bu operatör hakkında bilmek önemli olan üç değerdir: sınır genişliği, kuvvet ve renk gereklidir. Genişlik, sınırın kalınlığıdır (genellikle pikselde), kuvvet katı, noktalı, kırılmış ve diğer birçok şey olabilir ve renk “kırmızı” veya bir rengin altıgen değeri gibi bir ifadedir. Teorik olarak, sadece sınırın genişliğini belirlemek yeterlidir. Ancak, zamanınızın çoğu bu üç değeri ayarlayarak daha iyi sonuçlar elde eder. Takip ettiğim şey bu:. Örnekler {
Arka plan-rengi: DeepskyBlue;
Sınır: 15 piksel katı mavi;
Yükseklik: 300 piksel;
} Ve web sayfasında böyle görünüyor:
Olağanüstü görünüyor, değil mi? Biliyorum, ben oldukça tasarımcıyım. Bilin, bir elementin farklı taraflarına sınır üstü, sınır suyu, sınır tabanları ve sınır yaprağı ile çeşitli sınır türleri de ayarlayabileceğinizi bilin. Örneği gören bazı dolgular eklemek, öne çıkan ana şeylerden biri, öğenin doğrudan bitişiğindeki metindir. Okumayı çok zorlaştırıyor ve görmek çok zor. Neyse ki, dolgu kuralları aracılığıyla değiştirebiliriz. Bunu örneğimde kullanma şeklim budur:. Örnekler {
Arka plan-rengi: DeepskyBlue;
Sınır: 15 piksel katı mavi;
Yükseklik: 300 piksel;
Rulman: 16px; Genişlik: 300 piksel;
} Ve bu kodun etkisidir:
Çok daha iyi, değil mi? Çünkü elementin her tarafına biraz dolgu tanıttım. Bununla birlikte, sınıra gelince, bir elemanın farklı taraflarında farklı dolgu değerleri de ayarlayabileceğinizi lütfen unutmayın. Bunun için dolgu üstü, dolgu suyu, dolgu-dip ve dolgu solu kullanın. Steno gibi dolgu kullanabilirsiniz: 10px 5px 15px 10px; . Sayılar, her birinin üst, sağ, alt ve soldaki dolguyu gösterir. Dolgu aynı zamanda bu listedeki hatlara da uygulanabilecek birkaç özellikten biridir. Bununla birlikte, diğer unsurları rahatsız eden üst ve alt dolgu riski altındasınız, bu yüzden dikkatli olun. Sonunda marj ekle, marj elde ediyoruz. Belirtildiği gibi, bu, elemanın dışındaki alanı belirler, sayfadaki konumunu ve diğer öğelerle ilişkili olarak. Daha net hale getirmek için stil sayfama aşağıdakileri ekledim:.
Sınır: 15 piksel katı mavi;
Yükseklik: 300 piksel;
Marj: 25 piksel;
Rulman: 16px; Genişlik: 300 piksel;
} İşte nasıl gerçekleşecek:
Gördüğünüz gibi, bunu yapmak öğeleri sayfadan uzaklaştırdı. Ancak, marjın tüm unsurlara uzanacağı şekilde ayarladım. Div kutumu kopyalayıp ikinci kez sayfaya koyarsam ve kutuların nasıl birbirine bağlandığını daha iyi görebilirsiniz.
Şu anda her iki tarafta aynı marjım var. Bununla birlikte, bir kez daha, farklı yönler için farklı değerleri belirlemek de mümkündür. Bu, dolgu ile aynı şekilde çalışır. Marj-üst, marj-sol vb. Kullanabilirsiniz. Veya kısaltma. Marj ayrıca kısmen çizgiler için de geçerlidir, ancak sadece taraflar, yukarıda veya altta değil. Elementin boyutu hakkında kısa bir not, elemanın boyutuna geldiğinde, CSS kutu modelinin tüm bölümlerinin buna katkıda bulunduğunu belirtmek önemlidir. Dolayısıyla, öğenin genişliğini yalnızca içerik alanı için geçerli olan 200px’e ayarlarsanız. Sınırlar, dolgu ve herhangi bir marj da elemanın mutlak yatay boyutuna katkıda bulunacaktır. Aynı şey yükseklikler için de geçerlidir. Burada da, tüm kutu modelleri katmanları artar. Bu konuda çalışmanın, sınır kutusu kutularını bir eleman için sınırlara ayarlamak gibi çeşitli yollar vardır. Bu durumda, genişliğin belirlenmesi sınırı içerecek ve içindeki her şey kafeste doğru hale getirmek için otomatik olarak ayarlanacaktır.
