Lep pozdrav vsem bralcem. Od časa do časa se obrtniki soočajo s problemom, kako narediti vodoravno ali navpično črto s pomočjo HTML ali CSS. To je tisto, o čemer vam bom povedal danes.

Vrstice v CSS

Obstaja več načinov za izdelavo črt. Eden takih načinov je uporaba CSS. Oziroma z uporabo Borderja. Poglejmo si primer.

In to se bo zgodilo posledično.

Vodoravna in navpična črta z uporabo css.

Črte lahko narišete v CSS z uporabo operatorja Border. Če potrebujete samo pravokotnik s fiksno širino okvirja, lahko preprosto uporabite ta operator in mu dodelite vrednost. Na primer border:5px solid #000000; bo pomenilo, da imajo robovi blokov širino, ki je enaka 5 slikovnim pikam črne barve.

Če pa ne želite nastaviti vseh meja, ampak samo nekatere, morate določiti, katere meje so potrebne in kakšno vrednost bo imela vsaka od njih. To so operaterji:

• border-top – nastavi vrednost zgornje meje
• border-bottom – nastavi vrednost spodnje meje
• border-left – nastavi vrednost levega roba
• border-right – nastavi vrednost desnega roba.

Navpična in vodoravna črta v HTML

Vrstice lahko ustvarite v samem HTML-ju. Če želite to narediti, lahko uporabite oznako hr.

V tem primeru bo narisana vodoravna črta, visoka en piksel in polna širina.

Toda tej oznaki je mogoče dati tudi nekaj vrednosti.

• Premer– nastavi vrednost širine črte.
• barva– nastavi barvo črte.
• Poravnaj– nastavi poravnavo na levo, sredino, desno
• Velikost– nastavi vrednost debeline črte v slikovnih pikah.

Z oznako hr lahko nastavite tudi navpično črto. Toda v tem primeru se boste morali znova zateči k stilom.

V tem primeru bo navpična črta narisana sto pikslov visoko, en piksel debela in pet pikslov zamaknjena.

Zaključek.

No, zdaj veste, kako lahko nastavite navpično in vodoravno črto. Vrstice lahko nastavite tako na običajnih spletnih mestih z uporabo HTML-ja kot tudi na spletnem mestu, ki uporablja CMS, na primer WordPress, vendar boste v tem primeru morali preklopiti na način HTML.

No, če imate še kakšna vprašanja, jih postavite v komentarjih.

Pri izdelavi strani HTML ima slog pomembno vlogo. Še posebej, ko govorimo o različnih simbolih in dekorativnem oblikovanju: te malenkosti pomagajo narediti "jezik" vaše strani bolj dostopen in jasen, poleg tega pa bistveno spremenijo njeno percepcijo in videz kot celoto. Eden najpomembnejših elementov za oblikovanje je vodoravna črta, nato pa se bomo podrobneje naučili delati z njo in kako narediti vodoravno črto v html.

Kaj je vodoravna črta in čemu služi?

Vodoravna črta v html je element oblikovanja strani, ki opravlja številne funkcije:

1. Dekorativni. Pomaga dodati privlačnost strani.
2. Delitev. Spodbuja učinkovito ločevanje informacij različnih pomenov.
3. Poudarjanje ali poudarjanje. Opozori goste strani na potrebne in najpomembnejše informacije.

To je vodoravna črta, ki velja za najbolj dostopen način za izvajanje številnih funkcij. Ustvariti ga je zelo preprosto, od zunaj pa izgleda zelo ugodno. S preprostimi spremembami kode html lahko prilagodite:

• dolžina;
• premer;
• barvne značilnosti;
• poravnava vzdolž enega ali drugega roba.

Omeniti velja, da se vodoravna črta nanaša na elemente blokov. To pomeni, da zavzame novo vrstico na strani, besedilo, ki mu sledi, pa bo šlo spodaj.

Ustvarjanje vodoravne črte v HTML

Črto lahko nastavite s preprosto oznako – hr v trikotnih oklepajih. Je okrajšava za "Horizontal Rule" in določa klasične zunanje parametre. Od mnogih drugih se razlikuje po tem, da ne potrebuje zaključne oznake in lahko obstaja samostojno. Zunanje značilnosti elementa lahko spremenite z dodatnimi vrednostmi v oznaki:

