20 sfaturi utile CSS pentru începători

În trecut, depinde foarte mult de dezvoltatori și programatori pentru a ajuta la actualizarea site-ului, chiar și atunci când este doar unul minor. Datorită CSS și flexibilității sale, stilurile pot fi extrase independent de coduri. Acum, cu o înțelegere de bază a CSS, chiar și un novice poate schimba cu ușurință stilul unui site web.

Indiferent dacă sunteți interesat să preluați CSS pentru a vă crea propriul site web sau pur și simplu pentru a schimba aspectul blogului dvs. și pentru a vă simți puțin - este întotdeauna bine să începeți cu fundamentele pentru a obține o bază mai puternică. Să aruncăm o privire la unii Sfaturi pentru CSS am crezut că ar putea fi folositoare începători. Lista completă după salt.

1. Utilizare reset.css

   Când vine vorba de redarea stilurilor CSS, browserele precum Firefox și Internet Explorer au diferite moduri de a le manipula. reset.css resetează toate stilurile fundamentale, așa că începeți cu o foaie de stiluri reale noi.

   Aici sunt câteva utilizate frecvent reset.css cadre - Yahoo Reset CSS, Resursele CSS ale lui Eric Meyer, Tripoli

2. Utilizați Shorthand CSS

   Shorthand CSS vă oferă o metodă mai scurtă de scriere a codurilor CSS și, cel mai important, este clar și mai ușor de înțeles.

   În loc să creeze un astfel de CSS

   .header culoare-fundal: #fff; fundal-imagine: url (image.gif); fundal-repet: nu-repeta; pozitie fundal: partea stanga sus; 

   Aceasta poate fi scurtă în următoarele:

   .header background: #fff url (imagine.gif) nr-repetat la stânga sus

   Mai Mult - Introducere în Shorthandul CSS, Proprietăți utile pentru stenograma CSS

3. Înţelegere Clasă și ID-ul

   Acești doi selectori confundă adesea începătorii. În CSS, clasă este reprezentat de un punct "." in timp ce id este un hash "#". Pe scurt id este folosit pe un stil care este unic și nu se repetă, clasă pe de altă parte, pot fi reutilizate.

   Mai Mult - Clasă vs. ID | Când să folosiți clasa, ID | Aplicarea clasei și a ID-ului împreună

4. Puterea de

