revelaţia mea

Unde suntem

În articolul meu anterior dedicat CSS vorbesc despre principiile de bază ale CSS și cazuri tipice de folosire a acestuia. Au fost elementele de bază ale CSS, posibile tipuri de selectoare, structura HTML din punct de vedere CSS. Am enumerat cele mai comune proprietăți CSS și a arătat modul în care acestea pot fi setate pentru elementele de pagină. Am acordat suficientă atenție proprietățile CSS sunt responsabile pentru padding și de frontieră de redare de text, imagini, link-uri și liste. În cele din urmă sa stabilit pe proprietăți specifice tabele de stil.

Totul este bun, dar încă lasă deschisă problema utilizării de stiluri CSS pentru formarea structurii și aspectul paginii. Anterior, atunci când despre CSS, puțini oameni știau că au format doar ca o tehnologie eficientă în acest scop este folosit aproape universal în tabel. Ei ocupă, de obicei, tot spațiul de pe pagină și de a folosi celulele din tabel a cerut regiunilor pentru a se adapta secțiunile individuale. Prezența unor proprietăți cum ar fi colspan și rowspan. care permit respectiv linia lipici la mai multe coloane și rânduri multiple într-o coloană, a dat și mai mare flexibilitate de marcare mod predeterminat. Foarte des, deoarece conținutul celulei de a utiliza tabele imbricate, care, la rândul lor, ar putea avea mesele sale imbricate. Această structură pagină, în cazul unor volume mari a crescut grele, trudnopodderzhivaemoy și nu este flexibil. Să presupunem că, pentru a trece de la o secțiune la cealaltă parte a paginii, în unele sluagh a trebuit să stea ore în șir și rescrie manual aspectul din nou.

Acum, cu utilizarea CSS totul a devenit mult mai ușor. Este suficient să se separe conținutul secțiunii dorite într-un strat separat, folosind o etichetă div și cere doar pentru el regulile de poziționare pe o pagină folosind proprietăți CSS. În cazul în care mai târziu va fi necesar să se mute această secțiune în partea opusă a paginii - pur și simplu schimba proprietățile CSS nu se ating, în același timp, cea mai mare parte codul paginii. Este foarte simplu și convenabil. Cu toate acestea, pentru ceea ce a fost aparentă simplitate am nevoie de un pic mai profund familiarizați cu posibilitățile de date.

În acest articol voi vorbi despre unele metode pentru aspectul paginii sunt, cum să le folosească și cum să le creați. Dar să începem cu doar un rând.

Opțiuni pentru aspect al paginii.

Pagină cu o lățime fixă. Aceste pagini au ogranitsenie pe lățimea elementelor sale, și indiferent de ce dimensiune a ferestrei browser-ului - lățimea regiunii este utilizată este fixă ​​și nu se schimbă modelul în timpul lucrului cu pagina. Aceste pagini sunt utilizate în acele locuri în care ustanvleny cerințe stricte pentru elementele de afișare pe pagina și ce elemente trântit nekontrolliruemoe pur și simplu inacceptabil. În astfel de cazuri, de obicei, setați o lățime fixă ​​a tag-ul corpului și centrați lățimea paginii a ferestrei browserului. Cea mai frecventă valoare pentru lățimea paginii cu o lățime fixă: 960 x - dimensiunea unei pagini care să permită o privire bună la o rezoluție de ecran pornind de la 1024x768.

Pagini plutitoare lățime. - În acest tip de lățimea paginii elementelor sale nu sunt definite, iar ei sunt liberi să schimbe dimensiunile lor, răspândindu-a lungul secțiunii de ecran sau părinte și ținând tot spațiul disponibil. Această abordare este cea mai potrivită pentru a aplica în cazul în care scopul principal este acela de a afișa pagina de text. În alte cazuri, aplicarea unor astfel de abordări pot face un Don Quijote, luptă cu morile de vânt este inutil, nici un fel în cazul dumneavoastră este browser-ul.

„Pagina flexibilă.“ Aceste pagini se combină ambele abordări. Elementele acestor pagini au o lățime fixă, dar se poate întinde sau micșora, în funcție de lățimea ferestrei browser-ului în intervalele prestabilite. În acest scop, puteți utiliza proprietățile min-înălțime. min-lățime. max înălțime și max-lățime. Am menționat în prima parte.

Pentru a obține cele mai bune rezultate, de multe ori are sens să se unească toate cele trei abordări de aspectul paginii: de exemplu, toate din secțiunea de suport și navigare - ceea ce este inacceptabil elemetnov răspândirea necontrolată - face lățime fixă, iar panoul central pentru a face „flexibil“ sau chiar permite să împrumute tot spațiul rămas după secțiunile fixe ale ferestrei browserului.

Metode de aspect de pagină

CSS vă permite să pună în aplicare în mod eficient aspectul folosind o varietate de metode și tehnici. Cele mai comune metode includ straturi plutitoare (din surse vorbitori de limba engleza, această tehnică poate fi numit aspect float) și poziționarea absolută (poziționare absolută). Mai mult decât atât, subiectiv marcarea majoritatea absolută a site-uri folosind imennno straturi plutitoare. În continuare, voi încerca să ia în considerare fiecare dintre aceste metode mai detaliat.

straturi plutitoare

