Ako trebate dodati vodoravne linije u obliku razdjelnika na vaše web stranice, vaše tipične opcije uključuju dodavanje slikovnih datoteka tih redaka na vašu stranicu, no to bi vaš preglednik trebao dohvatiti i učitati te datoteke što bi moglo imati negativan utjecaj na web mjesto izvođenje. Također možete upotrijebiti granični entitet CSS da biste dodali granice koje djeluju kao linije bilo na vrhu ili na dnu elementa, stvarajući učinkovitu liniju separatora.
Ili - još bolje - upotrijebite HTML element za horizontalno pravilo.
Horizontalni pravni element
Zadana pojava horizontalnih vodova nije idealna. Da biste ih učinili ljepšima, dodajte CSS da biste prilagodili vizualni izgled tih elemenata kako biste bili u skladu s načinom na koji želite da vaša web-lokacija izgleda.
Osnovna HR oznaka prikazuje se na način na koji ga preglednik želi prikazati. Moderni preglednici obično prikazuju nestabilne HR oznake širine od 100 posto, visine od 2 piksela i 3D crte u crnoj boji kako bi stvorili liniju.
Širina i visina su dosljedni preko preglednika
Jedini stilovi koji su dosljedni preko web preglednika su širina i stilovi. Oni određuju koliko će biti linija. Ako ne odredite širinu i visinu, zadana širina je 100 posto, a zadana visina je 2 piksela.
U ovom primjeru širina je 50% od roditeljskog elementa (imajte na umu da ovi primjeri u nastavku sadrže inline stilove. U postavkama za proizvodnju, ti stilovi zapravo bi bili napisani na vanjskom listu stila za jednostavnu upravljivost na svim stranicama):
style = "width: 50%;">
I u ovom primjeru visina je 2em: style = "height: 2em;"> U suvremenim preglednicima preglednik gradi liniju podešavanjem granice. Dakle, ako uklonite granicu sa svojstvom stila, linija će nestati na stranici. Kao što možete vidjeti (dobro, nećete vidjeti ništa, jer će linije biti nevidljive) u ovom primjeru: style = "granica: none;">
Podešavanjem veličine, boje i stila granice linija će izgledati drugačija i ima isti učinak u svim modernim preglednicima. Na primjer, u ovoj demonstraciji granica je crvena, isprekidana i široka 1 x: style = "border: 1px crtkana # 000;">
Ali ako promijenite granicu i visinu, stilovi se malo razlikuju u vrlo zastarjelim preglednicima nego u modernim preglednicima. Kao što možete vidjeti u ovom primjeru, ako ga pogledate u IE7 i dolje (preglednik koji je zastrašeno zastario i više ne podržava Microsoft) postoji unutarnja linija koja se ne prikazuje u drugim preglednicima (uključujući IE8 i više) : style = "height: 1.5em; širina: 25em; granica: 1px solid # 000;">
Ovi antiqued preglednici zaista nisu puno zabrinutosti u web dizajnu danas, jer su uglavnom zamijenjeni suvremenijim mogućnostima. Umjesto boje, možete definirati pozadinsku sliku horizontalnog pravila tako da izgleda točno onako kako to želite, ali i dalje prikazuje semantički u svom označavanju. U ovom primjeru koristili smo sliku koja je od tri valovite linije. Ako ga postavite kao pozadinsku sliku bez ponovljenih, stvara prekid sadržaja koji izgleda gotovo kao što vidite u knjigama: style = "height: 20px; pozadina: #fff url (aa010307.gif) ne-ponavljanje centara za pomicanje; border: none;"> Uz CSS3, linije možete učiniti zanimljivijima. Element HR je tradicionalno a vodoravan line, ali s CSS pretvorbom imovine, možete promijeniti kako izgledaju. Omiljena transformacija na HR elementu je promjena rotacije. Možete rotirati svoj HR element tako da je samo malo dijagonalno: hr {-MAG-transformacija: rotiranje (10deg);-webkit-transformacija: rotiranje (10deg);-o-transformacija: rotiranje (10deg);-ms-transformacija: rotiranje (10deg);transformacija: rotiranje (10deg);}
Ili ga možete zakrenuti tako da je potpuno vertikalna: hr {-MAG-transformacija: rotiranje (90deg);-webkit-transformacija: rotiraj (90deg);-o-transformacija: rotiraj (90deg);-ms-transformacija: rotiranje (90deg);transformacija: rotirati (90deg);}
Imajte na umu da ova tehnika rotira HR na temelju trenutne lokacije u dokumentu, tako da ćete možda trebati prilagoditi pozicioniranje da biste je dobili tamo gdje želite. Nije preporučljivo upotrijebiti ovo za dodavanje okomitih crta na dizajn, ali to je način privlačenja zanimljivog efekta. Jedna stvar koju neki ljudi rade umjesto korištenja HR elementa jest oslanjanje na granice drugih elemenata. Ali ponekad je HR mnogo prikladniji i lakši za korištenje od pokušaja postavljanja granica. Problemi modela kutija nekih preglednika mogu učiniti postavljanje granice čak i trickier. Promjena granica može biti izazovna
Napravite dekorativnu liniju sa pozadinskom slikom
Transformiranje HR elemenata
Drugi način za dobivanje redaka na stranicama
