Css boja obruba tablice. Postavljanje okvira s jednim svojstvom

26.04.2019 Zanimljiv

Pozdrav, danas ćemo govoriti o tako važnom atributu u CSS-u kao što je stvaranje obruba. Okvir se vrlo često koristi za uokvirivanje teksta, za odvajanje jednog elementa dizajna od drugog, a svakom webmasteru korisno je znati postaviti okvir u CSS-u.

Postavite stil obruba u CSS-u.

Prva stvar koju trebate pitati kada kreirate obrub na svojoj web stranici je CSS stil obruba. Zahvaljujući tome, dat ćete pregledniku do znanja koju liniju da nacrta okvir. Na primjer, postavimo samo punu liniju za jedan naslov, kao na običnim okvirima. Za to nam je, naravno, potrebna datoteka stila koju možete sami izraditi, a kako to učiniti, već sam opisao u drugim člancima na svom blogu.

neću stvarati nova datoteka ali ću se poslužiti starim, osim toga ovdje su sačuvana zaglavlja različite razine za koje ćemo izraditi okvire. Pitajmo različiti tipovi okviri za naslov prve razine i koji je specificiran oznakom h1. Da biste to učinili, napišite sljedeći tekst u stylesheet: h1 (border-style: solid;) i brzo pogledajte što smo napisali. h1, to je ono što smo definirali za koji element ćemo postaviti granicu, naredbu u stilu obruba što znači da za ovog elementa trebate postaviti okvir određenog stila, ali puna oznaka označava stil prikaza okvira, u u ovom slučaju to je čvrsta linija.

Možemo promijeniti stil prikaza okvira i za to samo trebamo postaviti nove parametre, a sada ću pokazati koje su naredbe dostupne i kako se prikazuju na stranici.
Parametri okvira:

čvrste ili puna linija.

Isprekidana-točkasta linija.

isprekidana isprekidana linija.

double je dvostruka puna linija.

Ovo su glavni stilovi koje možete postaviti stil obruba u CSS-u, možete saznati više o svim naredbama u CSS specifikaciji.

Prije toga, postavljamo stil za cijeli okvir, ali također možemo postaviti parametar posebno za bilo koju stranu i stilska tablica nam daje tu priliku. U tome će nam pomoći četiri naredbe: border-left-style (lijevi red), border-top-style (gornji red), border-right-style (desni red) i border-bottom-style (donji redak).

Oblikujmo sada naš naslov drugačije za svaku stranu. Napišimo naredbu za sve četiri strane:

h1 (
obrub-lijevo-stil: utor;
obrub-top-stil: čvrst;
obrub-desno-stil: dvostruko;
border-bottom-style: točkasto;)

A u praksi ćemo vidjeti sljedeći rezultat.

Da bismo postavili obrub, trebamo koristiti atribut stila border-width za koji možemo postaviti nekoliko parametara: prvi je postaviti veličinu obruba u pikselima ili postaviti debljinu pomoću tanke (tanke linije), srednje (srednje) linija) ili debela (debela linija) naredbe. Također možemo postaviti težinu linije za bilo koju stranu okvira, bez obzira koji je stil postavljen za ostatak.

Najprije naučimo kako postaviti širinu granične linije izravno za sve strane. Da bismo to učinili, samo trebamo uzeti i postaviti naredbu border-width i definirati veličinu linije za nju. Kako biste podesili debljinu, tekst će izgledati ovako:

h1 (
obrubni stil: čvrst;
širina obruba: tanka;
}

Tanka naredba može se zamijeniti srednjom ili debelom, ili možete odrediti debljinu u pikselima navodeći mjernu jedinicu, na primjer, veličinu od četiri piksela-4px.

Sada ćemo postaviti opcije 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) pomoći će nam. linije). Da bismo to učinili, dodat ćemo četiri retka sljedećeg sadržaja u stilsku tablicu:

h1 (
obrubni stil: čvrst;
granica-lijevo-širina: srednja;
granica-top-width: tanka;
granica-desno-širina: debela;
obrub-dno-širina: 7px;
}

