Alkotás közben HTML oldalak a tervezés jelentős szerepet játszik. Főleg, ha különféle szimbólumokról és dekorációkról beszélünk: ezek az apróságok segítenek abban, hogy az oldal „nyelve” elérhetőbbé és áttekinthetőbbé váljon, és jelentősen megváltoztatják általában az érzékelést és megjelenést. Az egyik legfontosabb tervezési elem a vízszintes vonal, a továbbiakban pedig részletesebben megtudjuk, hogyan kell vele dolgozni, és hogyan lehet vízszintes vonalat készíteni html-ben.

Mi az a vízszintes vonal és miért van rá szükség?

A vízszintes vonal a html-ben egy oldaltervezési elem, amely számos funkciót lát el:

1. dekoratív. Segít vonzóvá tenni az oldalt.
2. Felosztás. Hozzájárul a különböző jelentésű információk hatékony szétválasztásához.
3. Hangsúlyozás vagy kiemelés. Felhívja az oldal látogatóinak figyelmét a szükséges és legfontosabb információkra.

Ez a vízszintes vonal, amelyet leginkább figyelembe vesznek hozzáférhető módon egy sor funkció megvalósításához. Nagyon egyszerű létrehozni, és kívülről nagyon jövedelmezőnek tűnik. A html kód egyszerű módosításával a következőket szabályozhatja:

• hossz;
• szélesség;
• szín jellemzői;
• igazítás az egyik vagy a másik élen.

Érdemes megjegyezni, hogy a vízszintes vonal blokkelemekre vonatkozik. Ez azt jelenti, hogy egy új sort foglal el az oldalon, és az azt követő szöveg alább kerül.

Vízszintes vonal létrehozása HTML-ben

Egy vonalat egy egyszerű címkével állíthat be - hr háromszög zárójelben. A "horizontális szabály" rövidítése, és beállítja a klasszikus külső paramétereket. Sok mástól abban különbözik, hogy nem kell hozzá zárócímke, és önállóan is tud létezni. változás külső jellemzők elem további értékekkel is elvégezhető a címkében:

1. Hossz. Ha nem szeretné, hogy a sor hossza lefedje a teljes oldalt, akkor beállíthatja a kívánt méretet pixelben vagy százalékban. Ez a címkében található további "szélesség" szó és az "=" jel után az idézőjelben megadott hosszúság numerikus mutatója segítségével történik.

Ez így néz ki. Ha például 100 pixel hosszúságra van szükségünk, akkor a következő címkét állítjuk be: hr width="100"

1. igazítás. Az igazítás a bal vagy a jobb szélen, valamint a középen is lehetséges. Ez a jellemző csak akkor működik, ha már beállítottad szélesség paraméter, mivel egy egész oldalas sort nem lehet igazítani. Az igazításhoz beállítunk egy további attribútumot az "align" címkében, és egy irányt adunk hozzá: center - a középre, balra - balra és jobbra - a jobb igazításra.

A kész címke ebben az esetben így fog kinézni. Például, ha egy 150 pixel hosszú vízszintes vonalhoz kell beállítani a középre igazítást, akkor a kész címke így fog kinézni: hr align="center" width="150".

Vegye figyelembe, hogy az "igazítás", az igazítás metrikája, 1-re van állítva, még akkor is, ha az attribútum a szélességi mutatótól függ.

1. Szélesség. Opcionálisan megadhat egy szélességet is, félkövér vagy vékony aláhúzást hozva létre. Ez a kritérium nem függ semmitől, és függetlenként használható a hossz vagy az igazítás megadása nélkül. Ehhez a címkén található size attribútumot és a kívánt szélességnek megfelelő numerikus értéket használjuk pixelben. A szám a size attribútum és a "=" szimbólum után idézőjelben van megadva.

Így ha 15 pixel szélességű sort akarunk létrehozni, akkor a következő címkét kell létrehoznunk: hr size="15".

1. Szín. Független mutatóként is be van állítva. Módosításához használja a color attribútumot a szín nevével együtt kód formájában vagy on angol nyelv. A szín a "=" szimbólum után idézőjelben van megadva.

Így a szabványos fehér vonal címkéje kétféleképpen írható: hr color="#FFFFFF" vagy hr color="white"

A fekete szín a #000000 kóddal hozható létre.

1. ELRAK árnyék. Ha olyan elemre van szüksége, amely nem tartalmaz árnyékot, akkor a noshade attribútumot kell használni a címkében. Használható önmagában vagy más elemekkel kombinálva. Az ezt használó szabványos sor címke így fog kinézni: hr noshade

Hozzon létre egy vízszintes vonalat videóval

Ha pedig vizuálisabb formátumban szeretne információkat szerezni, nézze meg a következő videót, amely részletesen leírja a vízszintes vonallal való munkavégzés lehetőségeit.

