100+ CSS-ressourcer til webdesignere og -udviklere

af Bradley Nice, Content Manager på ClickHelp.com - dokumentationsværktøj til software

En seriøs webdesigner / udvikler skal kræve en færdighed til at skrive god CSS. CSS er enkel, meget let at lære, men meget magtfuldt sprog. Når du lærer det, kan du blive forbløffet over dens evne.

I tilfælde af at du ikke er bekendt med CSS, her er en hurtig introduktion:

”CSS er et specielt sprog, der bruges til at style HTML-indhold. CSS definerer, hvordan HTML-elementer skal vises - farve, størrelse, placering, kant, baggrund osv. ”
© ClickHelp Team

I dag har jeg samlet et seriøst sæt CSS-ressourcer til at hjælpe dig med at lære. Det er opdelt i flere kategorier: Læringsvejledninger, sider og bøger, referencer og snyderark, selvstudier og teknikker, skabeloner og rammer, gallerier og udstillingsvinduer, værktøjer og CSS-specifikke blogs og nyhedswebsteder.

Læringsvejledninger, websteder og bøger

Websteder: Codecademy, FreeCodeCamp.com, SoloLearn, Treehouse, Tutsplus, A til Z CSS, Dash, Hello World, Khan Academy, HTML5 fra Scratch, Sitepoint, Usersnap

Bøger: HTML & CSS, programmering efter timer - CSS-tutorial

  • Chris Coyiers grundlæggende HTML- og CSS-videotutorial (62 MB) - En skal se video for absolutte begyndere. Det lærer dig alt fra at hente en teksteditor, skrive din knytnæve HTML-side og bruge CSS til styling.
  • Oprettelse af et globalt stilark - Du har ikke brug for forskellige CSS-filer til forskellige sider, opret altid kun en Global CSS-fil til alle dine websider. Globale stilark kan anvendes enten på hele dit websted eller på tværs af en delmængde sider, og det betyder, at du kun behøver at opdatere en eller to filer, når du har brug for en stilændring.
  • CSS Basics - Fast i verden af ​​indlejrede tabeller og forældet markup? Brug af CSS til at style dine (X) HTML-filer vil være til gavn for dig og dine besøgende på mange måder. Lær det grundlæggende om CSS kapitel efter kapitel online, eller download alle 18 kapitler med CSS Basics i en downloadbar udskrivbar PDF-fil.
  • Cascading Style Sheets (CSS) Tutorial - Lær brugen af ​​CSS, definerer skriftstørrelse, margener og polstring. Identificer HTML-elementerne via id- og klasseattributter.
  • CSS-tutorial - Flere CSS-tutorials her, fra lektion 1 til 16 indeholder kort introduktion og dybdegående tutorial om CSS, lær om at bruge farver til flydende elementer.
  • HTML & CSS for begyndere - Sådan konfigureres din HTML-webside, oprette overskrifter og afsnit, tilføje lister, ændre skriftstørrelse, farve og type vha. CSS.
  • Lær HTML & CSS i en brugervenlig guide. - Enkel og omfattende guide dedikeret til at hjælpe begyndere med at lære HTML og CSS. Denne guide beskriver grundlæggende funktioner og fungerer gennem alle fælles elementer i front-end design og udvikling.

