Možete promijeniti boju obruba stanica i širinu okvira koristeći atribut pravila koristeći granicu i obrub.

Sukobi stilova

Ćelije, redovi, stupci i skupine elemenata mogu bitidane vrijednosti vlastitih granica. U isto vrijeme mogu se razlikovati u tri parametra: stil, debljina i boja.

U načinu kolapsa postoje sukobi napada. Zbog činjenice da se pravilo dvije različite ćelije može primijeniti na jednu granicu, problem odabira stila treba odrediti kao prioritet. Kao što piše E. Malchuk, osvaja najviše "značajnih" (osim skrivenih).

Ilustriranje sukoba stila lako je na stolu koji se već razmatra. Dovoljno je dodati nekoliko klasa stanica i propisati ihza njih. Html ima oblik:

 
Glava
glava
glava
 

 
Stanica
stanica
stanica
 

 
stanica
stanica
stanica
 
 
 

Odgovarajući css.

tijelo {
 familija fontova: Helvetica, Sans-serif;
veličina fonta: 5vw;
boja: crna;
margina: 0;
širina: 80vw;
boja pozadine: bijela;
obloga: 3vw; 
} 

tablica {
 pozadinska boja: rgba (3331171 012);
obloga: 0.5 vw;
border-collapse: kolaps;
razmak između obruba: 0,5 vw 1vw;
granični stil: skriven; 
} 

th {
 padding: 1vw;
poravnavanje teksta: lijevo;
granica: 0.1 vw solid # 4c6ea1; 
} 

td (
 padding: 1vw;
granica: 0.2 vw točkasta # 4c6ea1; 
} 

.second_cell {
 border: 001 vw solid # 4c6ea1; 
} 

.third_cell {
 border: 001 vw double red; 
}

Stilovi okvira

Dizajn obruba može se postaviti za svaku stranu ćelije zasebno. Da biste to učinili, dovoljno je specificirati u graničnom stilu ne samo jednu vrijednost, nego popisati četiri, odnosno, ćelije ćelije.

th, td {
 padding: 1vw;
poravnavanje teksta: lijevo;
širina granice: 0,5 vw;
boja obruba: tamna;
stil granice: točkasto; 
} 


. Sedme {
 border-top-color: skyblue;
granični stil: čvrsti;
border-right-width: 2vw;
style-border-bottom-style: isprekidan;
style-border-left: hidden; 
}
 

Podatke možete odrediti u jednom retku postavljanjem od jedne do četiri različite vrijednosti. Svatko tradicionalno postaje instrukcija jednoj od stranaka.

• Ako postavite dvije vrijednosti, prva će odgovarati donjoj i gornjoj granici, drugu lijevu i desnu.
• Od prva tri odgovorna je za gornju, drugu za lijevu i desnu, a treću zadno crta
• Četiri vrijednosti jedinstveno određuju svaku od linija, od vrha u smjeru kazaljke na satu lijevo.

Moguće je odrediti označavanje granica stanica jednostavnim identificiranjem podataka za svaku stranu, kao što je prikazano gore.

Postoji ukupno deset stilova za okvir. Svi mijenjaju liniju ili je uklanjaju:

• nema - nema granica;
• skriveni - još teži, blokira pojavu obilježja (u konfliktnoj situaciji);
• točkasto - iz točaka;
• isprekidano - točkasto; Čvrsta tvar;
• dvostruka dvostruka krutina;
• žlijeb - okvir je kao da je utisnut u površinu;
• grebena konveksna crta;
• umetak - zapravo, za jednu stranu elementa ponaša se kao greben, ako se primijeni na cijeli element, onda su gornji i lijevi zasjenjeni, a donji desni je označen;
• početak - ponaša se kao utor kada se nanese na jednu stranu elementa, zasjenjujući dolje desno, vrh i lijevo izgledaju svjetlije.