5. a.k.a o listă de link-uri, este foarte util atunci când acestea sunt utilizate corect cu
   sau
   , în special pentru stilul unui meniu de navigare.

   • A uita , încerca

     Unul dintre cele mai mari avantaje ale CSS este utilizarea lui

     pentru a obține o flexibilitate totală în ceea ce privește stilul.

     sunt diferite

     , unde conținutul este "blocat" în interiorul a

     celulă. Este sigur să spun majoritatea layouts sunt realizabile cu utilizarea și stilul propriu-zis, și poate cu excepția conținuturilor tabulare masive. Mai Mult - Tabelele sunt moarte, Tabele Vs. CSS, CSS vs tabele Instrumente de depanare CSS Este intotdeauna bine sa obtineti o previzualizare instantanee a layout-ului in timp ce tweaking CSS-ul, ajuta la intelegerea si depanarea stilurilor CSS mai bine. Iată câteva instrumente gratuite de depanare a CSS pe care le puteți instala în browserul dvs.: FireFox Web Developer, DOM Inspector, Bara de instrumente pentru dezvoltatori Internet Explorer și Firebug. Evitați selectorii inutili Uneori, declarația dvs. CSS poate fi mai simplă, adică dacă vă aflați codificând următoarele: ul li ... ol li ... tabelul tr td ... Ele pot fi scurtate până la doar li ... td ... Explicaţie: va exista doar în interiorul sau și și va fi doar înăuntru astfel încât nu este necesar să le reintroduceți. cunoaștere !important Orice stil marcat cu !important va fi luată în folosință indiferent dacă există o regulă de suprascriere sub ea. .pagina culoare-fundal: albastru! important; culoare de fundal: roșu; În exemplul de mai sus, background-color: albastru va fi adaptat deoarece este marcat cu !important, chiar și atunci când există culoare de fundal: roșu; sub acesta. !important este folosit în situația în care doriți să forțați un stil fără a suprascrie acest lucru, însă este posibil să nu funcționeze în Internet Explorer. Înlocuiți textul cu imaginea Aceasta este o practică practică de înlocuit titlu de la un titlu bazat pe text la o imagine. Iată cum faceți asta. h1 text-indent: -9999px; fundal: url ("title.jpg") nu-repeta; lățime: 100px; înălțime: 50px; Explicaţie: text-liniuță: -9999px; aruncă titlul textului pe ecran, înlocuit de o imagine declarată fundal: … cu un fix lăţime și înălţime. Înțelegerea poziționării CSS Următorul articol vă oferă o înțelegere clară în utilizarea poziționării CSS - poziție: ... Mai Mult - Aflați poziționarea CSS în zece pași CSS @import vs Există 2 moduri de a apela un fișier CSS extern - respectiv folosind @import și . Dacă nu sunteți sigur ce metodă să utilizați, iată câteva articole care vă vor ajuta să decideți. Mai Mult - Diferența dintre @import și link Proiectarea formularelor în CSS Formularele web pot fi ușor de proiectat și personalizate cu CSS. Următoarele articole vă arată cum: Mai Mult - Formă fără table, Formă grădină, Styling chiar și mai multe forme de control A fi inspirat Dacă sunteți în căutarea pentru un site web CSS bazat pe inspirație sau doar pur și simplu pentru a găsi un UI bun, aici sunt câteva site-uri de prezentare CSS vă recomandăm: CSS Remix CSS Beauty CSS Elite CSS Mania CSS Leak Păstrați codurile CSS curățate Dacă codurile dvs. CSS sunt dezordonate, veți sfârși codarea în confuzie și veți avea dificultăți în a comenta codul anterior. Pentru începători, puteți crea o indentare adecvată, comentându-le în mod corespunzător. Mai Mult - 12 principii pentru păstrarea codului dvs. curat, Formatarea codurilor CSS online Măsurare tipografie: px vs em Aveți probleme când alegeți când să utilizați unitatea de măsurare px sau em? Următoarele articole ar putea să vă ofere o mai bună înțelegere a unităților tipografice. Tabela de compatibilitate pentru browserele CSS Știm cu toții că fiecare browser are moduri diferite de redare a stilurilor CSS. Este bine să aveți o referință, o diagramă sau o listă care să arate întreaga compatibilitate CSS pentru fiecare browser. CSS: # 1, # 2, # 3, # 4. Design Multicolumns în CSS Ați avut probleme să obțineți coloanele stânga, mijlocul și dreapta pentru a vă alinia corect? Iată câteva articole care ar putea ajuta: În căutarea Sfântului Graal Faux Columns Topul motivelor pentru care coloanele dvs. CSS sunt stricate Litte Boxes (exemple) Setări în mai multe coloane ieșiți din cutie Coloane absolută Obțineți un editor gratuit CSS Editorii speciali sunt întotdeauna mai buni decât un notepad. Iată câteva dintre acestea: Mai Mult - Simplu CSS, Notepad ++, Un editor de stil CSS Înțelegerea tipurilor de suporturi media Există puține tipuri de suporturi media atunci când declarați CSS cu . tipărirea, proiecția și ecranul sunt câteva dintre tipurile utilizate în mod obișnuit. Înțelegerea și folosirea acestora în moduri adecvate permit o mai bună accesibilitate a utilizatorilor. Următorul articol explică modul de abordare a tipurilor de suporturi CSS. Mai Mult - Tipurile CSS și Media, W3 Tipuri media, CSS Media Types, Tipuri de suporturi CSS2 20 Aplicații utile iPhone pentru dezvoltatori și designeri 20 Instrumente SVG utile pentru o mai bună grafică 20 Fonturi ultra luminoase și elegante pentru designerii de web Articolul următor 20 Add-on-uri utile pentru Firefox Sidebar Articolul precedent 20 de aplicații utile pentru a obține cele mai multe din Instagram