Referencer og cheatsheets

  • CSS Property Index - En alfabetisk liste over alle CSS-egenskaber.
  • CSS Shorthand Guide - Et snyderis, der dækker grundlæggende CSS korthandeformater.
  • CSS Cheat Sheets - To snyderark fra About.com - et grundlæggende og et til CSS-layout.
  • Listamatic - Dette websted giver eksempler på, hvordan man bruger CSS til at oprette radikalt forskellige listestiler.
  • Begyndervejledning fra en erfaren CSS-designer - Dette er en enorm ressourceliste for CSS-begyndere.
  • 5 tip til organisering af din CSS - Denne artikel tilbyder fem virkelig nyttige metoder til at holde dine stilark bedre organiserede (og derfor lettere at redigere senere).
  • Mine 5 CSS-tip - En samling af fem enkle tip til oprettelse af bedre CSS.
  • Quirks Mode og Strict Mode - En guide til quirks mode og streng tilstand i moderne browsere.
  • CSS Cheat Sheet (V2) - En CSS-reference på én side, der viser alle CSS 2.1-vælgere.
  • Core CSS: Del 1 - En 6-siders referencevejledning til grundlæggende CSS-elementer fra Refcardz.
  • CSS Shorthand Cheat Sheet (PDF) - Et referenceblad til CSS Shorthand-format.
  • Brug af CSS (Cascading Style Sheets) - En grundlæggende guide til CSS, inklusive fordelene ved at bruge CSS.
  • 5 måder til øjeblikkeligt at skrive bedre CSS - Nogle tip til at skrive god CSS, der er både effektiv og effektiv.
  • Optimering af din webstedsstruktur til udskrivning ved hjælp af CSS - En guide til oprettelse af stilark til udskrivning.
  • PrintStylesheets - En anden vejledning til oprettelse af udskriftsstilark.
  • CSS-typografi: Kontrastteknikker, selvstudier og bedste praksis - En fantastisk samling af CSS-typografiressourcer.
  • Kraftige CSS-teknikker til effektiv kodning - En samling CSS-teknikker, ideer og løsninger til bedre CSS-kodning.
  • Nulstilling af dine CSS-stilarter med CSS-nulstilling - En komplet guide til nulstilling af stilarter.
  • Strukturel navnekonvention i CSS - En artikel om navngivning af elementer baseret på hvad de er i stedet for hvor de er, eller hvordan de ser ud.
  • Forbedring af kodelæsbarheden med CSS Styleguides - En artikel, der dækker fem teknikker, du kan bruge til at gøre din kode mere vedligeholdelig og håndterbar.
  • 70 Ekspertidéer til bedre CSS-kodning - En samling eksperttips til forbedring af din kode.
  • CSS Float Theory: Ting, du skal vide - En guide til forståelse af svæver i CSS.
  • Komplet CSS-guide - En enorm ressource, der dækker stort set alle dele af CSS.
  • Typografisk kontrast og flow - En artikel, der skitserer det grundlæggende for at skabe god type med tilstrækkelig typografisk kontrast i CSS.
  • Sådan formateres tekst i CSS - En grundig guide til størrelse af CSS-tekst.
  • CSS Cheat Sheet - Et meget komplet webbaseret CSS snyderi.
  • 13 Uddannelsesprincipper for CSS, som alle burde vide - En liste over grundlæggende CSS-konventioner, du skal være opmærksom på.
  • Ressourcevejledning - Dette er CSS-ressourcevejledningen fra CSS Zen Garden.
  • CSS Beauty - Et websted, der tilbyder CSS-nyheder, ressourcer og et galleri.
  • Brug af CSS-genveje - En referencevejledning til nogle grundlæggende CSS-korthaler.
  • Webudviklers håndbog - Dette er en massiv samling af CSS og andre ressourcer, herunder showcases, værktøjer og mere.
  • Designing on a Dime: 100 Freebie CSS-ressourcer - En stor samling af CSS-ressourcer, inklusive artikler, tutorials, layout og mere.
  • 15 CSS-egenskaber, du sandsynligvis aldrig bruger (men måske burde) - Denne artikel dækker femten CSS-egenskaber, som ofte overses, som mange designere måske ikke engang ved, at de findes.
  • 10 Principper for CSS Masters - En samling af gode principper og retningslinjer fra nogle af CSS-mestrene.
  • CSS-specificitet: Ting, du bør vide - En guide til CSS-specificitet, et af de mest vanskelige CSS-koncepter at forstå.
  • Løsning af 5 CSS-hovedpine - En guide til håndtering af CSS-problemer som IE6s dobbeltmarginbug og ineffektive stilarter.

Tutorials og teknikker

  • 20 Nyttige ressourcer til at lære om CSS3
  • CSS3 Unleashed - Tips, tricks og teknikker
  • 20 Meget nyttige CSS3-tutorials
  • CSS3 spændende funktioner og funktioner: 30+ nyttige tutorials
  • CSS fra grunden - Dette er en meget grundlæggende tutorial til at komme i gang med CSS, der leder dig gennem oprettelse af din første basale webside med CSS. Det antages, at den person, der gennemgår selvstudiet, har ringe eller ingen viden om, hvordan man koder et websted og er en stor ressource for begyndere.
  • 53 CSS-teknikker, som du ikke kunne leve uden - Dette er en enorm samling af CSS-teknikker til alt fra menuer til formularer til udskrivning af stilark.
  • CSS Drop Shadows - En tutorial om, hvordan man opretter drop Shadows på billeder ved hjælp af CSS.
  • Selectutorial - CSS Selectors - En grundlæggende guide til CSS-vælgere og hvordan de fungerer.
  • CSS Navigation Techniques - En samling af 37 forskellige navigationsdesign ved hjælp af CSS.
  • CSS-teknikker, jeg bruger hele tiden - En samling af CSS-teknikker Christian Montoya finder meget værdifulde.
  • CSS-teknikker Roundup - 20 CSS-tip og -tricks - En samling CSS-teknikker inklusive afrundede hjørner og CSS-popups.
  • CSS-tip og -tricks - En samling nyttige, grundlæggende CSS-teknikker.
  • Master-stilark: Den mest nyttige CSS-teknik - Et master-stilark, der bruges til at rydde og nulstille standarder for browser.
  • Viser Hyperlink-signaler med CSS - En hurtig tutorial til at tilføje ikoner af linktype ved hjælp af CSS, der er kompatibel med IE7, Safari og Firefox.
  • Ti CSS-tricks, du måske ikke kender - dækker tip som CSS-skrifttypekort, udskiftning af billeder og lodret justering med CSS.
  • Ti flere CSS-tricks, som du måske ikke kender - Denne artikel dækker ting som blok vs. inline-elementer, indstilling af en mindstesidebredde og usynlig tekst.
  • Sådan forvandles en liste til en navigationslinje - En fantastisk tutorial til at oprette en nav-bjælke fra en stylet liste.
  • Drejning af lister til træer - Sådan oprettes en ikke-ordnet liste på flere niveauer i form af et dokument eller et sidetræ.
  • Web-side rekonstruktion med CSS - Sådan genopbygges en webside med et CSS-layout.
  • Avancerede CSS-layout: Trin for trin - En trin-for-trin-tutorial til oprettelse af et avanceret 3-kolonnes layout.
  • Oprettelse af et CSS-layout fra skrammer - En komplet guide til opbygning af et CSS-baseret sted fra bunden af.
  • CSS Tutorial - En komplet tutorial fra W3Schools.
  • Stylesheets - En anden meget komplet CSS-tutorialkollektion.
  • Fantastiske afsnit med CSS - En tutorial til at oprette specialiserede afsnitformater.
  • Endnu flere afrundede hjørner med CSS - En teknik til at skabe afrundede hjørner, der understøtter PNG- og alfa-gennemsigtighed.
  • Uberlink CSS-listemenuer - En tutorial til at oprette en nav-bjælke, der opfører sig som en billedbyttemenu, men kun bruger to billeder og fremhæver den aktuelle side.
  • Sådan føjes variabler til dine CSS-filer - En guide til anvendelse af variabler til CSS ved hjælp af PHP og Apache's URL-omskrivning.
  • 15+ teknikker og værktøjer til krydsbrowser CSS-kodning - Denne artikel dækker mere end 15 tip til oprettelse af cross-browser kompatibel CSS-kode.
  • CSS-centrering - sjovt for alle! - En guide til CSS-centrering i layouts, herunder centrering af flydende layouts.
  • Absolut positionering inde i relativ positionering - En guide til placering af underordnede elementer absolut inden for et relativt placeret forælderelement.
  • Faux absolut positionering - En guide til en positioneringsmetode, der kombinerer de bedste attributter for både float og absolut positionering.
  • Lodret linie til navigationslister med flere linjer - En guide til justering af lister, der bruger den flydede boks-tilgang.
  • Top 10 CSS-knapper Tutorial List - En samling af ti af de bedste tutorials til oprettelse af CSS-knapper.
  • Hjørner med bjergtop - Oprettelse af afrundede hjørner med CSS.
  • CSS Rounded Corners Roundup - En samling af afrundede hjørneteknikker og tutorials.
  • CSS-tricks til brugerdefinerede kugler - En guide til oprettelse af tilpassede stilarter til kugler med CSS.
  • CSS Swag: Multi-Column Lists - En guide til oprettelse af semantisk-logisk, ordnet liste, der går gennem flere lodrette kolonner.
  • Forbedring af linkvisning til udskrivning - Viser, hvordan man inkluderer link-URL'er i udskrifter på dine sider efter linkets anker tekst.
  • Advanced CSS Menu Trick - En virkelig cool avanceret menu med en sløringseffekt bygget med CSS.
  • CSS-menuer - En tutorial til oprettelse af menuer fra indlejrede lister med CSS2 og ingen JavaScript.
  • CSS-faneblademenu med dropdowns - En tutorial til oprettelse af en fanebladdowndown-menu med CSS.
  • Avanceret CSS-menu - En tutorial til at oprette en rigtig god CSS-menu fra WebDesignerWall.
  • Animerede horisontale faner - En tutorial til at oprette vandrette menufaner, der animerer ved rollover.
  • CSS Grafisk menu med rollovers - En fantastisk tutorial til at oprette en CSS-menu med en rollover-effekt.
  • Hybride CSS-dropdowns - En tutorial om, hvordan man opretter CSS-dropdowns, der nedbrydes yndefuldt og er godt struktureret, blandt andet.
  • Begyndervejledning til CSS - En komplet guide til dem, der er nye til CSS.
  • Kom godt i gang med CSS: En praktisk øvelse - En meget grundlæggende guide til at komme i gang med CSS.
  • Sådan gør du: CSS Stor baggrund - En tutorial til at arbejde med store baggrunde med CSS.
  • Den stærkt udvidelige CSS-grænseflade - En komplet tutorial til at oprette meget tilpasselige og tilpasningsdygtige CSS-websteder.
  • Brug af CSS til at gøre noget: 50+ Kreative eksempler og tutorials - En samling af mere end 50 tutorials til at oprette unikke CSS-layouts.
  • Hurtig og nem CSS-udvikling med Firebug - En guide til at bruge Firebug til at forbedre dit webdesign.
  • 10 eksempler på smuk CSS-typografi og hvordan de gjorde det… - Tilbyder gode eksempler på CSS-typografi sammen med tutorials om, hvordan man opretter hver.
  • 16 Brugbare CSS-graf- og søjlediagrammer og -teknikker - En samling tutorials til oprettelse af CSS-baserede diagrammer og grafer til datavisualisering.
  • Bedre trækcitater: Gentag ikke markering - En guide til oprettelse af træknoteringer, der ikke inkluderer unødvendige, gentagne markeringer.
  • CSS Gradient Text Effect - En tutorial til at oprette tekstgradienter til dine overskrifter.
  • 43 PSD til XHTML, CSS-tutorials Oprettelse af weblayouts og navigation - En enorm liste over tutorials til at omdanne dine Photoshop-design til gyldige CSS / XHTML-filer.
  • CSS-billedkort - En tutorial til oprettelse af billedkort med CSS og XHTML.
  • Fluid Grids - En guide til oprettelse af væskegitterbaserede layouts.
  • Sådan debugges CSS - En tutorial om fejlfindingsteknikker til CSS.
  • 10 udfordrende, men fantastiske CSS-teknikker - en guide til nogle avancerede CSS-teknikker, der er værd at lære.
  • 50+ Nice Clean CSS-fanebaseret navigationsskripts - En fantastisk samling af fanebladet navigation ved hjælp af CSS.
  • 30 usædvanlige CSS-teknikker og eksempler - En fantastisk samling af virkelig cool CSS-effekter, herunder et hoverbox-billedgalleri, en klistret sidefod og en CSS-kun harmonikaffekt, blandt andre.
  • 101 CSS-teknikker gennem tidene Del 1 - Del 2 - En anden enorm samling af gode CSS-teknikker med tutorials til hver.
  • Dead Center - En kort tutorial om, hvordan man placerer noget i midten af ​​browservinduet (både lodret og vandret).
  • Liquid Layouts på den nemme måde - En komplet tutorial til at oprette flydende CSS-layouts.

