Dom > excel > Kako napraviti horizontalnu css liniju. Kako napraviti blokove u liniji sa css-om? Kako napraviti liniju u html-u


Kako napraviti horizontalnu css liniju. Kako napraviti blokove u liniji sa css-om? Kako napraviti liniju u html-u




Zadatak

Napravite vodoravnu liniju na stranici.

Rješenje

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

Sa etiketom

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. Sa mnogo atributa oznaka
linijom kreiranom preko ove oznake je lako upravljati. Ako povežete i snagu stilova, 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 dvosmislen pristup 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, obavezno navedite debljinu linije (svojstvo visine) osim nule i uklonite okvir oko linije postavljanjem svojstva granice na ništa. Sakupljajući sva svojstva zajedno 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

Boja horizontalne linije

Tekstni niz

Rezultat ovog primjera prikazan je na sl. 1.

Rice. 1. Obojena horizontalna linija

Čini se, zašto bi mogle biti potrebne četiri metode? Uostalom, gotovo svaka osoba koristi jednu metodu na koju je navikla. Na primjer, nekoliko puta sam pritisnuo Shift i crticu i tako je ispala horizontalna linija.

Ali šta ako ovo rezultira isprekidanom linijom, ali vam je potrebna čvrsta?
- Najvjerovatnije, tipka Shift na tastaturi je neispravna. Evo nekoliko drugih načina da pomognete.

3.
4.
5.

Možda najpoznatiji način da napravite liniju u Wordu je korištenje nekoliko tipki na tastaturi.

I Tanka, debela, dvostruka, isprekidana linija pomoću tastature

Ispod je crtež tastature sa engleskim rasporedom, ali bez ruskog rasporeda, ali to nije bitno, jer nas zanimaju samo tri tastera: Shift, dash i Enter.

Rice. 1. Tri tastera na tastaturi: Shift, crtica i Enter za neprekidnu horizontalnu liniju u Wordu

Pomoću ova tri tastera možete nacrtati neprekidnu horizontalnu liniju u Wordu: isprekidanu ili punu, tanku ili debelu, dugačku ili kratku.

1) Kada pritisnete tipku “-” (crtica) nekoliko puta u Word editoru, dobijamo isprekidanu liniju bilo koje dužine.

Uraditi tanak dugačak red za cijelu širinu stranice:

  • Na tastaturi nalazimo taster „crtica“ (desno od tastera „nula“, u zelenom okviru na slici 1).
  • Iz novog (!) reda u Wordu pritisnite ovu tipku nekoliko puta: -
  • Zatim pritisnite tipku "Enter" (). Nekoliko ispisanih crtica odjednom će se pretvoriti u neprekidnu horizontalnu tanku liniju po cijeloj širini stranice.

2) Kada pritisnete Shift i "-" (crticu) istovremeno, NE ispisuje se crtica, već donja crta _________. Dakle, možete napraviti kontinuirani red proizvoljne dužine bilo gdje u dokumentu.

Rice. 2. Tanka i debela horizontalna linija u Wordu

Sada štampamo debelo vodoravna linija preko cijele širine stranice:

  • Opet nalazimo istu tipku crtice, kao i tipku Shift (lijevo ili desno, kako želite). Pritisnite Shift, držite i ne puštajte.
  • A sada, iz nove (!) linije, kliknite na crticu nekoliko puta (na primjer, 3-4 puta) (i da ne puštate Shift): ___. Otpustite Shift.
  • Sada pritisnite tipku Enter. Vidjet ćete debelu horizontalnu punu liniju.

Sumirajmo neke rezultate u obliku tabele:

(Kliknite za povećanje) Linije u Wordu pomoću tastature

­­­­­­­­­­­­­­­­­­­­­

II Red u Wordu pomoću tabele

Horizontalna linija se može dobiti korištenjem tablice od jedne ćelije (1x1), u kojoj je obojena samo gornja ili donja granica (bit će vidljiva), a ostale tri strane tablice imaju neobojene ivice (oni će biti nevidljivi) .

Stavljamo kursor na mjesto gdje treba biti linija. U gornjem meniju Worda kliknite na:

  • Umetak (1 na sl. 3),
  • Tabela (2 na sl. 3),
  • Jedna ćelija (3 na sl. 3).

Rice. 3. Kako ubaciti tabelu 1x1 u Word (iz jedne ćelije)

Rezultat je tabela jedne velike ćelije (1x1):

Ostaje u tabeli 1x1 sa tri strane da se uklone ivice. Za ovo

  • idite na karticu "Početna" (1 na sl. 4),
  • pored "Font" nalazimo "Paragraph" i ivice (2 na sl. 4),
  • uklonite sve ivice klikom na "Bez granica" (3 na sl. 4),
  • izaberite "Gornja granica" ili "Donja ivica" (4 na sl. 4).

Rice. 4. Kako ukloniti odabir granica u Word tabeli (učiniti granice nevidljivima)

To jasno pokazujem u videu (na kraju članka).

Inače, na sl. 3 pokazuje da postoji lakši način. Možete staviti kursor na početak reda u Wordu i kliknuti na "Horizontalna linija" (5 na slici 4):

III Linija u Wordu crtanjem

Umetanje (1 na slici 5) - Oblici (2 na slici 5) je još jedan način da dobijete horizontalnu liniju u Wordu.

Da bi linija bila strogo horizontalna, držite pritisnutu tipku Shift i istovremeno nacrtajte liniju.

Rice. 5. Kako nacrtati liniju u Wordu

IV Linija u Wordu pomoću tastature na ekranu

Da bismo pronašli tastaturu na ekranu, u pretragu unosimo frazu "tastatura na ekranu", više detalja za Windows 7 i za Windows 8.

Za Windows 10, ekransku tastaturu možete pronaći i tako što ćete u traku za pretragu upisati "tastatura na ekranu".

Rice. 6. Tastatura na ekranu

Napravit ćemo horizontalnu liniju na isti način kao u prvoj verziji s običnom tastaturom. Na tastaturi na ekranu potrebna su vam tri dugmeta: crtica, Shift i Enter.

1 Crta i Enter

Iz novog reda u Wordu, kliknite na crticu nekoliko puta (1 na slici 6) i pritisnite Enter. Dobićete tanku horizontalnu liniju.

2 Shift, crtica i Enter

U novom redu u Wordu kliknite prvo Shift (2 na slici 6), a zatim na crticu (1 na slici 6). Nabavite podvlačenje. Zato ponovite još 2 puta, a zatim pritisnite Enter. Kao rezultat toga, vidjet ćemo debelu horizontalnu liniju.

Pozdrav svim čitaocima. S vremena na vrijeme, majstori se suočavaju s problemom kako napraviti horizontalnu ili vertikalnu liniju koristeći HTML ili koristeći CSS. To 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. Tačnije, uz pomoć Bordera. Pogledajmo primjer.

I evo rezultata.

Horizontalna i vertikalna linija sa css.

Linije u CSS-u se mogu crtati pomoću operatora Border. Ako samo želite pravougaonik sa fiksnom širinom ivice, onda možete jednostavno koristiti ovaj operator i dati mu vrijednost. Na primjer border:5px solid #000000; će značiti da su ivice okvira široke 5 piksela u crnoj boji.

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

  • border-top - postavlja vrijednost gornje granice
  • 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

Također 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 ovaj tag, možete postaviti neke vrijednosti.

  • Širina– postavlja vrijednost širine linije.
  • boja- postavlja boju linije.
  • Poravnajte- postavlja lijevo, centralno, desno poravnanje
  • 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 visoka stotinu piksela, debela jedan piksel i pet piksela će biti uvučena.

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, i na web-stranice koje koriste CMS, kao što je 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 bitnu ulogu. Pogotovo kada je riječ o raznim simbolima i dekorativnom dizajnu: ove sitnice pomažu da „jezik” vaše stranice bude pristupačniji i jasniji, a također značajno mijenjaju njenu percepciju i izgled općenito. Jedan od najvažnijih elemenata dizajna je horizontalna linija, a u nastavku ćemo detaljnije naučiti kako s njom raditi i kako napraviti horizontalnu liniju u html-u.

Šta je horizontalna linija i zašto je potrebna

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

  1. dekorativni. Pomaže u dodavanju atraktivnosti stranici.
  2. Dividing. Doprinosi efikasnom razdvajanju informacija različitog značenja.
  3. Naglašavanje ili naglašavanje. Skrenut će pažnju posjetitelja stranice na potrebne i najvažnije informacije.

