Există situații în dezvoltarea web unde sunt necesare decizii rapide, iar cea mai simplă modalitate este de a folosi trucuri CSS simple dar eficiente. Unele trucuri sunt atât de simple încât designerii web nu se gândesc la ele și le folosesc în modul automat. Și pentru a folosi câteva trucuri CSS, trebuie să faceți puțin Google pentru a vă asigura că această sau acea metodă este utilizată corect. Am decis să colectăm căile de bază ale programării CSS într-un singur loc. Prin urmare, în acest post veți găsi cele mai frecvent utilizate soluții atunci când lucrați cu stilurile CSS.
Elemente de centrare
Elementele de centrare reprezintă unul dintre cele mai dificile trucuri din CSS, care pot fi modificate în multe feluri. Decizia poate lua diverse forme și în fond depinde de ce trebuie să vă concentrați. Mai jos sunt considerate soluțiile principale pentru centrarea diferitelor elemente pe pagină.
Textul este aliniat la centrul paginii (sau la un bloc individual) folosind text-align: style center; .
Etichetă (container sau bloc)
Elementul div (sau orice alt element) poate fi centrat, dacă, de exemplu, setați proprietatea blocului. și apoi utilizați indentarea automată orizontală (stânga și dreapta).
Exemplul folosește o lățime de 100% din dimensiunea blocului (sau pagină), precum și o marjă de la partea superioară și inferioară a lui 0. și automată stânga și dreapta. care permite browserului să calculeze centrul containerului și, în consecință, să îl centreze.
Alinierea verticală (centrarea verticală)
Acesta este, de asemenea, un truc destul de comun în CSS și merită luată în considerare. Principala sarcină în centrarea verticală este folosirea acelorași stiluri de înălțime și înălțime. Aceasta permite, de asemenea, browserului să calculeze înălțimea elementului și, în consecință, să-și găsească axa centrală. Dacă trebuie să aliniați ceva în interiorul blocului de-a lungul axei centrale verticale, utilizați proprietatea vertical-align: middle; .
Poziționarea absolută
Dacă aveți nevoie de un control total asupra locației oricărui bloc din pagină, atunci trebuie să utilizați poziționarea absolută (poziție: absolută;). Poziționarea absolută permite plasarea blocului în locul potrivit cu o precizie de 1 pixel. Utilizând proprietățile de sus. dreapta. în partea de jos și în stânga (acesta este un fel de indentare din partea corespunzătoare a paginii), puteți specifica exact "coordonatele" blocului dorit.
În acest exemplu, blocul cu clasa blok are o liniuță de la marginea superioară a browserului (paginile) în 25px, iar din marginea din stânga indentul este de 50px. Dacă blocul părinte are o poziționare diferită de cea statică. atunci numărul de indentare este de la marginile acestui element parental. De exemplu, în cazul în care blocul este încorporat cu Blok clasă la un alt bloc (de exemplu poziția: relativă;), care este stabilit în 35px marginea de sus, atunci Blok este o margine superioară comună 60 pixeli (35px + 25px).
Selectarea copiilor direcți
Destul de des trebuie să specificați nu numai stilurile comune pentru întregul bloc, ci și stiluri separate pentru descendenții direcți (copii, elemente imbricate). Pentru aceasta, există un truc corespunzător în CSS - folosiți doar>. pentru a specifica copiii direcți.
Acest stil vă permite să selectați toate elementele unui (link-uri) aflate direct sub bloc cu clasa blok și setați dimensiunea fontului la 33px. Dacă, de exemplu, o etichetă este încorporată în eticheta p. atunci nu va mai fi un copil direct al blocului bloc. și schimbarea dimensiunii fontului nu o afectează.
Selectarea unui anumit copil
Acest truc poate fi, de asemenea, la îndemână. Pentru a aplica un stil unui anumit element copil, utilizați un selector al formularului
În exemplul de mai sus, aplicăm stilurile necesare pentru cea de-a doua imagine din cont, care este copilul blocului bloc. Alte imagini din acest bloc nu vor afecta stilul specificat.
Ajustarea dimensiunilor imaginii pentru dimensiunile blocurilor
Uneori trebuie să potriviți o imagine într-un bloc care are alte dimensiuni. De exemplu, într-un bloc cu o lățime de 250 de pixeli, potriviți o imagine cu dimensiunile de 500 x 500 pixeli. Dacă nu specificați stilurile pentru aceste situații, imaginea va „iesi“ din marginea blocului, sau invers, nu umple complet cutia necesară (în cazul în care dimensiunile blocului pentru imagine mărită). Cea mai ușoară metodă este să utilizați lățimea dinamică pentru a afișa imaginea.
Astfel de stiluri permit imaginii să umple complet întreaga lățime a blocului părinte, iar înălțimea imaginii va fi calculată și modificată automat.
Pseudo-element: înainte
Cu acest pseudo-element, puteți introduce conținutul dorit înainte de conținutul unui anumit bloc. Foarte des, cu ajutorul acestui truc, webmasterii introduc niște mini-icoane în fața etichetelor necesare. De exemplu, pentru a stiliza o listă cu marcatori (ul) într-un anumit mod. Acest lucru se face folosind proprietatea conținutului. Conținutul poate fi, de exemplu, un text sau o imagine specifică. De foarte multe ori, utilizează fonturi iconice (de exemplu, FontAwesome).
Cod exemplu pentru utilizarea imaginii ca conținut:
Cod exemplu pentru utilizarea textului ca conținut:
Pseudo-element: după
Similar unui pseudo-element: înainte de pseudo-element: după lucrări. Diferența este că conținutul este introdus după elementul dorit.
Modificarea elementelor utilizând filtre CSS
În stilurile CSS3, există deja tehnici avansate care vă permit să modificați elementele necesare fără JavaScript. De exemplu, utilizând filtrele CSS puteți schimba imaginile fără a folosi chiar programe de editare a imaginilor. De exemplu, este foarte ușor să culori o imagine color utilizând doar câteva linii de cod în stilurile CSS.
Cod exemplu pentru decolorarea imaginii:
O soluție interesantă ar fi, de exemplu, să returnați culoarea în imagine atunci când plasați mouse-ul peste ea. Pentru a face acest lucru, utilizați pseudo-class: hover. care poate suprascrie stilurile elementului când mutați mouse-ul peste el.
Cod exemplu pentru returnarea culorii unei imagini decolorate:
Parametrii Filtrele CSS funcționează în aproape toate browserele moderne (cu excepția Internet Explorer).
Trimiteți-le prietenilor: