CSS Box: impromptu en effekt

Cascadearjende stylblêden (CSS) foar al syn logyske ienfâld meitsje it mooglik net allinnich te meitsjen mei in spektakulêre design oplossing, mar ek jouwe eleminten fan echte aksje, te emulate de prestaasjes fan 'e eigentlike koade.

Any fisuele tag HTML-marking - in rjochthoekich gebiet fan in bepaald struktuer en ynhâld. It elemint bestiet út in yndikaasje fan de koördinaten, grutte, padding, kleur, lettertype, lettertype styl, en sa fierder. Frame CSS-elemint jout harren beset gebiet, wurdt leit binnenst oer út syn grinzen op oanwiisde dêryn breedte.

syntaksis beskriuwing

FIELD placement elemint oantsjutte koördinearret relatyf oan de boppe lofts hoeke fan de side (left, top), de grutte yn de horizontale en fertikale rjochtings (breedte, hichte). Alle design en animaasje eleminten wurde makke yn twatallen "eigendom: value".

Beskriuwing wurdt dien direkt yn de side koade, it Ynset styl of yn in apart triem, wiist him LINK referinsje. syntaksis:

#name {eigendom: wearde; eigendom: wearde; eigendom: wearde; ...}

of

.name {eigendom: wearde; eigendom: wearde; eigendom: wearde; ...}

De namme kin ek wêze p, lichem, html, tafel, td ..., dat is de namme fan HTML-opmaak tag. Kin ferbûn direkt mei de beskriuwing fan 'e styl elemint.

Foardat jo make up myn eigen skriuwstyl, net sear om te sjen hoe't it dien op populêre plakken, hâlden de side koade, of troch te drukken op Ctrl-U te bekijken direkt yn 'e browser.

De wichtichste parameters

Eins CSS frame elemint fertsjintwurdige styl (grins-styl), kleur (grins-kleur), breedte (grins-breedte). It kin allegearre wurde gearfette yn ien eigendom - grins. Jo kinne omskriuwe elk frame grins selsstannich (grins-top, border-bottom, border-left, grins-rjochts).

CSS frame beskreaun troch de algemiene regels fan cascadearjende stylblêden:

border: 3px;
border-color: read;
border-styl: double gie stees bêst dotted.

Dizze beskriuwing stelt de grins breedte fan 3 piksels, kleur - read, styl kanten: boppeste kant fan 'e dûbele, rjochts - gie stees, bêst boaiem, lofts - punt.

border-width: 1px 2px 4px 8px;
border-color: blau;
border-styl: dotted.

Hjir, de ôfmjittings fan elke kant binne ek sequentially út boppe, mei de klok mei, kleur - blau, en styl - Spot.

border-color: blau read grien swart;

yn dizze spesifikaasje, yndividueel oantsjutte kleur oan eltse kant. grins property kinne bestean út meardere parameters, en de Angelen fan it frame kin wêze ronde:

grins: 1px grien solid;
border-radius: 0px 4px 8px 12px;
-moz-border-striel: 0px 4px 8px 12px;
-webkit-border-striel: 0px 4px 8px 12px;

Op hoe te meitsjen fan it frame yn CSS, dat hinget ôf fan de brûkberens fan de besiker, want meastal de stilistyske effekt wurdt brûkt foar technyske doelen, as is it fan belang om te sjen de krekte lokaasje en de grutte fan it gebiet oan 'e side.

De dikte fan it frame en syn doel

Troch te kiezen foar de dikte fan it frame, kinne jo gebrûk meitsje fan px, pt, em ..., mar it moat wêze betocht dat it is altyd binnen it fjild elemint. It is dreech om te oannimme dat it frame hat in CSS design doel, mar technysk is it hiel nuttich om te markearje de eleminten fan de side.

As de wichtichste frame klasse wurdt op slot, dat is ôfwêzich, troch mei opjefte fan it yn pseudo-klasse: Hover, kin wurde toand oan de besiker fan de side elemint, as it is de mûsoanwizer, lykas markearring in menu item. Soms is it nedich om te selektearje wat troch te klikken op de ôfbylding of sleep wat earne. Erg handig om te brûken dot frame, en net te feroarjen it elemint syn achtergrûn of har ynhâld.

Guon applikaasjes easkje de tawizing fan gebieten fan de side, of selektearje items foar fierdere ferwurking. Yn dit gefal, op 'e tiid fan' e klik te meitsjen fan in div mei in grins en sa lang as de besiker net frij op de mûs knop, grutte oanpasse it, sjocht visueel it resultaat fan de kar.

Outside under

CSS tutorials binne hiel nijsgjirrich, sa't is it belang fan ûndersyk koades siden fan de populêre websiden. Lykwols, de eigen middels moatte unyk wêze, dan moat hawwe in eigen gesicht.

Levere de syntaksis fan CSS frame net jaan sa'n ferskaat, as syn eigen inisjatyf. Impromptu - een geweldige start, en neat behinderet in developer te bouwen harren eigen frame. Foaral mei alle prestaasjes fan ynternet technology en mooglikheden fan besteande noarmen hawwe in soad kânsrike ideeën basearre op wiere tekoartkommingen fan de besteande syntaksis, dat is (per definysje) hat altyd west in strang formeel.

Yn it bysûnder, as en fêst te stellen it berik fan bepaalde eleminten, it liket passend te dwaan wiidweidich. Markearring ôfsûnderlike tags yn de kanten en de hoeken fan in regio, kinne jo krije amazing effekten. In tawizen oanbelangjende handlers, kinne oanmeitsje dynamysk side eleminten, it feroarjen fan de posysje, foarm en ynhâld.