CSS Box: impromptu en effek

Cascading style sheets (CSS) vir al sy logiese eenvoud maak dit moontlik om nie net 'n skouspelagtige ontwerp oplossing te skep, maar ook elemente van werklike aksie, om die prestasie van die werklike kode navolg.

Enige visuele tag HTML-merk - 'n vierkantige area van 'n bepaalde struktuur en inhoud. Die element bestaan uit 'n aanduiding van die koördinate, grootte, padding, kleur, lettertipe, lettergrootte styl, en dies meer. Frame CSS-element spesifiseer hulle besette gebied, wat innerlike geleë vanaf sy grense op hierin aangewys breedte.

sintaksis beskrywing

FIELD plasing element gespesifiseerde koördineer met betrekking tot die boonste linker hoek van die bladsy (links, bo), die grootte in die horisontale en vertikale rigtings (breedte, hoogte). Alle ontwerp en animasie elemente is gemaak in pare "eiendom: waarde".

Beskrywing is direk gedoen in die bladsy kode te styl voeg of in 'n aparte lêer, wys na hom LINK verwysing. sintaksis:

#name {eiendom: waarde; eiendom: waarde; eiendom: waarde; ...}

of

Name {eiendom: waarde; eiendom: waarde; eiendom: waarde; ...}

Die naam kan ook p, liggaam, html, tafel, td wees ..., wat is die naam van HTML-opmaak tag. Kan direk verbind word met die beskrywing van die styl element.

Voordat jy my eie skryfstyl, nie seer om te sien hoe dit gedoen word op die gewilde webwerwe, die behoud van die bladsy kode, of deur te druk Ctrl-V om dit direk te sien in die leser.

Die belangrikste parameters

Eintlik CSS raam element verteenwoordig styl (grens-styl), kleur (grens-kleur), breedte (grens-breedte). Dit kan al opgesom word in een eiendom - grens. Jy kan elke grens raam onafhanklik te beskryf (grens-top, grens-bodem,-grens links, grens-regs).

CSS raam beskryf deur die algemene reëls van Cascading Style Sheets:

grens: 3px;
grens-kleur: rooi,
grens-styl: dubbele verpletter soliede stippellyn.

Hierdie beskrywing gee die breedte grens van 3 pixels, kleur - rooi, styl kante: bo-kant van die dubbele, reg - verpletter, soliede bodem, links - punt.

grens-breedte: 1px 2px 4px 8px;
grens-kleur: blou;
grens-styl: gesaai.

Hier is die afmetings van elke kant is ook agtermekaar van bo, kloksgewys, kleur - pers en styl - Spot.

grens-kleur: blou rooi groen swart;

in hierdie spesifikasie, individueel gespesifiseerde kleur aan elke kant. grens eiendom kan verskeie parameters, en die hoeke van die raam kan rond wees, sluit in:

grens: 1px groen soliede;
grens-radius: 0px 4px 8px 12px;
-moz-grens-radius: 0px 4px 8px 12px;
-webkit-grens-radius: 0px 4px 8px 12px;

Oor hoe om die raam te maak in CSS, dit hang af van die bruikbaarheid van die besoeker, want gewoonlik die stilistiese effek word gebruik vir tegniese doeleindes, wanneer dit belangrik is om die presiese ligging en grootte van die gebied op die bladsy wys.

Die dikte van die raam en die doel daarvan

Deur die keuse van die dikte van die raam, kan jy gebruik px, pt, em ..., maar dit moet in gedagte gehou word dat dit altyd binne die veld element. Dit is moeilik om te aanvaar dat die raam het 'n CSS ontwerp doel, maar tegnies is dit baie nuttig om die elemente van die bladsy na vore te bring.

As die hoof raam klas is gesluit, wat afwesig is, deur die spesifiseer dit in pseudo-klas: hover, kan dit getoon word om die besoeker van die bladsy element, wanneer dit is die muis, soos die klem op 'n menu-item. Soms is dit nodig om iets deur te kliek op die beeld te kies, of iets iewers sleep. Dit is baie gerieflik om dot raam te gebruik, en nie na agtergrond die element se of die inhoud daarvan te verander.

Sommige programme vereis dat die toekenning van areas van die bladsy, of kies items vir verdere verwerking. In hierdie geval, ten tyde van die druk om 'n div skep met 'n grens en so lank as wat die besoeker nie die muis loslaat, die grootte daarvan, wat visueel die gevolg van keuse.

buite onder

CSS tutoriale is baie interessant, en so ook die belangrikheid van navorsing kodes bladsye van gewilde plekke. Daar moet egter die eie hulpbronne uniek wees, moet dit sy eie gesig het.

Op voorwaarde dat die sintaksis van CSS raam nie so 'n verskeidenheid gee, as sy eie inisiatief. Impromptu - 'n goeie begin, en niks verhoed 'n ontwikkelaar om hul eie raam bou. Veral met al die prestasies van Internet tegnologie en vermoëns van bestaande standaarde het baie belowende idees gebaseer op werklike tekortkominge van die bestaande sintaksis, wat (per definisie) was nog altyd 'n streng formele was.

In die besonder, as en om die omvang van sekere elemente vas te stel, dit lyk gepas om so omvattend doen. Die klem op individuele tags in die sye en hoeke van 'n streek, kan jy wonderlike effekte te kry. A toeken onderskeie hanteerders, kan dinamiese bladsy elemente, die verandering van die posisie, vorm en inhoud te skep.