20 Naudingi CSS patarimai pradedantiesiems

Senais laikais mes daug priklauso nuo kūrėjų ir programuotojų, kad galėtume atnaujinti svetainę, net jei tai tik nedidelis. CSS ir jo lankstumo dėka stiliai gali būti išskiriami atskirai nuo kodų. Dabar, kai kurie pagrindiniai CSS supratimai, net naujokas gali lengvai pakeisti svetainės stilių.

Nesvarbu, ar domitės CSS, kad sukurtumėte savo svetainę, ar tiesiog šiek tiek patobulintumėte savo dienoraščio išvaizdą ir jaustis - visada gerai pradėti nuo pagrindų, kad taptumėte stipresnis. Pažvelkime į kai kuriuos CSS patarimai mes manome, kad tai gali būti naudinga pradedantiesiems. Visas sąrašas po šuolio.

1. Naudokite reset.css

   Kai kalbama apie CSS stilių pateikimą, naršyklės, tokios kaip „Firefox“ ir „Internet Explorer“, turi skirtingus jų tvarkymo būdus. reset.css atkuria visus pagrindinius stilius, todėl pradedate nuo tikrųjų tuščių naujų stilių lapų.

   Štai keletas dažniausiai naudojamų reset.css sistemas - „Yahoo Reset CSS“, Eric Meyer CSS atstatymas, Tripolis

2. Naudokite „Shorthand CSS“

   „Shorthand CSS“ suteikia jums trumpesnį būdą rašyti savo CSS kodus, o svarbiausia - kodą išvalo ir lengviau suprasti.

   Vietoj to, kad būtų sukurtas toks CSS

   .antraštė fono spalva: #fff; fono paveikslėlis: url (image.gif); fono kartojimas: ne kartoti; fono padėtis: viršuje kairėje; 

   Jis gali būti trumpas:

   .antraštė fonas: #fff url (image.gif) ne kartoti viršutinę kairę

   Daugiau - Įvadas į „CSS Shorthand“, Naudingos CSS stenografijos savybės

3. Supratimas Klasė ir ID

   Šie du selektoriai dažnai painioja pradedančius asmenis. CSS, klasė atstovauja taškas "." kol ID yra maišelis „#“. Trumpai tariant ID yra naudojamas unikalus ir ne kartojantis stilius, klasė kitoje pusėje gali būti pakartotinis naudojimas.

   Daugiau - Klasė prieš ID | Kada naudoti klasę, ID | Klasės ir ID taikymas kartu

4. Isjungti

5. a.k.a nuorodų sąrašas yra labai naudingas, kai jie naudojami teisingai
   arba
   , ypač stiliaus navigacijos meniu.

   • Pamirškite , bandyti

     Vienas iš didžiausių CSS privalumų yra naudoti

     pasiekti visišką lankstumą stiliaus atžvilgiu.

     yra skirtingi

     , kur turinys yra „užrakintas“ a

     ląstelė. Labai saugu pasakyti maketai pasiekiami naudojant ir tinkamas stilius, gerai, išskyrus didžiulį lentelės turinį. Daugiau - Lentelės yra mirusios, Lentelės Vs. CSS, CSS vs lentelės CSS derinimo įrankiai Visada gerai gauti tiesioginį išdėstymo peržiūrą, kol keisdami CSS, jis padeda geriau suprasti ir ištaisyti CSS stilius. Štai keletas nemokamų CSS derinimo įrankių, kuriuos galite įdiegti savo naršyklėje: „FireFox Web Developer“, „DOM Inspector“, „Internet Explorer“ programuotojo įrankių juosta ir „Firebug“. Venkite nereikalingų pasirinkėjų Kartais jūsų CSS deklaracija gali būti paprastesnė, o tai reiškia, jei jums sekasi koduoti: ul li … ol li … lentelė tr td … Jie gali būti sutrumpinti iki teisingo li … td … Paaiškinimas: bus tik arba ir ir bus tik viduje todėl tikrai nereikia jų vėl įterpti. Žinant !svarbu Bet koks stilius pažymėtas !svarbu bus pradėta naudoti nepaisant to, ar po juo yra perrašymo taisyklė. .puslapis fono spalva: mėlyna! fono spalva: raudona; Pirmiau pateiktame pavyzdyje, fono spalva: mėlyna bus pritaikytas, nes jis pažymėtas !svarbu, net jei yra fono spalva: raudona; žemiau. !svarbu yra naudojamas situacijoje, kai norite priversti stilių be kažko perrašymo, tačiau jis gali neveikti „Internet Explorer“. Pakeiskite tekstą vaizdu Tai dažniausiai keičiama praktika pavadinimas nuo teksto pagrindo pavadinimo prie vaizdo. Štai kaip tai darote. h1 teksto įtrauka: -9999px; fonas: URL ("title.jpg") ne kartoti; plotis: 100px; aukštis: 50px; Paaiškinimas: teksto įtrauka: -9999px; išskleidžia teksto pavadinimo ekraną, pakeistą „ fonas: … su fiksuotu plotis ir aukštis. Suprasti CSS padėties nustatymą Šis straipsnis suteikia jums aiškų supratimą apie CSS padėties nustatymą - pozicija: … Daugiau - Sužinokite CSS padėties nustatymą dešimt žingsnių CSS @import vs Yra du būdai, kaip skambinti išoriniu CSS failu - naudojant @import ir . Jei nesate tikri, kokį metodą naudoti, čia yra keletas straipsnių, padėsiančių jums nuspręsti. Daugiau - Skirtumas tarp @import ir nuorodos Formų kūrimas CSS Žiniatinklio formos gali būti lengvai kuriamos ir pritaikomos su CSS. Šie šie straipsniai rodo, kaip: Daugiau - Lentelė be formos, Forma „Sodas“, Dar daugiau formų valdymas Būti įkvėptam Jei ieškote gražiai suprojektuotos CSS pagrindu sukurtos svetainės įkvėpimui arba tiesiog tiesiog naršydami, kad rastumėte gerą vartotojo sąsają, čia yra keletas CSS vitrinų svetainių, kurias rekomenduojame: CSS Remix CSS grožis CSS Elite CSS Mania CSS nutekėjimas Laikykite CSS kodus švariais Jei jūsų CSS kodai yra nepatogūs, jūs baigsite koduoti sumaištį ir sunkiai išnagrinėsite ankstesnį kodą. Pradedantiesiems galite sukurti tinkamą atkarpą, tinkamai juos komentuoti. Daugiau - 12 Kodo švarumo principai, Formatuokite CSS kodus internete Tipografijos matavimas: px vs em Problema pasirenkant, kada naudoti matavimo vienetą px arba em? Šie šie straipsniai gali padėti geriau suprasti tipografijos įrenginius. CSS naršyklių suderinamumo lentelė Visi žinome, kad kiekviena naršyklė turi skirtingus CSS stilių pateikimo būdus. Gerai turėti nuorodą, diagramą ar sąrašą, kuriame rodoma visa CSS suderinamumas kiekvienai naršyklei. CSS palaikymo lentelė: # 1, # 2, # 3, # 4. Dizainuoti daugialypius stulpelius CSS Ar problema gauti kairę, vidurinę ir dešinę stulpelį, kad tinkamai suderintumėte? Štai keletas straipsnių, kurie gali padėti: Šventojo Gralo paieškoje Faux kolonos Aukščiausios priežastys, dėl kurių jūsų CSS stulpeliai yra sumušti Litte dėžės (pavyzdžiai) Kelių stulpelių išdėstymai pakilti iš dėžutės Absoliutus stulpelius Gaukite nemokamą CSS redaktorių Specialieji redaktoriai visada yra geresni nei užrašų knygelė. Štai keletas rekomenduojamų: Daugiau - Paprasta CSS, Užrašų knygelė ++, Stiliaus CSS redaktorius Žiniasklaidos tipų supratimas Kai skelbiate CSS, yra keletas medijų tipų . spausdinimas, projekcija ir ekranas yra keletas dažniausiai naudojamų tipų. Jų supratimas ir naudojimas tinkamu būdu leidžia geriau pasiekti vartotoją. Šiame straipsnyje paaiškinama, kaip elgtis su „CSS Media“ tipais. Daugiau - CSS ir medijos tipai, W3 laikmenų tipai, CSS laikmenų tipai, CSS2 laikmenų tipai 20 Naudingi „iPhone Apps for Developers & Designers“ 20 Naudingi SVG įrankiai geresniam grafikai 20 „Ultra Light“ ir „Elegant“ šriftai žiniatinklio dizaineriams Kitas straipsnis 20 Naudingi „Firefox“ šoninės juostos priedai Ankstesnis straipsnis 20 Naudingos programos, kad gautumėte kuo daugiau naudos iš Instagram