és CSS tulajdonságait.

Próbálja megváltoztatni az ingatlanértékeket árrésÉs párnázásés meg fogod érteni, hogy mi az.. és ha már világos, menjünk tovább..

Lehetséges margó- és kitöltési értékek.

A fenti példában tulajdonságok hozzárendelése árrésÉs párnázás egy érték felhasználásával mind a négy oldalon meghatároztuk az elem margóját és kitöltését. Különböző margók és kitöltési méretek megadásához egy elem egyes oldalaihoz két, három vagy négy argumentumot kell megadnia szóközzel elválasztva. Sőt, az értékek számától függően az eredmény eltérő lesz.

Íme, példák:

margó: 5 képpont; - egy érték.
Egy érték – A margók minden oldalon azonosak.

margó: 5 képpont 40 képpont; - két jelentése.
Első érték – Beállítja a margót a felső és az alsó szegélytől.

margó: 5 képpont 40 képpont 20 képpont; - három jelentése.
Második érték – Beállítja a margókat az elem bal és jobb szélétől.

margó: 5 képpont 40 képpont 20 képpont 1 képpont; -négy jelentése.
Első érték – Beállítja a margót az elem felső szegélyétől.
Második érték – Beállítja a margót az elem jobb szélétől.
Harmadik érték – Beállítja a margót az elem alsó szegélyétől.
Negyedik érték – Beállítja a margót az elem bal szélétől.

VAL VEL párnázás az ügy ugyanazt az elvet követi, mint a árrés, az elem belső határaitól a tartalomig terjedő kitöltés az argumentumok számától és értéküktől függően méretet vesz fel.

Gyermektulajdonságok margó és párnázás.

CSS-tulajdonságok árrésÉs párnázás alapvetőek, és számos gyermektulajdonsággal rendelkeznek.

U árrés ez:

• margin-top- Margó a szülőelem felső szegélyétől,
• margó-bal- Margó a szülőelem bal szélétől,
• margó-jobb- Margó a szülőelem jobb szélétől,
• margó-alsó- Margó a szülőelem alsó szegélyétől.

És párnázás illetőleg:

• padding-top- Behúzás az elem felső határától a tartalomig,
• padding-bal- Behúzás az elem bal szélétől a tartalmáig,
• padding-right- Behúzás az elem jobb szélétől a tartalomig,
• párnázó-alsó- Behúzás az elem alsó szegélyétől a tartalmáig.

Nos, azt hiszem, ez egyértelmű... ha meg kell határozni a behúzást vagy a margót egy elem egyetlen oldaláról, akkor jobb, ha a fenti tulajdonságok valamelyikét használja.

A margók és a kitöltés a weboldal tervezésének egyik fő összetevője, és számos irányelvet kell követni ezzel kapcsolatban.

Kerülje a rövid, és még inkább a nulla kitöltést a tartalomtól az elem határáig, különösen a szövegblokkok esetében. A kis margókkal és behúzással ellátott szöveg nehezen olvasható és ragadós.

Tartsa be a margók és a behúzások arányossági és összemérhetőségi szabályait egy-egy elemre és a teljes oldalra (elemek összetételére) mint egészre vonatkozóan.

Az egyik módja annak, hogy az oldal látogatói figyelmét a kívánt helyre irányítsa, a szokásosnál nagyobb behúzások használata, ez a kontraszt arra kényszeríti a nézőt, hogy a szöveg „különleges” helyeire nézzen és figyeljen.

Ebben a cikkben szeretném elmondani, hogyan kell helyesen elhelyezni mezőket(padding) és behúzás(margó) a CSS-ben.

Mindenekelőtt emlékezzünk a margók és a padding meghatározására a W3C specifikáció szerint. A dobozmodellben a margók a tartalom és a doboz szegélye közötti távolságot jelentik. A kitöltés pedig egy blokk határa és egy szomszédos vagy szülőelem szegélye közötti távolság.

Így ha az elem szegélye és háttere nincs megadva, akkor nincs különbség, használja a padding vagy margin tulajdonságot a behúzások beállításához, de feltéve, hogy az elem szélessége (szélessége) és magassága (magassága) nincs megadva valamint a tartalomméretek dobozméretezési tulajdonságok segítségével történő kiszámításának algoritmusa.

Mindenesetre ne feledje, hogy a margók beletartoznak az elem szélességébe vagy magasságába, vagy nem. A behúzások mindig az elemen kívül vannak beállítva.