A 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 pomoći će nam da postavimo boju za lijevo, gore, desno i dolje linije granice, odnosno.... Da bismo to učinili, pišemo naredbe i svakoj naredbi dodajemo parametre boje.

h1 (
obrubni stil: čvrst;
border-left-color: # 00CCCC;
border-top-color: # 6633CC;
border-right-color: #CCCCCC;
boja obruba dna: # 66CC99;
}

A sada da vidimo rezultat aplikacije ovaj parametar.

Postavljanje globalne varijable za skraćivanje zapisa.

Pogledajmo sada kako se možemo riješiti tako glomaznih struktura i zapisa. Da bismo to učinili, morat ćemo postaviti obrub globalnog atributa u koji ćemo postaviti parametre kao što su debljina obruba, stil obruba i boja, a sve to neće stati barem u tri retka, već samo u jedna linija.

Da bismo to učinili, pišemo redak:
h1 (
obrub: 5px čvrsta # 3399FF;
}

u liniji prvo označavamo debljinu linije okvira, zatim razmak i označavamo stil okvira i opet kroz razmak označavamo boju okvira. To je sve što smo sveli rekord na jedan redak.

Nadamo se da ćete zahvaljujući ovom članku moći postaviti granice za sve elemente u CSS-u. Pokušao sam vam skrenuti pozornost na najnužnije naredbe i detaljno vam reći kako postaviti obrub u CSS-u, postaviti stil obruba u CSS-u i postaviti boju obruba u CSS-u.

Da bi se sadržaj jedne ćelije jasno odvojio od druge, ćelijama se dodaju obrubi. Odgovoran za njihovo stvaranje parametar granice označiti

koji određuje debljinu okvira.

Primjer 1 pokazuje kako stvoriti obrub oko ćelija.

Primjer 1. Dodavanje okvira u tablicu

Debljina obruba

Čeburaška

Krokodil Gena

Shapoklyak

Ovako stvoreni okviri neznatno se razlikuju po izgledu u različitim preglednicima.

Riža. 1. Okvir dobiven korištenjem parametra granice

Da biste dobili obrub iste vrste, preporuča se primijeniti oznaku stila obruba, primjenjujući je na ćelije tablice ( ili ). Međutim, i ovdje postoje zamke. Budući da se za svaku ćeliju stvara okvir, na mjestima dodira stanica dobiva se obrub dvostruke debljine. Postoji nekoliko načina za rješavanje ove značajke. Najlakše je koristiti svojstvo border-collapse postavljeno na kolaps. Njegov zadatak je pratiti kontakt linija i umjesto dvostruka granica prikazati samca. Dodajte ovaj datatkov atribut u oznaku

, a onda će sve učiniti sam (primjer 2).

Primjer 2. Korištenje border-collapse za stvaranje obruba tablice

Izrada okvira

0	x	x
0	0	x
x	x	0

Razlika između obruba tablice pri dodavanju parametra border-collapse, kao i bez njega, prikazana je na Sl. 2.

Riža. 2. Prikaz tablice kada koristite atribut border-collapase

Na sl. 2a prikazuje zadani okvir tablice. Imajte na umu da su unutar tablice sve linije dvostruke širine. Dodavanje parametra border-collapse uklanja ovu značajku, a debljina svih linija postaje ista (slika 2b).

Da biste razvili linije istog tipa unutar tablice, možete ići drugim putem. Treba dodati za selektor okvir, ali poništite redak desno i dolje postavljanjem odgovarajućih atributa na ništa. Zatim, kada se stanice spoje, njihove se granice neće preklapati jedna s drugom, iz razloga što će postojati samo jedna linija. Međutim, kod ove metode oblikovanja granica nema linija ispod i desno od same tablice. Dodavanje parametara obrub-desno i obrub-dno u birač

, na kraju ćemo dobiti željeni okvir (primjer 3). Za dosljednost treba paziti da se u svim slučajevima uskladi stil, debljina i boja obruba.

Primjer 3. Kreiranje obruba za tablicu pomoću atributa border

Izrada okvira

0	x	x
0	0	x
x	x	0

