Vodoravna crta u HTML-u određene duljine. Kako napraviti blokove u liniji koristeći css? Sintaksa za primjere okomitih i vodoravnih linija u HTML-u

za formiranje linija
na određenoj lokaciji. Istina, ova opcija možda nije uvijek zgodna, na primjer, slikanje se ponekad ne isplati uvijek, ali u mnogim slučajevima je moguće riješiti probleme na ovaj način. Na primjer, unutar formirane linije označiti

---

ne možete umetnuti tekst. Ali unutar blokova to je moguće i stalno se prakticira. Stoga morate odabrati svoju opciju ovisno o zahtjevima dizajna.

Okomite crte u HTML-u.

A okomite linije formiraju se zapravo u istim blokovima

.
Jedina neugodnost je što oznaka nije dostupna u svim preglednicima.

---

radi isto, ali morate probati
i prilagodite stranicu ili koristite ažurirane preglednike.

Formiranje horizontalnih linija:

Označiti

---

umeće vodoravnu liniju na stranicu i ima sljedeće atribute:

Sintaksa oznake

---

:

Primjeri horizontalnih linija u HTML-u:

Primjeri okomitih linija u HTML-u:

---

Ovdje je primjer crvene okomite crte s lijeve strane.

Evo primjera crvene okomite crte s desne strane.

Ovdje je primjer vodoravne crvene linije na vrhu.

Ovdje je primjer vodoravne crte u crvenoj boji ispod.

Evo primjera vodoravnih i okomitih linija.

Sintaksa za primjere okomitih i vodoravnih linija u HTML-u:

obratite pozornost na atribut stila
granica- lijevo(-desno): 4px solid #FF0000;:

Krug formiran pomoću oznake

---

Ovdje je primjer crvene okomite crte s lijeve strane.

Evo primjera crvene okomite crte s desne strane.

Ovdje je primjer vodoravne crte u crvenoj boji ispod.

Evo primjera vodoravnih i okomitih linija.

A ako analiziramo ove primjere, možemo izvući prilično jednostavan zaključak da se okomite crte najbolje oblikuju pomoću, a međulinijske opcije mogu se napraviti s označiti

---

Ali sve ovisi o mašti i zahtjevima. Pa birajte i oblikujte.

Bok svima! Danas ću vam reći kako koristeći html napravite vodoravnu liniju.

Zapravo, potreba za vodoravnom linijom javlja se prilično često, na primjer, kada trebate odvojiti jedan dio teksta od drugog.

Horizontalne i okomite linije pomoću css-a

To možete učiniti s koristeći css. Da bih to učinio, prilažem traženi dio teksta u blok pomoću oznake div, a zatim u datoteku style.css ili izravno u html kod pišemo svojstva za ovaj blok za gornju ili donju granicu koristeći border-top i granica-dno. Evo primjera:

U ovom sam slučaju postavio stil korištenjem css-a izravno iz html koda i učinio sam gornji rub čvrstim, a donji rub točkastim.

Ovako će izgledati na stranici:

Vodoravna linija pomoću css-a.

Ova metoda ima svoje prednosti:

• Širok raspon postavki koje vam omogućuju postavljanje gotovo bilo koje vrste linije;
• Možete stvoriti vodoravne i okomite linije. Kako biste napravili okomite crte, trebate promijeniti border-top u border-left, a border-bottom u border-desno.

Nedostaci uključuju relativnu glomaznost koda.

Međutim, kako se pokazalo, pomoću html-a možete umetnuti vodoravnu liniju u tekst. U isto vrijeme, ne morate ni ulaziti u css. Za to se koristi oznaka

---

.

Vodoravna crta pomoću html oznake

---

Prva značajka ove oznake je da nema uparenu završnu oznaku. Može se koristiti bilo gdje u html kodu između oznaka I.

Ova oznaka ima sljedeće atribute:

• Širina– određuje duljinu naše horizontalne crte u pikselima ili postocima;
• Boja– definira boju linije;
• Uskladiti– postavlja poravnanje crte na desni rub – desno, na lijevi rub – lijevo, u središte – centar;
• Veličina– debljina linije u pikselima.

Ovdje primjer html– kod.