Most nézzük meg, hogyan kell helyesen elhelyezni a margókat és az elemek közötti teret. Vegyük példaként a következő blokkot.

Ez a hírblokk. Ez egy fejlécből, egy hírlistából és egy „Egyéb hírek” hivatkozásból áll. Adjuk meg nekik a következő osztályneveket: news__title, news__list és news__more-link.

Mivel ezeknek az elemeknek ugyanaz a bal és jobb margója van, jobb, ha a margókat a szülőblokkhoz állítja be, nem pedig az egyes elemek bal és jobb margóját külön-külön.

Hírek ( kitöltés: 20px 25px; )

Így, ha módosítani kell a jobb és bal oldali mezők értékét, akkor ezt meg kell tenni Egy helyen. Ha pedig új elemet adunk hozzá a hírblokkon belül, akkor már bal és jobb oldalon is meglesz a szükséges behúzás.

Gyakran előfordul, hogy egy blokkon belül minden elem bal és jobb oldalon azonos kitöltéssel rendelkezik, kivéve egyet, amelyen például a háttér miatt egyáltalán nem kellene kitölteni. Ebben az esetben negatív kitöltést állíthat be az elemhez. Ekkor nem kell eltávolítania a mezőket a blokkon belül más elemekhez.

Most be kell állítania az elemek közötti függőleges margókat. Ehhez meg kell határoznia, hogy az elemek közül melyik kötelező. Nyilvánvaló, hogy hírblokk nem létezhet hírlista nélkül, ugyanakkor előfordulhat, hogy nincs benne „Egyéb hírek” hivatkozás, a cím is eltávolítható például a design megváltoztatásakor.

Ezt figyelembe véve a címnél alul a behúzást, az „Egyéb hírek” hivatkozásnál felül a behúzást állítottuk be.

News__title ( margó-alsó: 10px; ) .news__more-link ( margin-top: 12px; )

Ugyanezt a külső eredményt érhetjük el, ha a hírlista tetejére és aljára párnázunk.

Hírek__lista ( margó: 10 képpont 0 12 képpont 0; )

Most be kell állítania a behúzásokat az egyes hírek között. Ismételten kérjük, vegye figyelembe, hogy a hírek száma változhat, és csak egy hír szerepelhet a listán.

Minden hírhez beállíthat felső behúzást, kivéve az elsőt, vagy alsó behúzást minden hírhez, kivéve az utolsót. Az első lehetőség előnyösebb, mert a:first-child pszeudoválasztót hozzáadták a CSS 2.1 specifikációhoz, és szélesebb támogatást élvez, ellentétben a:last-child pszeudoválasztóval, amely csak a CSS 3.0 specifikációban került hozzáadásra.

Hírek__lista-elem ( margó felső: 18 képpont; ) .hírek__lista-elem: első gyermek ( margó teteje: 0; )

Így a margók és behúzások helyes elhelyezése lehetővé teszi bármely blokk megjelenésének rugalmas megváltoztatását anélkül, hogy a stílusokon módosítanánk, és a tervezés megzavarása nélkül. A legfontosabb dolog annak meghatározása, hogy mely blokkelemek a főbbek ( kötelező), és melyek választható.

Néha nem támaszkodhatunk a szükséges elemekre. Például van egy felugró ablakunk, amelyen belül néhány cím és szöveg jeleníthető meg. Sőt, bizonyos esetekben előfordulhat, hogy nincs szöveg, és néhány esetben nincs cím. Vagyis mindkét elem nem kötelező.

Ebben az esetben a következő módszert használhatja a behúzások beállításához.

Popup__header + .popup__text ( margó felső: 15 képpont; )

Ekkor a behúzás csak akkor jelenik meg, ha mindkét elemet használjuk. Csak a cím vagy csak a szöveg megjelenítése esetén nincs külön behúzás.

Függőleges margók összecsukása

Egy másik árnyalat, amelyről nem mindenki tud, a szomszédos blokkok közötti függőleges terekhez kapcsolódik. A behúzás fentebb megadott definíciója szerint a behúzás a közötti távolság határok jelenlegi és szomszédos blokkok. Így ha két blokkot egymás alá helyezünk és az egyiknek 30px alsó, a másiknak 20px felső margót adunk, akkor a köztük lévő margó nem 50px, hanem 30px lesz.

Vagyis a behúzások átfedik egymást, és a blokkok közötti behúzás egyenlő lesz a legnagyobb behúzással, nem pedig a behúzások összegével. Ezt a hatást "összeomlásnak" is nevezik.

Kérjük, vegye figyelembe, hogy a vízszintes behúzások a függőlegesekkel ellentétben nem „összecsukódnak”, hanem összegzik. A mezők (padding) összegzése is megtörténik.

A behúzások „összeomlásának” ismeretében ezt a funkciót előnyünkre használhatjuk. Például, ha egy cikken belül be kell húznunk a címsorokat és a szöveget, akkor az első szintű címsor alsó behúzását 20 képpontra állítjuk, a második szintű címsornál pedig a felső behúzást 20 képpontot, az alsót pedig 10 képpontot. minden bekezdés felső behúzását 10 képpontra állítjuk.

H1 (margó-alsó: 24px; ) h2 (margó-felső: 24px; margó-alsó: 12px; ) p (margó-felső: 12px; )

Most a h2 címsor a h1 címsor vagy a bekezdés mögé tehető. Mindenesetre a felső margó nem haladhatja meg a 24 képpontot.

Általános szabályok

Összefoglalva szeretném felsorolni azokat a szabályokat, amelyeket a margók és a behúzások elrendezése során követek.

1. Ha a szomszédos elemek ugyanazzal a kitöltéssel rendelkeznek, akkor jobb, ha a szülőtárolóra állítja be őket, nem pedig az elemekre.
2. Az elemek közötti behúzásnál figyelembe kell venni, hogy az elem kötelező vagy nem kötelező.
3. A hasonló elemek listájához ne felejtse el, hogy az elemek száma változhat.
4. Ügyeljen a függőleges párnázásra, és használja ezt a funkciót ott, ahol előnyére válik.

Címkék: Címkék hozzáadása

Utolsó frissítés: 2016.08.04

Egysoros szövegmező jön létre a beviteli elem használatával, ha a type attribútum szövegre van állítva:

A szövegmezőt számos további attribútum segítségével testreszabhatja:

dirname: beállítja a szöveg irányát

maxlength : egy szövegmezőben megengedett maximális karakterszám

minta: meghatározza azt a mintát, amelyhez a bemeneti szövegnek egyeznie kell

helyőrző : Beállítja a szövegdobozban alapértelmezés szerint megjelenített szöveget

readonly : A szövegmezőt csak olvashatóvá teszi

kötelező : azt jelzi, hogy a szövegmezőnek értéknek kell lennie

méret : beállítja a szövegmező szélességét látható karakterekben

érték : Beállítja az alapértelmezett értéket a szövegmezőben

Alkalmazzunk néhány attribútumot:

Küld Megszünteti

Ebben a példában a második szövegmező azonnal beállítja a maxlength és size attribútumokat. Ebben az esetben a méret - vagyis a mező látható terébe beférő karakterek száma nagyobb, mint a megengedett karakterszám. A maximális hossznál azonban továbbra sem írhatunk be több karaktert.

Ebben az esetben is fontos különbséget tenni az érték és a helyőrző attribútumok között, bár mindkettő beállítja a látható szöveget a mezőben. A helyőrző azonban valamilyen tippet vagy felszólítást ad a bevitelhez, ezért általában szürkén jelenik meg. Míg az érték a mezőbe beírt alapértelmezett szöveget jelöli:

A csak olvasható és letiltott attribútumok elérhetetlenné teszik a szövegmezőt, de eltérő vizuális hatást fejtenek ki. Letiltott esetén a szövegmező szürkén jelenik meg:

A szövegmező attribútumai között érdemes megjegyezni egy olyan attribútumot is, mint a lista . Hivatkozást tartalmaz egy adatlista elemre, amely egy szövegmezőbe beírva eszköztippként megjelenő értékkészletet határoz meg. Például:

Küld

A szövegmező lista attribútuma az adatlista elem azonosítójára mutat. Az adatlista elem maga határozza meg a lista elemeit beágyazott opcióelemekkel. Amikor pedig beír egy szövegmezőt, ez a lista elemleírásként jelenik meg.

Keresés mező

Keresési mezők létrehozásához használja a beviteli elemet a type="search" attribútummal. Formálisan ez egy egyszerű szövegmező:

Jelszó mező

Jelszó megadásához használja a type="password" attribútummal rendelkező beviteli elemet. Különlegessége, hogy a beírt karaktereket pontok takarják:

A margók és a kitöltés nagyon fontos stílusok a HTML-oldalak készítésekor. Lehetővé teszik az elemek pontosabb elhelyezését, keret létrehozását a szükséges hézagokkal stb. Mindkét stílus nagyon hasonló, és hasonló funkciókat lát el. De még mindig vannak különbségek.

Az elemek egymásba ágyazhatók vagy egymás mellett helyezkedhetnek el. Nézzük a következő példát:

Két asztalunk van, a citrom és a kék, egymás alatt. A táblázatok egy cellából állnak. A táblázat első cellájában egy piros blokk található. Ezzel a példával nézzük meg, hogyan működnek a margók és a behúzások.

A mezők stílus szerint vannak beállítva párnázás. Ez a stílus csak a tárolóelemekre vonatkozik, amelyek más elemeket is tartalmazhatnak. A stílus lehetővé teszi az elem szélei és a tartalma közötti margó beállítását. Stílus árrés lehetővé teszi, hogy behúzásokat állítson be egy elemből egy másik elem legközelebbi szegélyéig. Egy másik elem szegélyei lehetnek a szülőtároló szegélyei, valamint magának az oldalnak a szélei.

Számos módja van ezeknek a stílusoknak a beállítására. Például közvetlenül adja meg az összes margó vagy behúzás méretét egy argumentummal valamilyen mértékegységben (px, ex, em, pt, cm stb.):

padding: 3px; margó: 3px;

Ebben az esetben a margók és a behúzások mind a négy oldalon azonosak lesznek. Ha két argumentumot ad meg szóközzel elválasztva:

padding: 3px 5px; margó: 3 képpont 5 képpont;

az első határozza meg a margók/behúzások mennyiségét felül és alul, a második - a bal és a jobb oldalon. Ha három érvet adnak meg:

padding: 3px 5px 2px; margó: 3 képpont 5 képpont 2 képpont;

az első a margó/behúzás felül, a második bal és jobb, a harmadik pedig alul. Négy érvvel:

padding: 3px 5px 2px 6px; margó : 3px 5px 2px 6px ;

az első a margó/szóköz felül, a második a jobb oldalon, a harmadik alul, a negyedik a bal oldalon. Könnyű megjegyezni: az első felülről, majd az óramutató járásával megegyezően. Ezenkívül a megfelelő stílusok használatával külön beállíthatja a margókat és a kitöltést egy adott élhez: padding-top, padding-right, párnázó-alsó, padding-bal, margin-top, margó-jobb, margó-alsó, margó-bal. Ezen stílusok értéke csak egy argumentum lehet, amely az adott oldal margójának/kitöltésének mértékét adja meg.

Az ábrán a piros blokk a táblázat celláján belül és annak határai mellett található, vagyis a cellának nincs margója. Állítsuk be a cella margóit a stílus használatával:

padding: 5px;

Ennek eredményeként az oldal a következőre változik:

Nézzük most a bemélyedéseket. Két tábla van egymás mellett, ha egy kicsit el akarjuk távolítani őket, akkor behúzást alkalmazhatunk. Itt két lehetőség van: vagy az első táblázat alsó, vagy a második tábla felső behúzását állítja be. Használjuk a másodikat:

margó felső: 5 képpont;

Kérjük, vegye figyelembe, hogy a behúzást kifejezetten a táblázathoz állítjuk be, és nem a táblázat cellájába, mint a mezők esetében. Íme az eredmény:

Egyébként az első esetben (a piros blokk és a szülőcella határai közötti rés) ugyanez a hatás érhető el a blokk behúzásainak beállításával. Általában, ha valami nem világos, tudassa velünk a megjegyzésekben.

A tesztoldal HTML kódja:

<html > <fej > <cím > Teszt</title> <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </head> <test > <stílus > táblázat (szélesség: 200 képpont; magasság: 150 képpont; szegély: 1 képpont tömör #555; szegély összecsukása: összecsukás) td (függőleges igazítás: felül; kitöltés: 0 képpont) div (szélesség: 100 képpont; magasság: 100 képpont; háttér: piros)</stílus> <table style = "háttér: lime" > <tr > <td style = "padding: 5px" > <div style = "margó: 0px" ></div> </td> </tr> </tábla> <táblázat stílus = "háttér: égkék; margó felső: 5 képpont"> <tr > <td ></td> </tr> </tábla> </body> </html>