Az oldal néhány különösen fontos elemének hangsúlyozása érdekében nem ártana az ehhez biztosított mindenféle CSS stílus és tulajdonság használata. Természetesen nem kell túl sokat bajlódnia a szöveggel, és kiemelnie, például félkövér vagy dőlt betűkkel, megváltoztatnia a hátteret, vagy keretet kell készítenie a szöveg körül. De a bemutatott módszerek egyike nem mindig megfelelő. Tegyük fel, hogy van egy szövege, amelyet szemantikai terhelésének sajátosságai miatt el kell különíteni. Itt jönnek létre a HTML és a CSS tulajdonságok.

Hogyan készítsünk sort a szövegben a CSS használatával

Tervünk megvalósításához hivatkoznunk kell style.css fájl a megfelelő tulajdonság beírásával határ... Ezzel létrejön egy sor a szöveg felett, alatt vagy a szöveg adott oldalán. Viszont számos tulajdonság felelős a sor megjelenítéséért, nevezetesen:

- border-top- vízszintes vonal a szöveg felett;

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

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

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

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

A CSS tulajdonságok használatával a HTML kód szerkesztésével írhatja be az összes szükséges értéket. Ehhez el kell mennie a webhely adminisztrációs részébe. Válassza ki az egyik közzétett anyagot, kapcsolja át a szövegszerkesztőt HTML kódszerkesztő módba, és adjon hozzá CSS tulajdonságokat. Egy minta alább látható.

A parancsok rövid magyarázata

- szélesség- vonal hossza;

- szilárd- folytonos vonal;

- pontozott- szaggatott vonal.

A stílusok mélyebb megismerése érdekében javaslom, hogy olvassa el ezt.

Meg kell értenünk, hogy a webhelykód módosítása során a vonaltípust, vastagságát és színét meghatározó tulajdonságok szóközzel vannak elválasztva.

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

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

Könnyű elvégezni a szükséges módosításokat közvetlenül a HTML -kódon. Ez nagyban leegyszerűsíti a tapasztalatlan webhelyépítők feladatát.

Hogyan készítsünk egyenes vízszintes vonalat HTML -címke használatával?

---

Az első dolog, amire szeretném felhívni a figyelmét, hogy ez a címke a html minden finomsága és elve ellenére nem rendelkezik záró címkével. Bárhol használható a html kódban, a címkék között és.

Címke attribútumok

---

- szélesség- felelős a sor hosszáért. Mind százalékban, mind pixelben megadható.

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

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

- igazítsa- a vonal beállításáért felelős attribútum. Viszont a csapat erre hivatkozik.

Alapvetően vízszintes vonalakkal díszítik a webhely HTML -oldalait, és vonzóbb megjelenést kölcsönöznek nekik. De vizuálisan is lehatárolhatják a szomszédos részek információit, és kényelmet biztosítanak az olvasóknak, amikor tanulmányozzák azokat. Általában rajzoljon vízszintes vonalakat, ahol kell, ennyi.

Hogyan rajzoljak vízszintes vonalat?

Van egy speciális címke vízszintes vonalak rajzolásához HTML -ben

---

... Sőt, ő az blokk címke, vagyis saját maga előtt és után sortöréseket hoz létre, így a sort mindig külön sorban kapjuk meg. Ennek megfelelően csak a blokk elemeket tartalmazó címkékben lehet megadni, például vagy

... De magamat

---

nem tartalmazhat tartalmat, mivel egyszerűen nincs zárócímke, azaz üres.

Példa vízszintes vonalak rajzolására HTML -ben

---

Bekezdés.

Bekezdés.

---

Bekezdés.

Eredmény a böngészőben

Bekezdés.

Bekezdés.

Bekezdés.

Mint látható, a vonalak nagyon vékonyak, leírhatatlanok és a teljes rendelkezésre álló szélességre húzódnak, így most megtanuljuk, hogyan kell megváltoztatni őket, hogy vonzóbbak legyenek.

Hogyan változtathatom meg a vízszintes vonalak színét, vastagságát és szélességét?