Dok je stvarao HTML stranice dizajn igra značajnu ulogu. Pogotovo kada govorimo o raznim simbolima i ukrasnom dizajnu: te sitnice čine „jezik“ vaše stranice pristupačnijim i jasnijim, a također značajno mijenjaju njezinu percepciju i izgled općenito. Jedan od najvažnijih elemenata za dizajn je vodoravna linija, a zatim ćemo detaljnije naučiti kako raditi s njom i kako napraviti vodoravnu liniju u html-u.

Što je vodoravna crta i čemu služi?

Vodoravna crta u html-u element je dizajna stranice koji obavlja niz funkcija:

1. Dekorativni. Pomaže dodati atraktivnost stranici.
2. Dijeljenje. Promiče učinkovito odvajanje informacija različitih značenja.
3. Isticanje ili naglašavanje. Skreće pozornost gostiju stranice na potrebne i najvažnije informacije.

Najviše se smatra vodoravnom linijom na pristupačan način implementirati niz funkcija. Izraditi ga je vrlo jednostavno, a izvana izgleda vrlo povoljno. Jednostavnim izmjenama html koda možete prilagoditi:

• duljina;
• širina;
• karakteristike boja;
• poravnanje duž jednog ili drugog ruba.

Važno je napomenuti da se vodoravna crta odnosi na elemente bloka. To znači da ona uzima nova linija na stranici, a tekst koji slijedi ide ispod.

Stvaranje vodoravne linije u HTML-u

Crtu možete postaviti pomoću jednostavne oznake – hr u trokutastim zagradama. Skraćenica je za "Horizontal Rule" i definira klasiku vanjski parametri. Razlikuje se od mnogih drugih po tome što ne treba završnu oznaku i može postojati samostalno. Promijeniti vanjske karakteristike element se može koristiti pomoću dodatna značenja u oznaci:

1. Duljina. Ako ne želite da se duljina linije proteže preko cijele stranice, tada možete postaviti željenu veličinu u pikselima ili postocima. Ovo se radi za pomoć dodatna riječ“width” u oznaci i numerička duljina navedena nakon znaka “=” u navodnicima.

Ovako izgleda. Na primjer, ako trebamo duljinu od 100 piksela, postavljamo sljedeću oznaku: hr width=”100″

1. Poravnanje. Poravnanje je moguće prema lijevom ili desnom rubu, a također i prema sredini. Ova karakteristika vrijedi samo ako ste već naveli parametar širine, budući da se linija koja se proteže preko cijele stranice ne može poravnati. Za poravnanje postavljamo dodatni atribut u oznaku "align" i dodajemo mu smjer: središte - za središnje, lijevo - za lijevo i desno - za desno poravnanje.

Gotova oznaka u ovom slučaju izgledat će ovako. Na primjer, ako trebamo postaviti središnje poravnanje za horizontalnu crtu duljine 150 piksela, tada će gotova oznaka izgledati ovako: hr align=”center” width=”150″.

Imajte na umu da je "align", metrika poravnanja, postavljena na 1. mjesto, iako atribut ovisi o metrici širine.

1. Širina. Također možete odabrati da odredite širinu, stvarajući podebljanu ili tanku crtu. Ovaj kriterij ne ovisi ni o čemu i može se koristiti kao neovisni kriterij bez navođenja duljine ili poravnanja. Za njega koristimo atribut veličine u oznaci i numeričku vrijednost jednaku željenoj širini u pikselima. Broj je naveden u navodnicima nakon atributa veličine i simbola “=”.

Stoga, ako trebamo stvoriti crtu širine 15 piksela, moramo izraditi sljedeću oznaku: hr size=”15″.

1. Boja. Također je specificiran kao nezavisni pokazatelj. Za promjenu upotrijebite atribut boje u kombinaciji s nazivom boje u obliku koda ili Engleski jezik. Boja je navedena u navodnicima iza simbola “=”.

Dakle, oznaka za standardnu ​​bijelu liniju može se napisati na dva načina: hr color=”#FFFFFF” ili hr color=”white”

Crna se može stvoriti pomoću koda #000000.

