20 Kasulikud CSS-i nõuanded algajatele

Vanades aegades sõltume palju arendajatest ja programmeerijatest, et aidata veebilehte värskendada isegi siis, kui see on vaid väike. Tänu CSS-ile ja selle paindlikkusele saab stiilid eraldada koodidest sõltumatult. Nüüd, mõned algteadmised CSS-ist, võib isegi algaja hõlpsasti veebilehe stiili muuta.

Kas olete huvitatud CSS-i üleslaadimisest oma veebisaidi loomiseks või lihtsalt oma blogi väljanägemise ja pisut muutmiseks - on alati hea alustada põhialustega, et saada tugevam alus. Vaatame mõned CSS-i nõuanded me arvasime, et see võib olla kasulik algajatele. Täielik nimekiri pärast hüpata.

1. Kasutage reset.css

   Kui tegemist on CSS-stiilide esitamisega, on sellistel brauseritel nagu Firefox ja Internet Explorer erinevaid viise nende käsitlemiseks. reset.css lähtestab kõik põhilised stiilid, nii et alustate reaalsete tühjade uute stiililehtedega.

   Siin on mõned üldkasutatavad reset.css raamistikud - Yahoo Reset CSS, Eric Meyeri CSS-i lähtestamine, Tripoli

2. Kasutage lühikest CSS-i

   Shorthand CSS annab teile lühema viisi oma CSS-koodide kirjutamiseks ja kõige tähtsam - see muudab koodi selgemaks ja kergemini mõistetavaks.

   Selle asemel CSS-i loomine

   .päis taustavärv: #fff; taustapilt: url (image.gif); taustaproov: korduv; taustasend: üleval vasakul; 

   Seda saab lühiajaliseks jaotada järgmiselt:

   .päis taust: #fff url (image.gif) no-kordus üleval vasakul

   Veel - Sissejuhatus CSS lühikirjeldusse, Kasulikud CSS stenogrammi omadused

3. Mõistmine Klass ja ID

   Need kaks valijat segavad sageli algajaid segadusse. CSS-is, klassi on esindatud punktiga "." samal ajal id on räsi "#". Lühidalt id kasutatakse unikaalsel stiilil, mis ei kordu, klassi teisest küljest võib seda uuesti kasutada.

   Veel - Klass vs ID | Millal kasutada klassi, ID | Klasside ja ID rakendamine koos

4. Võimsus

