20 Užitočné CSS tipy pre začiatočníkov

V dávnych časoch závisí veľa na vývojároch a programátoroch pri aktualizácii webových stránok, a to aj vtedy, keď je to len malý. Vďaka CSS a jej flexibilite môžu byť štýly extrahované nezávisle od kódov. Teraz, s niektorými základnými znalosťami o CSS, dokonca nováčik môže ľahko zmeniť štýl webových stránok.

Či máte záujem vyzdvihnúť CSS s cieľom vytvoriť si vlastné webové stránky, alebo len vylepšiť vzhľad vášho blogu a trochu sa cítiť - vždy je dobré začať so základmi na získanie pevnejšieho základu. Poďme sa pozrieť na niektoré Tipy pre CSS mysleli sme si, že by to mohlo byť užitočné začiatočníci. Úplný zoznam po skoku.

1. použitie reset.css

   Pokiaľ ide o vykresľovanie štýlov CSS, prehliadače ako Firefox a Internet Explorer majú rôzne spôsoby ich spracovania. reset.css obnoví všetky základné štýly, takže začnete so skutočne prázdnymi novými štýlmi.

   Tu je niekoľko bežne používaných reset.css rámy - Yahoo Reset CSS, Reset CSS Erica Meyera, Tripoli

2. Použite Shorthand CSS

   Skratka CSS vám dáva kratší spôsob písania vašich CSS kódov a najdôležitejšie zo všetkých - je to kód, ktorý je jasnejší a ľahšie pochopiteľný.

   Namiesto vytvorenia tohto CSS

   .hlavička farba pozadia: #fff; obrázok-pozadie: adresa URL (image.gif); opakovanie pozadia: opakovanie; poloha pozadia: vľavo hore; 

   Môže to byť krátkodobo:

   .hlavička background: #fff url (image.gif) no-repeat vľavo hore

   viac - Úvod do skratky CSS, Užitočné vlastnosti skratky CSS

3. porozumenie Trieda a ID

   Tieto dva selektory často zamieňajú začiatočníkov. V CSS, trieda je reprezentovaná bodkou "." zatiaľ čo id je hash "#". V skratke id sa používa v štýle, ktorý je jedinečný a neopakuje sa, trieda na druhej strane, môžu byť opätovne použité.

   viac - Trieda verzus ID Kedy používať triedu, ID | Použitie triedy a ID spolu

4. Výkonnosť