Svaka stanica (na gornjoj i lijevoj strani) primjenjuje jedan od stilova. Kako se ne bi međusobno natjecali, najslabiji, stavili bi najvišu vrijednost.

tablica {
 pozadinska boja: rgba (3331171 012);
obloga: 0.5 vw;
border-collapse: kolaps;
rub: 0.3 vw crno; 
} 

th, td {
 padding: 1vw;
poravnavanje teksta: lijevo; 
}

. Jedno {
 border-top: skriveno;
border-left: hidden; 
} 

.two {
 border-top: 0.4 vw double # 4c6ea1;
granica lijevo: 0,4 vw dvostruko # 4c6ea1; 
} 

.tri {
 granični-vrh: 0.5 vw solid # 4c6eal;
granični lijevi: 0,5 vw čvrste # 4c6eal; 
}

. Četiri {
 granični-vrh: 0.7 vw isprekidan # 4c6ea1;
granično-lijevo: 0.7 vw isprekidano # 4c6ea1; 
}

. Pet {
 granični-vrh: 0.8 vw točkasto # 4c6ea1;
granica lijevo: 0,8 vw točkasto # 4c6ea1;
} 

.xx {436) border-top: 0.9 vw greben # 4c6ea1;
granica lijevo: 0.9 vw greben # 4c6ea1; 
}

. Sedam {
 border-top: 1vw outset # 4c6ea1;
border-left: 1vw outset # 4c6ea1; 
}

. Osmina {
 granični-vrh: 1.1 vw groove # 4c6ea1;
granični lijevi: 1.1 vw utor # 4c6ea1; 
} 

.nine {
 border-top: 1.2 vw inset # 4c6ea1;
border-left: 1.2 vw inset # 4c6ea1; 
}
 

Strukturiranje materijala

Priroda podataka prikazanih u matrici često zahtijeva izmjenu granica same tablice, okvira njezinih ćelija, redaka ili stupaca. Možete ga koristiti za sljedeće:

• reset linije (border-width označavaju vrijednost u 0px);
• skriven.

Prednost je skrivena u snazi ​​njegovog prioriteta. Ako pravilo djeluje na granici dva elementa odjednom iu jednom od njih granični stil je postavljen na skriven, linija neće biti prikazana. To jest, možete sigurno napraviti cijelu tablicu, a zatim selektivno ukloniti nepotrebne okvire.

Korištenje skrivenih u odnosu na ćelije onemogućuje vraćanje granice drugim metodama (osim teške! Imporant). Stoga, ako trebate ukloniti neke strane ćelije, bolje je da ih ne koristite.

Pretpostavimo da postoji tablica. Svrha je ukloniti vertikalne granice unutar prvog retka. Označena je zasebnom oznakom (zaglavljem), stoga nije potrebna dodatna klasa. Ako skrivenu oznaku primijenite na cijelu oznaku, nakon što je ona napiše granicu lijevo, zajedno s unutarnjim granicama uklonit će se i jedan dio stranice tablice, što uvjet nije potreban. Ako ne koristite nijednu i matričnu liniju, tada će postojati dva neusklađena pravila za unutarnjeg vraga, i nitko se neće sukobiti s vanjskim rubom nijednepravilo koje mu je dano u tablici, a stranka će ostati na mjestu.

Uklanjanje pojedinačnih staničnih linija vrši se pomoću klasa koje su propisane odgovarajućim elementima, kao što je prikazano za pojedinačni stil, širinu i zadatak boje.

Dok je uklanjanje bočne granice u html-tablici lakše zbog pozivanja na vanjske okvire matrice koji upućuju na tablicu. Dovoljno je napisati naredbu na određenu liniju u css-u.

Tablica {
 border-left-style: hidden; 
}

Uklanjanje okvira u redovima je lako implementirati upotrebom svojstva granice s vrijednošću skrivenom u tr. Nestaju samo horizontalne crte stola, nego i bočne. Matrica se degenerira u vertikalne stupce.