20 Noderīgi CSS padomi iesācējiem

Vecajās dienās mēs daudz esam atkarīgi no izstrādātājiem un programmētājiem, lai palīdzētu atjaunināt tīmekļa vietni, pat ja tas ir tikai neliels. Pateicoties CSS un tā elastīgumam, stili var tikt izdalīti neatkarīgi no kodiem. Tagad, ar dažiem pamatzināšanas par CSS, pat iesācējs var viegli mainīt tīmekļa vietnes stilu.

Vienalga, vai jūs esat ieinteresēts, lai izveidotu CSS, lai izveidotu savu tīmekļa vietni, vai arī vienkārši uzvilkt jūsu emuāra izskatu un justies mazliet - vienmēr ir labi sākt ar pamatiem, lai iegūtu spēcīgāku pamatu. Apskatīsim dažus CSS padomi mēs domājam, ka varētu būt noderīgi iesācējiem. Pilns saraksts pēc izlēkšanas.

1. Izmantot reset.css

   Kad runa ir par CSS stilu, pārlūkprogrammām, piemēram, Firefox un Internet Explorer, ir dažādi veidi, kā tos apstrādāt. reset.css atiestata visus pamatstatus, tāpēc sākat ar īstām, tukšām stilu lapām.

   Šeit ir daži bieži lietotie reset.css sistēmas - Yahoo Reset CSS, Eric Meyer CSS atiestatīšana, Tripole

2. Izmantojiet Shorthand CSS

   Shorthand CSS sniedz īsāku CSS kodu rakstīšanas veidu, un vissvarīgākais - tas padara kodu skaidrāku un vieglāk saprotamu.

   Tā vietā, lai izveidotu šādu CSS

   .header fona krāsa: #fff; fona attēls: url (image.gif); fona atkārtošana: nav atkārtota; fona pozīcija: augšējā kreisajā pusē; 

   To var īsumā ievadīt šādi:

   .galvene fons: #fff url (image.gif) no atkārtotas augšējās kreisās puses

   Vairāk - Ievads CSS stenogrammā, Noderīgas CSS stenogrammas īpašības

3. Saprašana Klase un ID

   Šie divi selektori bieži vien sajauc iesācējus. CSS, klasē tiek attēlots punkts "." kamēr ID ir hash "#". Īsumā ID tiek izmantots uz stila, kas ir unikāls un neatkārtojas, klasē no otras puses, var izmantot atkārtoti.

   Vairāk - Klase pret ID | Kad lietot klasi, ID | Klases un ID lietošana kopā

4. Spēks

5. a.k.a saites saraksts ir ļoti noderīgs, ja tās tiek lietotas pareizi
   vai
   , īpaši, lai veidotu navigācijas izvēlni.

   • Aizmirstiet , mēģiniet

     Viena no lielākajām CSS priekšrocībām ir to izmantošana

     lai panāktu pilnīgu elastību attiecībā uz stilu.

     atšķiras

     , kur saturs ir “bloķēts” a

     šūnas. Visvairāk var teikt izkārtojumi ir sasniedzami, izmantojot un pareizu stilu, labi varbūt, izņemot masveida tabulas saturu. Vairāk - Galdi ir miruši, Tabulas Vs. CSS, CSS vs tabulas CSS atkļūdošanas rīki Tas vienmēr ir labi, lai iegūtu tūlītēju priekšskatījumu izkārtojumam, vienlaikus izmainot CSS, tas palīdz labāk izprast un novērst CSS stilus. Šeit ir daži bezmaksas CSS atkļūdošanas rīki, kurus varat instalēt savā pārlūkprogrammā: FireFox Web Developer, DOM inspektors, Internet Explorer izstrādātāju rīkjosla un Firebug. Izvairieties no liekiem atlasītājiem Dažreiz jūsu CSS deklarācija var būt vienkāršāka, kas nozīmē, ja jūs atradīsiet sev šādu kodējumu: ul li … ol li … tabula tr td … Tās var saīsināt līdz pat li … td … Paskaidrojums: pastāvēs tikai vai un un būs tikai iekšpusē tāpēc nav nepieciešams tos atkārtoti ievietot. Zinot !svarīgs Jebkurš stils, kas atzīmēts ar !svarīgs tiks izmantots neatkarīgi no tā, vai zem tā ir pārrakstīšanas noteikums. .lapa fona krāsa: zila! fona krāsa: sarkana; Iepriekš minētajā piemērā, fona krāsa: zila tiks pielāgots, jo tas ir atzīmēts ar !svarīgs, pat tad, ja ir fona krāsa: sarkana; zem tā. !svarīgs tiek izmantots situācijā, kad vēlaties piespiest stilu bez kaut kāda pārrakstīšanas, taču tas var nedarboties Internet Explorer. Aizstāt tekstu ar attēlu Tas parasti ir jāaizstāj nosaukums no teksta nosaukuma uz attēlu. Lūk, kā jūs to darāt. h1 teksta ievilkums: -9999px; fons: url ("title.jpg") nav atkārtots; platums: 100px; augstums: 50px; Paskaidrojums: teksta ievilkums: -9999px; met jūsu teksta virsrakstu no ekrāna, aizstājot ar attēla deklarāciju fons: … ar fiksētu platums un augstums. Saprast CSS pozicionēšanu Nākamais raksts sniedz jums skaidru izpratni par CSS pozicionēšanu - pozīcija: … Vairāk - Uzziniet CSS pozicionēšanu desmit soļos CSS @import pret Ir divi veidi, kā izsaukt ārējo CSS failu - attiecīgi, izmantojot @import un . Ja neesat pārliecināts, kādu metodi izmantot, šeit ir daži raksti, kas palīdzēs jums izlemt. Vairāk - Starpība starp @import un saiti Veidlapu projektēšana CSS Web veidlapas var viegli veidot un pielāgot ar CSS. Šie sekojošie panti parāda, kā: Vairāk - Bez tabulas veidlapas, Veidlapa Dārzs, Vēl vairāk veidlapu vadīšana Iedvesmoties Ja jūs meklējat apdomīgi izstrādātu CSS balstītu tīmekļa vietni, lai iegūtu iedvesmu, vai vienkārši vienkārši pārlūkojot, lai atrastu labu lietotāja interfeisu, šeit ir daži CSS vitrīnas vietnes, kuras mēs iesakām: CSS Remix CSS Beauty CSS Elite CSS Mania CSS noplūde Saglabājiet CSS kodus tīru Ja jūsu CSS kodi ir netīrs, jūs galu galā nonāksit sajaukšanas kodējumā, un jums būs grūti pārskatīt iepriekšējo kodu. Par starteriem varat izveidot pareizu ievilkumu, pareizi tos komentēt. Vairāk - 12 Koda tīrīšanas principi, Formatējiet CSS kodus tiešsaistē Tipogrāfijas mērīšana: px pret em Problēmas, izvēloties, kad lietot mērvienību px vai em? Šie sekojošie panti var sniegt jums labāku izpratni par tipogrāfijas vienībām. CSS pārlūkprogrammu saderības tabula Mēs visi zinām, ka katram pārlūkam ir dažādi veidi, kā padarīt CSS stilus. Ir labi, ja jums ir atsauce, diagramma vai saraksts, kas parāda visu CSS saderību katrai pārlūkprogrammai. CSS atbalsta tabula: # 1, # 2, # 3, # 4. Daudzkolonnu dizains CSS Vai ir problēmas ar kreiso, vidējo un labo kolonnu, lai pareizi izlīdzinātu? Šeit ir daži panti, kas varētu palīdzēt: Svētā Grāla meklējumos Faux kolonnas Galvenie iemesli, kāpēc jūsu CSS slejas ir sajauktas Litte kastes (piemēri) Vairāku kolonnu izkārtojumi kāpt no kastes Absolūtās kolonnas Iegūstiet bezmaksas CSS redaktorus Specializētie redaktori vienmēr ir labāki nekā notepad. Šeit ir daži ieteikumi: Vairāk - Vienkārša CSS, Notepad ++, Stila CSS redaktors Plašsaziņas līdzekļu tipu izpratne Kad ir paziņots par CSS, ir daži mediju veidi . drukāšana, projekcija un ekrāns ir daži no visbiežāk lietotajiem veidiem. To izpratne un pareiza izmantošana ļauj labāk piekļūt lietotājiem. Šajā rakstā izskaidrots, kā rīkoties ar CSS mediju veidiem. Vairāk - CSS un multivides veidi, W3 multivides veidi, CSS mediju tipi, CSS2 mediju veidi 20 Noderīgi iPhone Apps for Developers & Designers 20 Noderīgi SVG rīki labākajai grafikai 20 Ultra Light un eleganti fonti tīmekļa dizaineriem Nākamais raksts 20 Noderīgi Firefox sānjoslas papildinājumi Iepriekšējais raksts 20 Noderīgas programmas, lai iegūtu vislabāko no Instagram