html bemutató - vízszintes vonalak

Alapvetően a vízszintes vonalak használják díszíteni a HTML-oldalakat az oldalon, így ez sokkal vonzóbb megjelenésű. De azt is tudják vizuálisan megkülönböztetni a szomszédos szakaszok az információkat, hozzátéve Az olvasók saját tanulmány. Általában rajzoljon egy vízszintes vonalat, ahol meg kell, ennyi az egész.

Hogyan kell felhívni a vízszintes vonal?

Ahhoz, hogy rajzoljon egy vízszintes vonalat a HTML van egy speciális címkét


. És ez egy blokk tag. azaz, hogy létrehozza a sortöréseket előtt és után magukat, így a vonal mindig kapunk egy külön sorban. Ennek megfelelően, ez lehet határozni a tag, amely tartalmazhat a tömb alakú elemek, így például vagy
. de
Nem lehet tartalmat, mert egyszerűen nincs záró címke, ami azt jelenti, hogy üres.

Példa rajz vízszintes vonalak a HTML

Az eredmény a böngészőben

Mint látható, a vonalak nagyon vékony, nem feltűnő és rajzolt teljes szélességében áll rendelkezésre, így most fogjuk tanulni, hogyan kell módosítani őket, hogy azok jobban néznek ki.

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

A régebbi verziói HTML toldalék


Mi volt különleges tulajdonságokkal, amelyekkel meg lehet változtatni a színét, vastagságát és szélességét vízszintes vonalak. Ez a szín. méretét és szélességét. volt. De az új változat közülük áttértek Cascading Style Sheets (CSS), így lehet, hogy kitalálta, megint használni a kedvenc tulajdonsága a stílus. Az általános szintaxis:


- a vonal színének (vagy inkább annak háttere).


- a vonal vastagságát.


- vonalvastagság.


- és egyszerre az összes paraméter megadható, de ne feledkezzünk meg a pontosvessző (;).

Szín adható meg a neve angolul vagy HEX-kód színes, kettőskereszt (#), amely előtt helyezkedik el. Nos, akkor már tudni ezt a leckét, hogy módosítsa a szöveg és a háttér színe.

Beszélgetünk itt a méret a változás részleteit. Mint bizonyára emlékeznek rá a lecke a betűtípus változás. CSS van mintegy tíz egység, de a vonal szélessége lehet határozni csak a pixel (képpont), és százalékban (%), és a vastagsága általában csak a pixel. Ha fel a többi egység, akkor nem lesz hiba, de a böngésző egyszerűen figyelmen kívül hagyja.

Ha megadja a pixel méretei, vastagsága és szélessége a vonal függ a felbontás a monitor, amelyen a böngészést a webhelyen (minél nagyobb a képernyő felbontása, a vékonyabb és keskenyebb vonal).

Ahogy mondtam, csak a vonal szélessége megadható százalékban. Érdekes méretei mindig függő és alapján számítottuk ki a méret a szülő elem tartály, amelynek belsejében található a címke


. Ebben az esetben, a méret a szülő veszik, mint 100%. Például, ha azt elhelyezi a címkét
az elem belsejében
. hogy nem számít, hogyan változik a méret a böngésző ablakot, vagy a monitor felbontása - a szélessége a vonal mindig szélességének fele a blokk
.

Példa változó színű, vastagsága, és a szélessége a vízszintes vonalak.

Az eredmény a böngészőben

Pozíciójának változása a vízszintes vonalak

Ha megváltoztatja a szélessége egy vízszintes vonal, akkor világosan láthatóvá válik, hogy a böngészők mindig azt a közepén. Ha azt szeretnénk, hogy változtassa meg álláspontját, akkor csak használ a belső


Az align tulajdonság a következő értékeket:

  • centrum - line középre (ez az alapértelmezett beállítás).
  • balra - balra nyomja.
  • jobbra - megnyomja a jobb oldalon.

Példa összehangolása vízszintes vonalak.

Az eredmény a böngészőben

Hogyan lehet eltávolítani a keret körül a sorban?

Nézd meg a legelső példa erre a leckét. Mit gondol, milyen színű van ezeket a sorokat? És ez nem igaz. Ők átlátható, valamint bármely eleme, hogy az oldal nem adott a háttér színét! Nem hiszel nekem? Akkor vessen egy pillantást egy példát, ahol mi változott a színe a vonalak. A legelső mi nem a szín, hanem csak növelte méretét, és nem ezt a vonalat nem átlátszó? Tehát ott!

Most már magyarázni. Alapértelmezésben böngészők húzzon egy vonalat a doboz körül, amely létrehoz egy háromdimenziós hatást. Tehát, ha nem növelik a vastagsága a vízszintes vonalak, böngészők, megmutatjuk csak a keret, mint a vastagsága a sor maga 0px.

Ahhoz, hogy távolítsa el a keret körül a vonal, ami gyakran csak rontja a megjelenést, ismét alkalmazza a style attribútum. És ez így van írva:

  1. Készítsen a cikkek címeit fejezet és alfejezet. Helyezzük őket a közepén.
  2. Cserélje ki a teljes oldalt font Arial és címek - Courier.
  3. Hagyja, hogy a betűméret a teljes oldal 85% lesz az összeg az alapértelmezett böngésző. És a fejléc 145%, 125% és 110% -kal, a betűméret az oldalon.
  4. Írja alacsonyabb az első fejlécében, a második - hosszú folyosó alatt a harmadik - vers. És hagyja, hogy a vers az oldal közepére.
  5. Félkövér három szó az idézet.
  6. Cím alatt a cikk teljes szélességében az oldal, húzzon egy vízszintes vonalat három piros pixel vastag.
  7. Fent és lent a sorsolás soros vers vastagság egy pixel fekete. Hagyja, hogy a szélessége a felső sorban megközelítőleg egyenlő a vonalvastagság, és az alsó - kétszer kevesebb.
  8. Távolítsuk el a felesleges vonalak a keretben.

Kapcsolódó cikkek