Pozdrav svim čitaocima. S vremena na vrijeme, majstori se susreću s problemom kako napraviti horizontalnu ili vertikalnu liniju koristeći HTML ili CSS. Ovo je ono o čemu ću vam danas pričati.

Linije u CSS-u

Postoji nekoliko načina za pravljenje linija. Jedan takav način je korištenje CSS-a. Ili bolje rečeno, koristeći Border. Pogledajmo primjer.

I ovo je ono što će se dogoditi kao rezultat.

Horizontalna i vertikalna linija koristeći css.

Linije se mogu crtati u CSS-u koristeći Border operator. Ako vam je potreban samo pravougaonik sa fiksnom širinom okvira, onda možete jednostavno koristiti ovaj operator i dati mu vrijednost. Na primjer border:5px solid #000000; će značiti da ivice bloka imaju širinu jednaku 5 piksela crne boje.

Međutim, ako trebate postaviti ne sve granice, već samo neke, onda morate odrediti koje su granice potrebne i koju vrijednost će svaka od njih imati. Ovo su operateri:

• border-top – postavlja vrijednost gornjeg ruba
• border-bottom – postavlja vrijednost donje granice
• border-left – postavlja vrijednost lijevog ruba
• border-right – postavlja vrijednost desne granice.

Vertikalna i horizontalna linija u HTML-u

Možete kreirati linije u samom HTML-u. Da biste to učinili, možete koristiti oznaku hr.

U tom slučaju će se nacrtati vodoravna linija, jedan piksel visine i pune širine.

Ali ovoj oznaci se mogu dati i neke vrijednosti.

• Širina– postavlja vrijednost širine linije.
• Boja– postavlja boju linije.
• Poravnajte– postavlja poravnanje lijevo, centar, desno
• Veličina– postavlja vrijednost debljine linije u pikselima.

Koristeći hr tag, možete postaviti i vertikalnu liniju. Ali u ovom slučaju, morat ćete ponovo pribjeći stilovima.

U ovom slučaju, vertikalna linija će biti nacrtana stotinu piksela visoka, jedan piksel debljine i pet piksela uvučeno.

Zaključak.

Pa, sada znate kako možete postaviti vertikalnu i horizontalnu liniju. Linije se mogu postaviti i na obične stranice koje koriste HTML, a mogu se postaviti i na web lokaciju koja koristi CMS, na primjer WordPress, ali u ovom slučaju morat ćete se prebaciti na HTML način rada.

Pa, ako imate još pitanja, postavite ih u komentarima.

Prilikom kreiranja HTML stranice, stil igra značajnu ulogu. Pogotovo kada govorimo o raznim simbolima i dekorativnom dizajnu: ove male stvari pomažu da „jezik” vaše stranice bude pristupačniji i jasniji, a također značajno mijenjaju njenu percepciju i izgled u cjelini. Jedan od najvažnijih elemenata za dizajn je vodoravna linija, a zatim ćemo detaljnije naučiti kako s njom raditi i kako napraviti horizontalnu liniju u html-u.

Šta je horizontalna linija i čemu služi?

Horizontalna linija u html-u je element dizajna stranice koji obavlja niz funkcija:

1. Dekorativni. Pomaže u dodavanju atraktivnosti stranici.
2. Dividing. Promoviše efikasno razdvajanje informacija različitih značenja.
3. Isticanje ili isticanje. Skreće pažnju gostiju stranice na potrebne i najvažnije informacije.

Horizontalna linija se smatra najpristupačnijim načinom implementacije brojnih funkcija. Vrlo je jednostavan za kreiranje, a izvana izgleda vrlo povoljno. Jednostavnim promjenama html koda možete prilagoditi:

• dužina;
• širina;
• karakteristike boje;
• poravnanje duž jedne ili druge ivice.

Vrijedi napomenuti da se horizontalna linija odnosi na blok elemente. To znači da zauzima novi red na stranici, a tekst koji slijedi ide ispod.

Kreiranje horizontalne linije u HTML-u

Možete postaviti liniju pomoću jednostavne oznake – hr u trouglastim zagradama. Skraćenica je za „Horizontalno pravilo“ i postavlja klasične vanjske parametre. Razlikuje se od mnogih drugih po tome što ne treba završnu oznaku i može postojati nezavisno. Možete promijeniti vanjske karakteristike elementa koristeći dodatne vrijednosti u oznaci:

1. Dužina. Ako ne želite da se dužina linije proteže preko cijele stranice, tada možete postaviti željenu veličinu u pikselima ili procentima. Ovo se radi pomoću dodatne riječi “width” u oznaci i numeričke dužine označene iza znaka “=” u navodnicima.

To izgleda ovako. Na primjer, ako nam je potrebna dužina od 100 piksela, postavljamo sljedeći tag: hr width=”100″

1. Poravnanje. Poravnanje je moguće prema lijevoj ili desnoj ivici, kao i prema sredini. Ova karakteristika se primjenjuje samo ako ste već naveli parametar širine, jer je nemoguće poravnati liniju koja se proteže kroz cijelu stranicu. Za poravnanje postavljamo dodatni atribut u oznaci “align” i dodajemo mu smjer: centar – za centralno, lijevo – za lijevo i desno – za desno poravnanje.

Gotova oznaka u ovom slučaju će izgledati ovako. Na primjer, ako trebamo postaviti centralno poravnanje za horizontalnu liniju dugu 150 piksela, onda ć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 podcrtanu liniju. Ovaj kriterij ne ovisi ni o čemu i može se koristiti kao neovisni kriterij bez specificiranja dužine ili poravnanja. Za to koristimo atribut size u oznaci i numeričku vrijednost jednaku željenoj širini u pikselima. Broj je naveden u navodnicima nakon atributa veličine i simbola “=”.

Dakle, ako treba da kreiramo liniju širine 15 piksela, potrebno je da kreiramo sledeću oznaku: hr size=”15″.

1. Boja. Takođe je naveden kao nezavisni indikator. Da biste ga promijenili, koristite atribut boje u kombinaciji s nazivom boje u obliku koda ili na engleskom. Boja je označena 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 kreirati pomoću koda #000000.

1. Skloniti senka. Ako vam je potreban 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 je koristi će izgledati ovako: hr noshade

Kreiranje horizontalne linije pomoću videa

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

Nakon što ste odredili potrebne dimenzije horizontalne linije, možete dizajnirati stranice web stranice na način da su informacije strukturirane i vizualno kompetentne. Ovo pomaže posjetiteljima da lakše percipiraju predstavljene informacije i čini da se vaša web stranica izdvaja od drugih.

Od autora: Pozdravljam vas. Potreba da se na web stranici predstavi nekoliko blokova u jednom redu vrlo je čest zadatak s kojim se suočavaju dizajneri izgleda. Javlja se tokom izgleda gotovo svakog šablona, ​​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 prisjetiti malo 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 red, ali blokovi ne. Naravno, tu se razlike ne završavaju, ali ovo je glavna razlika. Blokovi već mogu imati padding na vrhu i na dnu (mala slova nemaju), a na njih se može primijeniti više svojstava.

Osnovni načini poređanja blokova u CSS-u

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

Pretvorite blokove u inline elemente. U ovom slučaju se gube svojstva bloka, tako da se ova opcija gotovo nikada ne koristi

Napravite potrebne elemente blok-linije. Ovo je poseban tip u kojem element zadržava svoja svojstva, ali u isto vrijeme omogućava da se drugi blokovi nalaze u blizini.

Učinite elemente float koristeći svojstvo float.

Hajde da se fokusiramo na ove opcije. Nećemo uzeti u obzir Flexbox, prikaz stola i druge aspekte. Dakle, recimo da imamo 3 podnaslova.

Naslov 1

Naslov 2

Naslov 3

Naravno, sva css svojstva moraju biti zapisana u zasebnom fajlu (style.css), koji mora biti povezan sa html dokumentom. U ovoj datoteci ću napisati minimalni stil tako da naši podnaslovi budu jednostavno vidljivi.

h3( pozadina: #EEDDCD; )

h3 ( pozadina : #EEDDCD;

Evo ih na stranici:

Ponašaju se kao blokovi. Svaki se nalazi na svojoj liniji, između njih postoje uvlake. Ako želite, možete postaviti bilo koji unutrašnji pad i raditi šta god želite.

Pretvorimo ga u redove i odmah dodamo uvlake. Da biste to učinili, h3 selektor treba dodati sljedeća svojstva:

display: inline; padding: 30px;

Postoje 2 glavna problema koja se javljaju prilikom korištenja ove tehnike. Prvi je minimalno uvlačenje. Formira se zbog činjenice da u kodu postoji jedan razmak između blokova koji čini ovo uvlačenje. Ako je potrebno riješiti ovaj problem, postoje 2 glavne opcije:

U html-u, postavite kod potrebnih blokova u jedan red bez razmaka

Dodajte negativnu marginu desno od -4 piksela. Toliko je potrebno za jedan prostor.

Drugi problem je da ako elementi imaju različite visine, mogu se pojaviti problemi s prikazom. Općenito, najbolja opcija su plutajući blokovi. Umjesto display: inline-block pišemo ovo:

Blokovi u liniji koristeći okvir

Odmah ću reći da ako ćete koristiti bilo koji normalan CSS okvir (na primjer, Bootstrap), onda je sve još mnogo jednostavnije. Sav CSS kod odgovoran za uređenje elemenata je već napisan i sve što treba da uradite je da postavite ispravne klase. Da biste to uradili, samo naučite mrežni sistem i moći ćete da pravite predloške koji odgovaraju na više kolona bez većih poteškoća. Bar će to biti mnogo lakše nego pisati css od nule.

Još jedan izazov pisanja koda od nule dolazi kada vam je potreban responzivni dizajn. Naravno, možete ga implementirati i sami posjedovanjem medijskih upita, ali će to biti mnogo teže ako imate složen predložak.

Na primjer, kada biste trebali imati 4 kolone na velikim ekranima, 3 na srednjim ekranima i 2 na mobilnim telefonima. Uz pomoć okvira kao što je Bootstrap, odnosno uz pomoć njegove mreže, implementacija ovoga može potrajati samo nekoliko minuta .

Glatko prevodeći temu na Bootstrap okvir, još jednom ću napomenuti da ako se suočite sa zadatkom postavljanja složenog prilagodljivog predloška, ​​onda je jednostavno grijeh ne koristiti mrežu. Da biste to učinili, ne morate čak ni povezati punu verziju okvira - možete ga prilagoditi i zaustaviti samo ono što vam je zaista potrebno.

Možete naučiti kako raditi sa okvirom koristeći . Tu je objašnjena teorija, ali što je najvažnije, postoji praksa. Napravit ćete 3 prilagodljiva šablona i dobiti izvrsno iskustvo koje će vam omogućiti da dizajnirate web stranice po narudžbi ili za sebe. A ako se želite besplatno upoznati s prednostima i mogućnostima okvira, predlažem vam da pogledate našu seriju članaka o Bootstrapu, kao i o jednostavnom dizajnu izgleda. Želim vam uspjeh u izgledu i izradi web stranica općenito.

Da bismo naglasili neke posebno važne elemente stranice, ne bi škodilo koristiti sve vrste CSS stilova i svojstava predviđenih za to. Naravno, ne morate previše brinuti o tekstu i istaknuti ga, na primjer, podebljanim ili kurzivom, promijeniti pozadinu ili napraviti okvir oko teksta. Ali jedna od predstavljenih metoda nije uvijek prikladna. Recimo da imate tekst koji je potrebno podijeliti zbog specifičnosti njegovog semantičkog opterećenja. Ovdje HTML i CSS svojstva dolaze u pomoć.

Kako napraviti red u tekstu koristeći CSS

Da bismo realizirali naše planove, morat ćemo kontaktirati style.css fajl, upisavši u njega odgovarajuće svojstvo granica. Ovo će uzrokovati da se linija pojavi iznad, ispod ili na određenoj strani teksta. Zauzvrat, postoji nekoliko svojstava odgovornih za prikaz linije, i to:

- border-top– horizontalna linija koja se nalazi iznad teksta;

- granica desno– okomita linija koja se nalazi desno od teksta;

- border-bottom– horizontalna linija koja se nalazi ispod teksta;

- granica-lijevo– vertikalna linija koja se nalazi na lijevoj strani.

Kako napraviti liniju u html-u

Koristeći CSS svojstva možete odrediti sve potrebne vrijednosti uređivanjem HTML koda. Da biste to učinili, morate otići na administrativni dio stranice. Odaberite jedan od objavljenih materijala, prebacite uređivač teksta na mod za uređivanje HTML koda i unesite CSS svojstva. Uzorak se može vidjeti u nastavku.

Kratak opis komandi

- širina– dužina linije;

- solidan- puna linija;

- tačkasta- tačkasta linija.

Za dublje razumijevanje stilova, preporučujem čitanje ovog.

Potrebno je razumjeti da se u procesu izmjene koda stranice svojstva koja određuju tip linije, njenu debljinu i boju navode razmaknuta.

Ova metoda ima nekoliko prednosti:

Širok raspon mogućnosti s kojima možete napraviti gotovo svaku liniju.

Jednostavnost unošenja svih potrebnih promjena direktno u HTML kod. Ovo uvelike pojednostavljuje zadatak neiskusnim graditeljima web lokacija.

Kako napraviti ravnu horizontalnu liniju koristeći HTML tag

---

Prvo na šta bih vam skrenuo pažnju je da ovaj tag, uprkos svim suptilnostima i principima html-a, nema završni tag. Može se koristiti bilo gdje u html kodu, između oznaka I.

Atributi oznake

---

- širina– odgovoran je za dužinu linije. Može se navesti u procentima ili u pikselima.

- veličina– debljina linije. Navedeno u pikselima.

- boja– definira boju linije.

- poravnati– atribut odgovoran za poravnanje linija. Zauzvrat, tim se odnosi na njega.

Zadatak

Napravite vodoravnu liniju na stranici.

Rješenje

Horizontalne linije su dobre za odvajanje jednog bloka teksta od drugog. Mali tekst sa horizontalnim linijama na vrhu i dnu privlači više pažnje čitaoca od običnog teksta.

Korištenje oznake

---

možete nacrtati horizontalnu liniju, čiji izgled zavisi od korišćenih atributa, kao i od pretraživača. Oznaka se odnosi na blok elemente, tako da red uvijek počinje u novom redu, a nakon njega svi elementi se prikazuju u sljedećem redu. Zahvaljujući brojnim atributima oznake

---

linijom kreiranom preko ove oznake je lako upravljati. Ako povežete i moć stilova, onda dodavanje linije u dokument postaje jednostavan zadatak.

Zadana linija

---

prikazano u sivoj boji i sa efektom jačine zvuka. Ova vrsta linije ne odgovara uvijek dizajnu stranice, pa je razumljiva želja programera da mijenjaju boju i druge parametre linije kroz stilove. Međutim, pretraživači imaju mješovite pristupe ovom problemu, zbog čega ćete morati koristiti nekoliko svojstava stila odjednom. Konkretno, starije verzije Internet Explorera koriste svojstvo boje za boju linije, dok drugi pretraživači koriste boju pozadine. Ali to nije sve, morate odrediti debljinu linije (svojstvo visine) da bude različita od nule i ukloniti okvir oko linije postavljanjem svojstva granice na ništa. Sastavljanjem svih svojstava za selektor hr, dobijamo univerzalno rješenje za popularne pretraživače (primjer 1).

Primjer 1: Horizontalna linija

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Tekstni niz

---

Rezultat ovog primjera prikazan je na sl. 1.

Rice. 1. Obojena horizontalna linija