Horizontalna linija se smatra najpristupačnijim načinom implementacije brojnih funkcija. Vrlo je jednostavno stvoriti, a spolja izgleda vrlo isplativo. Jednostavnim promjenama html koda možete kontrolirati:

  • dužina;
  • širina;
  • karakteristike boje;
  • poravnanje na jednoj ili drugoj ivici.

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 dužina linije pokriva cijelu stranicu, tada možete postaviti željenu veličinu u pikselima ili procentima. To se radi uz pomoć dodatne riječi "width" u oznaci i numeričkog indikatora dužine navedenog iza znaka "=" u navodnicima.

To izgleda ovako. Na primjer, ako nam je potrebna dužina od 100 piksela, postavljamo sljedeću oznaku: hr width="100"

  1. poravnanje. Poravnanje je moguće na lijevoj ili desnoj ivici, a također i na sredini. Ovo svojstvo stupa na snagu samo ako ste već postavili parametar širine, jer se linija na cijeloj stranici ne može poravnati. Za poravnanje postavljamo dodatni atribut u oznaku "align" i dodajemo mu smjer: centar - za centar, 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, tada će gotova oznaka izgledati ovako: hr align="center" width="150".

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

  1. Širina. Opciono, možete odrediti i širinu, stvarajući podebljanu ili tanku podcrtanu liniju. Ovaj kriterij ne ovisi ni o čemu i može se koristiti kao nezavisan bez specificiranja dužine ili poravnanja. Za ovo koristimo atribut size na oznaci i numeričku vrijednost jednaku željenoj širini u pikselima. Broj je naveden u navodnicima nakon atributa veličine i simbola "=".

Dakle, ako želimo da kreiramo liniju širine 15 piksela, potrebno je da kreiramo sledeću oznaku: hr size="15".

  1. Boja. Takođe je postavljen kao nezavisni indikator. Da biste ga promijenili, koristi se atribut boje u kombinaciji s nazivom boje u obliku koda ili na engleskom. 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 boja se može kreirati pomoću koda #000000.

  1. Skloniti senka. Ako vam je potreban element koji ne sadrži sjenu, onda u oznaci treba koristiti atribut noshade. Može se koristiti samostalno ili u kombinaciji s drugim elementima. Oznaka za standardnu ​​liniju koja je koristi će izgledati ovako: hr noshade

Napravite vodoravnu liniju s videom

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

Nakon što ste odredili potrebne dimenzije vodoravne linije, možete urediti stranice stranice na takav način da su informacije strukturirane i vizualno dobro oblikovane. Ovo olakšava posjetiteljima da percipiraju predstavljene informacije i da razlikuju vašu stranicu od drugih.

Zdravo svima! Danas ću vam reći kako napraviti horizontalnu liniju koristeći html.

Zapravo, potreba da se napravi horizontalna linija javlja se prilično često, na primjer, kada trebate odvojiti jedan dio teksta od drugog.

horizontalne i vertikalne linije sa css

To možete učiniti pomoću css-a. Da bih to učinio, prilažem potreban dio teksta u blok pomoću oznake div, a zatim u datoteci style.css ili direktno u html kodu propisujemo svojstva za ovaj blok za gornji ili donji rub koristeći border-top i donji rub. Evo primjera:

vertikalna html linija

Horizontalna linija sa css.

U ovom slučaju, stilizirao sam ga sa cssom direktno iz html koda i napravio gornju ivicu punu liniju, a donju ivicu isprekidanom linijom.

Evo kako će to izgledati na stranici:

Horizontalna linija sa css.

Ova metoda ima svoje prednosti:

  • Širok raspon postavki koje vam omogućavaju postavljanje gotovo bilo koje vrste linije;
  • Možete kreirati i horizontalne i vertikalne linije. Da biste napravili okomite linije, morate promijeniti ivicu-vrh u rub-lijevo i rub-dolje u rub-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, nije ni potrebno penjati se u css. Za to se koristi oznaka.

.

horizontalna linija sa html oznakom

Prva karakteristika 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- definira dužinu naše horizontalne linije u pikselima ili procentima;
  • boja– definira boju linije;
  • Poravnajte– postavlja poravnanje linije prema desnoj ivici - desno, prema lijevoj ivici - lijevo, prema centru - centar;
  • veličina– debljina linije u pikselima.

Evo primjera html koda.