20 Hyödyllisiä CSS-vinkkejä aloittelijoille

Vanhoina aikoina olemme riippuvaisia ​​paljon kehittäjistä ja ohjelmoijista, jotka auttavat päivittämään verkkosivustoa, vaikka se olisi vain pieni. CSS: n ja sen joustavuuden ansiosta tyylejä voidaan erottaa itsenäisesti koodeista. Nyt, joillakin perusteellisilla käsitteillä CSS: stä, jopa noviisi voi helposti muuttaa verkkosivuston tyyliä.

Olitpa kiinnostunut ottamaan CSS: n käyttöön oman verkkosivustosi luomiseksi tai vain muokkaamaan blogisi ulkoasua ja tuntemaan sen vähän - on aina hyvä aloittaa perusasioista vahvemman pohjan saamiseksi. Katsokaamme joitakin CSS-vinkkejä ajattelimme ehkä hyödyllistä aloittelijoille. Täysi lista hyppyjen jälkeen.

1. Käyttää reset.css

   Kun kyseessä on CSS-tyylien esittäminen, selaimilla, kuten Firefoxilla ja Internet Explorerilla, on erilaisia ​​tapoja käsitellä niitä. reset.css nollaa kaikki perusasiat, joten aloitat todelliset tyhjät uudet tyylitaulukot.

   Tässä muutamia yleisesti käytettyjä reset.css puitteet - Yahoo Reset CSS, Eric Meyerin CSS-nollaus, Tripoli

2. Käytä Shorthand CSS

   Shorthand CSS antaa sinulle lyhyemmän tavan kirjoittaa CSS-koodisi, ja mikä tärkeintä, se tekee koodista selkeämmän ja helpommin ymmärrettävän.

   Sen sijaan, että luot CSS: n näin

   .otsikko taustaväri: #fff; taustakuva: url (image.gif); tausta-toisto: ei-toista; tausta-asema: ylhäällä vasemmalla; 

   Se voidaan lyhentää seuraaviin:

   .otsikko tausta: #fff url (image.gif) ei-toista ylhäällä vasemmalla

   Lisää - Johdatus CSS-lyhenteeseen, Hyödyllisiä CSS-lyhenteitä

3. Ymmärtäminen luokka ja ID

   Nämä kaksi valitsinta sekoittavat usein aloittelijoita. CSS: ssä, luokka on esitetty pisteellä "." sillä aikaa id on hash '#' id käytetään tyylillä, joka on ainutlaatuinen eikä toista itseään, luokka toisella puolella, voidaan käyttää uudelleen.

   Lisää - Luokka vs. ID | Milloin käyttää luokkaa, tunnus | Luokan ja tunnuksen käyttö yhdessä

4. Voima