1. Dolžina. Če ne želite, da dolžina črte sega čez celotno stran, lahko nastavite želeno velikost v slikovnih pikah ali odstotkih. To naredite z dodatno besedo »width« v oznaki in številčno dolžino, navedeno za znakom »=« v narekovajih.

Izgleda takole. Na primer, če potrebujemo dolžino 100 slikovnih pik, nastavimo naslednjo oznako: hr width=”100″

1. Poravnava. Poravnava je možna na levi ali desni rob ter tudi na sredino. Ta lastnost velja samo, če ste že določili parameter širine, saj je nemogoče poravnati črto, ki se razteza čez celotno stran. Za poravnavo nastavimo dodaten atribut v oznaki “align” in mu dodamo smer: center – za sredinsko, levo – za levo in desno – za desno poravnavo.

Končana oznaka v tem primeru bo videti takole. Na primer, če moramo nastaviti sredinsko poravnavo za vodoravno črto, dolgo 150 slikovnih pik, bo končna oznaka videti takole: hr align=”center” width=”150″.

Upoštevajte, da je »align«, metrika poravnave, postavljena na 1. mesto, čeprav je atribut odvisen od metrike širine.

1. Premer. Izberete lahko tudi, da določite širino, tako da ustvarite krepko ali tanko podčrtano. Ta kriterij ni odvisen od ničesar in se lahko uporablja kot neodvisen kriterij brez podajanja dolžine ali poravnave. Zanj uporabimo atribut velikosti v oznaki in številsko vrednost, ki je enaka želeni širini v pikslih. Številka je navedena v narekovajih za atributom velikosti in znakom »=«.

Torej, če moramo ustvariti črto s širino 15 slikovnih pik, moramo ustvariti naslednjo oznako: hr size=”15″.

1. barva. Določen je tudi kot neodvisen indikator. Če ga želite spremeniti, uporabite barvni atribut v kombinaciji z imenom barve v obliki kode ali v angleščini. Barva je navedena v narekovajih za simbolom »=«.

Tako lahko oznako za standardno belo črto zapišemo na dva načina: hr color=”#FFFFFF” ali hr color=”white”

Črno lahko ustvarite s kodo #000000.

1. Pospravi senca. Če potrebujete element, ki ne vsebuje sence, uporabite atribut noshade v oznaki. Uporablja se lahko samostojno ali v kombinaciji z drugimi elementi. Oznaka za standardno vrstico, ki jo uporablja, bo videti takole: hr noshade

Ustvarjanje vodoravne črte z uporabo videa

In če želite prejemati informacije v bolj vizualni obliki, si oglejte naslednji videoposnetek, ki podrobno opisuje možnosti dela z vodoravno črto.

Ko določite zahtevane dimenzije vodoravne črte, lahko strani spletnega mesta oblikujete tako, da bodo informacije strukturirane in vizualno kompetentne. To pomaga obiskovalcem, da lažje zaznajo predstavljene informacije, vaše spletno mesto pa izstopa od drugih.

Od avtorja: pozdravljam te. Potreba po predstavitvi več blokov na spletni strani v eni vrstici je zelo pogosta naloga, s katero se srečujejo oblikovalci postavitev. Pojavi se med postavitvijo skoraj vsake predloge, zato moramo v vsakem primeru vsi poznati in uporabiti osnovne načine za spreminjanje obnašanja blokov.

Preden pogledamo najpogostejše tehnike, bi se rad spomnil malo teorije. Elemente spletne strani delimo na blokovne in inline elemente. In razlika med njimi je zelo preprosta - male črke lahko postavite v eno vrstico, blokovske pa ne. Seveda se tu razlike ne končajo, vendar je to glavna razlika. Bloki že imajo lahko oblazinjenje na vrhu in na dnu (male črke nimajo), zanje pa je mogoče uporabiti več lastnosti.

Osnovni načini za razvrščanje blokov v CSS

Ne bomo nič komplicirali, obstajajo 3 glavni načini:

Pretvorite bloke v elemente v vrstici. V tem primeru se lastnosti bloka izgubijo, zato se ta možnost skoraj nikoli ne uporablja

Naredite potrebne elemente blok-line. To je posebna vrsta, pri kateri element ohrani svoje lastnosti, hkrati pa omogoča, da se drugi bloki nahajajo v bližini.

Elemente naredite lebdeče z lastnostjo float.

Osredotočimo se na te možnosti. Ne bomo upoštevali Flexboxa, tabele in drugih vidikov. Torej, recimo, da imamo 3 podnaslove.

Naslov 1

Naslov 2

Naslov 3

Seveda morajo biti vse lastnosti css zapisane v ločeni datoteki (style.css), ki mora biti povezana s html dokumentom. V tej datoteki bom napisal minimalen slog, tako da bodo naši podnaslovi enostavno vidni.

h3 (ozadje: #EEDDCD; )

h3 ( ozadje: #EEDDCD;

Tukaj so na strani:

Obnašajo se kot bloki. Vsak se nahaja v svoji vrstici, med njimi so vdolbine. Če želite, lahko nastavite tudi poljubno notranjo oblogo in naredite, kar želite.

Pretvorimo ga v vrstice in takoj dodamo zamike. Če želite to narediti, mora izbirnik h3 dodati naslednje lastnosti:

prikaz: v vrstici; oblazinjenje: 30px;

Pri uporabi te tehnike se pojavita dve glavni težavi. Prva je minimalna vdolbina. Nastane zaradi dejstva, da je v kodi med bloki en presledek, ki tvori to vdolbino. Če je to težavo treba rešiti, sta na voljo 2 glavni možnosti:

V html postavite kodo zahtevanih blokov v eno vrstico brez presledkov

Desno od -4 slikovnih pik dodajte negativni rob. Toliko zavzame en prostor.

Druga težava je, da lahko pride do težav s prikazom, če imajo elementi različne višine. Na splošno so najboljša možnost plavajoči bloki. Namesto display: inline-block zapišemo tole:

Bloki v liniji z uporabo ogrodja

Takoj bom rekel, da če boste uporabljali kateri koli običajni okvir CSS (na primer Bootstrap), potem je vse še veliko preprostejše. Vsa koda CSS, odgovorna za razporeditev elementov, je že napisana in vse, kar morate storiti, je, da nastavite pravilne razrede. Če želite to narediti, se samo naučite mrežnega sistema in brez večjih težav boste lahko naredili odzivne predloge z več stolpci. Vsaj veliko lažje bo kot pisanje css iz nič.

Drug izziv pri pisanju kode iz nič se pojavi, ko potrebujete odziven dizajn. Seveda ga lahko implementirate sami z lastništvom medijskih poizvedb, vendar bo veliko težje, če imate zapleteno predlogo.

Na primer, ko bi morali imeti na velikih zaslonih 4 stolpce, na srednjih 3 in na mobilnih telefonih 2. S pomočjo ogrodij, kot je Bootstrap, oziroma s pomočjo njegove mreže, lahko implementacija tega traja le nekaj minut .

Če temo gladko prevedem v okvir Bootstrap, bom še enkrat opozoril, da če se soočite z nalogo postavitve kompleksne prilagodljive predloge, potem je preprosto greh, da ne uporabite mreže. Če želite to narediti, vam sploh ni treba povezati polne različice ogrodja - lahko ga prilagodite in se tam ustavite samo tisto, kar resnično potrebujete.

Lahko se naučite, kako delati z ogrodjem z uporabo. Tam je razložena teorija, predvsem pa je praksa. Ustvarili boste 3 prilagodljive predloge in dobili odlično izkušnjo, ki vam bo omogočila oblikovanje spletnih strani po naročilu ali zase. In če se želite brezplačno seznaniti s prednostmi in zmožnostmi ogrodja, predlagam, da si ogledate našo serijo člankov o Bootstrapu, pa tudi o preprostem oblikovanju postavitve. Želim vam uspeh pri postavitvi in ​​gradnji spletne strani nasploh.

Če želite poudariti nekatere posebej pomembne elemente spletnega mesta, ne bi škodilo, če bi uporabili vse vrste stilov in lastnosti CSS, ki so za to predvidene. Seveda vam ni treba preveč skrbeti za besedilo in ga označite, na primer s krepko ali poševno pisavo, spremenite ozadje ali naredite okvir okoli besedila. Toda ena od predstavljenih metod ni vedno primerna. Recimo, da imate besedilo, ki ga je treba razdeliti zaradi posebnosti njegove pomenske obremenitve. Tukaj na pomoč priskočijo lastnosti HTML in CSS.

Kako narediti vrstico v besedilu s pomočjo CSS

Za uresničitev naših načrtov se bomo morali obrniti datoteka style.css, in vanj vpisal ustrezno lastnost meja. To bo povzročilo, da se bo vrstica pojavila nad, pod ali na določeni strani besedila. Za prikaz vrstice pa je odgovornih več lastnosti, in sicer:

- meja-vrh– vodoravna črta nad besedilom;

- meja-desna– navpična črta na desni strani besedila;

- obroba-spodnja– vodoravno črto pod besedilom;

- meja-levo– navpična črta na levi strani.

Kako narediti vrstico v html

Z uporabo lastnosti CSS lahko določite vse potrebne vrednosti z urejanjem kode HTML. Če želite to narediti, morate iti v upravni del spletnega mesta. Izberite enega od objavljenih materialov, preklopite urejevalnik besedila v način urejanja kode HTML in vnesite lastnosti CSS. Vzorec si lahko ogledate spodaj.

Kratek opis ukazov

- premer– dolžina črte;

- trdna- polna črta;

- pikčasto- črtkana črta.

Za globlje razumevanje stilov priporočam branje tega.

Treba je razumeti, da so v procesu spreminjanja kode spletnega mesta lastnosti, ki določajo vrsto črte, njeno debelino in barvo, navedene ločene s presledkom.

Ta metoda ima več prednosti:

Široka paleta možnosti, s katerimi lahko naredite skoraj vsako linijo.

Preprosto izvajanje vseh potrebnih sprememb neposredno v kodi HTML. To močno poenostavi nalogo za neizkušene ustvarjalce spletnih mest.

Kako narediti ravno vodoravno črto z uporabo oznake HTML

---

Prva stvar, na katero bi vas rad opozoril, je, da ta oznaka, kljub vsem tankostim in načelom html, nima zaključne oznake. Uporablja se lahko kjer koli v kodi html, med oznakami in.

Atributi oznak

---

- premer– je odgovoren za dolžino linije. Lahko se določi v odstotkih ali v slikovnih pikah.

- velikost– debelina črte. Določeno v slikovnih pikah.

- barva– določa barvo črte.

- poravnati– atribut, odgovoren za poravnavo vrstic. Po drugi strani pa se ekipa navezuje nanj.

Naloga

Na strani naredite vodoravno črto.

rešitev

Vodoravne črte so dobre za ločevanje enega bloka besedila od drugega. Majhno besedilo z vodoravnimi črtami na vrhu in na dnu pritegne več pozornosti bralca kot običajno besedilo.

Uporaba oznake

---

lahko narišete vodoravno črto, katere videz je odvisen od uporabljenih atributov in brskalnika. Oznaka se nanaša na elemente bloka, zato se vrstica vedno začne v novi vrstici, za njo pa se vsi elementi prikažejo v naslednji vrstici. Zahvaljujoč številnim atributom oznak

---

črto, ustvarjeno s to oznako, je enostavno upravljati. Če povežete še moč slogov, postane dodajanje črte dokumentu preprosto opravilo.

Privzeta vrstica

---

prikazan v sivi barvi in ​​z učinkom volumna. Ta vrsta črte ne ustreza vedno zasnovi spletnega mesta, zato je želja razvijalcev, da spremenijo barvo in druge parametre črte s pomočjo slogov, razumljiva. Vendar imajo brskalniki mešane pristope k temu vprašanju, zato boste morali uporabiti več slogovnih lastnosti hkrati. Zlasti starejše različice Internet Explorerja uporabljajo lastnost barve za barvo črte, medtem ko drugi brskalniki uporabljajo barvo ozadja. Vendar to še ni vse, določiti morate debelino črte (lastnost višine), ki ni enaka nič, in odstraniti okvir okoli črte, tako da lastnost meje nastavite na nič. Če združimo vse lastnosti za hr selektor, dobimo univerzalno rešitev za popularne brskalnike (primer 1).

Primer 1: Vodoravna črta

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Besedilni niz

---

Rezultat tega primera je prikazan na sl. 1.

riž. 1. Barvna vodoravna črta