CSS Box: improvizație și efectul

foi de stil (CSS) Cascading pentru toată simplitatea ei logică face posibilă nu numai pentru a crea o soluție de design spectaculos, dar oferă, de asemenea elemente de acțiune reală, pentru a emula performanța codului real.

Orice etichetă vizuală HTML marcare - o zonă dreptunghiulară de o anumită structură și conținut. Elementul cuprinde indicarea coordonatelor, dimensiunea, umplutură, culoare, font, stilul fontului, și așa mai departe. Cadru CSS element le specifica suprafața ocupată, fiind situată spre interior de la limitele sale pe lățime desemnat aici.

descriere sintaxă

DOMENIU elementul de plasare specificat coordonatele relativ la colțul din stânga sus al paginii (stânga, sus), dimensiunea în direcțiile orizontale și verticale (lățime, înălțime). Toate elementele de design și animație sunt făcute în perechi „proprietate: valoare“.

Descrierea se face direct în codul paginii pentru a insera stil sau într-un fișier separat, arătând spre el de referință LINK. sintaxa:

#nume {proprietate: valoare; proprietate: valoare; proprietate: valoare; ...}

sau

.name {proprietate: valoare; proprietate: valoare; proprietate: valoare; ...}

Numele poate fi, de asemenea p, corp, html, tabel, td ..., care este numele de tag-ul HTML-marcare. Poate fi conectat direct cu descrierea elementului de stil.

Înainte de a face propriul meu stil de scris, nu doare pentru a vedea cum se face pe site-uri populare, păstrând codul paginii, sau prin apăsarea Ctrl-U pentru ao vizualiza direct în browser.

Principalii parametri

Stilul de fapt elementul de cadru CSS reprezentat (stilul de frontieră), culoare (border-color), latimea (border-width). Acesta poate fi toate rezumate într-o singură proprietate - de frontieră. Puteți descrie fiecare cadru frontieră, în mod independent (border-top, de frontieră de jos, stânga-frontieră, frontieră-dreapta).

cadru CSS descris de regulile generale de foi de stil în cascadă:

frontieră: 3px;
border-culoare: roșu;
Stil de frontieră: punctată dublă punctată solidă.

Această descriere stabilește lățimea de frontieră de 3 pixeli, culoare - roșu fete, stil: partea superioară a dublului drept, - punctată jos, solid, stânga - punct.

border-width: 1px 2px 4px 8px;
border-culoare: albastru;
Stil de frontieră: punctat.

Aici, dimensiunile fiecare parte sunt, de asemenea, succesiv, de sus, sensul acelor de ceasornic, culoare - albastru, și stilul - spot.

frontieră culori: albastru rosu verde negru;

în această specificație, sunt specificate în mod individual de culoare pe fiecare parte. proprietate de frontieră pot include mai mulți parametri, iar unghiurile cadrului pot fi rotunde:

frontieră: 1px solid de culoare verde;
border-radius: 0px 4px 8px 12px;
-moz-border-radius: 0px 4px 8px 12px;
-webkit-border-radius: 0px 4px 8px 12px;

Cu privire la modul de a face cadru în CSS, depinde de gradul de utilizare a vizitatorului, pentru că, de obicei, efectul stilistic este utilizat în scopuri tehnice, atunci este important pentru a arăta locația exactă și dimensiunea zonei de pe pagină.

Grosimea cadrului și scopul acesteia

Prin alegerea grosimea cadrului, puteți utiliza px, pt, em ..., dar trebuie avut în vedere faptul că este întotdeauna în elementul de câmp. Este dificil să se presupună că rama are un scop de design CSS, dar punct de vedere tehnic este foarte util pentru a evidenția elementele paginii.

În cazul în care clasa principală cadru este blocat, care este absent, specificând că în pseudo-clasa: Hover, se poate demonstra vizitatorului elementului paginii, atunci când acesta este cursorul mouse-ului, cum ar fi subliniind un element de meniu. Uneori este necesar să se selecteze ceva făcând clic pe imagine, sau trageți ceva pe undeva. Este foarte convenabil de a folosi cadru punct și nu pentru a schimba fundalul elementului sau a conținutului acestuia.

Unele aplicații necesită alocarea de zone ale paginii sau selectați elemente pentru prelucrarea ulterioară. În acest caz, în momentul de clic pentru a crea un div cu o bordură și, atâta timp cât vizitatorul nu eliberați butonul mouse-ului, o redimensiona, arătând vizual rezultatul alegerii.

Afară sub

Tutoriale CSS sunt foarte interesante, cum este importanța cercetării codurilor de pagini de site-uri populare. Cu toate acestea, resursele proprii trebuie să fie unic, acesta trebuie să aibă propria față.

Cu condiția sintaxa cadrului CSS nu oferă o astfel de soi, ca și din proprie inițiativă. Impromptu - un start bun, și nimic nu împiedică un dezvoltator pentru a construi propriul lor cadru. Mai ales cu toate realizările tehnologiei de pe Internet și capacitățile standardelor existente au multe idei promițătoare bazate pe neajunsuri reale ale sintaxei existente, care este (prin definiție) a fost întotdeauna o strict formală.

În special, în cazul în care și pentru a stabili domeniul de aplicare a anumitor elemente, pare adecvat să se facă acest lucru în mod cuprinzător. Evidențierea tag-uri individuale din laturile și unghiurile unei regiuni, puteți obține efecte uimitoare. A asignarea stivuitoare respective, pot crea elemente de pagină dinamice, schimbarea poziției, forma și conținutul.