Skabeloner og rammer

  • CSS-rutenettet på 1 Kb - Dette er sandsynligvis det enkleste og mest kompakte gitresystem derude, men inkluderer et værktøj til at tilpasse gitteret, inden det downloades.
  • CSS Zen Garden - CSS Zen Garden er en HTML og CSS ramme lavet til at vise de mange forskellige designs, der kan oprettes ved hjælp af CSS. Ud over rammen er der masser af skabeloner og temaer tilgængelige.
  • Perfekt CSS-flydende layout med flere søjler - En samling flydende layouts, der er kompatible med iPhone.
  • 960 Grid System - Et CSS-ridsystem baseret på et 960-pixel bredt grundlæggende layout.
  • Gratis CSS-skabeloner - Et websted, der tilbyder mere end 200 CSS-skabeloner frigivet under Creative Commons Attribution 2.5-licensen.
  • Hyggelige og gratis CSS-skabeloner - Et dusin skabeloner, der sætter dig i gang med CSS-baserede design, herunder en dynamisk centreret kasse, fire dynamiske kolonner og faste kasser i alt centreret design.
  • Lille bokse - En samling CSS-filer til forskellige layout.
  • Prototyping med Grid 960 CSS Framework - En guide til oprettelse af webstedsmockups ved hjælp af Grid 960.
  • Prototype af en side-skabelon med magasinet-stil med Blueprint CSS-rammeverket - En meget værdifuld guide til oprettelse af magasin- og ristetyplayouts med Blueprint.

Gallerier og showcases

  • CSS Stars - Et galleri, der tilbyder et par dusin CSS-baserede design til din gennemgang.
  • CSS Baseret - Et enormt CSS-galleri med tusinder af designs.
  • CSS Drive - Et kategoriseret CSS-galleri.
  • CSS Mania - Et CSS-galleri, der har eksisteret i fem år.
  • CSSelite.com - Et kategoriseret galleri med CSS-design.
  • CSS Creme - Et stort galleri med sider, der kan sorteres efter farve, kategori eller designer, der også indeholder tutorials og nyheder.
  • csswebsite - Et galleri, der lader dig filtrere efter kategori, dato eller farve.
  • 40 smukke mørke CSS-websteddesign - Et galleriindlæg, der byder på nogle gode mørke designs bygget med CSS.
  • Best of CSS Design 2008 - Et andet galleriindlæg, der viser de bedste CSS-design fra 2008.
  • CSS Beauty Gallery - Et CSS-galleri med poster anført kronologisk. Inkluderer design fra 2004 til nutiden.

Værktøj

  • Firebug - Et Firefox-plugin, der giver dig mulighed for at se og redigere CSS og anden kode lige i Firefox.
  • Aardvark - En Firefox-udvidelse, der giver dig mulighed for at se hvert HTML-element og klasse eller id.
  • CSSViewer 1.0.3 - En Firefox-udvidelse, der giver dig mulighed for at se CSS-egenskaber på enhver webside.
  • GridFox - En Firefox-udvidelse til hjælp til design af gitterlayout ved at overlægge et gitter på ethvert websted.
  • CodeBurner - Et plugin til Firefox eller Firebug, der gør HTML- og CSS-referencemateriale tilgængeligt i din browser.
  • IzzyMenu - En gratis CSS-menuopretter, der understøtter oprettelsen af ​​undermenuer fra DHTML-dropdown.
  • Spanky Corners - En afrundet hjørnekassegenerator.
  • CleanCSS - En CSS-formater og optimizer.
  • CSS Browser Selector - Et nyttigt værktøj til at styrke CSS-vælgere baseret på den besøgende browser.
  • CSS-kompressor - En CSS-filkompressor.
  • CSS Layout Generator - En enkel, online CSS-generator, der skaber en grundlæggende layoutramme.
  • CSSTidy - En open-source, downloadbar CSS-parser og optimizer.
  • CSS Drive CSS Compressor - Et CSS-komprimeringsværktøj, der har en grundlæggende og en avanceret tilstand, afhængigt af dine behov.
  • Tabifier - Tilføjer indrykk i dine kodefiler.
  • CSSFly - En browserbaseret CSS- og XHTML-editor, der fungerer i realtid.
  • List-O-Matic - Et værktøj til at oprette listebaserede navigationsmenuer med CSS.
  • Markup Maker - Opretter et gyldigt XHTML / HTML-rammedokument med de side-ID'er, du indtaster.
  • CSSMate - En online CSS-editor.
  • CSS Type Set - En CSS-typografegenerator.
  • Konstruer 0.5 - Et visuelt værktøj til at oprette layout baseret på Blueprint-rammerne.
  • PXtoEM.com - En pixel til EM størrelse konverter værktøj.
  • CSS-redaktører gennemgået - En samling af anmeldelser af nogle af de mere populære CSS-redaktører.
  • YAML Builder - Et visuelt værktøj til at oprette YAML-layouts.
  • Gridinator - En CSS-netudviklingsbygger.
  • Liste over CSS-værktøjer - En enorm liste over CSS-værktøjer til alt fra skrifttyper til optimizers.
  • 50 Ekstremt nyttige og kraftfulde CSS-værktøjer - En liste over nogle gode CSS-værktøjer sammen med lidt om hver.

CSS-specifikke blogs og nyhedswebsteder

  • CSS-Tricks - En blog, der er afsat til CSS fra Chris Coyier.
  • Ultimate CSS - Selvom den ikke er blevet opdateret i løbet af et par måneder, tilbyder denne blog stadig nogle gode arkiverede indlæg.
  • CSS Help Pile - En voksende samling af CSS-tutorials og ressourcer.

Hav en god dag!

Bradley Nice,
Content Manager hos ClickHelp.com - bedste online dokumentationsværktøj til SaaS-leverandører