Függőleges csík szimbólum. Hogyan adjunk hozzá sort egy szöveghez

Vízszintes vonalak egy páratlan (nem kell záró tagot használni) címke

és lehetnek elég egyedi design elemek. A szöveg vízszintes HTML vonalak hozzáadásával történő megtervezése biztosítja az oldal bizonyos logikáját a szöveg megjelenítésében, és megkönnyíti az olvasó számára az egymás után tanulmányozandó információs blokkok kiemelését. Címke

különböző színű, vastagságú és hosszúságú vízszintes vonalakat képezhet. És meglehetősen egyszerű ezt megtenni, amit az alábbi példák mutatnak.

Egyébként használhatja a blokk stílus tulajdonságait

és

vonalak kialakításához egy adott helyen. Igaz, hogy ez az opció nem mindig kényelmes, például az asztal színezése néha nem mindig indokolja önmagát, de sok esetben lehetőség van a problémák ilyen módon történő megoldására. Például egy kialakított vonalon belül címke
ne illessze be a szöveget. A blokkokon belül ez lehetséges és folyamatosan gyakorolható. Tehát ki kell választania az opciót a tervezési követelményektől függően.

Függőleges vonalak HTML-ben.

ÉS függőleges vonalak szinte azonos blokkokban vannak kialakítva

és

.
Csak egy kellemetlenség - nem minden böngészőben található a címke
ugyanúgy működik, de meg kell próbálnia módosítani az oldalt, vagy frissített böngészőket kell használnia.

Vízszintes vonalak kialakítása:

Címke
beszúr egy vízszintes vonalat az oldalra, és a következő tulajdonságokkal rendelkezik:

Címke szintaxisa
:

Példák a HTML vízszintes vonalaira:

Példák a HTML függőleges vonalaira:

egy kör alakú címkével

Íme egy példa egy vízszintes piros vonalra a tetején.

Íme egy példa a vízszintes és függőleges vonalakra.

A HTML függőleges és vízszintes vonalak példáinak szintaxisa:

észrevenni a stílusattribútumot- balra (jobbra): 4 képpont szilárd # FF0000;:

egy kör alakú címkével

Íme egy példa egy függőleges piros vonalra a bal oldalon.

Íme egy példa egy függőleges piros vonalra a jobb oldalon.

Íme egy példa az alább látható vízszintes piros vonalra.

Ahhoz, hogy hangsúlyozzuk a webhely néhány különösen fontos elemét, nem sértené az ehhez biztosított mindenféle CSS stílus és tulajdonság használata. Természetesen nem kell sokat aggódnia a szöveg iránt, és például kiemelve, vagy félkövér betűt kell emelnie, meg kell változtatnia a hátteret, vagy keretet kell készítenie a szöveg körül. De a bemutatott módszerek közül nem mindig megfelelő. Tegyük fel, hogy van egy szövege, amelyet szemantikai terhelésének sajátosságai miatt el kell választani. Itt jönnek be a html és a CSS tulajdonságok.

Hogyan hozzunk létre egy sort a szövegben a CSS segítségével?

Tervünk végrehajtásához hivatkoznunk kell style.css fájla megfelelő tulajdonság beírásával határ... Ezzel egy sor jelenik meg a szöveg fölött, alatt vagy egy adott oldalán. Ez viszont számos olyan tulajdonságot biztosít, amelyek felelősek a vonal megjelenítéséért, nevezetesen:

- border-top - vízszintes vonal a szöveg fölött;

- border-jobbra - függőleges vonal a szöveg jobb oldalán;

- border-bottom - vízszintes vonal a szöveg alatt;

- border-left - a függőleges vonal balra.

Hogyan készítsünk egy sort HTML-ben

A CSS tulajdonságokkal az összes szükséges értéket a HTML-kód szerkesztésével írhatja. Ehhez el kell mennie a webhely adminisztratív részébe. Válasszon egyet a közzétett anyagok közül, váltson a szövegszerkesztőre html-kód szerkesztési módba, és adjon hozzá CSS-tulajdonságokat. Az alábbiakban látható egy minta.

Hogyan lehet pontozott vagy egyenes vonalot létrehozni?

Ha ezeket a tulajdonságokat írja elő, akkor hangsúlyozni tudja a bemutatott anyag, bekezdés vagy cím fontosságát?

A parancsok rövid magyarázata

- szélesség - vonalhossz;

- szilárd - folytonos vonal;

- pontozott - szaggatott vonal.

A stílusok részletesebb bemutatásához azt javasolom, hogy olvassa el ezt.

Meg kell érteni, hogy a webhelykód módosítása során a vonaltípust, annak vastagságát és színét meghatározó tulajdonságokat szóközzel elválasztva soroljuk fel.

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

Széles lehetőségek, amelyekkel szinte bármilyen sort létrehozhat.

Könnyen elvégezheti a szükséges módosításokat közvetlenül a HTML kódban. Ez nagymértékben leegyszerűsíti a tapasztalatlan webhely-készítők feladatát.

Hogyan készítsünk egy egyenes vízszintes vonalat HTML-címke segítségével

Az első dolog, amelyre felhívom a figyelmet, hogy ennek a címkének a html minden finomsága és alapelve ellenére nincs záró tagja. A html kód bárhol felhasználható, címkék között és

.

Címkézési attribútumok

- szélesség - felelős a vonal hosszáért. Meg lehet adni mind százalékban, mind pixelben.

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

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

- igazítsa - a vonal igazításáért felelős attribútum. A parancs viszont erre utal:

- jobb - jobb igazítás;

- bal - bal oldali igazítás;

- központ - központi igazítás.

Minta html kódot címkével

Remélem, hogy sikerült, és most már tudja, hogyan hozhat létre sort egy weboldalán. Hagyja a sürgős kérdéseket a megjegyzésekben, és határozottan megbeszéljük azokat.

Köszönjük figyelmét és hamarosan találkozunk a Stimylrosta oldalakon.

Egy feladat

Adja hozzá a szöveg egy bekezdéséhez függőleges vonal.

Döntés

Különböző módon felhívhatja az olvasó figyelmét a szövegre. Például tegye félkövérre a szöveget, változtassa meg a színét, használjon hátteret, rajzoljon keretet. De mi van, ha nemcsak a szöveget választja ki, hanem azt, hogy mennyit választja el az egyik szövegblokkot a másiktól, hogy különféle szemantikai részekre ossza őket? Itt a vonalak és behúzások használata egyszerűen felbecsülhetetlen.

A weboldal szöveges blokkja nagyon különbözik a nyomtatott példánytól. A fő különbség a szöveg változó szélessége és magassága, amelyek a monitor felbontásától, beállításaitól függnek operációs rendszer, böngésző és más hasonló dolgok. Ezek a szolgáltatások bizonyos összetettséget adnak a weblapok elrendezéséhez, ugyanakkor speciális technikákat generálnak, amelyek jelentősen egyszerűsítik a weboldal létrehozásának folyamatát. Nézzük meg, hogy a stílusok segítségével szabad formát hozhat létre a szöveg körül, méretétől függetlenül.

A sorok létrehozásához a CSS tulajdonság szegélyét használják, amely szegélyt állít fel a blokk körül. Különleges esetekben az elemnek csak az egyik oldalán egy sor létrehozásához a szegély-alsó, a felső felső, a bal-bal és a jobb-jobb tulajdonságokat kell használni, amelyek alulról, felülről, balról és jobbról állítanak egy sort.

Ezen tulajdonságok értékeit szóközzel elválasztva soroljuk fel, és azonnal meghatározzuk a vonaltípust, annak vastagságát és színét. A vonalstílus a nyolc érték egyike lehet, amint az az ábrán látható. 1, és a vastagságot általában pixelekben adják meg.

Ábra. 1. A vonalak típusai

Az 1. példa bemutatja, hogyan lehet függőleges sort létrehozni a szöveg mellé.

1. példa: Függőleges vonal a szövegetől balra

HTML5 CSS 2.1 IE Cr op a Fx

A szöveg bal oldalán található sor

Tanulmányozva egy kis csoportban zajló folyamatokat a gesztalt pszichológiához és a pszichoanalízishez közeli pozíciókból, tükrözve a társadalom informális mikrostruktúráját, J. Moreno kimutatta, hogy a kompultivitás stresszt ad, melynek eredményeként összekeveri a szubjektív és objektív objektumot, és belső motívumai átviszik a dolgok valódi kapcsolataiba.

Annak érdekében, hogy az eredeti bekezdési stílus változatlan maradjon, új osztály vonal, amely függőleges vonalat állít be a bekezdés közelében. Ez az osztály emellett azt is beállítja, hogy az ablaktól bal szélektől 20 pixel eltolódjon a szöveghez, a margó-bal tulajdonsággal, és a vonal a szövegről balra kitöltővel legyen bevonva, amely nélkül a szöveg túl szorosan megérinti a sort. Az eredményt a 2. ábra mutatja. 2.