Share
Vi har en ny och omfattande lärarhandledning för att hjälpa dig att lära dig CSS online, oavsett om du bara har börjat med grunderna eller vill utforska mer avancerad CSS. Checka ut Lär CSS: Den kompletta guiden.
CSS fungerar hand i hand med HTML; HTML sorterar ut sidstrukturen, CSS gör den snygg och lägger till subtila interaktionsnivåer. Som webbdesigner borde du verkligen ta tag i båda dessa språk. Även om du inte kodar dig själv, förstår du hur de fungerar hjälper dig att designa för webben.
C.S.S. står för Cascading Style Sheets; dokument som innehåller styling regler för att applicera till HTML (eller XML, tillsammans med några andra strukturella format). Regler med flera stilar kan peka på ett HTML-element, i vilket fall det måste finnas ett sätt att bestämma vilken regel som ska träda i kraft. Termen cascading beskriver processen att filtrera ner från allmänna regler tills den mest specifika regeln uppträder. Den här regeln är då vald att göra sitt arbete ...
Genom CSS kan presentation skilja sig från struktur. Det löser behovet av mashing styling regler bland HTML, så här:
Presentation inom struktur. Ew. vilket håller dokument renare och torrare.
CSS läses av webbläsare. De tar markupdokumentet, sedan tillämpar de stylingreglerna på elementen i det dokumentet.
De tolkar inte alltid stilregler på samma sätt som varandra, och när webbläsare utvecklas så stödjer de också nya utformningsförslag. Det är ofta webbläsare som själva experimenterar med CSS-egenskaper, i hopp om att deras förslag kommer att antas av användarna.
I slutändan ligger det till World Wide Web Consortium (W3C) om CSS-egenskaper är standardiserade eller inte.
CSS-syntaxen innehåller några grundläggande delar; regler, väljare, deklarationer, egenskaper och värden.
Denna CSS-regel innehåller alla andra bitar och bobbar vi just nämnde.
Selektorer pekar på element i HTML-markupen, och deklarationerna inom de krökta hängslen definierar hur dessa element ska utformas. Det kan finnas flera deklarationer inom en enda regel. varje deklaration innefattar en egendom med ett tillhörande värde.
Det finns många sätt att välja HTML-element, helt enkelt typ valörer:
Detta kommer att markera alla bilder och applicera noll padding till dem alla. Då har vi klassväljare, som pekar på alla element med en specifik klass som tillämpas på dem. Ta en titt på denna markering, med motsvarande CSS:
Här är ett ankare, av vilket det kan vara många ... 
... då kommer detta att välja alla ankare med en klass av "markera" och göra dem orange. Notera: I motsats till vad du kanske hör, finns det ingen sådan sak som a CSS klass. Det finns CSS-väljare vilket mål HTML-klasser. Du kan läsa mer om detta på tantek.com och 456 Berea St.
Det finns många möjliga valörer att lära sig. Det finns ännu fler egenskaper att ta tag i (ta en titt på den här listan på W3C-webbplatsen). Senare tittar vi på uppdrag under vilka du blir ombedd att lära dig mycket av varje. Att ha så många som möjligt med fingertips gör dig till en bättre CSS-kodare!
Nu har du en grundläggande förståelse för vad CSS är, det är dags att dyka in ordentligt. Det finns ett antal nybörjarkurser online som hjälper dig med; här är bara ett par som definitivt är värda att kolla in:
När Dave Shea lanserade CSS Zen Garden tillbaka i maj 2003, syftade han till att visa att ett enda HTML-dokument kunde utformas på oändliga sätt med olika stylesheets. Det var ett briljant koncept och ett verkligt glödlampa för designers runt om i världen.
Varför inte något liknande dig själv? Ta en enkel uppdelning (Chris Coyiers oorderade lista Navigation är den perfekta kandidaten):
Se hur många olika effekter du kan uppnå, bara genom att ändra stilar.
Ta en titt på den här Webdesigntuts + Community Workshop där nästan 100 läsare skickade sina stylesheets för en enkel oorderad lista. Som du ser från resultaten kan en liten fantasi ta CSS långt!
Om folk känner till CSS, tweetar de om det - det är vetenskapsfaktum. Var uppmärksam på vad CSS kändisar gör och du lär dig mycket. Här är bara några tvillingar du borde följa:
... och ...
Varför inte hitta dina egna hjältar på en social kodningsplats som GitHub eller CodePen? Det bästa med nätverk som dessa är det råd som alla ger varandra. Om du har ett CSS-problem, kommer någon att ha haft det framför dig och kommer vara villig att låna ut en hand.
CodePen Som vi nämnde tidigare, tolkar webbläsare inte alltid dina stilar lika. Det här är särskilt sant om du hanterar äldre versioner av Internet Explorer, som ligger långt efter tiden när det gäller CSS-adoption. Moderna webbläsare (till exempel Google Chrome, Mozilla Firefox, Apple Safari, Opera och till och med Internet Explorer 10) har mer proaktiv uppdatering av hanteringen, så att sannolikheten för att äldre versioner flyttas för långvarigt minskar sannolikheten.
Säger att det finns skillnader mellan vart och ett av dessa webbläsare oavsett hur aktuellt de råkar vara. Vissa CSS kommer att stödjas väl i en webbläsare, tolkas annorlunda i en annan, så därför är det bra råd att uppmärksamma webbläsare.
Här är några användbara resurser som hjälper dig på din väg:
Oavsett om du läser dem omslaget för att täcka, eller helt enkelt få dem till hands om du behöver snabb referens, är de bästa branschböckerna oöverträffade för att lära dig.
CSS har skrivits om många gånger, men dessa publikationer är min grädde av grödan:
När du får förtroende kommer din CSS vokabulär att växa. Du kommer att begå CSS-egenskaper till minne och även de olika sätten att välja element. Nu är det dags att verkligen göra det snabbare och lära sig seriöst några CSS-väljare.
Lärande CSS-väljare betyder också att man tar sig till specificitet.
Stormtrooper Icon av Jory Raphael Vilka selektörer kommer att åsidosätta andra? Vad är den minsta minsta syntaxen jag borde använda i mina selektorer för att vara effektiv i min kodning? Det enda stället jag alltid skickar folk till för att lära sig specificitetsreglerna är Andy Clarkes CSS: Specificity Wars. En inspirerad visualisering av hur väljare väljer sig när de plågas mot varandra (och de mörka krafterna).
CSS är en mycket inblandad disciplin. När du har grunderna under ditt bälte finns det många möjligheter för vidare utredning. Till exempel:
CSS3 är ständigt på farten. Nya egenskaper antas, andra släpps helt av webbläsare, ibland ändras även syntaxen. Att ta tag i CSS Gradients kommer att vara en annan spik i kistan i din Photoshop-användning. varför använda klippade bilder när du kan CSS det?!
Se CSS3 Vänligen se alla korrekta CSS3-implementeringar, med rekommenderade fallbacks för icke-stödjande webbläsare. Titta också på CSS3 Essentials på Tuts + Premium för att ge din kunskap en boost.
Responsive Web Design gör det möjligt att ändra dina vätskeweblayouter, beroende på hur sidan ska nås. CSS3-mediefrågor hjälper till med denna process och levererar olika CSS-regler beroende på omständigheterna. Ta en titt på Responsive Web Design: En visuell guide för att komma igång.
Det visar sig att CSS kan vara bättre. När du väl har börjat använda CSS för verkliga världsprojekt kommer du troligen att dra samma slutsats. Det är svårt att behålla stora CSS-filer, repetition är vanligt - och varför kan du inte använda en variabel för att lagra värdet på en HEX-färg istället för att skriva det om och om igen ?! CSS preprocessorer som Sass, LESS och Stylus löser alla dessa problem med mera. Utan att ens behöva "lära om" ett liknande språk (håll bara vid vanilj CSS om du vill) kan du utnyttja kraften hos förprocessorer.
Kolla in Få mindre, Mastering SASS och Sass vs. LESS vs Stylus: Preprocessor Shootout om du är intresserad av att lära dig mer.
SMACSS (eller skalbar och modulär arkitektur för CSS) är ett koncept som utvecklats av Jonathan Snook, som syftar till att bekämpa den obekväma underhållen av CSS-filer. Det lär inte ut ett nytt språk, men föreslår snarare sätt på vilka du kan göra din nuvarande CSS mer organiserad.
Skrivande modulär CSS gör att du kan ta bitar av styling-kod och spela in det i andra projekt utan att förstöra resten av dina stilar. Specifikitetshantering vid sitt bästa.
Det är ingen tvekan om att med kompetenser som HTML och CSS under ditt bälte, blir du en mycket bättre webbdesigner. Följ de två inlärningsprocesserna vi har skisserat och du kommer att vara bra på väg.
Om du har några CSS-läsrekommendationer, ropa ut dem i kommentarerna!
Accentsconagua