CSS Box: improvisert og virkning

Cascading Style Sheets (CSS) for all sin logiske enkelhet gjør det mulig ikke bare å lage et spektakulært design løsning, men også gi elementer av reell handling, for å etterligne resultatene av selve koden.

Noen visuell kode HTML-merking - et rektangulært område av en bestemt struktur og innhold. Elementet omfatter en indikasjon av koordinater, størrelse, padding, farge, skrift, skrift stil, og så videre. Frame CSS-elementet angir dem opptatt område, blir plassert innover fra dens grenser på betegnet bredde.

syntaksbeskrivelsen

Foreplasseringselement som spesifiseres koordinater relativt til det øvre venstre hjørne av siden (venstre, øverst), størrelsen på de horisontale og vertikale retninger (bredde, høyde). Alle design og animasjon elementer er laget i par "eiendom: verdi".

Beskrivelse gjøres direkte på siden koden som du setter stil eller i en egen fil, og pekte på ham LINK referanse. syntaks:

name {egenskap: verdi; Konstruksjon: verdi; Konstruksjon: verdi; ...}

eller

.name {egenskap: verdi; Konstruksjon: verdi; Konstruksjon: verdi; ...}

Navnet kan også være p, kropp, html, bord, td ..., er at navnet på HTML-markup tag. Kan kobles direkte med beskrivelsen av den stilelementet.

Før du gjør opp min egen skrivestil, ikke vondt å se hvordan det gjøres på populære nettsteder, holde siden koden, eller ved å trykke Ctrl-U for å kunne se direkte i nettleseren.

De viktigste parameterne

Egentlig CSS rammeelement representert stil (border-stil), farge (border-farge), bredde (border-bredde). Det kan alle bli summert opp i en eiendom - grensen. Kan beskrive hver rammekanten uavhengig (border-topp, nedre kant, border-venstre, kant-til høyre).

CSS ramme beskrevet av de generelle reglene for stilark:

border: 3px;
border-color: red;
border-type: Et dobbelt stiplet fast stiplet.

Denne beskrivelsen angir bredden av 3 piksler, farge kant - rød, stil sider: øvre side av dobbelt, til høyre - stiplede, solid bunn, venstre - punkt.

border-bredde: 1 px 2 piksler 4px 8 piksler;
border-color: blue;
border-style: prikket.

Her dimensjonene på hver side er også sekvensielt fra toppen, med klokken, farge - blå og stil - Spot.

border-color: blue red green svart;

i denne beskrivelsen, individuelt valgte fargen på hver side. Grensen egenskap kan omfatte flere parametere, og vinklene i rammen kan være rund:

kant: 1 px grønt faststoff;
border-radius: 0 px 4px 8 piksler 12 piksler;
-moz-border-radius: 0 px 4px 8 piksler 12 piksler;
-webkit-border-radius: 0 px 4px 8 piksler 12 piksler;

Om hvordan du kan gjøre rammen i CSS, det kommer an på brukbarheten av den besøkende, fordi vanligvis stilistisk effekt brukes til tekniske formål, når det er viktig å vise den nøyaktige plasseringen og størrelsen på området på siden.

Tykkelsen av rammen og dens formål

Ved å velge tykkelsen på rammen, kan du bruke px, pt, em ..., men det bør være oppmerksom på at det alltid er innen element. Det er vanskelig å anta at rammen har en CSS utforming formål, men teknisk sett er det svært nyttig å markere elementer på siden.

Hvis hovedramme klasse er låst, er det fraværende, ved å spesifisere det i pseudo-klasse: hover, kan det vises til den besøkende av sideelementet, når det er markøren, slik som fremhever en menyelement. Noen ganger er det nødvendig å velge noe ved å klikke på bildet, eller dra noe sted. Det er veldig praktisk å bruke dot ramme, og ikke til å endre element bakgrunn eller dens innhold.

Noen programmer krever tildeling av områder på siden, eller velge elementer for videre behandling. I dette tilfellet, på tidspunktet for klikket for å lage en div med en kant og så lenge den besøkende fritar ikke museknappen, endre størrelse på det, viser visuelt resultatet av valget.

ute under

CSS tutorials er veldig interessant, som er betydningen av forsknings koder sider av populære nettsteder. Imidlertid må de egne ressurser være unik, må det ha sin eget ansikt.

Forutsatt at syntaksen til CSS ramme gir ikke et slikt utvalg, som eget initiativ. Improvisert - en god start, og ingenting hindrer en utbygger å bygge sin egen ramme. Spesielt med alle resultatene av Internett-teknologi og mulighetene i eksisterende standarder har mange lovende ideer basert på virkelige svakhetene i eksisterende syntaks, som er (per definisjon) har alltid vært en strengt formell.

Spesielt hvis og å etablere omfanget av visse elementer, synes det hensiktsmessig å gjøre det grundig. Opplyser individuelle koder i sidene og vinklene i en region, kan du få utrolige effekter. En tildele respektive håndtering, kan skape dynamiske sideelementer, endring av posisjon, form og innhold.