5. a.k.a zoznam odkazov, je veľmi užitočný, ak sa používajú správne
   alebo
   , najmä na štýl navigačného menu.

   • zabudnúť , vyskúšať

     Jednou z najväčších výhod CSS je použitie

     dosiahnuť celkovú flexibilitu z hľadiska štýlu.

     sú nepodobné

     , kde obsah je "uzamknutý" v rámci a

     bunky. Je to bezpečné povedať najviac rozloženia sú dosiahnuteľné s použitím a správny štýl, možno aj s masívnym tabuľkovým obsahom. viac - Tabuľky sú mŕtve, Tabuľky Vs. CSS, CSS vs tabuľky Nástroje na ladenie CSS Je vždy dobré získať okamžitý náhľad rozloženia pri ladení CSS, pomáha lepšie pochopiť a ladiť štýly CSS. Tu sú niektoré bezplatné nástroje na ladenie CSS, ktoré môžete nainštalovať vo svojom prehliadači: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar a Firebug. Vyhnite sa nadbytočným výberom Niekedy môže byť vaša deklarácia CSS jednoduchšia, čo znamená, že ak zistíte, že kódujete nasledovné: ul li ... ol li ... tabuľka tr td ... Môžu byť skrátené len na to li ... td ... vysvetlenie: bude existovať iba v rámci alebo a a bude len vo vnútri takže v skutočnosti nie je potrebné ich opätovne vložiť. vedieť !dôležitý Každý štýl označený hviezdičkou !dôležitý sa použije bez ohľadu na to, či pod ním existuje pravidlo prepisovania. .strana farba pozadia: modrá! dôležitá; background-color: red; V príklade vyššie, background-color: blue bude upravená, pretože je označená !dôležitý, aj keď existuje background-color: red; pod ním. !dôležitý sa používa v situácii, keď chcete vynútiť štýl bez toho, aby ste ho prepísali, avšak v programe Internet Explorer nemusí fungovať. Nahradiť text pomocou obrázka To je bežne prax nahradiť nadpis od textu založeného na obrázku. Tu je postup, ako to urobíte. h1 text-odsadenie: -9999px; pozadie: url ("title.jpg") no-repeat; šírka: 100 pixelov; výška: 50 pixelov; vysvetlenie: text-indent: -9999px; hodí textový text mimo obrazovku a nahradí ho deklarovaným obrázkom pozadie: … s pevným šírka a výška. Pochopenie polohy CSS Nasledujúci článok vám dáva jasnú predstavu o používaní umiestnenia CSS - pozícia: ... viac - Učte sa o umiestnení CSS v desiatich krokoch CSS @import proti Existuje 2 spôsoby volania externého súboru CSS - resp @import a . Ak si nie ste istí, ktorú metódu chcete použiť, tu je niekoľko článkov, ktoré vám pomôžu rozhodnúť. viac - Rozdiel medzi importom a odkazom Navrhovanie formulárov v CSS Webové formuláre je možné jednoducho navrhnúť a prispôsobiť pomocou CSS. Nasledujúce články vám uvádzajú, ako: viac - Formulár bez tabuľky, Form Garden, Styling ešte viac ovládacích prvkov Dostať inšpiráciu Ak sa zaujímate o pekne navrhnuté webové stránky založené na CSS pre inšpiráciu, alebo len jednoducho prechádzate a nájsť nejaké dobré užívateľské rozhranie, tu je niekoľko stránok CSS prezentácie, ktoré odporúčame: CSS Remix CSS Beauty CSS Elite CSS Mania CSS Leak Udržujte kódy CSS čisté Ak sú vaše kódy CSS nepríjemné, skončíte s kódovaním v zmätku a budete mať ťažké popretie predchádzajúceho kódu. Pre začiatočníkov môžete vytvoriť správne odsadenie a správne ich komentovať. viac - 12 Zásady na udržiavanie čistého kódu, Formátovať kódy CSS online Typografia Meranie: px proti em Máte problém pri výbere použitia meracej jednotky px alebo em? Nasledujúce články vám môžu poskytnúť lepšie pochopenie typografických jednotiek. Tabuľka kompatibility prehliadačov CSS Všetci vieme, že každý prehliadač má rôzne spôsoby vykresľovania štýlov CSS. Je dobré mať referenciu, graf alebo zoznam, ktorý zobrazuje celú kompatibilitu CSS pre každý prehliadač. Tabuľka podpory služby CSS: # 1, # 2, # 3, # 4. Navrhnite viacčlenné body v CSS Máte problémy so správnym zarovnaním ľavého, stredného a pravého stĺpca? Tu je niekoľko článkov, ktoré vám môžu pomôcť: Pri hľadaní svätého grálu Faux stĺpce Najčastejšie dôvody, prečo sú stĺpce CSS zmiernené Litte boxy (príklady) Rozloženie viacerých stĺpcov vystupuje z krabice Absolútne stĺpce Získajte zadarmo editorov CSS Vyhradené editory sú vždy lepšie ako poznámkový blok. Tu sú niektoré odporúčame: viac - Jednoduchý CSS, notepad ++, Editor štýlov CSS Informácie o typoch médií Existuje len málo typov médií pri deklarácii CSS pomocou . tlač, projekcia a obrazovka sú málo bežne používaných typov. Pochopenie a ich správne používanie umožňuje lepšiu dostupnosť používateľov. Nasledujúci článok vysvetľuje, ako zaobchádzať s typmi médií CSS. viac - CSS a typy médií, Typy médií W3, Typy médií CSS, Typy médií CSS2 20 Užitočné iPhone Apps pre vývojárov a projektantov 20 Užitočné nástroje SVG pre lepšiu grafiku 20 Ultra ľahké a elegantné písma pre web dizajnérov Ďalší článok 20 Užitočné doplnky bočného panela pre Firefox Predchádzajúci článok 20 užitočných aplikácií na maximálne využitie programu Instagram