Straturile plutitoare sunt realizate prin manipularea cu proprietatea de a pluti eementov pagina. Cu acest strat proprietăți, paragrafe și alte elemente pot fi poziționate pe pagina de partea stângă sau dreaptă sau pe partea dreapta a containerului exterior. Pentru a face acest lucru, trebuie să setați proprietatea float la valorile corespunzătoare: float: stânga, dreapta, nici unul;. Restul conținutului paginii va „înconjura“ elementul este apăsat împotriva uneia dintre părți. Un punct foarte important pe care trebuie remarcat faptul că conținutul va înconjura elemetn să plutească doar atunci când se determină sub această etichetă în codul paginii și lățimea acesteia nu este mai mult decât restul lățimii paginii sau a containerului exterior. Prin urmare, în acest caz, este foarte important să se determine secvența paginii elemetnov descriere ca fișier HTML.

Uneori, există situații când este necesar să se facă acest lucru, care ar fi ceea ce conținutul nu este înconjurat de un element al flotorului și este tras de mai jos acest articol. Un exemplu de o astfel de situație poate fi panou-subsol, care, în ciuda a tot ceea ce trebuie să fie întotdeauna în partea de jos a paginii. S-ar putea veni în ajutorul proprietății clar că acceptă următoarele valori: clar: la stânga; dreapta; ambele; nici unul. Această caracteristică forțează conținutul trase de sub-elementul float. Și, prin utilizarea acestei valori proprietate poate fi setat la orice element float aparține: cu vyravnimaniem stânga, dreapta și așa mai departe și așa mai departe sau nici la una, nici alta. Deci, dacă aveți un element cu float: left. pentru că s-ar odihni conținutul afișat mai jos și să nu-i permită să înconjoare acest element ar trebui, de asemenea, utilizați clar: la stânga.

Cu toate acestea, funcționalitatea descrisă, desigur, nu este suficient pentru punerea în aplicare efectivă a aspectului paginii. Acum este momentul de a face cu metode de reglaj fin de marcare. În sulchae plutitoare elemente ale paginii de poziție straturi pe orizontală Ca regulă set cu ajutorul proprietăților CSS marja, care, după cum știm deja, este utilizat pentru a specifica distanța de la marginea unui element la un alt element. La prima vedere poate părea un pic ciudat și nu practică. Cu toate acestea, este doar la prima vedere. Caracteristica unica a acestei proprietăți este că este posibil să se stabilească o valoare negativă, înlocuind astfel, elementul la stânga în raport poziția sa inițială pentru ea. Ei bine, și în consecință, o valoare pozitivă mută elementul spre dreapta (de fapt, desigur, elementul rămâne în locul său, doar adăugând marja de proprietăți pentru elemetna se mișcă vizual la o valoare predeterminată).

Astfel, este posibil să se elemetnov seta o lățime fixă ​​și înălțimea de lățimea și înălțimea, respectiv, specificați valorile necesare și float marja și să se bucure de rezultat. Alte acțiuni sunt limitate doar de imaginația și ingeniozitatea. Ca un exemplu, vreau să arăt cum se poate marca pagina. Mai jos este o pagină de probă razbyty în secțiuni și cod CSS-fișier HTML și pagini.

poziționare absolută

poziționare absolută. așa cum am spus, nu este utilizat ca straturi de multe ori ca plutitoare, dar, de asemenea, merită o atenție. Uneori se întâmplă că admiterea straturilor plutitoare este inacceptabilă pentru un motiv oarecare, și deci tot ce rămâne pentru noi în această situație - este de poziționare absolută. Cu toate acestea, poziționarea cea mai absolută este utilizată pentru poziția impurității - specificând plasarea unui element în raport cu o altă poziție. Oricum știu despre este necesară această admitere.

Baza acestei tehnici este poziția de utilizare a proprietăților. care poate lua următoarele valori: Poziția: absolută, relativă, fixă, statică. Semnificație absolută - specifică poziția elementului în coordonate ecran, sau elementul părinte, așa cum va fi prezentat mai jos. relativă - determină poziția în raport cu locația implicită. Când specificați diferența folosind această valoare, pagina este o „gaură“, astfel încât tind să-l folosească astfel încât nu este necesar ca tine poate - un pic mai târziu. fixă - Specifică poziția de pe ecran, indiferent de parcurgere, adică indiferent de cât de mult nu derulați pentru a derula bar - element va rămâne în poziția sa. Valoarea statică - poziționare normală, în cazul în care nu este specificat clasament elemetna tip, această valoare este valabilă pentru umlochaniyu.

Odată proprietatea poziția este setată pentru un element, este logic să se precizeze proprietățile care determină coordonatele elementului: sus, jos, stânga și dreapta. De exemplu, specificând poziția oricărui element: absolut. Îl puteți seta folosind proprietățile menționate mai sus cu privire la una sau alta frontieră a ferestrei de browser. Cu toate acestea, dacă vorbim despre ce o celulă care, de exemplu, este în interiorul stratului, poziția absolută a elementului se realizează cu privire la limitele stratului însuși.

Pentru a clarifica cele de mai sus, ia în considerare un exemplu simplu. Să presupunem că avem un titlu și setați imaginea în antet. Apoi, poziția sa în raport cu același titlu poate fi setat după cum urmează: