CSS Înapoi la elementele de bază Terminologii explicate
Foile de stil CSS sau Cascading completează limbajul definitoriu al regulilor de proiectare pentru web-ul nostru. Artistii de pretutindeni folosesc CSS zilnic pentru a crea, organiza si codifica seturi de reguli pentru layout-urile de baza ale site-ului. Acest lucru a devenit cel mai popular limbaj pentru designul frontal și oferă abilități uimitoare cu lansarea recentă a CSS3. Dar ce înseamnă de fapt acest cod??
Limba în sine a fost dezvoltată de câțiva ani. Confuzia poate apărea mai ales din cauza unei comunicări necorespunzătoare și a utilizării incorecte a unor termeni similari. CSS aduce o mulțime de noi concepte la masă. Vom aborda unele dintre cele mai populare terminologii pentru a fi master în calitate de guru CSS.
De ce să se specializeze cu CSS?
Această întrebare a fost pusă înainte, și chiar și în anul 2011, putem vedea că aceleași rezultate au apărut. CSS este o limbă robustă, care nu se adresează programelor de scripting sau de programare. Este un limbaj de stil, mai exact un cod folosit pentru a descrie modul în care ar trebui să se comporte o pagină web.
Folosind CSS putem manipula direct atributele din elemente HTML individuale. Toate blocurile, paragrafele, link-urile și imaginile pot fi afectate prin regulile CSS. Rafinarea semanticii de prezentare pentru web a fost întotdeauna un pas imens. Acesta este principalul motiv pentru care CSS este încă principalul jucător pentru designeri - nimeni nu a creat nimic mai bun!
Proprietăți și valori
Acesta este cel mai simplu mod de a rupe în CSS. Toate codurile se încadrează în două acțiuni: alegerea unui element pentru a aplica desenele și ce se aplică. Ultimul este creat prin perechi de proprietate / valoare.
Ca exemplu culoarea rosie; este o pereche de proprietăți / valori foarte simplă. Proprietatea pe care am folosit-o este culoare care ne permite să trecem în orice acceptabil valoare pentru a schimba culoarea textului. Acest lucru ar putea fi de asemenea cod hexagonal sau RGB (roșu-verde-albastru). De multe ori, designerii nu vor menționa ideea valorilor, deoarece pot fi înșelătoare.
Proprietățile și valorile sunt într-adevăr o singură idee. Fiecare declarație de proprietate necesită o valoare, iar valorile pe cont propriu sunt lipsite de sens. Există o mulțime de documentație online, care traversează multe proprietăți diferite și modul în care ele afectează elementele HTML. Aș recomanda să cumpărați o carte de referință CSS din orice magazin de cărți din apropiere. Acestea sunt destul de ieftine și dețin cele mai multe informații de care aveți nevoie.
Valorile selectorului
Selectorii sunt necesari pentru a completa o întreagă linie de cod CSS. Acestea sunt ceea ce declarăm pentru a stabili ce tip de element ne îndreptăm. Există mulți selectori și mulți sunt atât de complicați, încât designerul mediu nu ar avea nevoie de abilități. Verificați documentele selectorului W3 dacă doriți să aflați mai multe.
Cea mai simplă modalitate de a începe definirea stilului este utilizarea elementelor goale ca selectori de proprietăți. Aceasta înseamnă manipularea codului rădăcină, cum ar fi p pentru paragrafe, div pentru diviziuni și chiar corp și html poate fi folosit pentru a manipula întregul document de pagină web. Mai jos este un exemplu rapid de styling toate elementele de paragraf.
p font-family: Arial, sans-serif; culoare: # 222; font-weight: bold;
Ceea ce dă CSS greutatea reală este cât de precis poate fi sniping selector. Cea mai bună modalitate de a realiza stiluri vizate este prin intermediul a două metode cunoscute sub numele de clase și ID-uri. Acestea sunt idei obișnuite în HTML unde puteți seta orice element pentru a avea un ID și o valoare de clasă prin atribute. Apoi, folosind CSS, este simplu să aplici stiluri acelui bloc specific.
p # primulpar font-size: 14px; / * stiluri paragraf cu ID de "firstpar" * / p.comment font-size: 1.0em; linia-înălțime: 1.3m; / * stiluri paragraf (e) cu clasa de "comentariu" * /
Unități de lungime și valori
Adesea, acești termeni se amestecă, nu o mare surpriză. Valorile au fost explicate mai devreme ca destinația de plasare pe care o folosim pentru a descrie o proprietate. Unitățile de lungime sunt, de asemenea, valori în sensul că ele sunt folosite pentru a descrie o proprietate.
Diferența este că aceste valori necesită date numerice și, prin urmare, trebuie să returneze o anumită formă de unități. Pixelii (px) sunt cei mai răspândiți și pot fi folosiți pentru majoritatea: lățime / înălțime, dimensiune font, umplutură / margini, pentru a numi câteva.
În afară de acestea, este posibil să vedeți procente (%) utilizate frecvent prin planuri fluide. Când se stabilesc valori la o valoare procentuală, compilatorul va prelua 100% pentru a fi întreaga lățime a browserului web. Acest lucru oferă o mare precizie designerilor atunci când aplică stiluri pentru structuri de aspect și chiar tipografie de pagină.
Blocul de declarații
Acum, după ce am pus împreună toți acești termeni, suntem în cele din urmă capabili să discutăm ideea de bază din spatele foilor de stil. Blocurile de coduri sunt folosite pentru a delimita zonele tematice și pentru a specifica detaliile elementelor. De exemplu, mai jos este o linie de cod pentru un container simplu de navigare:
div # nav afișare: bloc; lățime: 100%; padding: 3px 6px; margin-bottom: 20px;
Cea mai ușoară modalitate de a afișa acest cod este proprietățile liniei unul după altul. Dezvoltatorii CSS au folosit blocuri de cod pentru a rupe fiecare proprietate pe propria linie. Această agendă nu numai că ocupă mult mai mult spațiu, dar reduce capacitatea de a “frunzări” foaia dvs. pentru a găsi exact ceea ce aveți nevoie.
O modalitate mai bună de a rupe blocurile de cod este de a separa elementele convolute în propriile lor după ce ajung la un prag. Acest număr este personal și va fi diferit între dezvoltatori. Este punctul de vârf în care logica dictează că este proastă să păstreze totul pe o singură linie, mai ales din cauza lizibilității.
Mai jos am scris un exemplu de bloc de proprietăți de navigație toate împreună. Această practică păstrează elemente mai profunde în aceeași locație, astfel încât modificările la toate elementele de navigație sunt mult mai simple.
div # nav afișare: bloc; lățime: 100%; padding: 3px 6px; margin-bottom: 20px; div # nav ul stil-list: none; afișare: bloc; div # nav ul li float: stânga; marginea-dreapta: 10px; font-size: 12px; div # nav ul a culoare: # 0f0f0f; text-decorare: nici unul; afișare: inline-block; padding: 2px 5px;
Progrese posibile din CSS2 / CSS3
În titlurile de astăzi a fost fără întrerupere discuții despre avantaje uimitoare de la CSS3. Dar ceea ce este cu adevărat schimbat în limba? Codul clar vechi va funcționa în continuare foarte bine. Acest lucru arată cel puțin compatibilitatea completă între compilatoare (întotdeauna un lucru bun).
Diferențele majore sunt în mare parte legate de proprietăți noi. Acestea permit ca colțurile rotunjite și efectele de umbră să fie redate în browser. CSS3 oferă, de asemenea, noi instrumente pentru descrierea culorilor în documente. HSL (Hue-Saturation-Lightness) este cel mai nou în plus față de HSLA care include un canal Alpha pentru a reduce opacitatea.
Selectorii de atribute reprezintă un pas imens în ceea ce privește stilul de marcare drept. Cu acest stil de cod puteți viza un nume de element specific care conține atribute cu anumite valori. Acestea sunt în mare parte utile atunci când lucrați cu markup, cum ar fi XML, unde nu există principii de proiectare standard pentru manipularea nodurilor. Exemplul de mai jos este o idee relativ simplă:
div [atribut ^ = "1"] / * stiluri aici * /
Codul de mai sus face parte din biblioteca CSS selectorilor. Acest lucru ar afecta toate elementele div cu un atribut “attrib” care deține și valoarea “1”. Dacă acest lucru este încă confuz de referință exemplul de mai jos pentru a clarifica. În teorie, acești doi selectori ar trebui să efectueze aceleași acțiuni.
p [id ^ = "primar"] / * stiluri * / p # primar / * stiluri * /
Concluzie
După ruperea câtorva din termenii extrem de confuzi, CSS pare a fi o plimbare în parc. Limba este foarte intuitivă, iar începătorii pot începe proiectarea în primele câteva ore. Aceasta este ceea ce face CSS atât de popular printre dezvoltatorii web.
Beneficiile CSS3 tocmai au început să aibă efect. Pe parcursul ultimilor ani, evoluția tendințelor web ne va arăta cât de mult control avem cu adevărat asupra designului paginii web. CSS este în prezent mandru ca limbă dominantă pentru styling-ul de pe site-ul web. Practicarea în abilități chiar și rudimentare la nivel intermediar poate produce o experiență de proiectare bogată și cunoștințe viitoare.
