20 Nyttige CSS Tips til begyndere

I gamle dage afhænger vi meget af udviklere og programmører for at hjælpe med at opdatere hjemmesiden, selv når det kun er en mindre. Takket være CSS og dens fleksibilitet kan stilarter uddrages uafhængigt væk fra koderne. Nu, med en vis grundlæggende forståelse for CSS, kan selv en nybegynder nemt ændre stilen på et websted.

Uanset om du er interesseret i at hente CSS til at oprette din egen hjemmeside, eller bare for at tilpasse din blogs udseende lidt - er det altid godt at starte med fundamentet for at få et stærkere fundament. Lad os tage et kig på nogle CSS Tips vi troede kunne være nyttige for begyndere. Fuld liste efter spring.

1. Brug reset.css

   Når det kommer til at gengive CSS-stilarter, har browsere som Firefox og Internet Explorer forskellige måder at håndtere dem på. reset.css nulstiller alle grundlæggende stilarter, så du starter med en rigtig tom ny stilark.

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

2. Brug shorthand CSS

   Shorthand CSS giver dig en kortere måde at skrive dine CSS-koder på, og vigtigst af alt - det gør koden klarere og lettere at forstå.

   I stedet for at oprette CSS som dette

   .header baggrundsfarve: #fff; baggrundsbillede: url (image.gif); background-repeat: no-repeat; baggrundsstilling: øverst til venstre; 

   Det kan kortfattes i følgende:

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

   Mere - Introduktion til CSS stenografi, Nyttige CSS stenografi egenskaber

3. forståelse klasse og ID

   Disse to selektorer forvirrer ofte begyndere. I CSS, klasse er repræsenteret ved en prik "." mens id er en hash '# ". I en nøddeskal id bruges på stil, der er unik og gentager sig ikke, klasse på den anden side kan genanvendes.

   Mere - Klasse vs ID | Hvornår skal du bruge Klasse, ID | Anvendelse af klasse og id sammen

4. Kraft af

5. a.k.a link liste, er meget nyttigt, når de bruges korrekt med
   eller
   , specielt til at stile en navigationsmenu.

   • Glemme , prøve

     En af de største fordele ved CSS er brugen af

     for at opnå total fleksibilitet med hensyn til styling.

     er ulige

     , hvor indholdet er 'låst' inden for a

     s celle. Det er sikkert at sige mest layouter er opnåelige ved brug af og korrekt styling, godt måske undtagen massive tabulære indhold. Mere - Tabeller er døde, Tabeller Vs. CSS, CSS vs tabeller CSS Debugging Tools Det er altid godt at få et øjeblikkeligt eksempel på layoutet, mens tweaking CSS, det hjælper med at forstå og fejle CSS-stilarter bedre. Her er nogle gratis CSS fejlfinding værktøjer, du kan installere på din browser: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar og Firebug. Undgå overflødige selektorer Nogle gange kan din CSS-erklæring være enklere, hvilket betyder, hvis du finder dig selv kodende følgende: ul li ... ol li ... tabel tr td ... De kan forkortes til bare li ... td ... Forklaring: vil kun eksistere indenfor eller og og vil kun være inde så der er virkelig ikke nødvendigt at genindsætte dem. Kendskab !vigtig Enhver stil markeret med !vigtig vil blive taget i brug uanset om der er en overskrivningsregel under den. .side baggrundsfarve: blå! vigtigt; background-color: red; I eksemplet ovenfor, background-color: blå vil blive tilpasset, fordi det er markeret med !vigtig, selv når der er a background-color: red; under den. !vigtig bruges i situationer, hvor du vil tvinge en stil uden at overskrive det, men det virker måske ikke i Internet Explorer. Udskift tekst med billede Dette plejer at erstatte titel fra en tekstbaseret titel til et billede. Sådan gør du det. h1 tekstindtryk: -9999px; baggrund: url ("title.jpg") no-repeat; bredde: 100px; højde: 50px; Forklaring: tekst-led: -9999px; kaster din tekst titel off screen, erstattet af et billede erklæret af baggrund: … med en fast bredde og højde. Forstå CSS Positionering Den følgende artikel giver dig en klar forståelse af brugen af ​​CSS-positionering - stilling: ... Mere - Lær CSS positionering i ti trin CSS @importere vs Der er 2 måder at ringe til en ekstern CSS-fil - henholdsvis ved hjælp af @importere og . Hvis du er usikker på hvilken metode du skal bruge, er der få artikler til at hjælpe dig med at beslutte. Mere - Forskel mellem @import og link Udformning af formularer i CSS Webformularer kan nemt designes og tilpasses med CSS. Disse følgende artikler viser dig hvordan: Mere - Tabelfri formular, Form Garden, Styling endnu mere form kontrol Blive inspireret Hvis du kigger efter en pænt designet CSS-baseret hjemmeside til inspiration, eller bare bare surfer for at finde nogle gode brugergrænseflader, her er nogle CSS-fremvisningssider, vi anbefaler: CSS Remix CSS Beauty CSS Elite CSS Mania CSS Lækage Hold CSS-koder rene Hvis dine CSS koder er rodet, vil du ende med kodning i forvirring og har svært ved at refere forrige kode. Til at begynde med kan du oprette ordentlig indrykning, kommentere dem korrekt. Mere - 12 principper for at holde din kode ren, Format CSS-koder online Typografi Måling: px vs em Har problemer med at vælge, hvornår man skal bruge måleenheden px eller em? Disse følgende artikler kan give dig en bedre forståelse af typografienhederne. CSS Browsers Kompatibilitetstabel Vi ved alle, at hver browser har forskellige måder at gengive CSS-stilarter på. Det er godt at have en reference, et diagram eller en liste, der viser hele CSS-kompatibiliteten for hver browser. CSS support tabel: # 1, # 2, # 3, # 4. Design multikolonner i CSS Har du problemer med at få den venstre, midterste og højre kolonne til at justere ordentligt? Her er nogle artikler, der kan hjælpe: På jagt efter den hellige gral Faux kolonner Øverste årsager til, at dine CSS-kolonner er ødelagt Litte bokse (eksempler) Multi-Column Layouts klatre ud af boksen Absolutte kolonner Få en gratis CSS redaktører Dedikerede redaktører er altid bedre end en notesblok. Her er nogle vi anbefaler: Mere - Enkel CSS, notepad ++, En Style CSS Editor Understanding Media Types Der er få medietyper, når du erklærer CSS sammen med . print, projektion og skærm er få af de almindeligt anvendte typer. At forstå og bruge dem på rette måder giver bedre adgang til brugerne. Den følgende artikel forklarer, hvordan man håndterer CSS Media-typer. Mere - CSS og medietyper, W3 medietyper, CSS-medietyper, CSS2 medietyper 20 Nyttige iPhone Apps til udviklere og designere 20 Nyttige SVG-værktøjer til bedre grafik 20 Ultra Light og Elegant Fonts til Web Designers Næste artikel 20 Nyttige Firefox Sidebar-tilføjelser Forrige artikel 20 Nyttige Apps for at få mest muligt ud af Instagram