20 Nyttige CSS tips for nybegynnere

I gamle dager avhenger vi mye av utviklere og programmerere for å oppdatere nettstedet, selv om det bare er en mindre. Takket være CSS og det er fleksibilitet, kan stiler trekkes ut uavhengig av koderne. Nå, med en viss grunnleggende forståelse av CSS, kan en nybegynner enkelt endre stilen til et nettsted.

Enten du er interessert i å plukke opp CSS for å lage ditt eget nettsted, eller bare for å justere bloggens utseende og følelse, er det alltid godt å begynne med grunnleggende for å få et sterkere fundament. La oss ta en titt på noen CSS Tips vi trodde kan være nyttig for nybegynnere. Full liste etter hopp.

1. Bruk reset.css

   Når det gjelder å gi CSS-stiler, har nettlesere som Firefox og Internet Explorer forskjellige måter å håndtere dem på. reset.css Tilbakestiller alle grunnleggende stiler, slik at du starter med en ekte, blank, ny stilark.

   Her er få ofte brukt reset.css rammer - Yahoo Reset CSS, Eric Meyers CSS Reset, Tripoli

2. Bruk Shorthand CSS

   Shorthand CSS gir deg en kortere måte å skrive CSS-kodene på, og viktigst av alt - det gjør koden klarere og lettere å forstå.

   I stedet for å lage CSS slik

   .header bakgrunnsfarge: #fff; bakgrunnsbilde: url (image.gif); Bakgrunn-gjenta: nei-gjenta; Bakgrunnsposisjon: øverst til venstre; 

   Det kan kortfattes i følgende:

   .header bakgrunn: #fff url (image.gif) no-repeat øverst til venstre

   Mer - Introduksjon til CSS Shorthand, Nyttige CSS shorthand egenskaper

3. forståelse Klasse og ID

   Disse to selectors forvirrer ofte nybegynnere. I CSS, klasse er representert av en prikk "." samtidig som id er en hash '# ". I et nøtteskall id brukes på stil som er unik og ikke gjentar seg selv, klasse på den andre siden, kan gjenbrukes.

   Mer - Klasse vs ID | Når skal du bruke Klasse, ID | Bruker klasse og ID sammen

4. Kraft av

5. a.k.a lenke liste, er veldig nyttig når de brukes riktig med
   eller
   , spesielt for å utforme en navigasjonsmeny.

   • Glemme , prøve

     En av de største fordelene med CSS er bruken av

     for å oppnå total fleksibilitet når det gjelder styling.

     er ulikt

     , hvor innholdet er 'låst' innenfor a

     s celle. Det er trygt å si mest Oppsett kan oppnås ved bruk av og riktig styling, vel kanskje bortsett fra massive tabulære innhold. Mer - Tabeller er døde, Tabeller Vs. CSS, CSS vs tabeller CSS Debugging Tools Det er alltid godt å få øyeblikkelig forhåndsvisning av oppsettet mens du justerer CSS, det hjelper bedre å forstå og feilsøke CSS-stiler bedre. Her er noen gratis CSS-feilsøkingsverktøy du kan installere på nettleseren din: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar og Firebug. Unngå overflødige selektorer Noen ganger kan CSS-deklarasjonen din bli enklere, noe som betyr at du finner deg selv kodende følgende: ul li ... ol li ... tabell tr ​​td ... De kan forkortes til bare li ... td ... Forklaring: vil bare eksistere innenfor eller og og vil bare være inne så det er egentlig ikke nødvendig å sette inn dem igjen. Å vite !viktig Enhver stil merket med !viktig vil bli tatt i bruk uansett om det er en overskriftsregel under den. .side bakgrunnsfarge: blå! viktig; background-color: red; I eksemplet ovenfor, background-color: blue vil bli tilpasset fordi den er merket med !viktig, selv når det er en background-color: red; under den. !viktig brukes i situasjoner der du vil tvinge en stil uten noe å overskrive det, men det kan ikke fungere i Internet Explorer. Erstatt tekst med bilde Dette er vanligvis praksis å erstatte tittel fra en tekstbasert tittel til et bilde. Slik gjør du det. h1 tekstinnhold: -9999px; bakgrunn: url ("title.jpg") no-repeat; bredde: 100 piksler; høyde: 50 piksler; Forklaring: text-indent: -9999px; kaster tekst tittel av skjermen, erstattet av et bilde deklarert av bakgrunn: … med en fast bredde og høyde. Forstå CSS posisjonering Følgende artikkel gir deg en klar forståelse for bruk av CSS-posisjonering - stilling: … Mer - Lær CSS posisjonering i ti trinn CSS @importere vs Det finnes 2 måter å ringe en ekstern CSS-fil til - ved hjelp av @importere og . Hvis du er usikker på hvilken metode du skal bruke, er det noen artikler for å hjelpe deg med å bestemme. Mer - Forskjellen mellom @import og link Utforming av skjemaer i CSS Webskjemaer kan enkelt utformes og tilpasses med CSS. Disse følgende artiklene viser deg hvordan: Mer - Tabell-mindre form, Form Hage, Styling enda mer form kontroller Bli inspirert Hvis du ser etter et pent designet CSS-basert nettsted for inspirasjon, eller bare bare surfer for å finne noe bra brukergrensesnitt, her er noen CSS-presentasjoner vi anbefaler: CSS Remix CSS Beauty CSS Elite CSS Mania CSS Lekkasje Hold CSS-koder rene Hvis CSS-kodene dine er rotete, kommer du til å ende opp med koding i forvirring og har det vanskelig å refere forrige kode. For det første kan du lage riktig innrykning, kommentere dem ordentlig. Mer - 12 prinsipper for å holde koden ren, Formater CSS-koder på nettet Typografi måling: px vs em Har problem å velge når du skal bruke måleenheten px eller em? Disse følgende artiklene kan gi deg bedre forståelse av typografienhetene. CSS Browsers Kompatibilitetstabell Vi vet alle at hver nettleser har forskjellige måter å gjengi CSS-stiler på. Det er godt å ha en referanse, et diagram eller en liste som viser hele CSS-kompatibiliteten for hver nettleser. CSS støttetabell: #1, # 2, # 3, # 4. Design multikolonner i CSS Har du problemer med å få venstre, midtre og høyre kolonne for å justere riktig? Her er noen artikler som kan hjelpe: På jakt etter den hellige gral Faux kolonner Øverste årsaker til at CSS-kolonnene dine er ødelagt Litte bokser (eksempler) Multi-Column Layouts klatre ut av boksen Absolutt kolonner Få gratis CSS-redaktører Dedikerte redaktører er alltid bedre enn en notisblokk. Her er noen vi anbefaler: Mer - Enkel CSS, Notisblokk ++, En stil CSS Editor Forstå medietyper Det er få medietyper når du erklære CSS med . utskrift, projeksjon og skjerm er noen av de vanligste typene. Å forstå og bruke dem på riktig måte tillater bedre brukertilgjengelighet. Følgende artikkel forklarer hvordan du skal håndtere CSS Media-typer. Mer - CSS og medietyper, W3 Medietyper, CSS-medietyper, CSS2 medietyper 20 Nyttige iPhone Apps for utviklere og designere 20 Nyttige SVG-verktøy for bedre grafikk 20 Ultra Light og Elegant Fonts for Web Designers Neste artikkel 20 Nyttige tilleggsfunksjoner for Firefox-sidelinjer Forrige artikkel 20 Nyttige Apps for å få mest mulig ut av Instagram