20 Användbara CSS tips för nybörjare

I gamla dagar beror vi mycket på utvecklare och programmerare för att hjälpa till att uppdatera webbplatsen, även när det bara är en mindre. Tack vare CSS och dess flexibilitet kan stilar utdragas oberoende av koderna. Nu, med en viss grundläggande förståelse för CSS kan även en nybörjare enkelt ändra stilen på en webbplats.

Oavsett om du är intresserad av att ta upp CSS för att skapa din egen webbplats, eller bara för att finjustera din blogg, känner du lite - det är alltid bra att börja med grunden för att få en starkare grund. Låt oss ta en titt på några CSS Tips vi trodde att det skulle vara användbart för nybörjare. Hela listan efter hopp.

1. Använda sig av reset.css

   När det gäller att göra CSS-format har webbläsare som Firefox och Internet Explorer olika sätt att hantera dem. reset.css återställer alla grundläggande stilar, så du börjar med en riktig tom ny stilark.

   Här är få vanligt förekommande reset.css ramar - Yahoo Reset CSS, Eric Meyers CSS Reset, Tripoli

2. Använd Shorthand CSS

   Shorthand CSS ger dig ett kortare sätt att skriva dina CSS-koder, och viktigast av allt - det gör koden renare och lättare att förstå.

   Istället för att skapa CSS så här

   .rubrik bakgrundsfärg: #fff; bakgrundsbild: url (image.gif); bakgrundsrepetition: nej-repetera; Bakgrundsposition: Överst till vänster; 

   Det kan vara kortfattat i följande:

   .rubrik bakgrund: #fff url (image.gif) no-repeat högst upp till vänster

   Mer - Introduktion till CSS Shorthand, Användbara CSS shorthand egenskaper

3. Förståelse Klass och ID

   Dessa två selektörer förvirrar ofta nybörjare. I CSS, klass representeras av en punkt "." medan id är en hash "#". I ett nötskal id används på stil som är unik och upprepar sig inte, klass på andra sidan kan återanvändas.

   Mer - Klass vs ID | När ska du använda klass, ID | Tillämpa klass och ID tillsammans

4. Kraft av

5. a.k.a länklista, är mycket användbar när de används korrekt med
   eller
   , speciellt för att ställa in en navigeringsmeny.

   • Glömma bort , Prova

     En av de största fördelarna med CSS är användningen av

     för att uppnå total flexibilitet när det gäller styling.

     är olikt

     , där innehållet är "låst" inom a

     s cell. Det är säkert att säga det mesta layouter kan uppnås med användning av och korrekt styling, kanske med undantag av massivt tabulärt innehåll. Mer - Tabellerna är döda, Tabeller Vs. CSS, CSS vs tabeller CSS Debugging Tools Det är alltid bra att få en snabb förhandsgranskning av layouten medan du anpassar CSS, det hjälper till att förstå och felsöka CSS-format bättre. Här är några gratis CSS-felsökningsverktyg som du kan installera på din webbläsare: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar och Firebug. Undvik överflödiga selektörer Ibland kan din CSS-deklaration bli enklare, vilket innebär att du hittar dig själv som kodar följande: ul li ... ol li ... tabell tr ​​td ... De kan förkortas till bara li ... td ... Förklaring: kommer bara att finnas inom eller och och kommer bara att vara inuti så det är verkligen inte nödvändigt att sätta in dem igen. Menande !Viktig Alla stilar markerade med !Viktig kommer att användas oavsett om det finns en överskrivningsregel nedanför den. .sida bakgrundsfärg: blå! viktigt; bakgrundsfärg: rött; I exemplet ovan, background-color: blå kommer att anpassas eftersom den är markerad med !Viktig, även när det finns en background-color: red; under det. !Viktig används i situationer där du vill tvinga en stil utan att något skrivs över det, men det kanske inte fungerar i Internet Explorer. Ersätt text med bild Detta ökar vanligtvis att ersätta titel från en textbaserad titel till en bild. Så här gör du det. h1 text-streck: -9999px; bakgrund: url ("title.jpg") no-repeat; bredd: 100px; höjd: 50px; Förklaring: text-indent: -9999px; kastar din textrubrik från skärmen, ersatt av en bild som deklarerats av bakgrund: ... med en fast bredd och höjd. Förstå CSS-positionering Följande artikel ger dig en klar förståelse när du använder CSS-positionering - position: ... Mer - Lär CSS-positionering i tio steg CSS @importera mot Det finns 2 sätt att ringa en extern CSS-fil - respektive med @importera och . Om du är osäker på vilken metod som ska användas, är det några artiklar som hjälper dig att bestämma. Mer - Skillnad mellan @import och länk Utforma blanketter i CSS Webbformulär kan enkelt utformas och anpassas med CSS. Följande artiklar visar dig hur: Mer - Tabellfri form, Form Garden, Styling ännu mer form kontroller Bli inspirerad Om du letar efter en snyggt utformad CSS-baserad webbplats för inspiration, eller helt enkelt surfar för att hitta lite bra användargränssnitt, här är några CSS-presentationer som vi rekommenderar: CSS Remix CSS Beauty CSS Elite CSS Mania CSS läcka Håll CSS-koder rena Om dina CSS-koder är röriga, kommer du att sluta koda i förvirring och ha svårt att referee den tidigare koden. Till att börja med kan du skapa korrekt inryckning, kommentera dem ordentligt. Mer - 12 principer för att hålla din kod ren, Formatera CSS-koder på nätet Typografi Mätning: px mot em Har problem att välja när man ska använda mätenheten px eller em? Följande artiklar kan ge dig en bättre förståelse för typografienheterna. CSS Browsers Kompatibilitetstabell Vi vet alla att varje webbläsare har olika sätt att göra CSS-stilar. Det är bra att ha en referens, ett diagram eller en lista som visar hela CSS-kompatibiliteten för varje webbläsare. CSS stödbord: # 1, # 2, # 3, # 4. Design multicolumns i CSS Har du problem med att få vänster, mitten och höger kolumn att stämma ordentligt? Här är några artiklar som kan hjälpa till: På jakt efter den heliga graden Faux kolumner De främsta anledningarna till att dina CSS-kolumner är upprustade Litte Boxes (exempel) Multi-Column Layouts klättra ut ur rutan Absoluta kolumner Få en gratis CSS-redaktör Dedikerade redaktörer är alltid bättre än en anteckningsblock. Här är några vi rekommenderar: Mer - Enkel CSS, Anteckningar ++, En Style CSS Editor Förstå typ av media Det finns få medietyper när du förklarar CSS med . utskrift, projektion och skärm är några av de vanliga typerna. Att förstå och använda dem på rätt sätt möjliggör bättre användaråtkomst. Följande artikel förklarar hur man hanterar CSS Media-typer. Mer - CSS och mediatyper, W3 Mediatyper, CSS-mediatyper, CSS2-mediatyper 20 Användbara iPhone Apps för utvecklare och designers 20 Användbara SVG-verktyg för bättre grafik 20 Ultra Light och Elegant Fonts för webbdesigners Nästa artikel 20 Användbara Firefox Sidebar tillägg Föregående artikel 20 Användbara Apps för att få ut det mesta av Instagram