CSS Box: improviseret og effekt

Cascading style sheets (CSS) for al sin logiske enkelhed gør det muligt ikke blot at skabe en spektakulær designløsning, men også give elementer af reel handling, for at efterligne udførelsen af selve koden.

Enhver visuel tag HTML-mærkning - en rektangel af en særlig struktur og indhold. Elementet omfatter en indikation af koordinater, størrelse, polstring, farve, skrifttype, typografi, osv. Frame CSS-Elementet angiver dem beskæftiget område, der ligger indad fra dens grænser på betegnet heri bredde.

syntaks beskrivelse

FIELD påsætningsdel angivne koordinater i forhold til det øverste venstre hjørne af siden (venstre, øverst), størrelsen i de horisontale og vertikale retninger (bredde, højde). Alle design og animation elementer er lavet i par "ejendom: value".

Beskrivelse sker direkte i sidens kode for at indsætte stil eller i en separat fil, der peger på ham LINK reference. syntaks:

#name {ejendom: værdi; ejendom: værdi; ejendom: værdi; ...}

eller

.name {ejendom: værdi; ejendom: værdi; ejendom: værdi; ...}

Navnet kan også være p, krop, html, tabel, td ..., der er navnet på HTML-markup-tag. Kan tilsluttes direkte med beskrivelsen af den stil element.

Før du foretager min egen skrivestil, ikke ondt at se, hvordan det gøres på populære websteder, holde side kode, eller ved at trykke Ctrl-U for at se den direkte i browseren.

De vigtigste parametre

Faktisk CSS rammeelementet repræsenteret stil (border-style), farve (border-farve), bredde (border-bredde). Det kan alle sammenfattes i én ejendom - grænse. Du kan beskrive hver ramme grænsen uafhængigt (border-top, grænse-bund, border-venstre, højre kant).

CSS ramme beskrevet af de generelle regler i cascading style sheets:

kant: 3px;
border-color: red;
border-style: double stiplet fast prikket.

Denne beskrivelse angiver grænsen bredde på 3 pixels, farve - rød, style sider: oversiden af dobbelt, højre - stiplet, solid bund, venstre - punkt.

border-width: 1px 2px 4 pixels 8px;
border-farve: blå;
border-style: punkteret.

Her dimensionerne af hver side er også sekventielt fra toppen, med uret, farve - blå, og stil - Spot.

border-farve: blå rød grøn sort;

i denne specifikation, individuelt specificeret farve på hver side. grænse ejendom kan omfatte flere parametre, og vinklerne af rammen kan være runde:

kant: 1px grøn fast;
border-radius: 0px 4 pixels 8px 12px;
moz-border-radius: 0px 4 pixels 8px 12px;
-webkit-border-radius: 0px 4 pixels 8px 12px;

På hvordan man kan gøre rammen i CSS, det afhænger af anvendeligheden af den besøgende, fordi normalt den stilistiske effekt bruges til tekniske formål, når det er vigtigt at vise den nøjagtige placering og størrelsen af det område på siden.

Tykkelsen af rammen og dets formål

Ved at vælge tykkelsen af rammen, kan du bruge px, pt, em ..., men det skal erindres, at det altid er inden element. Det er svært at antage, at rammen har en CSS design formål, men teknisk set er det meget nyttigt at fremhæve de elementer på siden.

Hvis hovedrammen klasse er låst, der er fraværende, ved at angive det i pseudo-klasse: hover, kan det vises til den besøgende af siden element, når det er musemarkøren, såsom fremhæve et menupunkt. Nogle gange er det nødvendigt at vælge noget ved at klikke på billedet eller trække noget andet sted. Det er meget bekvemt at bruge dot ramme, og ikke at ændre elementets baggrund eller dens indhold.

Nogle programmer kræver, at fordelingen af områder på siden, eller vælg emner til yderligere behandling. I dette tilfælde, på det tidspunkt, klik for at skabe en div med en kant, og så længe den besøgende ikke slippe museknappen, ændre størrelse på det, viser visuelt resultat af valg.

Uden under

CSS tutorials er meget interessant, da er betydningen af forskning koder sider af populære websteder. Dog skal de egne indtægter, være unik, skal den have sin egen ansigt.

Forudsat syntaksen i CSS ramme giver ikke en sådan sort, som af egen drift. Improviseret - en god start, og intet forhindrer en udvikler til at bygge deres egen ramme. Især med alle de resultater af internet-teknologi og kapacitet eksisterende standarder har mange lovende idéer baseret på virkelige mangler i det nuværende syntaks, som er (per definition) har altid været en strengt formel.

Især hvis og at fastlægge omfanget af visse elementer, forekommer det hensigtsmæssigt at gøre det omfattende. Fremhævning individuelle tags i siderne og vinklerne i en region, kan du få fantastiske effekter. A tildeling respektive handlere, kan skabe dynamiske sideelementer, ændre positionen, form og indhold.