5. a.k.a-linkkiluettelo on erittäin hyödyllinen, kun niitä käytetään oikein
   tai
   , erityisesti suunnitella navigointivalikko.

   • Unohtaa , yrittää

     Yksi CSS: n suurimmista eduista on

     täydellisen joustavuuden saavuttamiseksi muotoilussa.

     ovat toisin

     , jossa sisältö on lukittu

     solun. Eniten voi sanoa asettelut ovat saavutettavissa käyttämällä ja oikea muotoilu, hyvin ehkä paitsi massiiviset taulukkomuodot. Lisää - Taulukot ovat kuolleet, Taulukot Vs. CSS, CSS vs. taulukot CSS-virheenkorjaustyökalut Se on aina hyvä saada pikakatselu ulkoasusta samalla, kun CSS: ää muokataan, se auttaa ymmärtämään ja korjaamaan CSS-tyylit paremmin. Tässä on joitakin ilmaisia ​​CSS-virheenkorjaustyökaluja, joita voit asentaa selaimellesi: FireFox Web Developer, DOM-tarkastaja, Internet Explorerin kehitystyökalupalkki ja Firebug. Vältä tarpeettomia valintoja Joskus CSS-ilmoituksesi voi olla yksinkertaisempi, mikä tarkoittaa sitä, että koet seuraavat koodit: ul li … ol li … taulukko tr td … Niitä voidaan lyhentää vain li … td … Selitys: olemassa vain tai ja ja on vain sisällä joten ei todellakaan ole tarpeen lisätä niitä uudelleen. tietäen !tärkeä Kaikki tyylillä merkitty tyyli !tärkeä otetaan käyttöön riippumatta siitä, onko sen alapuolella ylitallennussääntö. .sivu taustaväri: sininen! background-color: punainen; Yllä olevassa esimerkissä, background-color: blue mukautetaan, koska se on merkitty !tärkeä, vaikka siellä on background-color: red; sen alla. !tärkeä sitä käytetään tilanteessa, jossa haluat pakottaa tyylin ilman, että sen päälle kirjoitetaan jotain, mutta se ei ehkä toimi Internet Explorerissa. Vaihda teksti kuvan kanssa Tämä on yleisesti käytäntö korvata otsikko tekstipohjaisesta otsikosta kuvaan. Näin teet sen. h1 text-luetelmakohta: -9999px; tausta: url ("title.jpg") ei-toista; leveys: 100px; korkeus: 50 kuvapistettä; Selitys: text-luetelmakohta: -9999px; heittää tekstin otsikon pois näytöstä, korvattu kuvan ilmoittamalla kuvalla tausta: … kiinteällä leveys ja korkeus. Ymmärrä CSS-paikannus Seuraava artikkeli antaa sinulle selkeän käsityksen CSS-paikannuksen käytöstä - sijainti: … Lisää - Opi CSS-paikannus kymmenessä vaiheessa CSS @tuonti vs Ulkoista CSS-tiedostoa voidaan kutsua kahdella tavalla - käyttämällä @tuonti ja . Jos olet epävarma, mitä menetelmää käytetään, tässä on muutamia artikkeleita, joiden avulla voit päättää. Lisää - @Importin ja linkin välinen ero Lomakkeiden suunnittelu CSS: ssä Web-lomakkeet voidaan helposti suunnitella ja mukauttaa CSS: n avulla. Nämä seuraavat artikkelit osoittavat, miten: Lisää - Taulukossa oleva lomake, Form Garden, Muodostetaan vieläkin enemmän muotoilua Hanki innoittamana Jos etsit innostusta varten kauniisti suunniteltua CSS-pohjaista verkkosivustoa tai vain yksinkertaisesti selaamalla löytääkseen hyviä käyttöliittymiä, tässä on joitakin CSS-esittelysivustoja, joita suosittelemme: CSS Remix CSS Beauty CSS Elite CSS Mania CSS-vuoto Pidä CSS-koodit puhtaina Jos CSS-koodisi ovat sotkuisia, päädyt koodaamaan sekaannusta ja sinulla on vaikeasti edellisen koodin tuominen. Aloittelijoille voit luoda oikean sisennyksen, kommentoida niitä oikein. Lisää - 12 Periaatteet koodin puhtaana pitämiseksi, Alusta CSS-koodit verkossa Typografian mittaus: px vs em Ongelmana on valita, milloin mittausyksikköä käytetään px tai em? Nämä seuraavat artikkelit voivat antaa sinulle paremman käsityksen typografiayksiköistä. CSS-selainten yhteensopivuustaulukko Me kaikki tiedämme, että jokaisella selaimella on eri tapoja tehdä CSS-tyylit. On hyvä olla viittaus, kaavio tai luettelo, joka näyttää koko CSS-yhteensopivuuden kullekin selaimelle. CSS-tukitaulukko: # 1, # 2, # 3, # 4. Suunnittele sarakkeet CSS: ssä Onko vasemman, keskimmäisen ja oikean sarakkeen kohdistus ongelma kohdistaa oikein? Seuraavassa on joitakin artikkeleita, jotka saattavat auttaa: Pyhän Graalin etsinnässä Faux-sarakkeet Parhaimmat syyt, joiden vuoksi CSS-sarakkeet ovat sekaisin Litte Boxes (esimerkit) Monen sarakkeen ulkoasut kiipeävät ulos laatikosta Absoluuttiset sarakkeet Hanki ilmainen CSS-editorit Dedikoidut toimittajat ovat aina parempia kuin notepad. Tässä muutamia suosittelemme: Lisää - Yksinkertainen CSS, Muistilehtiö ++, Tyyli-CSS-editori Media-tyyppien ymmärtäminen Mediatyyppejä on vähän, kun ilmoitat CSS: n . tulostus, projektio ja näyttö ovat harvoja yleisimmin käytettyjä tyyppejä. Niiden ymmärtäminen ja käyttäminen asianmukaisella tavalla mahdollistaa paremman käyttäjäystävällisyyden. Seuraavassa artikkelissa kerrotaan, miten CSS Media -tyyppejä käsitellään. Lisää - CSS- ja mediatyypit, W3-mediatyypit, CSS-mediatyypit, CSS2-mediatyypit 20 Hyödyllisiä iPhone-sovelluksia kehittäjille ja suunnittelijoille 20 Hyödyllisiä SVG-työkaluja parempaan grafiikkaan 20 Erittäin kevyt ja tyylikäs fontit Web-suunnittelijoille Seuraava artikkeli 20 Hyödyllisiä Firefoxin sivupalkin lisäosia Edellinen artikkeli 20 Hyödyllisiä sovelluksia, jotka saavat eniten irti Instagramista