1. Odloži sjena. Ako trebate element koji ne sadrži sjenu, tada biste trebali koristiti atribut noshade u oznaci. Može se koristiti samostalno ili u kombinaciji s drugim elementima. Oznaka za standardnu ​​liniju koja ga koristi izgledat će ovako: hr noshade

Stvaranje vodoravne crte pomoću videa

A ako želite primati informacije u vizualnijem obliku, pogledajte sljedeći video koji detaljno opisuje mogućnosti rada s vodoravnom linijom.

Nakon što odredite potrebne dimenzije vodoravne crte, možete dizajnirati stranice web stranice na način da informacije budu strukturirane i vizualno kompetentne. To pomaže posjetiteljima da lakše percipiraju predstavljene informacije i čini vašu web stranicu istaknutom od drugih.

U osnovi, vodoravne linije se koriste za ukrašavanje HTML stranica web stranice, dajući im privlačniji izgled. Ali oni također mogu vizualno razlikovati informacije od susjednih odjeljaka, dodajući pogodnost čitateljima dok ih proučavaju. Uglavnom, nacrtajte vodoravne linije gdje vam trebaju, to je sve.

Kako nacrtati vodoravnu liniju?

Postoji posebna oznaka za crtanje vodoravnih linija u HTML-u

---

. I on je blok oznaka, odnosno stvara prijelome redaka prije i iza sebe, tako da redak uvijek završava u zasebnom retku. U skladu s tim, može se specificirati samo unutar oznaka koje mogu sadržavati blok elemente, na primjer ili

. Ali evo me

---

ne može imati sadržaj jer jednostavno nema završnu oznaku, što znači da je prazan.

Primjer crtanja horizontalnih linija u HTML-u

---

stavak

stavak

---

stavak

Rezultat u pregledniku

stavak

stavak

stavak

Kao što vidite, linije su ispale vrlo tanke, neprivlačne i iscrtane u punoj dostupnoj širini, pa ćemo sada naučiti kako ih promijeniti kako bi izgledale privlačnije.

Kako promijeniti boju, debljinu i širinu horizontalnih linija?

U starijim verzijama HTML-a oznaka

---

postojali su posebni atributi s kojima ste mogli mijenjati boju, debljinu i širinu vodoravnih linija. To su boja, veličina i širina. Ali u novim verzijama su napušteni u korist Cascading Style Sheets (CSS), tako da ćemo, kao što ste možda pogodili, ponovno koristiti naš omiljeni stilski atribut. Opća sintaksa je:

---

style="background:color" >- boja linije (odnosno njezine pozadine).

---

style="height:size" >- debljina linije.

---

style="width:size" >- širina linije.

---

stil= "pozadina:boja; visina:veličina; širina:veličina"> - ili možete navesti sve parametre odjednom, samo ne zaboravite na točku i zarez (;).

