Share
Vi har en ny og omfattende læringsveiledning som hjelper deg med å lære CSS online, enten du bare har begynt med det grunnleggende eller du vil utforske mer avansert CSS. Sjekk ut Lær CSS: The Complete Guide.
CSS fungerer hånd i hånd med HTML; HTML sorterer ut sidestrukturen, CSS gjør det ser pent ut og legger til subtile nivåer av interaksjon. Som webdesigner burde du virkelig få tak i begge språkene. Selv om du ikke gjør kodingen selv, vil forstå hvordan de fungerer, hjelpe deg med å designe for nettet.
C.S.S. står for Cascading Style Sheets; dokumenter som inneholder stylingsregler for å søke på HTML (eller XML, sammen med noen andre strukturelle formater). Flere stilregler kan peke på ett HTML-element, i så fall må det være en måte å bestemme hvilken regel som skal tre i kraft. Begrepet gripende beskriver prosessen med å filtrere ned fra generelle regler, til den mest spesifikke regelen oppstår. Den regelen blir da valgt for å gjøre sitt arbeid ...
Gjennom CSS kan presentasjonen skilles fra struktur. Det løser behovet for mashing styling regler i blant HTML, slik:
Presentasjon innenfor struktur. Æsj. som holder dokumenter nyere og tørrere.
CSS leses av nettlesere. De tar markupdokumentet, så bruker de stylingsreglene til elementene i dokumentet.
De tolker ikke alltid stilreglene på samme måte som hverandre, og som nettlesere utvikler seg så støtter de også nyere stilingsforslag. Det er ofte nettleserprodusentene selv som eksperimenterer med CSS-egenskaper, i håp om at deres forslag vil bli vedtatt av brukerne.
Til slutt er det ned til World Wide Web Consortium (W3C) om CSS-egenskapene er standardiserte eller ikke.
CSS syntaks består av noen få grunnleggende stykker; regler, selektorer, erklæringer, egenskaper og verdier.
Denne CSS-regelen inneholder alle de andre biter og bobs vi nettopp nevnte.
Selektorer peker på elementer i HTML-oppslaget, og deklarasjonene i de krøllete båndene definerer hvordan elementene skal styles. Det kan være flere erklæringer innenfor en enkelt regel; Hver erklæring omfatter en eiendom med tilhørende verdi.
Det er mange måter du kan velge HTML-elementer, fra rettferdig skriv velgere:
Dette vil velge alle bilder og bruke nullpolstring til dem alle. Da har vi klassevalgere, som peker på alle elementer med en bestemt klasse som er brukt på dem. Ta en titt på denne markeringen, med tilhørende CSS:
Her er et anker, hvorav det kan være mange ... 
... da vil dette velge alle ankre med en klasse med "høydepunkt" og gjøre dem oransje. Merk: I motsetning til hva du kanskje hører, er det ikke noe som a CSS klasse. Det er CSS selectors som mål HTML-klasser. Du kan lese mer om dette på tantek.com og 456 Berea St.
Det er mange mulige valgmuligheter å lære. Det er enda flere egenskaper å få tak i (ta en titt på denne listen på W3C-siden). Senere ser vi på oppdrag der du blir bedt om å lære mye av hver. Å ha så mange som mulig på fingeren tipsene vil gjøre deg til en bedre CSS koder!
Nå har du en grunnleggende forståelse av hva CSS er, det er på tide å dykke inn riktig. Det er en rekke nybegynnere kurs online som vil hjelpe deg med; her er bare et par som er definitivt verdt å sjekke ut:
Da Dave Shea lanserte CSS Zen Garden tilbake i mai 2003, hadde han som mål å demonstrere at et enkelt HTML-dokument kunne bli utformet på uendelige måter ved hjelp av forskjellige stilark. Det var et glimrende konsept og et ekte lyspære øyeblikk for designere over hele verden.
Hvorfor ikke gjøre noe som ligner deg selv? Ta et enkelt stykke markup (Chris Coyiers Unordered List Navigation er den perfekte kandidaten):
Se hvor mange forskjellige effekter du kan oppnå, bare ved å endre stilene.
Ta en titt på denne Webdesigntuts + Community Workshop hvor nesten 100 lesere sendte stilarkene sine til en enkel, uordnet liste. Som du ser fra resultatene, kan litt fantasi ta CSS langt!
Hvis folk kjenner CSS, tweet de om det - det er vitenskapsfakta. Vær oppmerksom på hva CSS kjendiser gjør, og du vil lære mye. Her er bare et par twitterers du bør følge:
... og ...
Hvorfor ikke finne dine egne helter på et sosialkodingssted som GitHub eller CodePen? Det beste med nettverk som disse er rådene alle gir hverandre; Hvis du har et CSS-problem, vil noen ha hatt det før deg og vil være villig til å låne ut en hånd.
CodePen Som nevnt tidligere, tolker nettleserne ikke alltid stilene dine like. Dette er spesielt sant hvis du serverer for eldre versjoner av Internet Explorer, som er langt bak tiden når det gjelder CSS-adopsjon. Moderne nettlesere (som Google Chrome, Mozilla Firefox, Apple Safari, Opera og til og med Internet Explorer 10) har mer proaktiv oppdateringsadministrasjon, slik at sannsynligheten for at eldre versjoner svinger rundt for lang tid reduseres.
Å si at det er forskjeller mellom hver av disse nettleserne, uansett hvor oppdatert de er. Noen CSS vil være godt støttet i en nettleser, tolket annerledes i en annen, så derfor er det godt råd til å være oppmerksom på nettlesere.
Her er noen nyttige ressurser som vil hjelpe deg på din måte:
Enten du leser dekselet for å dekke, eller bare ha dem til hånden hvis du trenger rask referanse, er de beste bransjebøkene uten sidestykke for å lære.
CSS har blitt skrevet om mange ganger, men disse publikasjonene er min krem av avlingen:
Når du får tillit, vil CSS vokabular vokse. Du vil begå CSS egenskaper til minne og også de ulike måtene å velge elementer på. Nå er det på tide å virkelig slå det opp i hakk og seriøst lære noen CSS-selgere.
Læring CSS-selektorer betyr også å ta tak i spesifisitet.
Stormtrooper Ikon av Jory Raphael Hvilke selektorer vil overstyre andre? Hva er den bare minimale syntaksen jeg bør bruke i mine selektorer for å være effektiv i min koding? Det eneste stedet jeg alltid sender folk til for å lære regler om spesifisitet er Andy Clarkes CSS: Specificity Wars. En inspirert visualisering av hvordan selektorer går når de plager seg mot hverandre (og de mørke styrkene).
CSS er en svært involvert disiplin. Når du har det grunnleggende under beltet ditt, er det mange veier for videre etterforskning. For eksempel:
CSS3 er konstant på farten. Nye egenskaper blir vedtatt, andre blir tapt helt av nettlesere, noen ganger endres syntaksen. Å få tak i CSS Gradients, vil være en annen spiker i kisten til Photoshop-bruk; hvorfor bruk snipped bilder når du kan CSS det?!
Se CSS3 Vennligst se all riktig CSS3-implementering, med anbefalte fallbacks for ikke-støttende nettlesere. Ta også en titt på CSS3 Essentials på Tuts + Premium for å gi din kunnskap et løft.
Responsive Web Design gjør at væske weboppsett kan endres, avhengig av hvordan siden blir tilgjengelig. CSS3-mediesøk hjelper denne prosessen, og leverer forskjellige CSS-regler, avhengig av omstendighetene. Ta en titt på Responsive Web Design: En visuell veiledning for å komme i gang.
Det viser seg at CSS kan bli bedre. Når du har begynt å bruke CSS for virkelige verdensprosjekter, vil du nok trekke den samme konklusjonen. Vedlikehold av store CSS-filer er vanskelig, repetisjon er vanlig - og hvorfor kan du ikke bruke en variabel til å lagre verdien av en HEX-farge i stedet for å skrive den om og om igjen ?! CSS preprosessorer som Sass, LESS og Stylus løser alle disse problemene og mer. Uten at du må "lære" et lignende språk (bare hold deg til vanilje CSS hvis du vil) kan du utnytte preprosessors kraft.
Sjekk ut Få til mindre, Mastering SASS og Sass vs. LESS vs Stylus: Preprocessor Shootout hvis du er interessert i å lære mer.
SMACSS (eller skalerbar og modulær arkitektur for CSS) er et konsept utviklet av Jonathan Snook, som tar sikte på å bekjempe den plagefulle vedlikeholden av CSS-filer. Den lærer ikke et nytt språk, men foreslår heller måter du kan gjøre din nåværende CSS mer organisert på.
Skrive modulær CSS gjør det mulig å ta biter av styling kode og spalte den i andre prosjekter, uten å ødelegge resten av stilene dine. Spesifikhetsstyring på sitt beste.
Det er ingen tvil om at med ferdigheter som HTML og CSS under beltet ditt, blir du en mye bedre webdesigner. Følg de to læringsprosessene vi har skissert, og du vil være godt på vei.
Hvis du har noen CSS læring anbefalinger, rop dem ut i kommentarene!
Accentsconagua