5. a.k.a linkide loend on väga kasulik, kui neid õigesti kasutatakse
   või
   , eriti navigeerimismenüü kujundamiseks.

   • Unusta , proovige

     CSSi üks suurimaid eeliseid on kasutada

     saavutada paindlikkus stiilide osas.

     on erinev

     , kui sisu on lukustatud

     lahtrisse. Kõige ohutum on öelda paigutusi on võimalik kasutada ja õige stiil, võib-olla, välja arvatud tohutu tabelisisu. Veel - Tabelid on surnud, Tabelid Vs. CSS, CSS vs tabelid CSS silumine tööriistad See on alati hea saada kohest eelvaadet paigutusest, samal ajal CSS-i muutmisel, see aitab paremini mõista ja siluda CSS-stiile. Siin on mõned tasuta CSS-i silumisvahendid, mida saate oma brauserisse installida: FireFoxi veebiarendaja, DOM-inspektor, Internet Exploreri arendaja tööriistariba ja Firebug. Vältige üleliigseid valikuid Mõnikord võib teie CSS-i deklaratsioon olla lihtsam, mis tähendab, et leiate järgmist: ul li … ol li … tabel tr td … Neid saab lihtsalt lühendada li … td … Selgitus: eksisteerib ainult sees või ja ja on ainult sees seega pole tõesti vaja neid uuesti sisestada. Teades !oluline Iga stiil, millele on märgitud !oluline võetakse kasutusele sõltumata sellest, kas selle all on ülekirjutamise reegel. .lehekülg taustavärv: sinine! taustavärv: punane; Ülaltoodud näites, taustavärv: sinine kohandatakse, kuna see on tähistatud !oluline, isegi kui seal on a taustavärv: punane; selle all. !oluline kasutatakse olukorras, kus soovite stiili sundida ilma midagi üle kirjutamata, kuid see ei pruugi Internet Exploreris töötada. Asenda tekst pildiga Tavaliselt on see asendada pealkiri tekstipõhisest pealkirjast pildile. Siin on, kuidas seda teete. h1 tekst-taane: -9999px; taust: url ("title.jpg") korduv; laius: 100 px; kõrgus: 50 px; Selgitus: tekst-taane: -9999px; viskab teie teksti pealkirja välja ekraanilt, asendades selle poolt deklareeritud pildiga taust: … fikseeritud laius ja kõrgus. Mõista CSS positsioneerimist Järgmine artikkel annab teile selge arusaama CSS-i positsioneerimise kasutamisest - positsioon: … Veel - Õppige CSS-i positsioneerimine kümne sammuga CSS @import vs Välise CSS-faili helistamiseks on kaks võimalust - kasutades @import ja . Kui te pole kindel, millist meetodit kasutada, on siin mõned artiklid, mis aitavad teil otsustada. Veel - @Importi ja lingi vaheline erinevus Vormide kujundamine CSS-is Veebivormid võivad olla CSS-iga hõlpsasti kujundatavad ja kohandatavad. Need järgmised artiklid näitavad teile, kuidas: Veel - Tabelivaba vorm, Vorm Aed, Veelgi enam vormikontrollide kujundamine Inspiratsiooni saama Kui otsite inspireerimiseks kenasti kujundatud CSS-põhist veebisaiti või lihtsalt lihtsalt sirvida, et leida mõnda head kasutajaliidest, siis siin on mõned CSS-i presentatsioonisaitid, mida soovitame: CSS Remix CSS Beauty CSS Elite CSS Mania CSS Leak Hoidke CSS-koodid puhtana Kui teie CSS-koodid on räpased, hakkad sa segadusse kodeerima ja neil on raske eelnevalt eelkoodide läbivaatamine. Alustajate jaoks on võimalik luua õige sälk, kommenteerida neid õigesti. Veel - 12 Koodi puhastamise põhimõtted, CSS-koodide vormindamine võrgus Tüpograafia mõõtmine: px vs em Probleem valides mõõtühiku kasutamise ajal px või em? Need järgmised artiklid võivad anda teile parema arusaamise tüpograafiaüksustest. CSS-brauserite ühilduvuse tabel Me kõik teame, et igal brauseril on erinevad viisid CSS-stiilide esitamiseks. Hea, kui teil on olemas viide, graafik või nimekiri, mis näitab kogu CSS-i ühilduvust iga brauseri jaoks. CSS-i tugitabel: # 1, # 2, # 3, # 4. Kujundage mitmeveerud CSS-is Kas teil on probleeme vasakule, keskmisele ja paremale veerule, et õigesti joondada? Siin on mõned artiklid, mis võivad aidata: Püha Graali otsimisel Faux veerud Kõige olulisemad põhjused, miks teie CSS veerud on segaduses Litte kastid (näited) Mitu veergu paigutused ronida välja Absoluutsed veerud Hankige tasuta CSS-redaktorid Pühendatud toimetajad on alati paremad kui notepad. Siin on mõned soovitame: Veel - Lihtne CSS, Notepad ++, Stiili CSS redaktor Meediatüüpide mõistmine CSS-i deklareerimisel on vähe meediatüüpe . printimine, projektsioon ja ekraan on vähesed levinud tüüpidest. Nende mõistmine ja kasutamine sobival viisil võimaldab kasutajate paremat kättesaadavust. Järgmises artiklis selgitatakse, kuidas käsitleda CSS meedia tüüpe. Veel - CSS ja meedia tüübid, W3 meediatüübid, CSS-meedia tüübid, CSS2 meediatüübid 20 Kasulik iPhone Apps for Developers & Designers 20 Kasulikud SVG-tööriistad parema graafika jaoks 20 Ultra kergeid ja elegantseid fonte veebidisaineritele Järgmine artikkel 20 Kasulikud Firefoxi külgriba lisandmoodulid Eelmine artikkel 20 Kasulikud rakendused, et saada Instagramist kõige rohkem kasu