A HTML oldalakon a szegélyeket használják a tartalom elhatárolására és kiemelésére. Ha rengeteg információ található egy oldalon, és szeretné felhívni a felhasználó figyelmét bizonyos részekre, akkor használja a határokat a tartalom körül. Ebben a cikkben a határokról a CSS-ben a következő témákat fogom megvitatni:
- Mikor kell használni a Borders alkalmazást
- Határok a CSS-ben
- A CSS Border attribútumai
- A Border Attributes alapértelmezett értékei
- Határok meghatározása gyorsírásban
- A CSS-ben a határok megtervezése közben szem előtt tartandó szempontok
Mikor kell használni a Borders alkalmazást
A szokásos gyakorlat a CSS szegélycímkék használata a határok HTML oldalakon történő meghatározásához:
- Fontos címsorok körül
- Az utóirat vagy a fontos megjegyzések kiemelése
- Képek, illusztrációk, emberek idézetei, videók csatolása
- Felhívni a figyelmet az árakra, az ütemtervekre vagy ilyen jelentős információkra
Érdemes felolvasni a mielőtt a CSS-határok megismerésével foglalkozna.
Átfogó CSS oktatóanyagért látogasson el Edureka CSS bemutató kezdőknek . Kiváló heads-upot kap arról, hogy a CSS-t hogyan kell használni a HTML webtervezés bővítéséhez.
Határok a CSS-ben
A CSS szegélyek a HTML oldal különböző szakaszaihoz rendelhetők, legyen szó fejlécek vagy bekezdések mellékeléséről. Kezdjük egy példával. Itt meghatározunk egy határt a címsor körül, és egy másik határt a bekezdések szövege körül.
törzs {háttér-szín: világoskék} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Határ a bekezdés körül is!
A CSS Border attribútumai
A CSS határok három fő attribútummal rendelkeznek
- stílus:Azstílusattribútum határozza meg a határ mintázatát.
- szín: A szín bármelyik lehet a CSS színek által meghatározott készletből.
- szélesség: A szélességet a szegély vastagságának változtatására, annak kiemelésére használják.
A fenti példában azt láttuk, hogy csak egy határ attribútum van definiálva, ez a stílusa. A többi attribútum, ha nincs meghatározva, alapértelmezett értékeket vesz fel. Van még egy sugár nevű attribútum, amelyet ritkábban használnak. Arra szolgál, hogy a szegély széle lekerekített legyen.
- határ stílusú tulajdonság
| Stílus | Leírás |
| határ-stílus: szilárd | |
| határ stílusú: kettős | |
| határ-stílus: barázda | |
| határ-stílus: gerinc | |
| határ-stílus: betét | |
| határ-stílus: kezdet | |
| border-style: nincs | |
| border-style: rejtett | |
| határ stílusú: pontozott | |
| határ stílusú: szaggatott |
Észrevenné, hogy létezik „nincs határ” és „rejtett határ” lehetőség is. A fejlesztő egyszerűen elkerülheti a határ definiálását, miért határozza meg kifejezetten „rejtett határként”? Ez helyhasználat és az oldal más elemeivel való összehangolás céljából történik.
A szegélystílusok keverhetők egy elemen belül is. Ebből a célból a 4 egyedi határoldal külön-külön, különböző stílusokkal definiálható. Ezt kétféleképpen lehet megtenni. Vagy meghatározza mind a 4 oldalt egyetlen címkében. Ebben az esetben a számlálás a felső sorból indul, majd az óramutató járásával megegyező irányba mozog. Alternatív megoldásként a 4 határvonal mindegyike egyedi címkékben is meghatározható. Mindkét eset a következő példában látható.
| Stílus | Leírás |
| szegély stílusú: pontozott szaggatott szolid kettős border-top-style: pontozott border-right-style: szaggatott border-bottom-style: szilárd határ-bal-stílus: kettős |
- szegély-szín tulajdonság
A szegély színattribútuma többféleképpen állítható be. Ez hasonló a többi elem színének beállításához. A színek a következő módszerek egyikével állíthatók be:
- név - adjon meg egy színnevet, például „kék”. Kipróbálhat néhány divatos színválasztékot is, például a „BlanchedAlmond” -t!
- Hex - adjon meg egy hex értéket, például „# ff0000”
- RGB - állítsa be az RGB kódot. Például az rgb (255,255,0) jelentése sárga.
- beállítás - például „átlátszó” vagy „átlátszatlan”
- határszélesség tulajdonság:
A szélesség tulajdonság, amint a neve is mutatja, meghatározza a 4 határoldal vastagságát. Ha egy érték van megadva, akkor az minden oldalra vonatkozik, különben egyedi szélességi értékek is beállíthatók.
A szélesség bármely standard egységben megadható, például pixelben („px”), pontban („pt”) vagy centiméterben („cm”). A szélességet előre definiált „vastag”, „vékony” és „közepes” értékekkel is megadhatja.
| Stílus | Leírás |
| szegély szélessége: 10 képpont | |
| szegély szélessége: 0,1 cm | |
| határszélesség: közepes |
- határsugár tulajdonság
A sugár meghatározásának célja, hogy lekerekített sarkokat kapjon a határhoz. A sugár tényező határozza meg a lekerekítettség mértékét. Nagyobb az érték, annál görbültebbek a sarkok. Szokásos gyakorlatként a sugárértékeket a határ szélességének 1-3-szorosa között tartják.
A következő kód generálja:
szegély szélessége: 10 képpont
határ-sugár: 30 képpont
A határ attribútumainak alapértelmezett értékei
Az egyetlen kötelező attribútum a stílus . Ha a stílus hiányzik, a szegély nem jelenik meg.
Ha a szín nincs megadva, akkor az alapul szolgáló elem színe lesz az alapértelmezett érték. Például, ha egy bekezdés szövegének színe „kék”, akkor az alapértelmezett szegélyszín szintén kék lesz. Abban az esetben, ha még az elemnél sincs színmeghatározás, akkor az alapértelmezett szín a „fekete”.
A szélesség alapértelmezett értéke „közepes”.
Határok meghatározása gyorsírásban
Egyes fejlesztők inkább a határ attribútumokat tömör, egysoros címkében határozzák meg. Ez a rövidített formátum segít a kódsorok minimalizálásában, és a szakértő fejlesztők ezt a formátumot részesítik előnyben. A gyorsírás formátumának használata akkor ajánlott, ha a határdefiníció egyszerű és meglehetősen szabványosított. Ha azonban a szegély mindkét oldalát más stílusban kell kiemelni, akkor ragaszkodnia kell az egyes címkék meghatározásának formátumához.
A következő kódot használjuk:
határ stílusú: szaggatott
szegélyszíne: zöld
szegély szélessége: 5 képpont
szegély: szaggatott zöld 5 képpont
A CSS-ben a határok megtervezése közben szem előtt tartandó szempontok
Ne használjon túl sok szegélyt egy oldalon, ez zavaró lehet, és megnehezítheti a felhasználó számára az összpontosítást.
hogyan lehet befejezni egy módszert java-ban
Fontos a határ stílusának és színeinek konzisztenciája. Az oldal azonos hierarchiájú elemeinek hasonló szegélystílussal és szélességgel kell rendelkezniük az egységesség érdekében. Például, ha bekezdés szilárd szegéllyel és 5 képpont szélességgel van meghatározva, ezt a formátumot tartsa fenn minden másban bekezdés elemek a weboldal tervezése során.
Tartsa be a címkefiníciók egyik stílusát. Egyes fejlesztőknek jól állnak a parancsikonok, amelyek minden értéket egyetlen értékhez rendelnek határ címke. Vannak, akik inkább az összes címke kifejezett felsorolását szélesség, szín és stílus tekintetében. A szokás az, hogy amikor egy oldalra bonyolult szegélydíszekre van szükség, az egyes címkéket külön felsoroljuk. Ez segít az ilyen testreszabott határdefiníciók hibakeresésében. Normál esetekben csak egy parancsikon meghatározása lenne megfelelő.
Remélem, hogy megtalálta a keresett információt a CSS-határokon, és wEzzel a határok a CSS-ben véget értünk.
Nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés elsajátítja a back-end és a front-end webes technológiák használatának képességeit. Ez magában foglalja a webfejlesztés, a jQuery, az Angular, a NodeJS, az ExpressJS és a MongoDB képzését.
Van egy kérdésünk? Kérjük, említse meg a „Határ CSS-ben” blog megjegyzés rovatában, és mi kapcsolatba lépünk Önnel.