Kişiler

Sol kenar boşluğu css. Kenar boşluğu, dolgu ve kenarlıklı CSS Dolgusu ve Kenarlıklar

  • 27.05.2019

Kenar boşlukları ve dolgu, bir HTML sayfası oluştururken çok önemli stillerdir. Elemanları daha doğru bir şekilde konumlandırmanıza, gerekli boşluklara sahip bir çerçeve oluşturmanıza vb. Her iki stil de çok benzerdir ve benzer işlevleri yerine getirir. Ama yine de farklılıklar var.

Öğeler iç içe olabilir, birbirine bitişik olabilir. Aşağıdaki örneğe bakalım:

Alt alta yerleştirilmiş limon ve mavi olmak üzere iki masamız var. Tablolar bir hücreden oluşur. İlk tablonun hücresinde kırmızı bir blok var. Bu örnekte, kenar boşluklarının ve dolgunun nasıl çalıştığına bakalım.

Alanlar stile göre ayarlanır dolgu malzemesi. Bu stil yalnızca başka öğeler içerebilen kapsayıcı öğeler için geçerlidir. Stil, öğenin kenarları ile içeriği arasındaki kenar boşluklarının değerini ayarlamanıza olanak tanır. stil marj bir öğeden başka bir öğenin en yakın kenarlarına dolgu ayarlamanıza olanak tanır. Başka bir öğenin kenarlıkları, ana kabın kenarlıkları olabileceği gibi sayfanın kenarları da olabilir.

Bu stilleri ayarlamanın birkaç yolu vardır. Örneğin, tüm kenar boşluklarının veya girintilerin boyutunu bir ölçü biriminde (px, ex, em, pt, cm vb.) tek bir bağımsız değişkenle doğrudan belirtin:

dolgu: 3px kenar boşluğu: 3px

Bu durumda, kenar boşlukları ve dolgu dört tarafta da aynı olacaktır. Boşlukla ayrılmış iki argüman belirtirken:

dolgu: 3 piksel 5 piksel; kenar boşluğu: 3 piksel 5 piksel;

ilki üstte ve altta kenar boşluklarının/dolguların miktarını, ikincisi ise solda ve sağda belirleyecektir. Üç argüman verildiğinde:

dolgu: 3 piksel 5 piksel 2 piksel; kenar boşluğu: 3 piksel 5 piksel 2 piksel;

birincisi üst kenar boşluğu/girinti, ikincisi aynı anda sol ve sağ, üçüncüsü alt. Dört bağımsız değişkenle:

dolgu: 3px 5px 2px 6px; kenar boşluğu: 3 piksel 5 piksel 2 piksel 6 piksel;

birincisi üst kenar boşluğu/dolgu, ikincisi sağ, üçüncüsü alt, dördüncüsü sol. Hatırlaması kolay: ilki üstte, sonra saat yönünde. Ek olarak, uygun stilleri kullanarak belirli bir kenar için kenar boşluklarını ve dolguyu ayrı ayrı ayarlayabilirsiniz: dolgu üst, sağa dolgu, dolgu-alt, sol dolgu, kenar boşluğu, sağ kenar boşluğu, kenar boşluğu, sol kenar boşluğu. Bu stillerin değeri, belirli bir taraf için kenar boşluğu/dolgu miktarını belirten yalnızca bir bağımsız değişken olabilir.

Şekilde kırmızı blok, tablo hücresinin içinde yer alır ve kenarlıklarına bitişiktir, yani hücrenin kenar boşluğu yoktur. Stili kullanarak hücre kenar boşluklarını ayarlayalım:

dolgu: 5 piksel

Sonuç olarak, sayfa aşağıdaki gibi değişecektir:

Şimdi ofsetlere bakalım. İki tablo birbirine bitişik, onları biraz ayırmak istersek girinti uygulayabiliriz. Burada iki seçenek vardır: birinci tablonun alt girintisini veya ikinci tablonun üst girintisini ayarlayın. İkincisini kullanalım:

kenar boşluğu: 5 piksel;

Girintiyi, alanlarda olduğu gibi tablo hücresine değil tabloya ayarladığımıza dikkat edin. İşte sonuç:

Bu arada, ilk durumda (kırmızı blok ile ana hücrenin sınırları arasındaki boşluk), blok girintileri ayarlanarak aynı etki elde edilebilir. Genel olarak, bir şey net değilse, yorumlarda abonelikten çıkın.

Deneysel sayfanın HTML kodu:

<html > <kafa > <başlık >Ölçek</başlık> <meta http-equiv = "İçerik Türü" içerik = "metin/html;charset=utf-8" > </kafa> <vücut> <stil> tablo (genişlik: 200 piksel; yükseklik: 150 piksel; kenarlık: 1 piksel katı #555; kenarlık daraltma: daralt) td (dikey hizalama: üst; dolgu: 0 piksel) div (genişlik: 100 piksel; yükseklik: 100 piksel; arka plan: kırmızı)</stil> <tablo stili="arka plan:kireç"> <tr > <tdstyle="padding:5px"> <div stili="kenar boşluğu:0px"></div> </td> </tr> </tablo> <masa stili = "arka plan: gök mavisi; kenar boşluğu: 5 piksel"> <tr > <></td> </tr> </tablo> </vücut> </html>

Merhaba, blog sitesinin sevgili okuyucuları! Bugün Basamaklı Stil Sayfaları veya CSS çalışmamıza devam edeceğiz. Önceki makalelerde, sitenin blok düzenini genel olarak ele aldık. Sonuç olarak, oldukça profesyonel web sayfaları almaya başladık, ancak bir şeyleri eksik. Ve büyük olasılıkla girintiler ve çerçeveler yoktur. Bugün, html öğeleri için dolgu ve kenarlıklar ayarlamanıza izin veren kenar boşluğu, dolgu ve sınır stili kurallarına bir göz atacağız.

CSS Dolgu Seçenekleri

Basamaklı Stil Sayfalarında iki tür girinti vardır.

1.Girinti elemanın hayali sınırından içeriğine olan uzaklığıdır. Mesafe değeri parametre kullanılarak ayarlanır. dolgu malzemesi. Böyle bir girinti, öğenin kendisine aittir ve içinde bulunur.

2. Dış dolgu- web sayfasının geçerli öğesinin sınırı ile komşu öğelerin veya ana öğenin sınırları arasındaki mesafe. Mesafenin boyutu mülk tarafından kontrol edilir marj. Bu dolgu elemanın dışındadır.

Netlik için resim:

Örneğin, metinle dolu bir hücreyi düşünün. Dolgu, hücrenin hayali sınırı ile içerdiği metin arasındaki mesafedir. Ve dış girinti, komşu hücrelerin sınırları arasındaki mesafedir. Girintilerle başlayalım.

Dolgulu CSS dolgusu (üst, alt, sol, sağ)

padding-left , padding-top , padding-right ve padding-bottom stil özellikleri, sırasıyla bir web sayfası öğesinin solu, üstü, sağı ve altı için dolgu değerleri ayarlamanıza olanak tanır:

dolgu üst | sağa dolgu | dolgu-alt | sol dolgu: değer | faiz | miras

Dolgu miktarı piksel (px), yüzde (%) veya diğer kabul edilebilir CSS birimleri cinsinden belirtilebilir. Yüzdeleri belirtirken değer, öğenin genişliğinden hesaplanır. Devralma değeri, ebeveynden miras alındığını gösterir.

Örneğin, mevcut paragraf için sol girintiyi 20 piksel, üst girintiyi 5 piksel, sağ girintiyi 35 piksel ve alt girintiyi 10 piksel olarak belirten bir stil kuralı uyguladım. Kural girişi şöyle görünecektir:

p.test(
dolgu-sol:20px;
üst dolgu: 5px;
sağ dolgu: 35px;
alt dolgu: 10 piksel
}

Prefabrik dolgu kuralı bir web sayfası öğesinin her tarafında aynı anda girintiler belirtmenize olanak tanır:

dolgu malzemesi:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Önceden hazırlanmış bir kuralda bir, iki, üç veya dört değerin boşlukla ayrılarak kullanılmasına izin verilir. Bu durumda, etki değerlerin sayısına bağlıdır:

  • bir değer belirtirseniz, sayfa öğesinin her tarafındaki girinti miktarını ayarlayacaktır;
  • iki değer belirtirseniz, birincisi girinti miktarını yukarıdan ve aşağıdan ve ikincisi - sola ve sağa ayarlayacaktır;
  • üç değer belirtirseniz, birincisi girinti miktarını üstten, ikincisi - soldan ve sağdan ve üçüncüsü - alttan belirleyecektir;
  • dört değer verilirse, birincisi dolguyu üste, ikincisi sağa, üçüncüsü aşağıya ve dördüncüsü sola ayarlayacaktır.

Böylece yukarıdaki CSS kuralı olabildiğince kısaltılıp aşağıdaki gibi yazılabilir:

p.test( dolgu:5 piksel 35 piksel 10 piksel 20 piksel)

CSS'deki marj özelliği veya marjlar

margin-left , margin-top , margin-right ve margin-bottom stil öznitelikleri, sırasıyla sol, üst, sağ ve alt kenar boşluğu miktarını ayarlamanıza olanak tanır:

kenar boşluğu üst | sağ kenar boşluğu | kenar boşluğu | sol kenar boşluğu:<значение>|otomatik|devralma

Yukarıda bahsedildiği gibi kenar boşluğu, geçerli öğenin sınırından komşu öğenin sınırına veya komşu öğe yoksa ana kabın iç sınırına olan mesafedir.

Dolgu miktarı piksel (px), yüzde (%) veya diğer kabul edilebilir CSS birimleri cinsinden belirtilebilir:

p(
sol kenar boşluğu: 20 piksel;
}
h1(
sağ kenar boşluğu: %15;
}

Otomatik değer, dolgunun tarayıcı tarafından otomatik olarak hesaplanacağı anlamına gelir. Yüzde notasyonu kullanılması durumunda, girintiler şuna bağlı olarak hesaplanır: üst kapsayıcı genişliği. Ve bu sadece kenar boşluğu ve sağ kenar boşluğu için değil, aynı zamanda kenar boşluğu ve kenar boşluğu için de geçerlidir, yüzde dolgu, kabın yüksekliğine değil genişliğe bağlı olarak hesaplanacaktır.

Dış girinti değerleri olarak kullanılmasına izin verilir negatif değerler:

p(
sol kenar boşluğu: -20px;
}

Pozitif girinti değerleri ile komşu elemanlar uzaklaşırsa, o zaman negatif bir değerle komşu blok, böyle bir negatif girinti ayarladığımız elemanın üzerinden geçecektir.

Style niteliğini kullanarak kenar boşluklarını da belirtebiliriz. marj. Girinti değerlerini web sayfası öğesinin her tarafında aynı anda ayarlar:

marj:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Bu özellik, bir, iki, üç veya dört dolgu değeri ayarlanması durumunda, dolgu kuralıyla aynı yasalara uyar.

border özelliği ile kenarlık seçenekleri

Çerçeveleri ayarlarken üç tür seçenek vardır:

  • kenarlık genişliği - kenarlık genişliği;
  • kenarlık rengi - kenarlık rengi;
  • border-style - sınırın çizileceği çizginin türü.

Kenarlık kalınlığı parametresiyle başlayalım:

kenarlık genişliği: [değer | ince | orta | kalın] (1,4) | miras

çerçeve kalınlığı piksel cinsinden veya css'de bulunan diğer birimlerde ayarlanabilir. İnce, orta ve kalın değişkenler kenarlık kalınlığını sırasıyla 2, 4 ve 6 piksel olarak ayarlar:

kenarlık genişliği:orta;

padding ve margin özelliklerinde olduğu gibi border-with parametresi için bir, iki, üç veya dört değere izin verilir, böylece kenarlığın genişliğini tüm taraflar için bir kerede veya her biri için ayrı ayrı ayarlar:

kenarlık genişliği: 5px 3px 5px 3px

Şu anki paragraf için, kuralı kullanarak üst kenarlığın kalınlığını 1px, sağı 2px, alt kısmı 3px ve sol 4px yapacağız (border-width: 1px 2px 3px 4px;)

border-left-width , border-top-width , border-right-width ve border-bottom-width stil öznitelikleri sırasıyla kenarlığın sol, üst, sağ ve alt kenarlarının kalınlığını ayarlamak için kullanılabilir. :

kenar-sol-genişlik|kenar-üst-genişlik|kenar-sağ-genişlik|kenar-alt-genişlik: ince|orta|kalın|<толщина>|miras

Bir sonraki parametre, kontrol edebileceğiniz border-color'dur. Çerçeve rengi:

kenarlık rengi: [renk | şeffaf](1,4) | miras

Bu özellik, öğenin tüm kenarları için çerçeve rengini aynı anda veya yalnızca belirtilenler için ayarlamanıza olanak tanır. Bir değer olarak, renkler için html'de kabul edilen ayarlama yöntemlerini kullanabilirsiniz: onaltılık kod, anahtar sözcükler, vb.:

p(kenarlık genişliği: 2 piksel; kenarlık rengi: kırmızı)

Saydam değer, saydam kenarlık rengini ayarlar ve üst öğenin değerini devralır. Varsayılan olarak, kenarlık rengi ayarlanmamışsa, verilen öğenin içindeki yazı tipi için kullanılan renk kullanılacaktır.

border-left-color , border-top-color , border-right-color ve border-bottom-color stil nitelikleri sırasıyla kenarlığın sol, üst, sağ ve alt taraflarının rengini ayarlar:

sol kenarlık rengi|üst kenarlık rengi|sağ kenarlık rengi|alt kenarlık rengi: şeffaf|<цвет>|miras

Ve son parametre border-style setler Çerçeve tipi:

kenarlık stili: (1,4) | miras

Çerçeve tipi, elemanın tüm kenarları için bir kerede veya yalnızca belirtilenler için belirtilebilir. Değer olarak birden çok anahtar sözcük kullanılabilir. Görünüm, kullandığınız tarayıcıya ve çerçevenin kalınlığına bağlı olacaktır. Anlam Yok varsayılan olarak kullanılır ve bir çerçeve görüntülemez ve kalınlığı sıfır olarak ayarlanır. Gizli değer aynı etkiye sahiptir. Kalınlığa bağlı olarak kalan değerler için ortaya çıkan çerçeve aşağıdaki tabloda gösterilmektedir:

border-left-style , border-top-style , border-right-style ve border-bottom-style style nitelikleri, çerçevenin sol, üst, sağ ve alt kenarlarını çizmek için kullanılacak çizgilerin stilini ayarlar. , sırasıyla:

sol kenarlık stili|üst kenarlık stili|sağ kenarlık stili|alt sınır stili: hiçbiri|gizli|noktalı|kesikli|düz|çift|oluk|çıkıntı|iç metin|başlangıç|devralma

Kenar boşluğu ve dolgu seçeneklerinde olduğu gibi, kenarlığın genel özellik sınırı. Bir öğenin etrafındaki kenarlığın kalınlığını, stilini ve rengini aynı anda ayarlamanıza olanak tanır:

kenarlık: | miras

Değerler, boşluklarla ayrılmış herhangi bir sırada olabilir:

td (kenarlık: 1 piksel sürekli sarı)

Bir öğenin yalnızca belirli kenarlarına kenarlık ayarlamak için, öğenin üst, alt, sol ve sağ tarafları için parametreler ayarlamanıza izin veren border-top, border-bottom, border-left, border-right özellikleri vardır. sırasıyla sınırlar.

Geriye sadece özetlemek kalıyor:

  • iş için dolgu malzemesi mülkü kullan dolgu malzemesi;
  • ayarlar için kenar boşlukları bir kural var marj;
  • çerçeve seçenekleri bir öznitelik kullanarak ayarla sınır.

Tüm bu css özelliklerinin web sayfası öğesinin boyutunu artırdığını not ediyorum. Bu nedenle, web sayfasının tasarımını oluşturan blok kapların kenarlık kalınlığını veya dolgu boyutunu değiştirirsek, bu kapları buna göre yeniden boyutlandırmamız gerekecek, aksi takdirde hareket edebilirler ve tasarım bozulur.

Hepsi bu kadar, yakında görüşürüz!

Merhaba! Başlangıçta bu makaleyi 4 küçük parçaya bölmek istedim ama sonra düşündüm. Ne için? Sonuçta, bu tür bilgilerin tek bir materyal çerçevesinde toplanması daha uygundur.

Bu yüzden bugün CSS'yi sola ve diğer tüm taraflara - sağ, üst ve alt - nasıl girintileyeceğimizi öğreneceğiz. Resimler ve metinler için yapılabilirler. Bunlar iki tiptir:

  • harici;
  • Dahili.

Birincisi için, anahtar özellik marjı, ikincisi için dolgu kullanılır. Anlaşılır olması için sizin için küçük bir örnek yaptım. İç ve dış alan arasında ayrım yapmayı görsel olarak kolaylaştırmak için görünür bir tablo ekledim. Ne olduğunu görelim?

kenar boşlukları

Bunları CSS stil dosyasına kaydettikten sonra, sayfadaki bilgi bloğunun yönünü ayarlamak mümkün olacaktır. Örneğin, sola ve aşağı hareket ettirin. Nasıl görüneceğini hemen gösterelim.

Genel olarak, girintileri ayarlamak için aşağıdaki seçenekleri kullanabilirsiniz.

Sol (kenar boşluğu-sol).

Sağ (sağ kenar boşluğu).

Üst (kenar boşluğu).

Alt (kenar boşluğu).

Şimdi size başka bir harika nüans göstereceğim.

Gördüğünüz gibi seçeneklerden birini kullanabilirsiniz - efekt aynıdır. Yalnızca ikinci durumda, kod daha kompakt hale gelir. Ayrıca girintilerin saat yönünde ayarlandığını unutmayın. Her şey üstte başlar ve solda biter.

Girintiler

Buradaki prosedür benzer. Ancak şimdi tüm tablo için değil, sütunların içeriği için yeni özellikler ekleyeceğim.

Bakalım ondan ne çıktı.

CSS'deki iç girintilere benzetilerek, dış girintiler kısa kodda veya taraflar için ayrı ayrı yazılabilir.

Bunlar öne çıkanlardı. Son olarak, size bazı işleri nasıl kolaylaştırabileceğinizi göstereceğim.

Seçilen etiketler düzeyinde girinti

Yukarıda incelediğimiz durumlarda, aynı anda metin ve resimler için ayarlanmışlardır. Aslında, belirli bir etiket düzeyindeki öğelere olan mesafeyi ayarlayabilirsiniz. Sana nasıl çalıştığını göstereceğim. Son değişiklikleri iptal ediyorum ve stil dosyasında özel bir kod belirtiyorum.

Değişiklikleri kaydettikten sonra ne olduğuna bir göz atalım.

Resim yerinde kaldı, sadece içindeki metin. Benzer manipülasyonlar diğer bloklara uygulanabilir, örneğin tr, span.

Ek bilgi olarak, görevle ilgili yayının gözden geçirilmesini öneriyorum. Açıklanan oldukça ilginç yollar da var. Metinde kırmızı bir çizgi oluşturmak veya diğer eylemleri gerçekleştirmek için yararlı olabilir.

Ek olarak, e-posta adresleriyle ücretsiz bilgi dağıtımına abonelik vardır. Bloga abone olmak için özel bir form var. İletişime kadar.

Bir web kaynağı, kullanıcılar tarafından dış çekiciliğine göre değerlendirilir. Bu nedenle bilgi açısından yararlı metinler bile kalitesiz olduğu için okunamayabilir. Sonuç - yalnızca site sayfalarının anlamsal içeriğine değil, aynı zamanda görsel sunumuna da dikkatli ve dikkatli bir şekilde yaklaşmanız gerekir. CSS teknolojisinin ortaya çıkışı, çekici makaleler oluşturma olanaklarını genişletti. Yazıyı okumayı kolaylaştırmak için tasarlanmış bir özellik, CSS metin girintisidir.

Kenar boşlukları ve dolgu: fark nedir?

Metni biçimlendirmeye başlamadan önce, kenar boşluklarının ve girintilerin ne olduğunu anlamalısınız. Bu biçimlendirme öğeleri bazı durumlarda kullanıcıya aynı görünse de aralarında temel farklar vardır:

  • alan özellik tarafından belirlenir dolgu malzemesi, girinti - marj;
  • kenar boşluğu, bloğun içeriği ile sınırı arasındaki boşluk, girinti - komşu blokların sınırları arasındaki boşluk tarafından belirlenir;
  • Kenar boşlukları, elemanın boyutunda (genişlik ve yükseklik) dikkate alınabilir veya alınmayabilir.

marj özelliği

Dolayısıyla, CSS metninin yatay veya dikey girintisini ayarlamak için yapıyı kullanın. marj. Bu özellik etiketi için geçerlidir belgenin paragrafını tanımlar. En basit haliyle şöyle yazılır:

kenar boşluğu: 12px

Bu satır, bir metin bloğunun (veya başka herhangi bir bloğun) her tarafında 12 piksel girintili olacağı anlamına gelir. Aralığı örneğin üç kat artırmak için şunu yazmanız yeterlidir:

kenar boşluğu: 36 piksel

Peki ya bloklar arasındaki mesafenin her iki tarafta da farklı olması gerekiyorsa? Web sayfası geliştiricileri çeşitli notasyon biçimleri kullanır:

  1. kenar boşluğu: 11 piksel 22 piksel.
  2. kenar boşluğu: 11 piksel 22 piksel 33 piksel.
  3. kenar boşluğu: 11 piksel 22 piksel 33 piksel 44 piksel.

İlk örnekte bloğun alt ve üst kenarlarından 11 piksel, bloğun kenarlarından 22 piksel girinti yapılacaktır. İkinci yazım şekline göre bloğun üst kenarı ile içerik arasında 11 piksel, alt kenarı arasında 33 piksel ve yanlarda 22 piksel olacak. Üçüncü durumda, dolgu üstten 11 piksel, sağdan 22 piksel, alttan 33 piksel ve soldan 44 piksel olacaktır.

Blok sınırına olan mesafeyi yalnızca bir tarafta kaydetmek de mümkündür: üst kenar boşluğu, alt kenar boşluğu, sol kenar boşluğu, sağ kenar boşluğu. Mülklerin adlarını Rusçaya çevirerek amaçlarını tahmin etmek kolaydır. Örneğin, aşağıdaki giriş, sağ dolgunun 22 piksel olacağını söylüyor:

sağ kenar boşluğu: 22 piksel

Diğer kenarlar için bloğun etrafındaki mesafeler ana elemanın değerine eşit alınır.

Mülk marj geliştiricinin CSS dikey girintisini kullanırken akılda tutması gereken bir özelliği vardır. Komşu elemanların aralıkları toplanmaz, üst üste bindirilir. Örneğin, bloklardan birinin kenar boşluğu: 15 piksel, ve alttan ona bitişik blok kenar boşluğu: 35 piksel. Okul aritmetiği ve sağduyu, aralarındaki toplam dolgunun 50 piksel olacağını belirtir. Uygulamada durum böyle değil. Büyük özellik değerine sahip blok marj komşusunu "emmek". Sonuç olarak, öğeler arasındaki boşluk 35 piksel olacaktır.

"Kırmızı cizgi

Bir metin düzenleyicide bir belge tasarlarken, kullanıcılar her yeni paragrafı "kırmızı" bir çizgi kullanarak ayarlamayı tercih eder. CSS ile soldaki metin girintisini yapmak kolaydır - yapı kullanılır metin girintisi. Şöyle yazılır:

metin girintisi: 11px.

Yani, paragrafın ilk satırı göreli sol kenardan 11 piksel kaydırılacaktır. Web sayfasındaki metnin düzenleyicide daha çok bir belge gibi görünmesini sağlamak için ayrıca şunları ayarlamanız, yani yazmanız gerekir:

metin girintisi: 11px;

metin hizalama: iki yana yasla.

İşaretlemeyi açıklarken piksellere ek olarak, inç, nokta, yüzde gibi diğer birimlerin kullanılmasına izin verilir. Bloğun CSS metin girintisi %10 olsun. 500 piksel blok genişliği ile kırmızı çizgi 50 piksel olacaktır (500'ün %10'u).

Bu özellik şu şekilde ayarlanabilir: miras. Böyle bir kayıt, bloğun üst bloğun benzer bir özelliğini kullandığını söyler.

metin girintisi: devral.

Şaşırtıcı bir şekilde, negatif değerler de alabilir! Bu durumda, sözde çıkıntılar oluşur, yani ana metin yerinde kalır ve ilk satır 22 piksel sola kaydırılır:

metin girintisi: -22px.

Harflerin tarayıcının sol kenarlığının ötesine geçmesini önlemek için, metin girintisi alanı ayarlamak için yapıyı kullanmanız gerekir:

sol dolgu: 22px

Dikkate alınması gereken ana CSS özellikleri. Ve pratik onları düzeltmeye yardımcı olacaktır. İşte öğrendiklerinizi web sitenizin gelişimine nasıl uygulayacağınıza dair bazı son ipuçları:

  • kırmızı çizgi ve metin girintisi farklı kavramlardır ve bunları belirtmek için farklı özellikler kullanılır;
  • dikey girintiler için matematik kuralları geçerli değildir - aralıklar üst üste bindirilir, en büyük değere sahip öğe "kazanır";
  • Negatif paragraf girintisi, resim içeren bir paragrafın ilk satırını belirtmek için kullanılır.

CSS düzeni her zaman dikdörtgen olmuştur. Düz çizgiler, geliştiricinin yetkinliğidir. Stil kuralları, sayfaya ekran çözünürlüğü içinde düzgün şekiller vermek için yeterli seçenekler sunar. Ancak herhangi bir düzen öğesi, her zaman, bilgilerin konumunun CSS kuralları tarafından düzenlendiği bir dikdörtgendir.

Çok yönlü dolgu, sayfa kesinlikle konumlandırıldığında her öğe için önemlidir ve üst dolgu, özellikle satır içi öğeler olmak üzere çeşitli öğeler için önemli olduğundan CSS'de özel olarak tanımlanmıştır.

Temel Konumlandırma Kuralları

Bir blok elemanı, içinde bulunduğu elemanın kenarlarından bir dolgu kuralına (kenar boşluğu), içindeki öğeler için bir dolgu kuralına (dolgu) ve ayrıca kullanılabilen bir kenarlık genişliğine (kenarlık) sahiptir.

Üstteki girinti özellikle önemlidir. Bir blok içindeki CSS, dolgu kurallarını o blok içindeki mutlak ve göreceli olarak konumlandırılmış öğeler için kurallarla ilişkilendirir.

CSS kurallarının olağan uygulaması: dolguyu tüm taraflarda eşit olarak, üst/alt ve sağ/sol çiftleri halinde veya her bir taraf için ayrı ayrı belirtebilirsiniz. Örneğin,

  • kenar boşluğu: 10 piksel
  • dolgu: 10px20px
  • dolgu: 10px20px30px40px.

Birinci durumda, elemanın girintisi, içinde bulunduğu dış kabın kenarlarından ayarlanır. İkinci durumda, üst ve alt girintiler 10 piksel, sol ve sağ - 20 pikseldir. Üçüncü durumda, tüm kenarlardaki girintilerin boyutları belirtilir: üst, sağ, alt ve sol.

Tüm bu durumlarda, girinti üst CSS 10 pikseldir.

Öğelerin konumunu değiştiren kurallar

Layout elemanı kesinlikle konumlandırılmamış ise sayfanın genel sıralamasında yer almaktadır.

tanımlarsak scCurrInfo öğesinde CSS'nin tepesinden girinti yaparsanız, hedefe ulaşılır ve li seviyesindeyse ulaşılmaz.

Bu örnekte, dolgu kullanılarak: 40px; genişlik ve yükseklik kurallarının 80 piksel yeterli bir şekilde azaltılmasını gerektirir. Aksi takdirde, scCurrInfo bloğunun boyutu dış bloğun sınırlarını aşacaktır.

Dolgu kuralını scCurrInfo açıklamasından kaldırır, ancak liste öğesi stil açıklamasına 20px değeriyle eklersek, yalnızca şunu elde ederiz: üst girinti. CSS bu değeri diğer taraflara uygulamaz.

Doğal olarak, girinti kuralının bu kullanımı her li öğesi için geçerlidir.

İçerik Biçimlendirmeye Yönelik Genel Uygulama

Bazı geliştiriciler, sayfaları blok öğelerle düzenleyerek mükemmelliğe ulaşır. Görünüşe göre bu klasik bir uygulama - tablolarla başlamak ve kendi eğitim sürecinizi bloklar üzerinde bitirmek.

Blok düzeninin doğasında bulunan özgürlük büyüleyicidir ve geliştiricinin hayal gücü katı tablo kurallarıyla sınırlı olmayabilir: yalnızca satırlar, yalnızca hücreler, yalnızca yatay ve dikey olarak birleşir. İlişkisel fikirlere özgü bir şey yok.

Bu arada, tabloların bariz eksikliklere ek olarak birçok niteliksel avantajı vardır. Yukarıdan girintiler oluştururken, CSS soldaki, sağdaki girintileri dikkate alır (alt kısım özel bir andır). Tablo hücresi kuralları, hizalamayı hem dikey hem de yatay olarak kontrol etmenizi sağlar. Hücre stilleriyle birleştirilmiş satır stillerini kullanarak karmaşık içerik görünümleri oluşturabilirsiniz.

Sayfanın dikdörtgen şeklinde olağan gösterimi, tablo şeklinde sunulmasını hiçbir şekilde engellemez. Bunlar da dikdörtgendir ama aynı zamanda tablo hücreleridir, yani blok kurallarını tamamlayan kendi kuralları vardır.

mutlak konumlandırma

POSITION kuralıyla engelle: mutlak ; bulunduğu bloğa göre koordinatlarının belirlediği yerde bulunacaktır.

CSS kurallarının karakteristik bir özelliği, çoğu durumda "uygulama, gerçeğin en iyi kriteridir" şeklindedir, özellikle tarayıcılar arası uyumluluk gerektiğinde ve düzen manuel olarak yapıldığında, basamaklı stil sayfalarında tam kılavuzları incelemek tercih edilir.

Tabloların kullanımı genellikle hücre kayması sorunlarına yol açar. Bir blok içindeki benzer bir ofset her zaman tüm öğeleri etkilemez. Deneyerek, istenen sonucu elde edebilirsiniz. Önemsiz bir görev: nasıl üst dolguyu kaldır, CSS her zaman önemsiz bir şekilde çözmez.

Bazı durumlarda, sayfa öğelerini bazı popüler site içerik yönetim sistemlerinin derinliklerine dizmeniz gerektiğinde, yalnızca deneysel uygulamaya değil, aynı zamanda meslektaşlarınızın deneyimlerine de dikkat etmeniz gerekir.




İlgili Makaleler

En son makaleler
Popüler Makaleler
Editörün Seçimi
rzdoro.ru