Cadrul CSS: Impromptu și Efect

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ă a marcajului HTML este o zonă dreptunghiulară a unei structuri și a unui conținut specific. Elementul conține coordonate, mărimi, linii, culori, fonturi, contururi etc. Rama elementului CSS specifică zona ocupată de acesta, situată de la frontieră până la lățimea indicată în descriere.

Descriere Sintaxă

Zona de plasare a elementului este specificată de coordonatele relative la colțul din stânga sus al paginii (stânga, partea de sus), mărimea orizontală și verticală (lățimea, înălțimea). Toate designul și animația elementului sunt realizate în perechi: "proprietate: valoare".

Descrierea este executată direct în codul paginii, pe inserarea stilului sau într-un fișier separat, indicându-l cu legătura LINK. sintaxa:

#name {proprietate: valoare-proprietate: valoare-proprietate: valoare- ...}

sau

.nume {proprietate: valoare-proprietate: valoare-proprietate: valoare -...}

Numele poate fi, de asemenea, p, body, html, table, td ..., adică numele etichetei HTML markup. Este permisă conectarea descrierii de stil direct la element.

Î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.

Parametrii de bază

Cadrul CSS real al elementului este reprezentat de stil (stil de frontieră), culoare (marginea de culoare), lățimea (lățimea marginii). Puteți descrie totul cu aceeași proprietate - frontieră. Este posibil să descrieți fiecare graniță a cadrului în mod independent (partea de sus a frontierei, marginea inferioară, marginea stângă, frontiera dreaptă).

Cadrul CSS este descris de regulile generale ale foilor de stil cascadă:

frontieră: 3px;
frontieră-culoare: roșu-
stil de frontieră: dublu punctat solid punctat.

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.

lățimea graniței: 1px 2px 4px 8px;
frontieră-culoare: albastru-
stilul frontal: punctat.

Aici, dimensiunile fiecărei laturi sunt de asemenea afișate secvențial, pornind de la vârf, în sensul acelor de ceasornic, de culoare albastră și de punctat.

frontieră-culoare: albastru roșu verde negru;

în această descriere, culoarea fiecărei părți este indicată separat. Proprietatea de frontieră poate include mai mulți parametri simultan, iar colțurile frontierei pot fi rotunjite:

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

Cu privire la modul de a crea un cadru în CSS, confortul vizitatorului depinde, deoarece, de obicei, acest efect de stil este folosit în scopuri tehnice: atunci când este important să se afișeze exact locul sau dimensiunea zonei din pagină.

Grosimea cadrului și scopul acestuia

Dacă alegeți grosimea cadrului, puteți folosi px, pt, em ..., dar trebuie să rețineți că este întotdeauna în interiorul regiunii elementului. Este greu de imaginat că cadrul CSS are un scop de proiectare, dar din punct de vedere tehnic este foarte convenabil să îl folosești pentru a evidenția elementele paginii.

Dacă cadrul este blocat în clasa principală, adică lipsește, atunci indicându-l în clasa pseudo: hover, puteți afișa vizitatorului elementul de pagină atunci când cursorul mouse-ului este pe el, de exemplu, selectați elementul din meniu. Uneori trebuie să selectați ceva făcând clic pe imagine sau să trageți ceva undeva. Este foarte convenabil să folosiți un cadru punctat și să nu modificați fundalul elementului sau al conținutului acestuia.

Unele aplicații trebuie să selecteze o regiune a paginii sau să selecteze elemente pentru prelucrare ulterioară. În acest caz, puteți crea un div cu un cadru în momentul de a face clic și până când vizitatorul eliberează butonul mouse-ului, redimensionează-l, afișând vizual rezultatul selecției.

În afara celor stipulate

Cursurile CSS sunt foarte interesante, este, de asemenea, important să studiem paginile de cod ale site-urilor populare. Cu toate acestea, resursa proprie trebuie să fie unică, trebuie să aibă propria sa 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, dacă vrem să creăm cadrul acestor sau al altor elemente, pare rezonabil să facem acest lucru într-un mod cuprinzător. Prin evidențierea laturilor și unghiurilor unei anumite zone în etichete separate, puteți obține efecte uimitoare. Și prin alocarea manipulatorilor corespunzători, puteți crea elemente dinamice ale paginilor, schimbând poziția, forma și conținutul.