20 Užitečné CSS tipy pro začátečníky

Ve starých časech záleží hodně na vývojářích a programátorech, aby nám pomohli aktualizovat webové stránky, i když je to jen menší. Díky CSS a flexibilitě mohou být styly extrahovány nezávisle na kódech. Nyní, s některými základními znalostmi CSS, může i nováček snadno změnit styl webových stránek.

Ať už máte zájem vyzvednout si CSS a vytvořit si vlastní webové stránky, nebo jen vylepšit vzhled a pocit vašeho blogu - je vždy dobré začít se základy, abyste získali silnější základ. Podívejme se na některé CSS tipy mysleli jsme, že by to mohlo být užitečné začátečníky. Plný seznam po skoku.

1. Použití reset.css

   Pokud jde o vykreslování stylů CSS, prohlížeče jako Firefox a Internet Explorer mají různé způsoby, jak s nimi pracovat. reset.css resetuje všechny základní styly, takže začnete s novými prázdnými styly.

   Zde je málo běžně používaných reset.css rámců - Yahoo Reset CSS, Eric Meyer CSS Reset, Tripolis

2. Použijte zkratku CSS

   Zkratka CSS vám dává kratší způsob psaní vašich CSS kódů a nejdůležitější ze všech - dělá kód jasnějším a srozumitelnějším.

   Namísto vytváření CSS takhle

   .header background-color: #fff; background-image: url (image.gif); background-repeat: no-repeat; Pozice na pozadí: vlevo nahoře; 

   Lze ji použít krátce:

   .header background: #fff url (image.gif) vlevo vlevo

   Více - Úvod do CSS zkratky, Užitečné zkratkové vlastnosti CSS

3. Porozumění Třída a ID

   Tito dva selektory si často pletou začátečníky. V CSS, třída je reprezentován tečkou "." zatímco id je hash '#' id se používá ve stylu, který je jedinečný a neopakujte se, třída na druhé straně, lze znovu použít.

   Více - Třída vs. ID | Kdy použít třídu, ID Použití třídy a ID společně

4. Síla

5. a.k.a seznam odkazů, je velmi užitečný, když jsou správně používány
   nebo
   , speciálně pro styl navigačního menu.

   • Zapomenout , Snaž se

     Jednou z největších výhod CSS je použití

     dosáhnout celkové flexibility z hlediska designu.

     jsou na rozdíl od

     , kde je obsah „uzamčen“ uvnitř

     buňka. Je to bezpečné říct nejvíce Uspořádání jsou dosažitelná s použitím a správný styling, možná až na masivní tabulkový obsah. Více - Tabulky jsou mrtvé, Tabulky Vs. CSS, CSS vs tabulky Nástroje pro ladění CSS Je vždy dobré získat okamžitý náhled rozvržení při úpravách CSS, pomáhá lépe porozumět a ladit styly CSS. Zde jsou některé bezplatné nástroje pro ladění CSS, které můžete nainstalovat do svého prohlížeče: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar a Firebug. Vyhněte se nadbytečným voličům Někdy může být vaše deklarace CSS jednodušší, což znamená, že pokud zjistíte, že kódujete následující: ul li … ol li … table tr td … Mohou být zkráceny na jen li … td … Vysvětlení: existovat pouze uvnitř nebo a a bude jen uvnitř takže je opravdu není nutné je znovu vkládat. Vědět !Důležité Jakýkoli styl označený znakem !Důležité bude použito bez ohledu na to, zda je pod ním přepisovací pravidlo. .page background-color: blue! důležité; barva pozadí: červená; Ve výše uvedeném příkladu, barva pozadí: modrá bude upraveno, protože je označeno znakem !Důležité, i když je barva pozadí: červená; pod tím. !Důležité se používá v situaci, kdy chcete vynutit styl, aniž by to něco přepsalo, ale nemusí fungovat v aplikaci Internet Explorer. Nahraďte text obrázkem To je běžná praxe nahradit titul z textového titulu na obrázek. Zde je návod, jak to děláte. h1 text-indent: -9999px; background: url ("title.jpg") no-repeat; šířka: 100px; výška: 50px; Vysvětlení: text-odrážka: -9999px; hodí váš text mimo obrazovku, nahrazený obrázkem deklarovaným Pozadí: … s pevným šířka a výška. Pochopení polohy CSS Následující článek vám dává jasnou představu o používání umístění CSS - pozice: … Více - Learn CSS Positioning v deseti krocích CSS @import vs Existují 2 způsoby volání externího CSS souboru - resp @import a . Pokud si nejste jisti, kterou metodu použít, zde je několik článků, které vám pomohou se rozhodnout. Více - Rozdíl mezi @importem a odkazem Navrhování formulářů v CSS Webové formuláře lze snadno navrhovat a upravovat pomocí CSS. Následující články ukazují, jak: Více - Bezprostřední forma, Form Garden, Styling ještě více ovládacích prvků formuláře Být inspirován Pokud hledáte pro pěkně navržené webové stránky založené na CSS pro inspiraci, nebo prostě jen procházení, abyste našli nějaké dobré uživatelské rozhraní, zde jsou některé stránky prezentace CSS, které doporučujeme: CSS Remix CSS Krása CSS Elite CSS Mania CSS Leak Udržujte kódy CSS čisté Pokud vaše CSS kódy jsou chaotický, budete skončit kódování ve zmatku a mají těžké refereing předchozí kód. Pro začátek můžete vytvořit správné odsazení, řádně je komentovat. Více - 12 Zásady pro udržování čistoty, Formát CSS kódy online Měření typografie: px vs em Mít problém s volbou kdy použít měřicí jednotku px nebo em? Tyto následující články vám umožní lépe porozumět typografickým jednotkám. Tabulka kompatibility prohlížečů CSS Všichni víme, že každý prohlížeč má různé způsoby vykreslování stylů CSS. Je dobré mít odkaz, graf nebo seznam, který zobrazuje celou kompatibilitu CSS pro každý prohlížeč. Tabulka podpory CSS: # 1, # 2, # 3, # 4. Design Multicolumns v CSS Máte problém s řádným zarovnáním levého, středního a pravého sloupce? Zde jsou některé články, které mohou pomoci: Při hledání Svatého grálu Faux sloupce Nejdůležitější důvody, proč jsou sloupce ve službě CSS překryty Litte boxy (příklady) Rozložení více sloupců Vylezte z krabice Absolutní sloupce Získejte zdarma CSS editory Vyhrazené editory jsou vždy lepší než zápisník. Zde je několik, které doporučujeme: Více - Jednoduché CSS, poznámkový blok ++, Styl CSS Editor Vysvětlení typů médií Existuje několik typů médií, když deklarujete CSS . tisk, promítání a promítání je málo běžně používaných typů. Porozumění a jejich správné používání umožňuje lepší přístup uživatelů. Následující článek vysvětluje, jak se vypořádat s typy médií CSS. Více - CSS a typy médií, Druhy médií W3, CSS Druhy médií, CSS2 Druhy médií 20 Užitečné aplikace pro iPhone pro vývojáře a projektanty 20 Užitečné SVG nástroje pro lepší grafiku 20 Ultra Light a Elegant Fonts pro webové designéry Další článek 20 Užitečné doplňky pro postranní panel Firefoxu Předchozí článek 20 Užitečné aplikace, aby se co nejvíce z Instagram