Kako bismo naglasili neke posebno važne elemente web stranice, ne bi škodilo koristiti sve vrste CSS stilova i svojstava koja su za to predviđena. Naravno, ne morate se zamarati tekstom i istaknuti ga, na primjer, podebljano ili u kurzivu, promijeniti pozadinu ili napraviti okvir oko teksta. Ali nije uvijek jedna od predstavljenih metoda prikladna. Recimo da imate tekst koji treba odvojiti zbog specifičnosti njegovog semantičkog opterećenja. Ovdje dolaze HTML i CSS svojstva.

Kako napraviti liniju u tekstu pomoću CSS -a

Da bismo implementirali naš plan, moramo se pozvati na style.css datoteku upisivanjem odgovarajuće imovine u nju granica... Ovo će stvoriti red iznad, ispod ili na određenoj strani teksta. Zauzvrat, postoji nekoliko svojstava koja su odgovorna za prikaz linije, naime:

- border-top- vodoravna linija iznad teksta;

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

- granica-dno- vodoravna linija ispod teksta;

- granica-lijevo- okomita linija lijevo.

Kako napraviti liniju u html -u

Pomoću svojstava CSS -a možete zapisati sve potrebne vrijednosti uređivanjem HTML koda. Da biste to učinili, morate otići u administrativni dio web stranice. Odaberite jedan od objavljenih materijala, prebacite uređivač teksta u način uređivanja HTML koda i dodajte svojstva CSS -a. Uzorak se može vidjeti ispod.

Kratko objašnjenje naredbi

- width- dužina linije;

- solid- puna linija;

- tačkasto- tačkasta linija.

Za dublje upoznavanje sa stilovima, preporučujem da pročitate ovaj.

Potrebno je razumjeti da se u procesu izmjena koda web lokacije svojstva koja određuju vrstu linije, njenu debljinu i boju navode kao odvojena razmakom.

Ova metoda ima nekoliko prednosti:

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

Lakoća unosa svih potrebnih promjena izravno u HTML kod. Ovo uvelike pojednostavljuje zadatak neiskusnim graditeljima web stranica.

Kako napraviti ravnu vodoravnu liniju pomoću HTML oznake

---

Prvo na što bih vam želio skrenuti pažnju je da ova oznaka, unatoč svim suptilnostima i principima html -a, nema završnu oznaku. Može se koristiti bilo gdje u html kodu, između oznaka i.

Atributi oznaka

---

- width- odgovoran je za dužinu linije. Može se navesti i u postocima i u pikselima.

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

- boja- definira boju linije.

- poravnati- atribut odgovoran za poravnanje linija. Zauzvrat, tim se na to poziva.

U osnovi, vodoravne linije koriste se za ukrašavanje HTML stranica web stranice, dajući im atraktivniji izgled. Ali mogu i vizualno razgraničiti informacije iz susjednih odjeljaka, dodajući čitateljima praktičnost pri njihovom proučavanju. Općenito, nacrtajte vodoravne linije gdje trebate, to je sve.

Kako nacrtati vodoravnu liniju?

Postoji posebna oznaka za crtanje vodoravnih linija u HTML -u

---

... Štaviše, on je block tag, odnosno stvara prijelome redova prije i poslije sebe, pa se linija uvijek dobiva na zasebnom retku. U skladu s tim, može se navesti samo unutar oznaka koje mogu sadržavati elemente bloka, na primjer ili

... Ali ja

---

ne može imati sadržaj, jer jednostavno nema završnu oznaku, odnosno prazna je.

Primjer crtanja vodoravnih linija u HTML -u

---

Paragraf.

Paragraf.

---

Paragraf.

Rezultat u pretraživaču

Paragraf.

Paragraf.

Paragraf.

Kao što vidite, linije su vrlo tanke, neopisive i iscrtane do pune dostupne širine, pa ćemo sada naučiti kako ih promijeniti kako bi izgledale privlačnije.

Kako mogu promijeniti boju, debljinu i širinu vodoravnih linija?

U starijim verzijama HTML -a oznaka

---

postojali su posebni atributi pomoću kojih je bilo moguće promijeniti boju, debljinu i širinu vodoravnih linija. To su boja, veličina i širina. Ali u novijim verzijama oni su odbačeni u korist Cascading Style Sheets (CSS), pa ćemo, pogađate, opet koristiti naš omiljeni atribut stila. Opšta sintaksa je:

---

style = "background: color">- boja linije (ili bolje rečeno njena pozadina).

---

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

---

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

---

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

