20 Hasznos CSS tippek kezdőknek

A régi időkben nagyban függ a fejlesztőktől és a programozóktól, hogy segítsen frissíteni a weboldalt, még akkor is, ha ez csak egy kisebb. A CSS-nek és rugalmasságának köszönhetően a stílusok a kódoktól függetlenül kivonhatók. Most, a CSS alapvető ismereteivel, még a kezdő is könnyen megváltoztathatja a weboldal stílusát.

Függetlenül attól, hogy érdekli-e a CSS-t a saját webhelyének létrehozásában, vagy egyszerűen csak a blogod megjelenésének és kicsit csípésnek köszönhetően - mindig jó kezdeni az alapokkal, hogy erősebb alapot szerezzen. Nézzük meg néhányat CSS tippek azt gondoltuk, hasznos lehet kezdőknek. Teljes lista ugrás után.

1. Használat reset.css

   A CSS-stílusok megjelenítésében a böngészők, mint a Firefox és az Internet Explorer, különböző módon kezelik őket. reset.css visszaállítja az összes alapvető stílust, így egy igazi üres új stíluslapokkal indul.

   Néhány általánosan használt reset.css keretek - Yahoo Reset CSS, Eric Meyer CSS visszaállítása, Tripoli

2. Használja a Shorthand CSS-t

   A Shorthand CSS rövidebb módot ad a CSS kódok írására, és ami a legfontosabb - a kódot világosabbá teszi és könnyebben érthetővé teszi.

   Ahelyett, hogy ilyen CSS-t hozna létre

   .fejléc háttérszín: #fff; háttérkép: url (image.gif); háttér-ismétlés: nincs ismétlés; háttérpozíció: bal felső; 

   Röviden átadható az alábbiaknak:

   .fejléc háttér: #fff url (image.gif) nem ismételhető felül balra

   Több - Bevezetés a CSS rövidítésébe, Hasznos CSS rövidítés tulajdonságai

3. Megértés Osztály és ID

   Ez a két választó gyakran összekeveri a kezdőket. A CSS-ben, osztály egy "". míg id egy hash "#". Dióhéjban id olyan stílusban használatos, amely egyedülálló és nem ismételhető meg, osztály a másik oldalon újra felhasználható.

   Több - Class vs. ID | Mikor kell használni az Class, ID | Osztály és azonosító együttes alkalmazása

4. Ereje valaminek

5. a.k.a link lista nagyon hasznos, ha helyesen használják
   vagy
   , különösen egy navigációs menü stílusához.

   • Elfelejt , próbáld ki

     A CSS egyik legnagyobb előnye az

     a teljes rugalmasság elérése érdekében.

     ellentétesek

     , ahol a tartalom „zárolva” van egy

     sejtje. A legbiztosabb mondani az elrendezések elérhetők és a megfelelő stílus, talán a tömeges táblázatos tartalmak kivételével. Több - A táblák halottak, Vs. táblázatok CSS, CSS vs táblázatok CSS hibakeresési eszközök Mindig jó azonnali előnézeti képszerkesztést kapni a CSS-ben, miközben a CSS-stílusok megértését és hibakeresését segíti. Íme néhány ingyenes CSS hibakereső eszköz, amelyet a böngészőjére telepíthetsz: FireFox Web Developer, DOM Inspector, Internet Explorer fejlesztői eszköztár és Firebug. Kerülje a felesleges választókat Előfordulhat, hogy a CSS-nyilatkozat egyszerűbb, azaz ha a következő kódolást találja: ul li … ol li … táblázat tr td … Lehet, hogy lerövidülnek li … td … Magyarázat: csak belül lesz vagy és és csak belül lesz így valóban nem szükséges újra beilleszteni őket. Ismerve !fontos Bármilyen stílust jelöl !fontos függetlenül attól, hogy van-e felülírási szabály. .oldal háttérszín: kék! háttér-szín: piros; A fenti példában, background-color: blue módosítása azért történik, mert megjelölve van !fontos, akkor is, ha van egy background-color: red; alatta. !fontos olyan helyzetben kerül felhasználásra, amikor a stílust anélkül akarja kényszeríteni, hogy valamit felülírja, de előfordulhat, hogy nem működik az Internet Explorerben. Cserélje ki a szöveget a képpel Ez általában a helyettesítő gyakorlat cím szövegalapú címről egy képre. Itt van, hogyan csinálod. h1 text-indent: -9999px; háttér: url ("title.jpg") nem ismételhető; szélesség: 100px; magasság: 50px; Magyarázat: text-indent: -9999px; dobja a szöveges címet a képernyőn, helyette egy, a háttér: … rögzített szélesség és magasság. A CSS helymeghatározás megértése A következő cikk világos megértést ad a CSS pozicionálás használatáról - pozíció: … Több - Ismerje meg a CSS pozicionálást tíz lépésben CSS @import vs Kétféleképpen hívhatunk külső CSS fájlt - vagy használhatjuk @import és . Ha bizonytalan, hogy melyik módszert használja, itt van néhány cikk, amely segít eldönteni. Több - A @import és a link közötti különbség Űrlapok tervezése CSS-ben A webes űrlapok könnyen megtervezhetők és testre szabhatók a CSS segítségével. Az alábbi cikkek megmutatják, hogyan: Több - Táblázat nélküli forma, Kert Kert, Még több formavezérlés stilizálása Inspirálj Ha szépen megtervezett CSS-alapú webhelyet keres az ihletet illetően, vagy egyszerűen csak böngészve talál egy jó felhasználói felületet, itt van néhány CSS bemutatóhely, amelyet ajánlunk: CSS Remix CSS szépség CSS Elite CSS Mania CSS szivárgás Tartsa tisztán a CSS kódokat Ha a CSS kódjai rendetlenek, akkor zavartalanul kódol, és nehezen fogja megítélni az előző kódot. Kezdők számára megfelelő bemélyedést hozhat létre, és megfelelően kommentálhatja őket. Több - 12 A kód tisztításának alapelvei, CSS kódok formázása Online Tipográfiai mérés: px vs em Probléma van a mérőegység használatának kiválasztásakor px vagy em? Ezek a következő cikkek jobban megérthetik a tipográfiai egységeket. CSS böngészők kompatibilitási táblázat Mindannyian tudjuk, hogy minden böngészőnek különböző módja van a CSS-stílusok megjelenítésére. Jó, ha van egy referencia, egy diagram vagy egy lista, amely az összes böngésző CSS-kompatibilitását mutatja. CSS támogatási táblázat: # 1, # 2, # 3, # 4. Több oszlopok tervezése a CSS-ben Problémája van a bal, a középső és a jobb oldali oszlopok megfelelő beállításához? Íme néhány cikk, amely segíthet: A Szent Grál keresésében Faux oszlopok A legfőbb okok miatt a CSS oszlopai elrontottak Litte dobozok (példák) Többoszlopos elrendezések Mássz ki a dobozból Abszolút oszlopok Szerezz egy ingyenes CSS-szerkesztőt A dedikált szerkesztők mindig jobbak, mint egy jegyzettömb. Néhány ajánlott: Több - Egyszerű CSS, Jegyzettömb ++, Stílusos CSS szerkesztő A médiatípusok megértése Kevés a médiatípus, amikor a CSS-t bejelentjük . A nyomtatás, a vetítés és a képernyő kevés a gyakran használt típusok közül. A megfelelő módon történő megértés és használatuk lehetővé teszi a felhasználók jobb hozzáférhetőségét. Az alábbi cikk bemutatja, hogyan kell kezelni a CSS médiatípusokat. Több - CSS és médiatípusok, W3 médiatípusok, CSS médiatípusok, CSS2 médiatípusok 20 Hasznos iPhone Apps for Developers & Designers 20 Hasznos SVG eszközök a jobb grafikához 20 Ultra könnyű és elegáns betűtípus a webes tervezők számára Következő cikk 20 Hasznos Firefox oldalsáv-kiegészítők Korábbi cikk 20 Hasznos alkalmazások a legtöbbet a Instagramból