Zdravo, danas ćemo pričati o tako važnom atributu u CSS-u kao što je stvaranje granice. Granica se vrlo često koristi za uokvirivanje teksta, za odvajanje jednog elementa dizajna od drugog i korisno je za svakog webmastera da zna kako definirati ivicu u CSS-u.
Postavite stil ivice u CSS-u.
Prva stvar koju trebate pitati kada kreirate obrub na vašoj web stranici je CSS stil ivice. Zahvaljujući tome, obavijestit ćete pretraživač u kojoj liniji da prikaže okvir. Na primjer, postavimo samo punu liniju za jedan naslov, kao na regularnim okvirima. Da bismo to uradili, naravno, potrebna nam je datoteka stila koju možete sami kreirati, a kako to učiniti, već sam opisao u drugim člancima na svom blogu.
Neću stvarati novi fajl ali ću koristiti stari, osim toga, ovdje su sačuvani naslovi različitim nivoima za koje ćemo kreirati okvire. Hajde da pitamo različite vrste okvir za naslov prvog nivoa i koji je postavljen oznakom h1. Da bismo to učinili, u datoteku stila upišemo sljedeći tekst: h1 (border-style: solid;) i ukratko razmotrimo ono što smo napisali. h1 je ono što smo definirali za koji element ćemo postaviti granicu, naredbu u stilu granice što znači da za dati element morate postaviti okvir određenog stila, a puna oznaka označava stil prikaza okvira, u ovaj slučaj to je solidna karakteristika.
Možemo promijeniti stil prikaza okvira i za to samo trebamo podesiti nove parametre i sada ću pokazati koje su komande dostupne i kako se prikazuju na stranici.
Opcije okvira:
čvrsta ili puna linija.
Isprekidana-tačkasta linija.
isprekidana-isprekidana linija.
dupla - dupla puna linija.
Ovo su osnovni stilovi koje možete postavite stil ivice u css, možete saznati više o svim naredbama iz CSS specifikacije.
Do sada smo stilizirali cijeli okvir, ali također možemo postaviti parametar posebno za bilo koju stranu, a stylesheet nam daje tu mogućnost. Četiri naredbe će nam pomoći u tome: border-left-style (lijeva linija), border-top-style (gornja linija), border-right-style (desna linija) i border-bottom-style (donja linija).
Hajde da sada damo našem zaglavlju drugačiji stil za svaku stranu. Napišimo naredbu za sve četiri strane:
h1(
border-left-style:groove;
border-top-style:solid;
border-right-style:double;
border-bottom-style:dotted;)
A u praksi ćemo vidjeti sljedeći rezultat.
Da bismo postavili ivicu, trebamo koristiti atribut stila border-width za koji možemo postaviti nekoliko parametara: prvi je podesiti veličinu obruba u pikselima ili postaviti debljinu tankim (tanka linija), srednjim (srednjim). linija) ili debela (debela linija) komande. Također možemo podesiti debljinu linije za bilo koju stranu okvira, bez obzira koji stil je postavljen za ostatak.
Hajde da prvo naučimo kako postaviti širinu granične linije direktno za sve strane. Da bismo to učinili, samo trebamo uzeti i postaviti naredbu border-width i definirati veličinu linije za nju. Da biste podesili debljinu, tekst će izgledati ovako:
h1(
border-style:solid;
border-width:thin;
}
Tanka komanda se može zamijeniti srednjom ili debelom, ili možete odrediti debljinu u pikselima, pazeći da navedete jedinicu mjere, na primjer, veličinu od četiri piksela-4px.
Sada ćemo postaviti parametre debljine za svaku stranu našeg okvira. Kao i kod postavljanja stila, parametri border-left-width (debljina lijeve linije), border-top-width (debljina gornje linije), border-right-width (debljina desne linije) i border-bottom-width (debljina donje linije) će nam pomoći. linije). Da bismo to učinili, u datoteku stila ćemo dodati četiri reda sljedećeg sadržaja:
h1(
border-style:solid;
border-left-width:medium;
border-top-width:thin;
border-right-width:thick;
border-bottom-width:7px;
}
I sada će sve četiri strane našeg okvira imati svoju debljinu.
Kako postaviti boju obruba u CSS-u.
Postavimo sada boju obruba u CSS-u, a naredbe border-left-color, border-top-color, border-right-color i border-bottom-color će nam pomoći u tome da postavimo boju za lijevo, gore, desno i donje granične linije, respektivno. Da bismo to učinili, propisujemo naredbe i svakoj naredbi dodajemo parametar boje.
h1(
border-style:solid;
border-left-color:#00CCCC;
border-top-color:#6633CC;
border-right-color:#CCCCCC;
border-bottom-color:#66CC99;
}
A sada da vidimo rezultat prijave dati parametar.
Određivanje globalne varijable za skraćenje unosa.
Sada da vidimo kako se možemo riješiti tako glomaznih struktura i unosa. Da bismo to učinili, morat ćemo postaviti globalnu granicu atributa u koju ćemo postaviti parametre kao što su debljina okvira, stil okvira i boja, a sve to neće stati u najmanje tri reda, već samo u jednu liniju.
Da bismo to učinili, pišemo liniju:
h1(
border:5px solid #3399FF;
}
u liniji prvo označavamo debljinu linije okvira, zatim razmak i označavamo stil okvira, a opet nakon razmaka označavamo boju okvira. To je sve što smo sveli rekord na jedan red.
Nadam se da ćete zahvaljujući ovom članku moći postaviti granice za sve elemente u CSS-u. Pokušao sam da zaustavim vašu pažnju na najpotrebnijim komandama i detaljno vam ispričam kako postaviti ivicu u CSS-u, podesiti stil ivice u CSS-u i postaviti boju ivice u CSS-u.
Da bi se sadržaj jedne ćelije jasno odvojio od druge, ćelijama se dodaju ivice. Odgovoran za njihovo stvaranje granični parametar tag
| Cheburashka | Krokodil Gena | Shapoklyak |
Ovako kreirani okviri malo se razlikuju po izgledu u različitim pretraživačima.
Rice. 1. Okvir dobiven korištenjem parametra granice
Da biste dobili okvir jedne vrste, preporučljivo je koristiti okvir oznake stila, primjenjujući ga na ćelije tablice (oznaka
| 0 | X | X |
| 0 | 0 | X |
| X | X | 0 |
Razlika između ivica tabele sa i bez parametra border-collapse prikazana je na Sl. 2.
a
b
Rice. 2. Izgled tabele kada se koristi atribut border-collapase
Na sl. 2a prikazuje podrazumevani okvir tabele. Imajte na umu da su unutar tabele sve linije dvostruke širine. Dodavanje parametra border-collapse uklanja ovu osobinu, a debljina svih linija postaje ista (slika 2b).
Da biste razvili linije istog tipa unutar tabele, možete ići drugim putem. Treba dodati za selektor
| 0 | X | X |
| 0 | 0 | X |
| X | X | 0 |
Ova metoda može imati varijacije, na primjer, za selektor
ili
U ovom primjeru, boja pozadine web stranice se unosi preko svojstva pozadine dodatog selektoru BODY. Iako Bijela boja je zadano, ponekad je poželjno postaviti ga tako da korisnik ne specificira svoju boju pozadine kroz postavke pretraživača. Linije tabele takođe treba da imaju istu boju, u tom slučaju nisu jasno prikazane i samo dele ćelije među sobom. Rezultat primjera 4 prikazan je u nastavku.
Rice. 3. Vrsta ivica koje odgovaraju boji pozadine Okvir stola važan element. Svestran je i često se koristi. Ovaj vodič će pokriti kako uokviriti tabelu, ćeliju i red koristeći atribut, ali glavni dio tutorijala će se fokusirati na css svojstva, jer granica postaje generička kada se koriste CSS stilovi. Kreiranje okvira pomoću atributaUopće nije proširiv atribut, rekao bih besmislen. Atribut border postavlja širinu ivice i to je to. Slijedi primjer:
Jednostavan način za kreiranje obruba oko elementaKažem odmah detaljne evidencije Neću dati, jer će u budućnosti biti ogromna lekcija o graničnoj imovini, a možda i više od jedne. Generic Property border može odjednom postaviti debljinu, stil i boju ivica (okvirova). Debljina može biti bilo koja, boja ivica je postavljena u heksadecimalnom formatu, rgb format I ključne riječi(crvena, crna, itd.). Koji su stilovi, slika ispod (slika je preuzeta sa stranice htmlbook.ru), a zatim primjer: td( Okvir lijevo, desno, dolje i goreKada koristite obrub, ivica se kreira sa svih strana. Ali možemo kontrolirati s koje strane da nacrtamo okvir. Ivica lijevo ivica lijevo: 2px puna crna ; granica-desno granica-desno: 1px točkasto #FF0000 ; donja granica border-bottom: 10px solid #000000 ; border-top: 1px puna zelena . Kao što vidite, ne moraju imati iste vrijednosti, a možete ih i kombinirati, odnosno napisati nekoliko, na primjer, lijevu i desnu ivicu (okvir) itd. Sve. Neću se penjati dalje, ovo je tema druge lekcije. primjer: sto( Zaobljeni ugloviDotaknimo se sada teme "lijepih stvari" i upotrebljivosti. Da bi rubovi granica bili zaobljeni, postoji svojstvo radijusa granice. I jeste zasebna lekcija, nećemo ulaziti u detalje. On prihvata različit iznos argumenti. Napisaćemo (samo u ovoj lekciji) jedan argument, a ako zapišemo jednu vrijednost, onda će biti isto zaokruživanje na svim stranama (uglovima). Vrijednost može biti u različitim "mjerama", kao što su pikseli i procenti. Slijedi primjer: td( Margine ili paddingDa tekst ne bi bio odmah pored okvira, potrebno je da ga uvučete. Svojstvo padding će nam pomoći u tome. Također je multifunkcionalan, ali ćemo ga djelimično razmotriti, sve iz istog razloga. Koristićemo samo jednu vrijednost. Vrijednost može biti u različitim "mjerama", kao što su pikseli i procenti. Slijedi primjer: td( Vlad Merzhevich OD koristeći CSS Možete dodati ivicu elementu na nekoliko načina. U osnovi, naravno, koristi se svojstvo granice, kao najsvestranije, kao i obris i, iznenađujuće, box-shadow, čiji je glavni zadatak stvaranje sjene. Pogledajmo ove metode i njihove razlike. outline propertyNajjednostavnije svojstvo za kreiranje okvira. Ima iste parametre kao i border, ali se značajno razlikuje od njega u nekim detaljima:
Postavlja se pitanje - u kojim slučajevima je potreban okvir, kada njegovu ulogu, uprkos navedenim razlikama, u potpunosti preuzima granica? Nema toliko situacija, ali se dešavaju:
Raznobojni okviriMora se shvatiti da obris ni na koji način ne zamjenjuje granicu i može postojati s njom, kao što je prikazano u primjeru 1. Primjer 1: Kreirajte okvir
U ovom primjeru, oko elementa je dodat crni okvir, koji je od pozadine odvojen bijelim okvirom (slika 1). Rice. 1. Ivica oko elementa Okvir kada koristite:hoverDodavanje obruba preko ivice povećava širinu elementa, što je prilično uočljivo kada se kombiniraju ivica i :hover pseudoklasa. Postoje dva načina kako "pobijediti". Najjednostavnije je zamijeniti ivicu s outlineom, za koji znamo da nema utjecaja na veličinu elementa (primjer 2). Primjer 2: Okvir pri lebdenju
obris nije uvijek prikladan, makar samo zato što na njega ne utiču zaobljeni uglovi. Ovdje je prikladna druga metoda - dodajte nevidljivu ivicu ili ivicu koja odgovara boji pozadine, a zatim promijenite njene parametre pri lebdenju (primjer 3). Tada neće doći do pomaka elementa, jer je okvir u početku već tu. Ali uvijek imajte na umu da je širina elementa zbir vrijednosti širine, granice s lijeve strane i granice s desne strane. Isto je i sa visinom. Primjer 3: Okvir pri lebdenju
Ivica oko polja obrascaNeki pretraživači (Chrome, Safari, najnoviji Verzije Opera) mali tekstualni okvir se prikazuje oko polja obrasca kada dobiju fokus. okvir u boji(Sl. 2). Da biste ga uklonili, dovoljno je dodati vrijednost none svojstvu outline u stilovima, kao što je prikazano u primjeru 4. Rice. 2. Okvir oko polja Primjer 4. Uklonite okvir
Okviri preko box-shadowIako je svojstvo box-shadow namijenjeno za dodavanje sjene oko elementa, može se koristiti i za kreiranje ivica, i to onih koje se ne mogu učiniti s border ili outlineom. To je zbog činjenice da broj sjenki može biti neograničen, čiji su parametri navedeni odvojeni zarezima. Da biste dobili okvir, prva tri parametra treba postaviti na nulu, oni su odgovorni za položaj sjene i njeno zamućenje. Četvrti parametar u ovom slučaju je odgovoran za debljinu ivice, a peti određuje boju okvira. Za drugi okvir, četvrti parametar je jednak zbiru debljina dva okvira. Primjer 4 pokazuje kako dodati dva okvira i jednu ivicu desno koristeći jedno svojstvo sjene okvira. Primjer 4: Korištenje box-shadow
Rezultat ovaj primjer prikazano na sl. 3.
Rice. 3. Okviri kreirani svojstvom box-shadow CSS specifikacija daje neograničene mogućnosti za dizajn tabela. Prema zadanim postavkama, ćelije tabele i tabele nemaju vidljive granice ili pozadinu, a ćelije unutar tabele nisu blizu jedna drugoj. Širina ćelija tabele određena je širinom njihovog sadržaja, tako da širina kolona tabele može biti različita. Visina svih ćelija u nizu je ista i određena je visinom najviše ćelije. Formatiranje tabele1. Granice tabliceTabela i ćelije u njoj se podrazumevano prikazuju u pretraživaču bez vidljivih granica. Granice tablice postavljeni su graničnim svojstvom: Tabela ( border-collapse: kolaps; /*ukloni prazni prostori između ćelija*/ granica: 1px čvrsta siva; /*postaviti vanjsku granicu za tablicu sive boje debljina 1px*/ ) Granice ćelije zaglavlja svaka kolona je postavljena za th element: Th (rub: 1px puna siva;) Granice ćelija tijela tablice su specificirana za td element: Td (rub: 1px puna siva;) Debljina granica susjednih ćelija se ne udvostručuje, tako da možete postaviti granice za cijelu tablicu na sljedeći način: Th, td (ivica: 1px puna siva;) Vanjska ivica tabele može se istaknuti dajući joj povećanu širinu: Tabela (rub: 3px čvrsto siva;) Granice se mogu postaviti djelimično: /* postaviti sivu vanjsku granicu od 3px za tabelu */ tablicu (ivica-vrh: 3px čvrsto siva; ) /* postaviti sivu granicu od 1px za ćeliju tijela tablice */ td (ivica-dno: 1px čvrsta siva;) Možete pročitati više o pograničnoj imovini. 2. Kako podesiti širinu i visinu stolaDefault širina i visina stola određena sadržajem njegovih ćelija. Ako širina nije postavljena, ona će biti jednaka širini najšireg reda (linije). Širina tabele i kolona postaviti pomoću svojstva širine. Ako je tabela postavljena na tablicu (širina: 100%;) , tada će širina tablice biti jednaka širini bloka kontejnera u kojem se nalazi. Širina tabele i kolona se obično postavlja u px ili %, na primer: Tabela (širina: 600px;) th (širina: 20%;) td:first-child (širina: 30%;) Visina stola nije postavljeno. visina reda tabelama se može manipulisati dodavanjem gornjih i donjih paddinga elementima I | . Ne preporučuje se fiksiranje visine pomoću svojstva visine. | Th, td (odmak: 10px 15px;) 3. Kako postaviti pozadinu stolaDefault pozadina stola a ćelije prozirne. Ako stranica ili blok koji sadrži tabelu ima pozadinu, ona će se prikazati kroz tabelu. Ako je pozadina postavljena i za tabelu i za ćelije, tada će na mjestima gdje se pozadina tablice i ćelije preklapaju biti vidljiva samo pozadina ćelija. Pozadina za tabelu u cjelini i njene ćelije mogu biti: 4. Kolone tabeleCSS model tabele je fokusiran uglavnom na redove (redove) formirane pomoću oznake koristeći oznaku Možete postaviti pozadinu za bilo koji broj kolona; koristeći tabelu selektora td:first-child, tablicu td:last-child, možete postaviti stilove za prvu ili posljednju kolonu tabele (osim za prvu ćeliju zaglavlja tabele); koristeći selektor tablice td:nth-child (pravilo odabira stupaca) možete postaviti stilove za bilo koju kolonu tabele. Možete pročitati više o CSS selektorima. 5. Kako dodati naslov u tablicuMožete dodati zaglavlje u tablicu pomoću oznake
 Rice. 2. Primjer prikazivanja naslova ispod tabele 6. Kako ukloniti jaz između okvira ćelijaGranice ćelija tabele su podrazumevano odvojene malim razmakom. Ako postavite border-collapse: kolaps za tabelu, tada će se praznina ukloniti. Imovina je naslijeđena. Sintaksa Tabela (granica-kolaps: kolaps;) 7. Kako povećati razmak između ivica ćelijaVia granična svojstva-razmak može promijeniti razmak između granica ćelija. Ova nekretnina odnosi se na tabelu u cjelini. Naslijeđeno. Sintaksa Tabela (border-collapse: odvojeno; razmak između granica: 10px 20px;) tablica (border-collapse: odvojen; razmak obruba: 10px;) 8. Kako sakriti prazne ćelije tabeleSvojstvo praznih ćelija sakriva ili prikazuje prazne ćelije. Utječe samo na ćelije koje ne sadrže nikakav sadržaj. Ako je ćelija postavljena na pozadinu, a tabela na tablicu (border-collapse: collapse;), tada ćelija neće biti skrivena. Naslijeđeno.
 Rice. 5. Primjer skrivanja prazna ćelija stolovi 9. Izgled tabele sa svojstvom table-layoutIzgled rasporeda tabele određen je jednim od dva pristupa: fiksnim rasporedom ili automatskim rasporedom. Raspored se u ovom slučaju odnosi na to kako je širina tabele raspoređena između širine ćelija. Imovina se ne nasljeđuje. Sintaksa Tablica (raspored stola: fiksni;) 10. Najbolji rasporedi tablica1. Horizontalni minimalizamHorizontalne tabele su tabele čiji se tekst čita horizontalno. Svaki entitet je zasebna linija. Ove tabele možete stilizovati u minimalističkom stilu tako što ćete postaviti ivicu od dva piksela ispod naslova.
At u velikom broju redove ovaj dizajn tabele čini teškim za čitanje. Da biste riješili ovaj problem, možete dodati ivicu od jednog piksela ispod svih td elemenata. Td ( border-bottom: 1px solid #ccc; boja: #669; padding: 9px 8px; prijelaz: .3s linear; )/*drugi kod kao gore*/ Dodavanje efekta :hover elementu tr će olakšati čitanje minimalističkih tabela. Kada zadržite pokazivač miša iznad ćelije, ostale ćelije u istom redu se biraju u isto vrijeme, što olakšava praćenje informacija ako tabele imaju više kolona. Th ( font-weight: normal; boja: #039; padding: 10px 15px; ) td (boja: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:hover td (pozadina: #e8edff ;) 2. Vertikalni minimalizamIako se takve tabele retko koriste, vertikalno orijentisane tabele su ipak korisne za kategorizaciju ili poređenje opisa objekata predstavljenih kolonom. Možete ih stilizirati u minimalističkom stilu dodavanjem razmaka za odvajanje stupaca. Th ( font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; ) td ( border- desno: 30px solid #fff; granica-lijevo: 30px solid #fff; boja: #669; padding: 12px 2px; ) 3. "Upakovan" stilNajpouzdaniji stil za dizajniranje stolova svih vrsta je takozvani "kutijasti" stil. Dovoljno je izabrati dobro sema boja, a zatim postavite boju pozadine za sve ćelije. Ne zaboravite da naglasite razliku između linija postavljanjem granica kao graničnika. Th (veličina fonta: 13px; težina fonta: normalna; pozadina: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; boja: #039; padding: 8px; ) td (pozadina : #e8edff; border-bottom: 1px solid #fff; boja: #669; border-top: 1px solid transparent; padding: 8px; ) tr:hover td (pozadina: #ccddff;) Najteže je pronaći pravu shemu boja koja će se skladno uklopiti s vašom web lokacijom. Ako je stranica opterećena grafikom i dizajnom, tada će vam biti prilično teško koristiti ovaj stil. Tabela (familija fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; veličina fonta: 14px; maksimalna širina: 70%; širina: 70%; poravnanje teksta: centar; obrub-kolaps: kolaps ; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; ) th (font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border- lijevo: 1px solid #9baff1; boja: #039; padding: 8px; ) td (pozadina: #e8edff; granica-desno: 1px čvrsta #aabcfe; granica-lijevo: 1px čvrsta #aabcfe; boja: #669; padding: 8px ;) 4. Horizontalna zebraZebra sto izgleda prilično atraktivno i udobno. Opciona boja pozadine može poslužiti kao vizuelni znak ljudima da čitaju tabelu. Th ( font-weight: normal; boja: #039; padding: 10px 15px; ) td ( boja: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:nth-child(2n) ( pozadina: #e8edff;) 5. Novinski stilDa biste postigli takozvani efekat novina, možete primijeniti obrube na elemente tablice i igrati se ćelijama iznutra. Lagani, minimalistički novinski stil mogao bi izgledati ovako: igrajte se bojama, dodajte ivice, dopunu, različite pozadine, i efekat :hover kada se lebdi iznad reda. Tabela (obrub: 1px pun #69c;) th (težina fonta: normalna; boja: #039; ivica na dnu: 1px isprekidana #69c; padding: 12px 17px; ) td ( boja: #669; padding: 7px 17px; ) tr:hover td (pozadina: #ccddff;)
Tabela (obrub: 1px pun #69c;) th (težina fonta: normalna; boja: #039; padding: 10px; ) td ( boja: #669; ivica vrh: 1px isprekidana #fff; padding: 10px; pozadina: #ccddff; ) tr:hover td (pozadina: #99bcff;)
Tabela (obrub: 1px čvrsta #6cf;) th (težina fonta: normalna; veličina fonta: 13px; boja: #039; transformacija teksta: velika slova; ivica desno: 1px čvrsta #0865c2; ivica na vrhu: 1px čvrsta #0865c2; granica-lijevo: 1px puna #0865c2; granica-dno: 1px čvrsta #fff; padding: 20px; ) td ( boja: #669; granica-desno: 1px isprekidana #6cf; padding: 10px 20px; ) 6. Pozadina stolaAko tražite brzi i jedinstven način raspored tabele, izaberite atraktivna slika ili fotografiju koja se odnosi na temu stola i postavite je kao pozadinu stola. Jpg") bez ponavljanja; background-position: 100% 55px; ) th (težina fonta: normalna; boja: #339; padding: 10px 12px; ) td ( background: url("https://website/images/ back..png"); pozadina: prozirna; ) Top Related Articles |
Rice. 3. Primjer tablica sa spojenim i podijeljenim granicama ćelija
Rice. 4. Primjer tablica sa povećanim razmacima između okvira ćelija