Boja se može odrediti svojim nazivom na engleskom ili HEX kodom boje kojem prethodi hash (#). Pa, to već znate iz lekcije promijeniti boju teksta i pozadine.

Ali više ćemo govoriti o promjeni veličine. Kao što se sjećate iz lekcija o mijenjanju fontova, postoji desetak mjernih jedinica u CSS-u, ali širina linije može se odrediti samo u pikselima (px) i postocima (%), i debljina općenito samo u pikselima. Ako stavite druge mjerne jedinice, to neće biti greška, već će ih preglednici jednostavno ignorirati.

Ako navedete dimenzije u pikselima, tada će debljina i širina linije ovisiti o rezoluciji monitora na kojem se vaša stranica gleda (što je veća rezolucija ekrana, linija je tanja i uža).

Kao što sam već rekao, samo se širina linije može odrediti u postocima. Veličine postotaka uvijek ovise i izračunavaju se na temelju veličine nadređenog elementa spremnika unutar kojeg se nalazi oznaka

---

. U ovom slučaju, dimenzije roditelja se uzimaju kao 100%. Na primjer, ako postavimo oznaku

---

style="width:50%" > unutarnji element

, bez obzira kako promijenili veličinu prozora preglednika ili razlučivost monitora, širina linije uvijek će biti pola širine bloka

.

Primjer promjene boje, debljine i širine horizontalnih linija.

---

---

---

---

Rezultat u pregledniku

Promjena položaja vodoravnih linija

Kada promijenite širinu vodoravne crte, jasno možete vidjeti da je preglednici uvijek postavljaju u središte. Ako želite promijeniti njegov položaj, upotrijebite samo unutra

---

poravnaj atribut sa sljedećim vrijednostima:

• centar- linija je poravnata sa središtem (zadana vrijednost).
• lijevo- pritišće lijevi rub.
• pravo- pritišće desni rub.

Primjer poravnanja vodoravne linije.

---

---

---

Rezultat u pregledniku

Kako ukloniti okvir oko linije?

Pogledajte prvi primjer ove lekcije. Što mislite koje su boje ove linije? Ali to nije istina. Transparentni su, baš kao i svaki element stranice koji nema specificiranu boju pozadine! Ne vjeruješ mi? Zatim pogledajte primjer u kojem smo promijenili boju linija. Za prvi nismo postavili boju, već samo povećali njegovu veličinu, a nije li ova linija prozirna? Tako da!

Sada ću objasniti. Prema zadanim postavkama, preglednici crtaju okvire oko linija, što stvara trodimenzionalni efekt. Dakle, kada ne povećavamo debljinu vodoravnih linija, preglednici nam prikazuju samo te okvire, jer je debljina same linije 0px.

Da bismo uklonili obrub oko linije, koji često kvari izgled, ponovno ćemo primijeniti atribut stila. A piše se ovako:

---

Domaća zadaća.

1. Napravite naslove članaka, odjeljaka i pododjeljaka. Stavite ih sve u središte.
2. Postavite font na Arial za cijelu stranicu i Courier za naslove.
3. Neka veličina fonta na cijeloj stranici bude 85% zadane veličine preglednika. Naslovi imaju 145%, 125% odnosno 110% veličine fonta na stranici.
4. Ispod prvog naslova napišite odlomak, ispod drugog dugački citat, a ispod trećeg pjesmu. I neka se pjesma nalazi u središtu stranice.
5. Podebljajte tri riječi u citatu.
6. Ispod naslova članka povucite horizontalnu crvenu liniju debljine tri piksela preko cijele širine stranice.
7. Na vrhu i dnu pjesme nacrtajte linije debljine jednog piksela crnom bojom. Neka širina gornjeg retka bude približno jednaka širini stiha, a donja - upola manja.
8. Uklonite nepotrebne okvire iz linija.

Od autora: Pozdravljam te. Potreba za predstavljanjem nekoliko blokova na web stranici u jednom retku vrlo je čest zadatak s kojim se susreću dizajneri izgleda. Javlja se tijekom postavljanja gotovo svakog predloška, ​​tako da u svakom slučaju, svi moramo znati i primijeniti osnovne metode promjene ponašanja blokova.

Prije nego što pogledamo najčešće tehnike, želio bih se sjetiti male teorije. Elementi web stranice dijele se na blok i inline elemente. A razlika između njih je vrlo jednostavna - mala slova se mogu staviti u jedan redak, ali blokovi ne mogu. Naravno, razlike tu ne završavaju, ali ovo je glavna razlika. Blokovi već mogu imati ispunu na vrhu i dnu (oni s malim slovima nemaju), a na njih se može primijeniti više svojstava.

Osnovni načini za postavljanje blokova u CSS

Nećemo ništa komplicirati, postoje 3 glavna načina:

Pretvorite blokove u ugrađene elemente. U tom se slučaju gube svojstva bloka, pa se ova opcija gotovo nikad ne koristi

Napravite potrebne elemente blok-linije. Ovo je posebna vrsta u kojoj element zadržava svoja svojstva, ali u isto vrijeme dopušta da se drugi blokovi nalaze u blizini.

Neka elementi plutaju pomoću svojstva float.

Usredotočimo se na ove opcije. Nećemo razmatrati Flexbox, stolni prikaz i druge aspekte. Dakle, recimo da imamo 3 podnaslova.

Naslov 1

Naslov 2

Naslov 3

Naravno, sva svojstva css-a moraju biti upisana zasebna datoteka(style.css), koji je potrebno povezati s html dokumentom. U ovoj datoteci ću napisati minimalan stil tako da naši podnaslovi budu jednostavno vidljivi.

h3( pozadina: #EEDDCD; )