A HTML régebbi verzióiban a címke

---

voltak speciális attribútumok, amelyekkel meg lehetett változtatni a vízszintes vonalak színét, vastagságát és szélességét. Ezek szín, méret és szélesség. De az újabb verziókban a Cascading Style Sheets (CSS) javára kerültek, úgyhogy sejtette, hogy ismét a kedvenc stílus attribútumunkat fogjuk használni. Az általános szintaxis a következő:

---

style = "background: color">- a vonal színe (vagy inkább a háttere).

---

style = "height: size">- vonalvastagság.

---

style = "width: size">- vonalvastagság.

---

stílus = "háttér: szín; magasság: méret; szélesség: méret"> - de megadhatja az összes paramétert egyszerre, csak ne feledkezzen meg a pontosvesszőről (;).

Egy szín megadható a nevével angolul, vagy a szín HEX kódjával, amelyet egy hash (#) előz meg. Nos, erről már a leckéből tud a szöveg és a háttér színének megváltoztatása.

De az átméretezésről részletesebben fogunk beszélni. Emlékszel -e onnan oktatóanyag a betűtípusok megváltoztatásáról, körülbelül tíz egység van a CSS -ben, de vonalvastagság csak pixelben (px) és százalékban (%) adható meg, és vastagságáltalában csak pixelben. Ha más egységeket szállít, akkor ez nem hiba, de a böngészők egyszerűen figyelmen kívül hagyják őket.

Ha a méreteket képpontokban adja meg, akkor a vonal vastagsága és szélessége attól a monitor felbontásától függ, amelyen a webhelyét megtekintik (minél nagyobb a képernyő felbontása, annál vékonyabb és keskenyebb a vonal).

Mint mondtam, csak a vonal szélességét lehet megadni százalékban. A százalékos méretek mindig attól függnek, és a szülőtartály elem mérete alapján kerülnek kiszámításra, amelyen belül a címke található

---

... Ebben az esetben a szülő méretét 100%-nak kell tekinteni. Például, ha elhelyezzük a címkét

---

style = "width: 50%"> belső elem

, akkor nem számít, hogyan méretezzük át a böngészőablakot vagy a monitor felbontását - a vonal szélessége mindig a blokk szélességének fele lesz

.

Példa a vízszintes vonalak színének, vastagságának és szélességének megváltoztatására.

---

---

---

---

Eredmény a böngészőben

Vízszintes vonalak helyzetének megváltoztatása

Ha megváltoztatja a vízszintes vonal szélességét, egyértelműen láthatóvá válik, hogy a böngészők mindig középre helyezik. Ha meg akarja változtatni a pozícióját, akkor csak használja a belsőt

---

igazítsa az attribútumot a következő értékekkel:

• központ- a sor középre van állítva (alapértelmezett érték).
• bal- a bal szélhez nyomva.
• jobb- a jobb szélhez nyomva.

Példa a vízszintes vonalak igazítására.

---

---

---

Eredmény a böngészőben

Hogyan távolíthatom el a vonal körüli szegélyt?

Nézze meg ennek az oktatóanyagnak az első példáját. Szerintetek milyen színűek ezek a vonalak? És itt téved. Átlátszóak, mint minden háttérszínekkel nem rendelkező lapelem! Nem hiszel nekem? Akkor nézzünk egy példát, ahol megváltoztattuk a vonalak színét. Az elsőnél nem állítottuk be a színt, hanem csak növeltük a méretét, és nem átlátszó ez a vonal? Így hát!

Most elmagyarázom. Alapértelmezés szerint a böngészők határokat rajzolnak a vonalak köré, amelyek háromdimenziós hatást keltenek. Tehát, ha nem növeljük a vízszintes vonalak vastagságát, a böngészők csak ezeket a képkockákat jelenítik meg, mivel maga a vonal vastagsága 0 képpont.

A vonal körüli szegély eltávolításához, amely gyakran csak a megjelenést rontja, újra alkalmazzuk a style attribútumot. És így van írva:

---

Házi feladat.

1. Hozzon létre cikk-, szakasz- és alcímsorokat. Középpontba helyezze őket.
2. A fejlécekhez állítsa az egész oldalt Arial és Courier értékre.
3. Legyen a betűméret az egész oldalon az alapértelmezett böngészőméret 85% -a. A címek pedig 145%, 125%és 110%-kal rendelkeznek az oldal betűméretével.
4. Írj egy bekezdést az első címszó alá, egy hosszú idézetet a második alá, és egy verset a harmadik alá! És legyen a vers az oldal középpontjában.
5. Az idézetben emeljen ki vastag betűvel három szót.
6. A cikk címe alatt rajzoljon egy három képpontos piros vízszintes vonalat az oldal teljes szélességében.
7. A vers tetején és alján rajzoljon egy képpontnyi fekete vonalat. Legyen a felső sor szélessége megközelítőleg a vers szélességével, az alsó pedig fele.
8. Távolítsa el a felesleges kereteket a sorokból.

A szerzőtől:Üdvözöllek. A weblapon több blokk egy sorban történő megjelenítésének szükségessége nagyon gyakori feladat az elrendezéstervezők számára. Szinte minden sablon elrendezése során fordul elő, ezért mindannyiunknak mindenképpen ismernünk és alkalmaznunk kell a blokkok viselkedésének megváltoztatásának alapvető módszereit.

Mielőtt megvizsgálnánk a leggyakoribb trükköket, szeretnék felidézni egy kis elméletet. A weblap elemei blokkra és soronként vannak felosztva. És a különbség köztük nagyon egyszerű - a kisbetűk egy sorban találhatók, a blokkok azonban nem. Természetesen a különbségek nem érnek véget, de ez a fő különbség. A blokkoknak már lehet felső és alsó margójuk (a kisbetűknek nincs), és több tulajdonság is alkalmazható rájuk.

A blokkok sorba rendezésének fő módjai a css -ben

Nem bonyolítunk semmit, három fő módja van:

A blokkok konvertálása inline elemekké. Ugyanakkor a blokktulajdonságok elvesznek, így ezt az opciót szinte soha nem használják.

Blokkolja a kívánt elemeket. Ez egy speciális típus, amelyben az elem megőrzi tulajdonságait, ugyanakkor lehetővé teszi más tömbök egymás melletti elhelyezését.

Lebegő elemek az úszó tulajdonság használatával.

Maradjunk ezeknél a lehetőségeknél. A Flexbox, a táblázatos kijelző és egyéb pontok nem kerülnek figyelembevételre. Tehát mondjuk van 3 alcímünk.

1. fejezet

2. fejezet

3. fejezet

Természetesen minden css tulajdonságot külön fájlba (style.css) kell írni, amelyet a html dokumentumhoz kell csatlakoztatni. Ebben a fájlban egy minimális stílust írok, hogy az alcímeink könnyen láthatók legyenek.

h3 (háttér: #EEDDCD;)

h3 ( háttér: #EEDDCD;

Itt vannak az oldalon:

Ott úgy viselkednek, mint a tömbök. Mindegyik a saját vonalán helyezkedik el, közöttük behúzások vannak. Ha szeretné, beállíthatja a kívánt belső behúzásokat, és általában azt tehet, amit akar.

Konvertálja vonalakká, és azonnal adjon hozzá párnázást. Ehhez adja hozzá a következő tulajdonságokat a h3 választóhoz:

kijelző: inline; párnázás: 30 képpont;

Ezzel a technikával 2 fő probléma van. Az első a minimális párnázás. Ez annak a ténynek köszönhető, hogy a kódban a blokkok között egy szóköz található, amely ezt a behúzást képezi. Ha ez a probléma megoldást igényel, akkor két fő lehetőség van:

A html -ben a szükséges blokkok kódját egy sorba rendezze szóközök nélkül

Negatív margó beállítása a -4 képpont jobbra. Ennyit vesz igénybe egy hely.

A második probléma az, hogy a megjelenítési problémák különböző magasságú elemekkel jelentkezhetnek. Általában a lebegő blokkok a legjobb megoldás. A display: inline-block helyett ezt írjuk:

Blokkok sorban egy keretrendszer használatával

Azonnal meg kell mondanom, hogy ha bármilyen normál css keretrendszert fog használni (például Bootstrap), akkor még mindig sokkal könnyebb. Az összes elemek elrendezéséért felelős css-kód már meg van írva, és csak a megfelelő osztályokat kell beállítania. Mindössze annyit kell tennie, hogy megtanulja a rácsrendszert, és túl sok nehézség nélkül készíthet reszponzív többoszlopos sablonokat. Legalább sokkal könnyebb lesz, mint a nulláról css -t írni.

Egy másik kihívás, hogy a kódot a semmiből kell írni, éppen akkor merül fel, amikor reagáló tervezésre van szüksége. Természetesen saját maga is megvalósíthatja a médialekérdezések birtoklásával, de sokkal bonyolultabb lesz, ha összetett sablonja van.

Például, ha 4 oszlopot kell megjelenítenie a nagy képernyőkön, 3 -at a közepes képernyőkön és 2 -t a mobiltelefonokon. Az olyan keretek segítségével, mint a Bootstrap, vagy inkább annak rácsával, csak néhány percet vesz igénybe egy ilyen megvalósítása .

Simán áthelyezve a témát a Bootstrap keretrendszerbe, ismét megjegyzem, hogy ha egy komplex reszponzív sablon létrehozásával kell szembenéznie, akkor egyszerűen bűn, ha nem használja a rácsot. Ehhez nem is szükséges a keretrendszer teljes verziójának csatlakoztatása - testreszabhatja, és csak abban állhat meg, amire valóban szüksége van.

Megtanulhatja a keretrendszerrel való együttműködést. Megmagyarázza az elméletet is, de a legfontosabb az, hogy van gyakorlat. Három reszponzív sablont hoz létre, és nagyszerű élményben lesz része, amely lehetővé teszi, hogy megrendelésre vagy saját maga készítsen webhelyeket. Ha pedig ingyenesen meg akarja tekinteni a keretrendszer előnyeit és jellemzőit, javaslom, hogy nézze meg cikksorozatunkat a Bootstrap -ról és az egyszerű elrendezésről. Sok sikert kívánok az elrendezéshez és általában az oldalépítéshez.

HTML oldal létrehozásakor az elrendezés alapvető szerepet játszik. Különösen akkor, ha különféle szimbólumokról és dekoratív dizájnról beszélünk: ezek az apróságok segítenek abban, hogy hozzáférhetőbbé és világosabbá tegyék oldalad "nyelvét", ráadásul jelentősen megváltoztatják annak felfogását és megjelenését általában. A tervezés egyik legfontosabb eleme a vízszintes vonal, és a továbbiakban részletesebben megtanuljuk, hogyan kell vele dolgozni, és hogyan kell vízszintes vonalat készíteni html -ben.

Mi az a vízszintes vonal és mire való?

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

1. Dekoratív... Segít vonzóbbá tenni az oldalt.
2. Felosztás... Elősegíti a különböző jelentésű információk hatékony elkülönítését.
3. Hangsúlyozás vagy aláhúzás... Felhívja az oldal vendégeinek figyelmét a szükséges és legfontosabb információkra.

A vízszintes vonalat tartják a legolcsóbb módnak számos funkció megvalósításához. Nagyon egyszerű létrehozni, de külsőleg nagyon jövedelmezőnek tűnik. A html-kód egyszerű módosításával szabályozhatja:

• hossz;
• szélesség;
• színjellemzők;
• igazítás egyik vagy másik élhez.

Vegye figyelembe, hogy a vízszintes vonal a blokk elemeire vonatkozik. Ez azt jelenti, hogy új sort foglal el az oldalon, és az azt követő szöveg az alábbiakban lesz.

Hogyan hozzunk létre vízszintes vonalat a HTML -ben

Beállíthat egy sort egy egyszerű címke segítségével - hr háromszög zárójelben. Ez a "vízszintes szabály" rövidítése, és a klasszikus külső paramétereket állítja be. Sok másban különbözik attól, hogy nincs szüksége végcímkére, és képes önmagában létezni. Az elem külső jellemzőit a címke további értékeivel módosíthatja:

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

Ez így néz ki. Például, ha 100 pixel hosszúságra van szükségünk, akkor egy ilyen címkét állítunk be: hr width = "100"

1. Igazítás... Az igazítás a bal vagy a jobb szélen, valamint a közepén is lehetséges. Ez a szolgáltatás csak akkor érvényes, ha már megadta a szélesség paramétert, mivel egy egész oldalas sor nem igazítható. Az igazításhoz állítson be egy további attribútumot az "align" címkében, és adjon hozzá egy irányt: középre - középre, balra - balra és jobbra - jobbra igazításhoz.

A kész címke ebben az esetben így fog kinézni. Például, ha 150 centiméteres vízszintes vonalra kell beállítanunk a középső igazítást, akkor a kész címke így fog kinézni: hr align = "center" width = "150".

Ne feledje, hogy az "align", az igazítás mértéke az 1. pozícióba kerül, még akkor is, ha az attribútum a hosszmérték szélességétől függ.

1. Szélesség... Opcionálisan megadhatja a szélességet is, vastag vagy vékony aláhúzással. Ez a kritérium nem függ semmitől, és függetlenül használható a hossz vagy az igazítás megadása nélkül. Ehhez a méret attribútumot használjuk a címkében, és egy számértéket, amely megegyezik a kívánt szélességgel pixelben. A számot idézőjel jelzi a size attribútum és a "=" szimbólum után.

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

1. Szín... Független mutatóként is beállítják. A módosításhoz használja a color attribútumot a színnévvel együtt kód formájában vagy angolul. A színt idézőjelek jelzik a "=" szimbólum után.

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

A fekete a 000000 kód használatával 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. A szabványos sor címkéje ezt használva így fog kinézni: hr noshade

Hozzon létre egy vízszintes vonalat a videó segítségével

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

Miután meghatározta a vízszintes vonal szükséges méreteit, úgy tervezheti meg a webhely oldalait, hogy az információ strukturált és vizuálisan kompetensen keretezett legyen. Ez segít a látogatóknak, hogy könnyebben érzékeljék a bemutatott információkat, és kiemeljék webhelyét a többi közül.

Üdv minden olvasónak. A varázslók időről időre azzal a problémával szembesülnek, hogy hogyan lehet vízszintes vagy függőleges vonalat készíteni HTML vagy CSS használatával. Ezt ma elmondom.

Sorok a CSS -ben

A vonalak rajzolásának több módja van. Az egyik ilyen módszer a CSS használata. Pontosabban a Border segítségével. Vegyünk egy példát.

És ez lesz az eredmény.

Vízszintes és függőleges vonal css használatával.

A CSS -ben vonalak rajzolhatók a Border utasítás használatával. Ha csak egy fix szegélyszélességű téglalapot szeretne, egyszerűen használja ezt az operátort, és állítson be egy értéket. Például szegély: 5 képpont szilárd # 000000; azt jelenti, hogy a blokkhatárok 5 képpont szélesek, feketén.

Ha azonban nem minden határt kell beállítania, hanem csak néhányat, akkor pontosan le kell írnia, hogy mely határokra van szükség, és milyen értékkel fog rendelkezni. Ezek az üzemeltetők:

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

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 vonal rajzolódik meg, egy képpont magas és teljes szélességben.

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 állítja az igazítást
• Méret- beállítja a vonal szélességét pixelben.

A hr címkével függőleges vonalat is beállíthat. De ebben az esetben ismét stílusokhoz kell folyamodnia.

Ebben az esetben egy függőleges vonalat húznak száz képpont magasra, egy képpont vastagra, és behúznak öt képpontot.

Következtetés.

Nos, most már tudja, hogyan állíthat be függőleges és vízszintes vonalat. A vonalak beállíthatók mind a hagyományos webhelyeken HTML használatával, mind a CMS -t használó webhelyeken (például WordPress), de ebben az esetben át kell kapcsolnia HTML módra.

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