CSS - cel mai bun poti veni cu pentru a controla aspectul paginilor Web. Atunci când este utilizat în mod corespunzător, este posibil, în câteva secunde pentru a schimba imaginea de mii de pagini de pe site. În cazul utilizării incorecte a CSS - utilizarea acestuia rămâne la nivelul de utilizare a etichetei în codul HTML. Diferența dintre utilizarea corectă și greșită a CSS este enorm. CSS separă de design de conținut: mai mic aspectul este legat de codul paginii - cu atât mai ușor este să-l gestioneze sau schimba-l.
Aplicați CSS pe pagina într-una din cele trei moduri:
- Inline CSS - folosind atributul de stil pentru HTML-tag-uri
- Embedded CSS - stylesheet este plasat în codul paginii, elementul . Pe fiecare pagină a site-ului poate fi legat de mai multe foi de stil. În plus, documentul CSS extern poate fi asociat cu utilizarea directivei @import. de exemplu:
Rețineți: ca încorporate în documentul CSS (Embedded CSS) și link-ul la fișiere externe CSS (CSS extern) ar trebui să fie întotdeauna plasate la începutul documentului (X) HTML între deschidere și închidere tag-uri
.Deci, am loc foaie de stilul nostru în fișierul CSS extern, asociați cu documentul HTML și să înceapă să se definească selectorii și proprietățile lor.
Nailed browser-ul implicit
Mai întâi am tras toate padding și de frontieră elementele pe care browser-ul poate adăuga la elementele noastre la discreția sa. Pentru a face acest lucru, setați-le în „0“ pentru toate valorile implicite folosind un singur selector care este situat chiar la începutul stylesheet noastre.
Fiecare element din selectorul are acum valori zero marja, padding și de frontieră, oricare ar fi acestea au fost anterior atunci când browser-ul începe să se afișeze pagina. O astfel de metodă permite să bată toate valorile implicite, și apoi puteți începe să proiecteze pagina în forma în care ar dori să vadă. Continuăm:
Selectorul p anunță marja pentru elementul nostru p. Pe scurt, adâncitura 15 pixeli din toate părțile, pentru toate elementele din secțiunea
.
. Astfel, vom obține aceleași secțiuni de afișare în diferite browsere. La fel ca punctul indentare poate fi setat și / sau limitele celorlalte elemente pe care le aduce la zero în primul selector din nou la aspectul lor similare în diferite browsere.In imaginea de mai jos puteți vedea cum a fost afișat elementul FIELDSET în Internet Explorer și Firefox. Este clar că valorile implicite ale compatibilitate indiferent de browser fără indentare doar captura de ecran. Fiecare dintre browserele de pe înțelegerea determină apariția aceluiași element.
Imaginea următoare vedea în mod clar efectul zero padding și a frontierelor FIELDSET. ceea ce am făcut în primul selector. Acesta este acum browserele afișa pagina în conformitate cu instrucțiunile noastre, și nu așa cum le-ar dori. Cu toate că din nou, veți observa o mică diferență: albastru implicit legenda în Internet Explorer și negru în Firefox, cu siguranță nu vom face. Schimbarea culorii textului și alte setări pot fi într-un selector FIELDSET separat. Alternativ, aveți posibilitatea să le declare ca valori pentru pagina de pornire prestabilită în primul selector, în cazul în care ne padding la zero și apoi redefinească fiecare element al valorilor dorite pentru ea, așa cum sa făcut pentru paragraful.
pagina de testare
Aceasta este o procedură foarte importantă atunci când se lucrează cu CSS. și chiar și cu tot documentul prea. Testați paginile dvs. în mod constant, cu atât mai mult se va face în timpul layout-ul, este necesar mai puțin timp pentru depanare finală, și, în plus, este mult mai ușor de a face orice modificări în pagina de bine construite și bine scris.
Creați pagini în modul Standarde
Cuibărindu în cadrul standardelor facilitează în mod considerabil de lucru în paginile de cod scris, script-uri, CSS, face un angajament de timp mai previzibil, facilitează site-ul de sprijin continuu, efectuarea de modificări ale codului sau aspectul, și, în general, are o mulțime de avantaje față de pagini non-standard. Primul lucru pe care ar putea fi necesar să faceți - DOCTYPE dreapta.
- XHTML1.0 standard sau de tranziție
- Standard Core HTML4.01
În primul rând, testați paginile dvs. în browserele corecte
Browser-ul în care să testați paginile care este de mare importanță. Dacă este vechi sau nu foarte versat în standardele de browser-ul, poate fi dificil de a realiza compatibilitatea cu alte browsere pentru a afișa corect paginile.
Un set exemplar de testare în procesul de creare a paginii descendent: Firefox (precum și alte Gecko browsere se ocupă perfect CSS), Opera și Internet Explorer. Nu ar trebui să înceapă testarea cu IE, pentru că este în mare măsură incorect și există un număr suficient de erori, lupta cu care mai bine să se facă după depanare cu succes de browsere regulate.
Să clar numele selectoare
Desigur, selectorii id si class poate fi dat orice nume, dar este mai bine, dacă acestea vor reflecta esența selectorului. Denumiri ar trebui să fie clar pentru a reveni la editarea CSS într-o jumătate de an, nu a avut o căutare lungă și dureroasă pentru cei care au nevoie să se schimbe.
Numele acestui selector (#MenuBlock) spune destul de clar că aceasta conține o unitate de navigație.
Dar asta înseamnă # div1 va fi dificil să-și amintească în a doua zi a aspectului paginii. Nume selectori sunt lipsite de valoare.
dimensiunea textului
Nu folosiți dimensiuni absolute font în document, în acest caz, multe browsere nu sunt în măsură de a schimba dimensiunea în cazul în care textul este prea mic. Cel mai bine este de a utiliza unități relative: em sau%.
În procesul de creare a unei pagini ar trebui, de asemenea, în mod constant a verifica modul în care se comportă în browser-ul atunci când modificați dimensiunea fontului, dacă designul cu prea multă creștere a rupt.
Fontul pe pagina
font-family: Arial, Verdana, Helvetica, sans-serif;
În plus, trebuie amintit că, dacă numele fontului este format din mai multe cuvinte, separate prin spații, numele trebuie să fie în ghilimele: „Times New Roman“.
valorile implicite stabilite
La începutul acestui articol, ne-am scăpat de valorile browsere pe care le aplică la elementele implicite HTML, am adus la zero margini și frontiere. Acum, dimpotrivă, pentru a seta valorile implicite pentru document. Cel mai bun loc pentru ei - corpul etichetei.
Acest lucru ciudat valoare 100.01% dimensiunea fontului compensează pentru câteva browsere glitches. În primul rând, valoarea implicită a dimensiunea fontului în procente (nu le) elimină problema IE / Win în disproporționată întindere și compresiune a fontului, dacă aveți apoi utilizați-le pentru celelalte elemente. În plus, unele versiuni de Opera arată font-size: 100% mai mici decât alte browsere. Safari are de asemenea probleme cu font-size: 101%. Prin urmare, este mai bine să utilizați un 100.01%!
Deci, am stabilit dimensiunea fontului implicit pentru organism. și apoi utilizând ca bază, se poate determina dimensiunile relative ale fonturilor alte elemente de pe pagina. De exemplu, pentru elementul p poate determina font-size: 80% și este de 80% în raport cu dimensiunea fontului pentru corp. Un membru pentru h1. de exemplu, poate avea un font-size: 135%.
Mai mult, am identificat o familie de font implicit pentru pagina. Aceste fonturi vor fi folosite pentru toate elementele paginii în cazul în care nu sunt înlocuite pentru oricare dintre ele separat, de exemplu, pentru H1 pentru a face orice alt font.
Apoi setați culoarea textului implicit (culoare: # 333), care, de asemenea, poate fi înlocuită pentru orice element, și stabilește culoarea de fundal pentru pagina (background-color: #fff).
în concluzie
articole similare