Boks og kantegenskaper av Cascading Style Sheets (CSS) - dummies

Med boksegenskapene kan du plassere stilte objekter hvor som helst i et nettleservindu, plassere objekter i forhold til de andre objektene på siden, og bruk polstring og marginal boks stil regler selektivt til noen av eller alle de fire sidene av det stilte objektet, for eksempel venstre og nederst eller øverst, venstre og høyre.

Når du styler mindre enn alle fire sidene, må du legge til 0 verdier på sidene som ikke inneholder verdier, i stedet for å la dem være tomme.

bredde / høyde: Bruk bredde- og høydeattributtene til å angi dimensjonene til et objekt eller en beholder som en tabell, tabellcelle eller lag. Still egenskapene til auto for å tvinge størrelsen på objektet til å matche innholdet i objektet, eller skriv inn noen verdi, positiv eller negativ, i px (piksler), pc (picas), pt (poeng), i (tommer) mm (millimeter), cm (centimeter), em (ems), ex (exs) eller% (prosent).

#rings {høyde: auto; bredde: 475px;}

float: Bruk denne stilen til å styre siden (venstre, høyre eller ingen) hvilke andre objekter vil flyte rundt den stilte gjenstanden.

. salesitems {float: right;}

clear: Denne funksjonen brukes ofte til sammen med flytegenskapen, om andre objekter kan vises ved siden av det stilte objektet. Variabler for denne attributten inkluderer venstre, høyre, begge og ingen. For eksempel, når et lag vises på siden av et objekt med den angitte klare siden, blir denne gjenstanden støtet til området under laget.

. nyheter {clear: both;}

polstring: Denne egenskapen er som marginen, bare med polstring du bruker ekstra mellomrom mellom det stilte objektet og en kant som omgir den, som med en setning eller et ord i en tabellcelle. Angi polstringsstørrelsen til venstre, høyre, topp og / eller bunnside ved å bruke en hvilken som helst verdi, positiv eller negativ, i px (piksler), pc (picas), pt (poeng), i (tommer), mm (millimeter), cm (centimeter), em (ems), ex (exs) eller% (prosent).

Når det brukes ensartede størrelser på alle fire sider av det stilte objektet, er det kun én verdi, som i polstring: 10px;, må være oppført i erklæringen. Ellers angir du verdier for alle fire sider:

. sidebarimage {padding: 10px 0px 10px 0px;}

margin: Bruk marginalegenskapen til å legge til eller trekke ekstra mellomrom mellom sidekanten (eller foreldrebeholderen) og objektet som er stylet, for eksempel området som omgir et ord eller et lag. Angi marginalstørrelsen på venstre, høyre, topp og / eller nederste side ved å bruke en hvilken som helst verdi, positiv eller negativ, i px (piksler), pc (picas), pt (poeng), tommer, mm (millimeter), cm (centimeter), em (ems), ex (exs) eller% (prosent).

Du kan også bruke automatisk verdien på begge sider av en stylet gjenstand for å sentrere objektet i sin overordnede beholder. Når det brukes ensartede verdier på alle fire sider, må det kun opplyses en verdi i erklæringen. Ellers angir du verdier for alle fire sider:

#contact {margin: 0px auto 0px auto;}

Grenseegenskaper definerer farge, stil og bredde av grenser rundt en hvilken som helst stylet gjenstand. Fordi grenser kan gå på alle fire sider av et objekt, kan hver side ha helt forskjellige grenseattributter! For best resultat, som med marginer og polstring, sørg for å legge til 0 eller ingen til hvilken side som ikke er stylet:

. tabellcell {border-top: 0px none; border-right: 2px prikket # 069; border-bottom: 1px solid # 09C; border-left: 2px stiplet # 069;}

stil: Du kan angi grenser i en av følgende stiler: solid, prikket, prikk, dobbelt, groove, ås, innsats, start eller ingen. Stil må spesifiseres i forbindelse med farge og bredde.

. bordkasse {border: 2px dashed # 330066;}

bredde: Du kan angi alternativer for tykkelsen av grensen til tynn, middels eller tykk. Eller, for mer presise målinger, bruk som noen verdi i px (piksler), pc (picas), pt (poeng), i (tommer), mm (millimeter), cm (cm), em), eller% (prosent. Angi bredden sammen med farge og kantlinje.

. tabellcell {border: 1px stiplet # 660033;}

farge: For å fargelegge grenseattributtet, spesifiser den heksadesimale verdi av ønsket farge og sørg for å inkludere talesymbolet (#) før hex-verdien. Inkluder også en stiltype og bredde for grensen.

. bordcell {border: 5px solid # 003366 <;}