A vízszintes vonal szükséges méreteinek meghatározása után a webhely oldalait úgy rendezheti el, hogy az információ strukturált és vizuálisan jól formált legyen. Ez megkönnyíti a látogatók számára, hogy észleljék a megjelenített információkat, és könnyebben meg tudják különböztetni webhelyét másoktól.

Egy feladat

Készítsen egy vízszintes vonalat az oldalon.

Megoldás

vízszintes vonalak jó használni az egyik szövegblokk elválasztására a másiktól. A vízszintes vonalakkal ellátott kis szövegek felül és alatt jobban felkeltik az olvasó figyelmét, mint a normál szöveg.

Címkével

---

vízszintes vonalat húzhatunk, amelynek megjelenése a használt attribútumoktól, valamint a böngészőtől függ. A címke egy blokk elem, így a sor mindig ezzel kezdődik új sor, és utána minden elem megjelenik a következő sorban. Sok címke attribútummal

---

az ezen a címkén keresztül létrehozott vonal könnyen kezelhető. Ha a stílusok erejét is összekapcsolja, akkor egy sor hozzáadása a dokumentumhoz egyszerű feladattá válik.

Alapértelmezett vonal

---

szürkén és hangerő-effektussal jelenik meg. Ez a fajta vonal nem mindig illeszkedik az oldal kialakításához, így érthető a fejlesztők vágya, hogy stílusokon keresztül módosítsák a vonal színét és egyéb paramétereit. A böngészők azonban kétértelműen közelítik meg ezt a problémát, ezért egyszerre több stílustulajdonságot kell használnia. Főleg a régebbi verziók internet böngésző Az Explorer a color tulajdonságot használja a vonal színéhez, más böngészők pedig a háttérszínt. De ez még nem minden, ügyeljen arra, hogy nullától eltérő vonalvastagságot (height property) adjon meg, és távolítsa el a keretet a vonal körül úgy, hogy a border tulajdonságot none értékre állítja. Az összes tulajdonságot összerakva a hr választóhoz, egy univerzális megoldást kapunk a népszerű böngészőkhöz (1. példa).

Példa 1. Vízszintes vonal

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Szövegkarakterlánc

---

Eredmény ezt a példátábrán látható. egy.

Rizs. 1. Színes vízszintes vonal

Üdvözlet minden olvasónak. A mesterek időről időre szembesülnek azzal a problémával, hogyan készítsenek vízszintes vagy függőleges vonalat HTML-lel vagy -val CSS használatával. Erről fogok ma mesélni.

Sorok a CSS-ben

Számos módja van a vonalak készítésének. Ezen módok egyike az CSS használat. Pontosabban a Border segítségével. Nézzünk egy példát.

És itt az eredmény.

Vízszintes és függőleges vonal css-sel.

A CSS-ben vonalak rajzolhatók a Border operátorral. Ha csak egy rögzített szegélyszélességű téglalapot szeretne, akkor egyszerűen használhatja ezt az operátort, és megadhat egy értéket. Például border:5px solid #000000; azt jelenti, hogy a doboz szegélye 5 pixel széles fekete színben.

Ha azonban nem az összes határt kell beállítani, hanem csak néhányat, akkor pontosan meg kell adnia, hogy mely határokra van szükség, és mindegyiknek milyen értéke lesz. Ezek az operátorok:

• border-top – a felső szegély értékét állítja be
• border-bottom – az alsó szegély értékét állítja be
• border-left – a bal oldali szegély értékét állítja be
• border-right – a jobb oldali szegély értékét állítja be.

Függőleges és vízszintes vonal a HTML-ben

Magában a HTML-ben is létrehozhat sorokat. Ehhez használhatja a hr címkét.

Ebben az esetben egy vízszintes, egy pixel magas és teljes szélességű vonal rajzolódik ki.

De ez a címke beállíthat néhány értéket.

• Szélesség– beállítja a vonalszélesség értékét.
• szín- beállítja a vonal színét.
• Igazítsa- balra, középre, jobbra igazítást állít be
• méret– beállítja a vonalvastagság értékét pixelben.

A hr címke használatával függőleges vonalat is beállíthat. De ebben az esetben újra a stílusokhoz kell folyamodnia.

Ebben az esetben egy függőleges vonal húzódik száz képpont magas, egy pixel vastagságú és öt képpont behúzással.

Következtetés.

Nos, most már tudja, hogyan állíthat be függőleges és vízszintes vonalat. A vonalak úgy állíthatók be, mint a normál oldalakon, -val HTML használatával, és olyan webhelyen állítsa be, amely CMS-t használ, például WordPress, de ebben az esetben át kell váltania HTML módra.

Nos, ha további kérdései vannak, tegye fel őket a megjegyzésekben.

Úgy tűnik, miért lehet szükség négy módszerre? Végül is szinte mindenki egy olyan módszert használ, amelyhez hozzászokott. Például többször megnyomtam a Shift és a dash billentyűt, és így lett egy vízszintes vonal.

De mi van akkor, ha ez szaggatott vonalat eredményez, de egy tömör vonalra van szüksége?
- Valószínűleg a billentyűzet Shift billentyűje hibás. Íme néhány további segítség.

3.
4.
5.

Talán a legtöbbet a szokásos módon egy sor létrehozása a Wordben annyi, mint néhány billentyű használata a billentyűzeten.

I Vékony, vastag, dupla, pontozott vonal a billentyűzet használatával

Az alábbiakban egy angol kiosztású, de orosz elrendezés nélküli billentyűzet rajza látható, de ez nem számít, mert minket csak három billentyű érdekel: Shift, dash és Enter.

Rizs. 1. Három billentyű a billentyűzeten: Shift, kötőjel és Enter a Word folyamatos vízszintes vonalához

Ezzel a három gombbal folyamatos vízszintes vonalat rajzolhat a Wordben: szaggatott vagy tömör, vékony vagy vastag, hosszú vagy rövid.

1) A „-” (kötőjel) gomb többszöri megnyomásával Szószerkesztő tetszőleges hosszúságú pontozott vonalat kapunk.

Csinálni vékony hosszú sor az oldal teljes szélességében:

• A „kötőjel” billentyűt a billentyűzeten találjuk (a „nulla” billentyűtől jobbra, az 1. ábrán a zöld keretben).
• A Word új (!) sorából nyomja meg többször ezt a gombot: -
• Ezután nyomja meg az "Enter" () billentyűt. Számos nyomtatott kötőjel hirtelen folyamatos vízszintes vékony vonallá változik az oldal teljes szélességében.

2) Ha egyszerre nyomja meg a Shift és a "-" (kötőjel) billentyűt, NEM kötőjel kerül kinyomtatásra, hanem aláhúzás _________. Így tetszőleges hosszúságú folytonos sort készíthet bárhol a dokumentumban.

Rizs. 2. Vékony és vastag vízszintes vonal a Wordben

Most nyomtatunk vastag vízszintes vonal az oldal teljes szélességében:

• Ismét ugyanazt a kötőjelet találjuk, valamint Shift billentyű(balra vagy jobbra, ahogy tetszik). Nyomja meg a Shift billentyűt, tartsa lenyomva, és ne engedje el.
• És most egy új (!) sorból kattintson többször (például 3-4-szer) a kötőjelre (a Shift feladása közben): ___. Engedje el a Shift-et.
• Most nyomja meg az Enter billentyűt. Egy vastag vízszintes folytonos vonalat fog látni.

Foglaljunk össze néhány eredményt táblázat formájában:

(Kattintson a nagyításhoz) Sorok a Wordben a billentyűzet segítségével

­­­­­­­­­­­­­­­­­­­­­

II. sor a Wordben táblázat segítségével

Vízszintes vonalat kaphatunk, ha egy cellás (1x1) táblázatot használunk, amelyben csak a felső vagy az alsó szegély van színezve (látható), a másik három oldala pedig festetlen szegéllyel rendelkezik (láthatatlanok lesznek) .

A kurzort arra a helyre tesszük, ahol a vonalnak lennie kell. NÁL NÉL főmenü Szókattintás:

• Beillesztés (1 a 3. ábrán),
• táblázat (2 a 3. ábrán),
• Egy cella (3 a 3. ábrán).

Rizs. 3. Hogyan lehet 1x1-es táblázatot beszúrni a Wordbe (egy cellából)

Az eredmény egy táblázat egy nagy cellából (1x1):

A szegélyek eltávolításához az 1x1-es táblázatban marad három oldalon. Ezért

• lépjen a "Főoldal" fülre (1 a 4. ábrán),
• a "Font" mellett a "Bekezdés" és a szegélyek találhatók (2 a 4. ábrán),
• távolítsa el az összes szegélyt a "Nincs szegély" gombra kattintva (3 a 4. ábrán),
• válassza a "Felső szegély" vagy az "Alsó szegély" lehetőséget (4 a 4. ábrán).

Rizs. 4. Hogyan lehet eltávolítani a szegélykijelölést egy Word-táblázatban (a szegélyek láthatatlanná tétele)

Ezt világosan megmutatom a videóban (a cikk végén).

Mellesleg az ábrán. A 3. ábra azt mutatja, hogy van egy egyszerűbb út is. Helyezheti a kurzort a Word sor elejére, és kattintson a "Vízszintes vonal" gombra (5 a 4. ábrán):

III Vonal a Wordben rajz szerint

Beszúrás (1 az 5. ábrán) - Az alakzatok (2 az 5. ábrán) egy másik módja annak, hogy vízszintes vonalat kapjunk a Wordben.

A vonal szigorúan vízszintessé tételéhez tartsa lenyomva a Shift billentyűt, és egyszerre rajzolja meg a vonalat.

Rizs. 5. Hogyan rajzoljunk vonalat a Wordben

IV. sor a Wordben a képernyő-billentyűzet segítségével

A képernyő-billentyűzet megtalálásához a Keresésbe írjuk be a "képernyőn megjelenő billentyűzet" kifejezést, további részleteket Windows 7 és Windows 8 esetén.

Windows 10 esetén a képernyő-billentyűzetet úgy is megtalálhatja, ha beírja a keresősávba az "on-screen keyboard" szót.

Rizs. 6. Képernyő-billentyűzet

A vízszintes vonalat ugyanúgy fogjuk létrehozni, mint az első verzióban, normál billentyűzettel. A képernyő-billentyűzet három gombra lesz szüksége: dash, shift és enter.

1 Dash és Enter

A Word új sorában kattintson többször a kötőjelre (1 a 6. ábrán), és nyomja meg az Enter billentyűt. Vékony vízszintes vonalat fog kapni.

2 Shift, kötőjel és Enter

A Word új sorában kattintson először a Shift billentyűre (2 a 6. ábrán), majd a Dash-re (1 a 6. ábrán). Szerezzen aláhúzást. Tehát ismételje meg még kétszer, majd nyomja meg az Enter billentyűt. Ennek eredményeként egy vastag vízszintes vonalat fogunk látni.

Hogy kiemeljem az oldal néhány legfontosabb elemét, nem ártana mindenféle és biztosított ehhez CSS stílusokés tulajdonságait. Természetesen nem lehet túl sokat foglalkozni a szöveggel, és kiemelni, például félkövéren vagy dőlt betűvel, módosítani a háttér vagy készítsen keretet a szöveg köré. De a bemutatott módszerek egyike sem mindig megfelelő. Tegyük fel, hogy van egy szövege, amelyet a szemantikai terhelés sajátosságai miatt el kell különíteni. Itt jönnek be a HTML és CSS tulajdonságok.

Hogyan készítsünk egy sort a szövegben CSS segítségével

Célunk eléréséhez fordulnunk kell style.css fájl, beleírva a megfelelő tulajdonságot határ. Ez azt eredményezi, hogy egy sor jelenik meg a szöveg felett, alatt vagy egy bizonyos oldalán. A sor megjelenítéséért viszont számos tulajdonság felelős, nevezetesen:

- szegély felső– egy vízszintes vonal a szöveg felett;

- határ-jobbra- egy függőleges vonal a szövegtől jobbra;

- határ-alsó– egy vízszintes vonal a szöveg alatt;

- határ-bal a függőleges vonal a bal oldalon.

Hogyan készítsünk sort html-ben

Használata css tulajdonságait az összes szükséges értéket beállíthatja a HTML kód szerkesztésével. Ehhez lépjen a webhely adminisztratív részébe. Válasszon egyet a közzétett anyagok közül, váltson szöveg szerkesztő HTML kódszerkesztő módba, és adjon hozzá CSS-tulajdonságokat. Az alábbiakban egy minta látható.

A parancsok rövid magyarázata

- szélesség– vonalhossz;

- szilárd- folytonos vonal;

- pontozott- szaggatott vonal.

A stílusok mélyebb megértéséhez ezt javaslom elolvasni.

Meg kell értenie, hogy a webhely kódjának módosítása során a vonal típusát, vastagságát és színét meghatározó tulajdonságok szóközzel szerepelnek.

Ennek a módszernek számos előnye van:

Lehetőségek széles skálája, amellyel szinte bármilyen vonalat elkészíthet.

Az összes szükséges módosítás egyszerű végrehajtása közvetlenül a HTML-kódon. Ez nagyban leegyszerűsíti a tapasztalatlan webhelykészítők feladatát.

Hogyan készítsünk egyenes vízszintes vonalat HTML címkével

---

Az első dolog, amire szeretném felhívni a figyelmet, hogy ennek a címkének a html minden finomsága és alapelve ellenére nincs záró tag. Bárhol használható html kódot, a címkék között és.

Címke attribútumok

---

- szélesség- felelős a vonal hosszáért. Megadható százalékban és pixelben is.

- méret– vonalvastagság. Pixelben van megadva.

- szín– meghatározza a vonal színét.

- igazítsa– a vonaligazításért felelős attribútum. Viszont a csapat vonatkozik rá.