Boja se može navesti imenom na engleskom ili HEX-kodom boje, kojoj prethodi hash (#). Pa, o ovome već znate od lekcije nadalje promjena boje teksta i pozadine.

No, o promjeni veličine ćemo govoriti detaljnije. Sjećate li se iz vodič za promjenu fontova, postoji oko deset jedinica u CSS -u, ali širina linije može se navesti samo u pikselima (px) i postocima (%), i debljinu općenito samo u pikselima. Ako isporučujete druge jedinice, to neće biti greška, već će ih preglednici jednostavno zanemariti.

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

Kao što sam rekao, samo širina linije može se navesti kao postotak. Veličine postotaka uvijek ovise o i izračunavaju se na osnovu veličine elementa nadređenog spremnika, unutar kojeg se nalazi oznaka

---

... U ovom slučaju, veličina roditelja se uzima kao 100%. Na primjer, ako postavimo oznaku

---

style = "width: 50%"> unutrašnji element

, tada bez obzira na to kako promijenili veličinu prozora preglednika ili rezoluciju monitora - širina linije uvijek će biti polovina širine bloka

.

Primjer promjene boje, debljine i širine vodoravnih linija.

---

---

---

---

Rezultat u pretraživaču

Promjena položaja vodoravnih linija

Kada promijenite širinu vodoravne linije, postaje jasno vidljivo da je preglednici uvijek postavljaju u središte. Ako želite promijeniti njegov položaj, samo upotrijebite iznutra

---

poravnajte atribut sa sljedećim vrijednostima:

• centar- linija je centrirana (zadana vrijednost).
• lijevo- pritisnuto uz lijevu ivicu.
• desno- pritisnuto uz desnu ivicu.

Primjer poravnavanja vodoravnih linija.

---

---

---

Rezultat u pretraživaču

Kako mogu ukloniti granicu oko linije?

Pogledajte prvi primjer ovog vodiča. Šta mislite koju boju imaju ove linije? I tu je pogrešno. Oni su prozirni, kao i svi elementi stranice koji nemaju boju pozadine! Ne verujete mi? Zatim pogledajte primjer gdje smo promijenili boju linija. Za prvu nismo postavili boju, već smo samo povećali njenu veličinu, nije li ova linija prozirna? Tako da!

Sad ću objasniti. Preglednici prema zadanim postavkama iscrtavaju granice oko linija, što stvara trodimenzionalni efekt. Dakle, kada ne povećavamo debljinu vodoravnih linija, preglednici nam prikazuju samo te okvire, budući da je debljina same linije 0px.

Da bismo uklonili obrub oko linije, koji često samo pokvari izgled, ponovno ćemo primijeniti atribut stila. A napisano je ovako:

---

Zadaća.

1. Kreirajte naslove članaka, odjeljaka i pododsjeka. Centrirajte ih sve.
2. Postavite cijelu stranicu na Arial i Courier za zaglavlja.
3. Neka veličina fonta na cijeloj stranici bude 85% zadane veličine preglednika. Naslovi imaju 145%, 125%i 110%veličine fonta na stranici.
4. Napišite odlomak pod prvim naslovom, dugačak citat pod drugim i pjesmu pod trećim. I neka pjesma bude centrirana na stranici.
5. U citatu istaknite tri riječi podebljano.
6. Ispod naslova članka povucite crvenu vodoravnu liniju od tri piksela po cijeloj širini stranice.
7. Na vrhu i dnu pjesme nacrtajte crne linije od jednog piksela. Neka širina gornje linije bude približno jednaka širini stiha, a donja linija upola manje.
8. Uklonite nepotrebne okvire iz linija.

Od autora: Pozdravljam vas. Potreba da se nekoliko blokova na web stranici prikaže u jednom retku vrlo je čest zadatak koji se javlja dizajnerima izgleda. Javlja se pri izgledu gotovo svakog predloška, ​​pa svi u svakom slučaju moramo znati i primijeniti osnovne metode promjene ponašanja blokova.

Prije nego što pogledamo najčešće trikove, želio bih se prisjetiti male teorije. Elementi web stranica podijeljeni su na blok i liniju. I razlika između njih je vrlo jednostavna - mala se slova mogu nalaziti na jednoj liniji, ali ne mogu blokirati. Naravno, tu razlike ne prestaju, ali ovo je glavna razlika. Blokovi već mogu imati gornje i donje margine (mala slova nemaju), a na njih se može primijeniti više svojstava.

Glavni načini za postavljanje blokova u red u css -u

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

Pretvorite blokove u ugrađene elemente. Istovremeno se gube svojstva bloka, pa se ova opcija gotovo nikada ne koristi.

Učinite željene elemente blok-umetnutim. Ovo je posebna vrsta u kojoj element zadržava svoja svojstva, ali istovremeno omogućuje pozicioniranje drugih blokova jedan pored drugog.

Plutajte elemente koristeći svojstvo float.

Zadržimo se na ovim opcijama. Flexbox, tabelarni prikaz i druge točke neće se uzeti u obzir. Dakle, recimo da imamo 3 podnaslova.

Naslov 1

Naslov 2

Naslov 3

Naravno, sva svojstva css -a moraju biti zapisana u zasebnoj datoteci (style.css), koja mora biti povezana s html dokumentom. U ovu datoteku ću napisati minimalni stil tako da se naši podnaslovi mogu lako vidjeti.

h3 (pozadina: #EEDDCD;)

h3 ( pozadina: #EEDDCD;

Evo ih na stranici:

Tamo se ponašaju kao blokovi. Svaki se nalazi na svojoj liniji, između njih postoje uvlake. Ako želite, možete postaviti i bilo koje unutrašnje uvlake koje želite i općenito radite sve što želite.

Pretvorite u linije i odmah dodajte zaostajanje. Da biste to učinili, dodajte sljedeća svojstva u h3 birač:

display: inline; padding: 30px;

Postoje 2 glavna problema s ovom tehnikom. Prvi je minimalni padding. Nastaje zbog činjenice da postoji jedan razmak između blokova u kodu, koji tvori ovo uvlačenje. Ako ovaj problem treba riješiti, postoje 2 glavne opcije:

U html -u rasporedite kôd potrebnih blokova u jedan red bez razmaka

Postavite negativnu marginu desno od -4 piksela. Toliko je potrebno jednom prostoru.

Drugi problem je što se problemi s prikazom mogu pojaviti s različitim visinama elemenata. Općenito, plutajući blokovi su najbolja opcija. Umjesto display: inline-block, pišemo ovo:

Blokira u skladu pomoću okvira

Moram odmah reći da ako ćete koristiti bilo koji normalan css okvir (na primjer, Bootstrap), tada je tamo još mnogo lakše. Sav css kod odgovoran za raspored elemenata već je napisan i samo ćete morati postaviti ispravne klase. Sve što trebate učiniti je naučiti grid sistem i možete stvoriti responzivne predloške s više stupaca bez previše poteškoća. Barem će to biti mnogo lakše nego pisati css ispočetka.

Još jedan izazov pisanja koda od nule pojavljuje se baš kad vam je potreban responzivan dizajn. Naravno, možete ga sami implementirati posjedovanjem medijskih upita, ali bit će mnogo teže ako imate složen predložak.

Na primjer, kada biste trebali imati 4 stupca na velikim ekranima, 3 na srednjim i 2 na mobilnim telefonima. Uz pomoć takvih okvira kao što je Bootstrap, bolje rečeno s njegovom mrežom, potrebno je samo nekoliko minuta za implementaciju takve stvari .

Lagano prenoseći temu u Bootstrap okvir, još jednom ću primijetiti da ako se suočite sa zadatkom stvaranja složenog responzivnog predloška, ​​onda je jednostavno grijeh ne koristiti rešetku. Da biste to učinili, nije potrebno čak ni povezivanje pune verzije okvira - možete ga prilagoditi i tu zaustaviti samo ono što vam zaista treba.

Možete naučiti kako raditi s okvirom. Objašnjava i teoriju, ali najvažnije je da postoji praksa. Izradit ćete 3 responzivna predloška i steći sjajno iskustvo koje će vam omogućiti da izradite web stranice po narudžbi ili za sebe. A ako želite besplatno pogledati prednosti i mogućnosti okvira, predlažem da pogledate našu seriju članaka o Bootstrapu i jednostavnom izgledu. Želim vam uspjeh u izgledu i izgradnji web mjesta općenito.

Prilikom stvaranja HTML stranice izgled igra bitnu 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, štoviše, značajno mijenjaju njezinu percepciju i izgled općenito. Jedan od najvažnijih elemenata za dizajn je vodoravna linija, a dalje ćemo detaljnije naučiti kako s njom raditi i kako napraviti vodoravnu liniju u html -u.

Šta je vodoravna linija i čemu služi

Vodoravna linija u html -u element je dizajna stranice koji obavlja brojne funkcije:

1. Dekorativno... Pomaže u dodavanju atraktivnosti stranici.
2. Podjela... Promoviše efikasno razdvajanje informacija različitog značenja.
3. Naglašavanje ili podvlačenje... Skreće pažnju gostima stranice na potrebne i najvažnije informacije.

Horizontalna linija smatra se najpristupačnijim načinom implementacije brojnih funkcija. Stvoriti ga je vrlo jednostavno, ali izvana izgleda vrlo isplativo. Jednostavnim promjenama html koda možete regulirati:

• dužina;
• širina;
• karakteristike boje;
• poravnanje prema jednom ili drugom rubu.

Imajte na umu da se vodoravna linija odnosi na blokovske elemente. To znači da zauzima novi red na stranici, a tekst koji slijedi ide ispod.

Kako stvoriti vodoravnu liniju u HTML -u

Liniju možete postaviti pomoću jednostavne oznake - hr u trokutnim zagradama. Skraćenica je od "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 samostalno. Možete promijeniti vanjske karakteristike elementa pomoću dodatnih vrijednosti u oznaci:

1. Dužina... Ako ne želite da se dužina retka proteže preko cijele stranice, tada možete postaviti željenu veličinu u pikselima ili postocima. To se radi uz pomoć dodatne riječi "width" u oznaci i numeričkog indikatora dužine navedenog iza znaka "=" u navodnicima.

Izgleda ovako. Na primjer, ako nam je potrebna dužina od 100 piksela, postavili bismo oznaku ovako: hr width = "100"

1. Poravnanje... Poravnanje je moguće na lijevoj ili desnoj ivici, a također i u sredini. Ova značajka je važeća samo ako ste već naveli parametar širine, jer se red preko cijele stranice ne može poravnati. Za poravnanje, postavite dodatni atribut u oznaku "align" i dodajte 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 moramo postaviti središnje poravnanje za vodoravnu liniju duljine 150 piksela, tada će gotova oznaka izgledati ovako: hr align = "center" width = "150".

Imajte na umu da je "align", mjera za poravnanje, stavljena u poziciju 1, iako atribut ovisi o širini mjere dužine.

1. Width... Opcionalno, možete odrediti i širinu, stvarajući podebljano ili tanko podcrtavanje. Ovaj kriterij ne ovisi ni o čemu i može se koristiti neovisno bez navođenja duljine ili poravnanja. Za to koristimo atribut size u oznaci i numeričku vrijednost jednaku željenoj širini u pikselima. Broj je naveden pod navodnicima iza atributa size i simbola "=".

Stoga, ako moramo stvoriti liniju širine 15 piksela, moramo stvoriti sljedeću oznaku: hr size = "15".

1. Boja... Takođe je postavljen kao nezavisni indikator. Da biste ga promijenili, upotrijebite atribut boje u kombinaciji s nazivom boje u obliku koda ili na engleskom jeziku. Boja je navedena pod navodnicima iza simbola "=".

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

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

1. Skloniti senka... Ako vam je potreban element koji ne sadrži sjenu, tada bi se atribut noshade trebao koristiti 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

Napravite vodoravnu liniju pomoću videa

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

Nakon što ste odredili potrebne dimenzije vodoravne linije, stranice web stranice možete dizajnirati na takav način da su informacije strukturirane i vizualno kompetentno uokvirene. To pomaže posjetiteljima da lakše percipiraju predstavljene informacije i učine da se vaša web lokacija izdvoji od drugih.

Pozdrav svim čitaocima. S vremena na vrijeme čarobnjaci se suočavaju s problemom kako napraviti vodoravnu ili okomitu liniju pomoću HTML -a ili pomoću CSS -a. Ovo ću vam danas reći.

Linije u CSS -u

Postoji nekoliko načina za crtanje linija. Jedan od takvih načina je korištenje CSS -a. Tačnije, uz pomoć Border -a. Uzmimo primjer.

I ovo će biti rezultat.

Vodoravna i okomita linija pomoću css -a.

Linije u CSS -u mogu se povući pomoću naredbe Border. Ako samo želite pravokutnik s fiksnom širinom ivice, možete jednostavno upotrijebiti ovaj operator i postaviti mu vrijednost. Na primjer obrub: 5px solid # 000000; će značiti da su granice bloka široke 5 piksela u crnoj boji.

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

• border -top - postavlja vrijednost gornje ivice
• border -bottom - postavlja vrijednost donje ivice
• border -left - Postavlja vrijednost lijeve ivice
• border -right - Postavlja vrijednost desne granice.

Okomita i vodoravna linija u HTML -u

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

U tom slučaju će se povući vodoravna linija, visine jednog piksela i pune širine.

Ali ovom oznakom možete postaviti neke vrijednosti.

• Width- postavlja vrijednost širine linije.
• Boja- postavlja boju linije.
• Align- postavlja poravnanje lijevo, središte, desno
• Veličina- postavlja vrijednost širine linije u pikselima.

Pomoću oznake hr možete definirati i okomitu liniju. Ali u ovom slučaju morat ćete ponovo pribjeći stilovima.

U ovom slučaju, okomita linija bit će povučena stotinu piksela, debljine jednog piksela i uvučena pet piksela.

Zaključak.

Pa, sada znate kako možete postaviti okomitu i vodoravnu liniju. Linije se mogu postaviti i na uobičajenim web lokacijama pomoću HTML -a i postaviti na web mjestu koje koristi CMS, na primjer, WordPress, ali u ovom slučaju morate se prebaciti u HTML način.

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