Ova metoda može imati varijacije, na primjer, za selektor obrub dodajemo samo desno i dolje, i at

naprotiv, dodajemo atribut border, ali uklanjamo redak s desne i donje strane. U svakom slučaju, prikazani rezultat bit će jedan.

Jednostavan i originalan izgled stola može se dobiti tako da se boja obruba podudara s bojom pozadine. Ali da bi linije bile vidljive, neophodno je ispuniti pozadinu oznake

... U praksi postoje trenuci kada je to potrebno posebno oblikovanje stupaca, što je moguće na sljedeće načine:

koristeći oznaku

Možete postaviti pozadinu za bilo koji broj stupaca;

pomoću tablice td: first-child, table td: last-child selektor, možete stilizirati prvi ili zadnji stupac tablice (isključujući prvu ćeliju zaglavlja tablice);

koristeći selektor tablice td: nth-child (pravilo odabira stupaca), možete stilizirati bilo koji stupac u tablici.

Možete pročitati više o CSS selektorima.

5. Kako dodati naslov u tablicu

Pomoću oznake možete dodati naslov tablici

ili ... Zatim se dobivaju ćelije tablice, kao da su izrezane rezačem između sebe (primjer 4).

Primjer 4. Upotreba nevidljive granice u stolu

Stvaranje granica

0	x	x
0	0	x
x	x	0

U ovom primjeru, boja pozadine web-stranice se ubrizgava kroz svojstvo pozadine dodano biraču BODY. Iako bijela boja je postavljeno prema zadanim postavkama, ponekad ga je poželjno postaviti tako da korisnik ne određuje svoju boju pozadine kroz postavke preglednika. Linije tablice trebale bi imati istu boju, u ovom slučaju očito nisu prikazane i samo dijele ćelije među sobom.

Rezultat Primjera 4 prikazan je u nastavku.

Riža. 3. Prikaz obruba koji odgovaraju boji pozadine

Okvir stolova važan element... Svestran je i često se koristi. Ova lekcija će vam pokazati kako napraviti obrub za tablicu, ćelije i retke koristeći atribut, ali glavni dio lekcije će se usredotočiti na CSS svojstva jer obrub postaje svestran kada se koriste CSS stilovi.

Izrada okvira pomoću atributa

Uopće nije proširiv atribut, rekao bih besmislen. Atribut border postavlja debljinu obruba i to je to. Evo primjera:

Ćelija 1

Ćelija 2

Jednostavan način stvaranja obruba oko elementa

kažem odmah detaljne evidencije Neću je dati, jer će u budućnosti biti ogromna lekcija o graničnoj imovini, a možda i više od jedne. Univerzalno svojstvo granica može istovremeno postaviti i debljinu, stil i boju obruba (okvira). Debljina može biti bilo koja, boja obruba je postavljena u heksadecimalnom formatu, rgb formatu i ključne riječi(crvena, crna, itd.). Koji su stilovi, slika ispod (slika preuzeta sa stranice htmlbook.ru) i daljnji primjer:

td (
obrub: 5px čvrsta #CCCCCC;
}

Okvir lijevo, desno, dolje i gore

Korištenje obruba stvara obrub sa svih strana. Ali možemo kontrolirati s koje strane crtati okvir. Lijevi obrub-lijevo: 2px puna crna; desna granica obrub-desno: 1px točkasto # FF0000; donja granica granica-dno: 10px solid # 000000; border-top: 1px puna zelena. Kao što vidite, ne moraju imati iste vrijednosti, kao i da se mogu kombinirati, odnosno napisati nekoliko, na primjer, lijevi i desni rub (okvir) itd. Sve. Neću dalje, ovo je tema druge lekcije. Primjer:

stol (
border-left: 5px solid #CCCCCC;
border-right: 5px solid #CCCCCC;
}
td (
border-top: 5px solid #CCCCCC;
border-bottom: 5px solid #CCCCCC;
}

Zaobljeni kutovi

Dotaknimo se sada teme "ljepote" i upotrebljivosti. Kako bi rubovi okvira bili zaobljeni, postoji svojstvo border-radius. I jest zasebna lekcija, nećemo detaljno analizirati. On prihvaća različit iznos argumentima. Napisat ćemo (samo u ovoj lekciji) jedan argument, a ako zapišemo jednu vrijednost, tada će biti isto zaokruživanje na svim stranama (uglovima). Vrijednost može biti u različitim "mjerama", na primjer, u pikselima i postocima. Evo primjera:

td (
obrub: 5px čvrsta #CCCCCC;
radijus granice: 10px;
}

Margine ili padding

Da tekst nije blizu okvira, morate ga uvući. Svojstvo padding će nam pomoći u tome. Također je multifunkcionalan, ali ćemo ga dijelom razmotriti, sve iz istog razloga. Koristit ćemo samo jednu vrijednost. Vrijednost može biti u različitim "mjerama", na primjer, u pikselima i postocima. Evo primjera:

td (
obrub: 5px čvrsta #CCCCCC;
radijus granice: 10px;
padding: 10px;

Vlad Merzhevich

S koristeći CSS Obrub elementu možete dodati na nekoliko načina. U osnovi, naravno, svojstvo granice koristi se kao najuniverzalnije, kao i obris i, iznenađujuće, kutijasta sjena, čiji je glavni zadatak stvoriti sjenu. Zatim ćemo razmotriti ove metode i njihove razlike među sobom.

Svojstvo obrisa

Najjednostavnije svojstvo za stvaranje okvira. Ima iste parametre kao i granica, ali se značajno razlikuje od nje u nekim detaljima:

oko elementa se crta obris (obrub je iznutra);
obris ne utječe na dimenzije elementa (obrub se dodaje širini i visini elementa);
obris se može postaviti samo oko cijelog elementa, ne na pojedinačnim stranama (obrub se može koristiti na bilo kojoj strani ili odjednom);
na obris ne utječe radijus zaokruživanja specificiran s sa svojstvom border-radius(djeluje na granici).

Postavlja se pitanje - u kojim slučajevima je potreban obris, kada njegovu ulogu, unatoč navedenim razlikama, u potpunosti preuzima granica? Nema toliko situacija, ali se događaju:

stvaranje složenih raznobojnih okvira;
dodavanje obruba elementu kada zadržite pokazivač miša iznad njega;
skrivanje okvira koji je automatski dodao preglednik za neke elemente kada dobiju fokus;
za obris, možete postaviti udaljenost od ruba elementa do okvira pomoću svojstva outline-offset za stvaranje.

Raznobojni okviri

Treba shvatiti da obris ni na koji način ne zamjenjuje obrub i može postojati s njim, kao što je prikazano u primjeru 1.

Primjer 1. Izrada okvira

obrub i obris

U ovom primjeru, oko elementa je dodan crni obrub, koji je od pozadine odvojen bijelim obrubom (slika 1).

Riža. 1. Okvir oko elementa

Okvir pri korištenju: lebdjeti

Dodavanje obruba kroz obrub povećava širinu elementa, što je prilično primjetno kada se kombinira obrub i pseudoklasa: hover. Postoje dva načina kako ovo "pobijediti". Najjednostavnije je zamijeniti obrub obrisom, za koji znamo da nema utjecaja na dimenzije elementa (primjer 2).

Primjer 2. Granica pri lebdenju

obris

obris nije uvijek prikladan, makar samo zato što zaokruživanje kutova ne utječe na njega. Ovdje je prikladna druga metoda - dodajte nevidljivi okvir ili okvir koji odgovara boji pozadine, a zatim promijenite njegove parametre pri lebdenju (primjer 3). Tada neće doći do pomaka elementa, budući da okvir već postoji od početka. Ali uvijek zapamtite da je širina elementa zbroj vrijednosti širine, obruba s lijeve strane i obruba s desne strane. Slična je situacija i s visinom.

Primjer 3. Okvir pri lebdenju

granica

Obrub oko polja obrasca

U nekim preglednicima (Chrome, Safari, najnoviji Verzije Opera) mali okvir u boji(sl. 2). Da biste ga uklonili, samo dodajte vrijednost none svojstvu obrisa u stilovima, kao što je prikazano u primjeru 4.

Riža. 2. Okvir oko polja

Primjer 4. Uklanjanje okvira

ulazni

Okviri putem box-shadow

Iako je svojstvo box-shadow namijenjeno dodavanju sjene oko elementa, može se koristiti i za stvaranje obruba što se ne može učiniti s obrubom ili obrisom. To je zbog činjenice da broj sjena 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 njegovu zamućenost. Četvrti parametar u ovom slučaju odgovoran je za debljinu obruba, a peti postavlja boju obruba. Za drugi okvir, četvrti parametar je zbroj debljina dvaju okvira.

Primjer 4 pokazuje kako dodati dva obruba i jedan obrub desno koristeći jedno svojstvo sjene okvira.

Primjer 4. Korištenje box-shadow

kutija-sjena

Proizlaziti ovaj primjer prikazano na sl. 3.

Riža. 3. Okviri stvoreni svojstvom box-shadow

CSS specifikacija daje neograničene mogućnosti za dizajn tablice. Prema zadanim postavkama, ćelije tablice i tablice nemaju vidljive granice i pozadine, a ćelije unutar tablice nisu jedna uz drugu.

Širina ćelija tablice određena je širinom njihovog sadržaja, pa širina stupaca tablice može biti različita. Visina svih ćelija u nizu je ista i određena je visinom najviše ćelije.

Oblikovanje tablica

1. Granica obruba tablice

Tablica i ćelije unutar nje prema zadanim se postavkama prikazuju u pregledniku bez vidljivih granica. Granice tablice postavljeno svojstvom granice:

Tablica (bord-collapse: kolaps; / * ukloniti prazni prostori između ćelija * / obrub: 1px čvrsta siva; / * postavite vanjsku granicu za tablicu siva 1px debljine * /)

Obrube ćelije naslova svakog stupca postavljeni su za th element:

Th (rub: 1px čvrsta siva;)

Granice stanica tijela tablice postavljena su za td element:

Td (rub: 1px čvrsto siva;)

Širina obruba susjednih ćelija se ne udvostručuje, tako da možete postaviti granice za cijelu tablicu na sljedeći način:

Th, td (rub: 1px čvrsto siva;)

Vanjski rub tablice može se odabrati dajući mu povećanu širinu:

Tablica (rub: 3px čvrsto siva;)

Granice se mogu postaviti djelomično:

/ * postavite 3px sivi vanjski obrub za tablicu * / tablicu (bord-top: 3px čvrsta siva;) / * postavite 1px sivi obrub za ćeliju tijela tablice * / td (bord-bottom: 1px čvrsta siva;)

Više o granici možete pročitati.

2. Kako postaviti širinu i visinu stola

Zadano širina i visina stola određena je sadržajem njegovih stanica. Ako širina nije navedena, tada će biti jednaka širini najšireg retka (linije).

Širina tablice i stupca postaviti pomoću svojstva širine. Ako je tablica (širina: 100%;) navedena za tablicu, tada će širina tablice biti jednaka širini bloka spremnika u kojem se nalazi.

Širina tablice i stupaca obično je navedena u px ili%, na primjer:

Tablica (širina: 600px;) th (širina: 20%;) td: prvo dijete (širina: 30%;)

Visina stola nespreman. Visina redova tablicama se može manipulirati dodavanjem gornjih i donjih paddinga elementima

... Ne preporučuje se fiksiranje visine pomoću svojstva visine.

Th, td (ispun: 10px 15px;)

3. Kako postaviti pozadinu stola

Zadano pozadina stola a stanice su prozirne. Ako stranica ili blok koji sadrži tablicu ima pozadinu, tada će svijetliti kroz tablicu. Ako je pozadina postavljena i za tablicu i za ćelije, tada će samo pozadina ćelija biti vidljiva na mjestima gdje se pozadina tablice i ćelije preklapaju. Pozadina za tablicu kao cjelinu i njene ćelije mogu biti:
ispuniti,
,
.

4. Stupci tablice

Model CSS tablice fokusiran je uglavnom na nizove (retke) formirane pomoću oznake

, a pomoću svojstva caption-side, može se postaviti ispred ili ispod stola. Za horizontalno poravnanje primjenjuje se tekst zaglavlja svojstvo poravnanja teksta... Naslijeđeno.

...

Tablica br.1
Društvo	Q1	Q2	Q3	Q4

natpis (na strani natpisa: dolje; poravnanje teksta: desno; padding: 10px 0; veličina fonta: 14px;)

Riža. 2. Primjer prikaza zaglavlja ispod tablice

6. Kako ukloniti jaz između okvira ćelija

Prema zadanim postavkama, granice ćelija tablice odvojene su malim razmakom. Ako postavimo border-collapse: kolaps za tablicu, tada će se praznina ukloniti. Imovina je naslijeđena.

Sintaksa

Tablica (rub-kolaps: kolaps;)
Riža. 3. Primjer tablica sa spajanjem i podijeljenim granicama ćelija

7. Kako povećati razmak između granica stanica

Preko granična svojstva-razmak možete promijeniti udaljenost između okvira ćelija. Ova nekretnina odnosi se na tablicu u cjelini. Naslijeđeno.

Sintaksa

Tablica (border-collapse: odvojeno; razmak obruba: 10px 20px;) tablica (border-collapse: odvojeno; razmak obruba: 10px;) Riža. 4. Primjer tablica s povećanim razmacima između okvira ćelija

8. Kako sakriti prazne ćelije tablice

Svojstvo praznih ćelija skriva ili prikazuje prazne ćelije. Utječe samo na ćelije koje ne sadrže nikakav sadržaj. Ako je za ćeliju navedena pozadina, a za tablicu navedena je tablica (border-collapse: collapse;), tada ćelija neće biti skrivena. Naslijeđeno.

Društvo	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tablica (bord: 1px solid #69c; border-collapse: odvojeni;prazne ćelije: hide;) th, td (bord: 2px solid # 69c;)

Riža. 5. Primjer skrivanja prazna ćelija tablice

9. Izgled izgleda tablice pomoću svojstva table-layout

Izgled rasporeda tablice određen je jednim od dva pristupa: fiksnim rasporedom ili automatskim izgledom. Izgled u ovom slučaju znači kako je širina tablice raspoređena između širine ćelija. Imovina se ne nasljeđuje.

Sintaksa

Tablica (izgled stola: fiksni;)

10. Najbolji rasporedi stolova

1. Horizontalni minimalizam

Horizontalne tablice su tablice u kojima se tekst čita horizontalno. Svaki entitet je zasebna linija. Ovakve tablice možete stilizirati u minimalističkom stilu postavljanjem obruba od dva piksela ispod naslova.

Zaposlenik	Plaća	Bonus	Nadglednik
Stephen C. Cox	$300	$50	Bob
Josephin tan	$150	-	Annie
Joyce ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

tablica (familija fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; veličina fonta: 14px; pozadina: bijela; maksimalna širina: 70%; širina: 70%; obrub-kolaps: kolaps; tekst -align: left;) th (font-weight: normal; color: # 039; border-bottom: 2px solid # 6678b1; padding: 10px 8px;) td (boja: # 669; padding: 9px 8px; prijelaz: .3s linear;) tr: lebdjeti td (boja: # 6699ff;)

Na veliki broj redaka, ovaj dizajn tablica ih čini teškim za čitanje. Da biste riješili ovaj problem, možete dodati obrub od jednog piksela ispod svih td elemenata.

Td (bord-bottom: 1px solid #ccc; boja: # 669; padding: 9px 8px; prijelaz: .3s linear;) / * ostatak koda je kao u primjeru iznad * /

Dodavanje: hover efekta na tr element čini tablice minimalističkog stila lakšim za čitanje. Kada zadržite pokazivač miša iznad ćelije, ostale ćelije istog retka su istovremeno istaknute, što pojednostavljuje proces praćenja informacija ako tablice imaju više stupaca.

Th (težina fonta: normalna; boja: # 039; padding: 10px 15px;) td (boja: # 669; obrub-vrh: 1px čvrsta # e8edff; padding: 10px 15px;) tr: lebdenje td (pozadina: # e8edff ;)

2. Vertikalni minimalizam

Iako se takve tablice rijetko koriste, okomito orijentirane tablice korisne su za kategorizaciju ili usporedbu opisa objekata predstavljenih stupcem. Možete ih stilizirati u minimalističkom stilu dodavanjem razmaka koji odvaja stupce.

Th (težina fonta: normalna; obrub-dno: 2px čvrsta # 6678b1; rub-desno: 30px čvrsta #fff; obrub lijevo: 30px čvrsta #fff; boja: # 039; padding: 8px 2px;) td (border- desno: 30px čvrsta #fff; obrub lijevo: 30px čvrsta #fff; boja: # 669; padding: 12px 2px;)

3. Stil "kutije".

Najpouzdaniji stil za ukrašavanje stolova svih vrsta je takozvani stil "kutije". Dovoljno je pokupiti dobro Raspon boja, a zatim postavite boju pozadine za sve ćelije. Ne zaboravite naglasiti razliku između linija postavljanjem granica kao razdjelnika.

Th (veličina fonta: 13px; težina fonta: normalna; pozadina: # b9c9fe; granica-vrh: 4px čvrsta #aabcfe; obrub-dno: 1px čvrsta #fff; boja: # 039; padding: 8px;) td (pozadina : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solid transparent; padding: 8px;) tr: lebde td (pozadina: #ccddff;)

Najteži dio je pronaći shemu boja koja će se skladno uklopiti u vašu web stranicu. Ako je stranica puna grafike i dizajna, bit će vam prilično teško koristiti ovaj stil.

Tablica (familija fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; veličina fonta: 14px; maksimalna širina: 70%; širina: 70%; poravnanje teksta: središte; 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 zebra

Zebra stol izgleda prilično atraktivno i praktično. Komplementarna boja pozadine može poslužiti kao vizualni znak ljudima da čitaju tablicu.

Th (težina fonta: normalna; boja: # 039; padding: 10px 15px;) td (boja: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: nth-child (2n) ( pozadina: # e8edff;)

5. Novinski stil

Da biste postigli takozvani efekt novina, možete primijeniti obrube na elemente tablice i igrati se ćelijama iznutra. Lagani, minimalistički novinski stil mogao bi izgledati ovako: igrajte se shemom boja, dodajte obrube, podloge, različite pozadine, i: učinak lebdenja na prelazak preko linije.

Tablica (obrub: 1px čvrsta # 69c;) th (težina fonta: normalna; boja: # 039; obrub dno: 1px isprekidana # 69c; padding: 12px 17px;) td (boja: # 669; padding: 7px 17px; ) tr: zadržite td (pozadina: #ccddff;)

Tablica (obrub: 1px čvrsta # 69c;) th (težina fonta: normalna; boja: # 039; padding: 10px;) td (boja: # 669; obrub vrh: 1px crtkana #fff; padding: 10px; pozadina: #ccddff;) tr: zadržite td (pozadina: # 99bcff;)

Tablica (obrub: 1px čvrsta # 6cf;) th (težina fonta: normalna; veličina fonta: 13px; boja: # 039; transformacija teksta: velika slova; obrub desno: 1px čvrsti # 0865c2; obrub vrh: 1px čvrst # 0865c2; obrub-lijevo: 1px čvrsta # 0865c2; obrub-dno: 1px čvrsta #fff; padding: 20px;) td (boja: # 669; rub-desno: 1px isprekidana # 6cf; padding: 10px 20px;)

6. Pozadina stola

Ako tražite brzi i jedinstven način dizajn stola, odaberite atraktivna slika ili fotografiju koja se odnosi na temu stola i postavite je kao pozadinu stola.

Jpg ") bez ponavljanja; background-position: 100% 55px;) th (font-weight: normal; color: # 339; padding: 10px 12px;) td (background: url (" https: // site / images / back..png "); pozadina: prozirna;)

Vrhunski povezani članci

Različiti pokreti miša okomito i vodoravno

Kako komprimirati teksture u Fallout 4

Ostaje samo razumjeti potrebnu razinu

Kategorije: