Detta är den tredje artikeln i vår back till basics-serien där vi tittar på de absoluta början av webbutvecklingsbegreppen. Om du är en designer med liten eller ingen kunskap om webbprogrammering, är den här serien för dig.
I vår första artikel gick vi över vilken HTML som är och i vår andra artikel skisserade vi grundanatomin för ett HTML-dokument. Idag hoppar vi till ett nytt ämne och svarar på en mycket viktig fråga: Vad är CSS?
Vad är CSS?
Innan vi svarar direkt på den här frågan, låt oss tänka tillbaka till svaret på del ett fråga: Vad är HTML? Som vi lärde oss, från en konceptuell synpunkt kan HTML sägas att det huvudsakligen utgörs av innehåll och struktur av en webbsida. Vi använde metaforen av ett skelett och diskuterade hur HTML utgör de grundläggande byggstenarna på World Wide Web som vi känner till.
Om det finns en paragraf på en webbsida, kommer den från HTML. Om det finns en rubrik och ett bildgalleri, återigen är dessa element sannolikt införda som utdrag av HTML-kod (uppenbara undantag för Flash och liknande).
Med detta i åtanke blir Cascading Styles Sheets, vanligare kallad CSS, vägen till stil det innehållet. Färgval, upprepande bakgrundsstrukturer, skuggor, rundade hörn och jämn layout är alla områden i CSS. Som designer är detta det område du troligen kommer att trivas i och njuta av mest.
För att få en kristallklar bild av hur viktigt CSS är för webbdesign, låt oss ta en titt på en webbsida med och utan ett stilark.
Före och efter CSS
Med tanke på att CSS förvandlas till helt enkelt? Styling? En webbsida, du kanske är frestad att tro att det bara är isbildning på den proverbiella kakan, vilket innebär att det bara ger små estetiska justeringar. Emellertid är effekten som CSS har på en webbsida enorm.
För att illustrera denna idé är här en skärmdump av Design Shack-hemsidan med det primära formatarket inaktiverat:
Innan CSS
Denna grundläggande struktur kan utformas i ett oändligt antal variationer, som alla ser så dramatiskt ut som att du trots att ha samma exakta HTML, inte ens skulle känna igen dem som samma sida!
Med införandet av ett enda stilark blir Design Shacks hemsida till detta:
Efter CSS
Kan jag få en? Helig skit? Du kommer märka att dessa inte är enkla färgändringar. Det inflytande som CSS har över användarupplevelsen är dramatiskt. Hela layouten har rekonstruerats i ett tre kolumnformat, bakgrundsstruktur har applicerats och typografi har förbättrats drastiskt.
Hur fungerar det?
Så hur utför CSS all den magiska? Vilken galen feat av kodning måste du lära dig att berätta för webbläsaren att göra en sådan dramatisk omvandling? Den goda nyheten är, CSS är mycket lättare än du kanske tror. Det är ganska låg nivå saker jämfört med den typ av hardcore kodning du måste göra på språk som PHP. Det är också oerhört roligt när du hänger på det.
Det handlar om Selectors
I del en av denna serie lärde vi oss om hur HTML byggs främst på taggar. Bara om varje HTML-kod består av HTML element inslagna med en uppsättning taggar som ungefär överensstämmer med denna syntax:
Med CSS är syntaxen helt annorlunda och ändå nära relaterad. Vi kan verkligen borra ner och rikta varje litet stycke av vår HTML och utforma det på egen hand. Vi utför denna uppgift med CSS-väljare.
En väljare är exakt vad det låter som: det låter dig välja något för manipulation, i vårt fall en viss del av HTML. Många CSS-väljare svarar direkt till taggen de riktar in. Så, till exempel, om vi ville stila innehållet mellan h1 och punktkoderna ovan, skulle vi använda följande.
Som du kan se, väljaren för? H1? taggen är helt enkelt? h1 ?. Väljaren följs sedan av en uppsättning krullningsfästen, som kommer att innehålla hela uppsättningen kod relaterad till den väljaren.
Koden inuti de krökta parenteserna är uppdelad i egenskaper, som definierar exakt vad det är att du ändrar om den riktade delen av HTML. Precis som i Photoshop har varje del av designen flera egenskaper som kan ändras. En given textruta har ett teckensnitt, en teckensnittstorlek, en färg, en linjehöjd, etc. Var och en av dessa bör ställas in manuellt istället för att endast förlita sig på standardvärden, vilka är inkonsekventa bland webbläsare.
Här är en syn på denna syntax i aktion. Vi har en väljare, följt av lockiga fästen, som innehåller en egenskap och dess värde följt av en semikolon (valfri på den sista egenskapen i en lista).
Denna kod är mycket mänsklig läsbar och kommer helt enkelt att ställa in storleken på all h1-text på sidan till 25 pixlar. Terminologin här är väldigt viktig så här är ett annat utseende för dig visuellt sinnena.
Använda flera egenskaper
Exemplet ovan är ganska förenklat. Som jag nämnde har varje väljare vanligtvis flera egenskaper som fastställs av utvecklaren. Olika kodare organiserar sin kod på olika sätt, men här är hur ett block av CSS är typiskt strukturerad.
Här ställer vi in teckensnittet, dess storlek och dess färg. The-font-familjen? använder backupfonter om huvudfonten inte är närvarande på slutanvändarens maskin.
Mer än etiketter
Valet exempel ovan är enkla HTML-taggar, men CSS levereras med mycket mer komplicerade selektorer som kan rikta alla typer av HTML.Du kan till och med kombinera eller? Kedja? olika selektörer tillsammans.
Låt oss säga att du hade två stycken inuti två olika divs i din HTML:
Nu, om jag bara riktade in stycke-taggen i min CSS, skulle båda dessa stycken påverkas. Men låt oss säga att jag vill att dom ska se annorlunda ut, hur skulle jag göra det?
Här är ett sätt, se om du kan ta reda på vad som händer:
Som du kan se ställer vi varje stycke till en annan färg genom att kombinera väljare. Vi riktade oss på? P? i båda fallen men i den första chunken riktade jag på? mainSection? id och i det andra riktade jag på? secondarySection? klass. Skillnaden är att klasser är återanvändbara och kan tillämpas på flera objekt i HTML medan id är unika. Så när vi stämmer med vår "secondarySection"? klass, kan vi enkelt tillämpa dessa stilar på andra divs bara genom att släppa på den klassen i HTML.
I CSS vill du alltid vara så effektiv som möjligt, så gör allt du kan med så lite kod som möjligt. Klasser är en stor tids- och rymdbesparare.
För mer om CSS-valörer, kolla in vår artikel CSS Selectors: Just the Tricky Bits.
Cascading?
Nu har vi en rudimentär förståelse för? Stylesheets? och hur de? stil? HTML, så vart gör? cascading? del kommer in?
Detta återkommer återigen till begreppet effektivitet. När du ställer in en generisk stil, det? Kaskader ner? till andra element. Den här koden gör till exempel varje enskild ankerkod på sidan röd:
Specificitet spelar en hel del men så om vi lägger till lite ändras allt:
Nu är varje länk på sidan färgad röd, bortsett från de med avsnittet? id, som blir blå. Den mer specifika väljaren överrullerade den allmänna väljaren.
För en kort översikt över hur du bestämmer vilka regler som kommer att åsidosätta andra, kolla in Komma igång med CSS.
Hur fungerar webbdesign?
Nu när vi har gått igenom vad HTML och CSS är, borde du kunna se hur de arbetar tillsammans för att skapa färdiga webbsidor. Låt oss gå igenom ett snabbt exempel på en designprocess som någon kan gå igenom.
Photoshop Mockup
För det första, någon sprickor öppnar Photoshop och utformar i grunden webbplatsen. Vad det kommer att se ut, vilka färger kommer att användas, där bilderna kommer att placeras, de olika kolumnerna av innehåll: allt.
Observera att detta steg är helt frivilligt. Det finns en ganska stor trend för dessa dagar mot utforma i webbläsaren och hoppar helt och hållet om Photoshop eller Fireworks.
html
Därefter kommer webbutvecklaren, som kanske eller kanske inte är den samma personen, att titta på mockupen och välja ut delar som kan gå in i HTML-filen, t.ex. stycken, bilder etc. De grundläggande visuella grupperna i designen speglas i HTML med divs eller andra strukturella element.
CSS
Innehållet i ren HTML kommer inte att vara av all stil, så nästa utvecklare tittar på layouten, teckensnitt, färger etc. som användes i Photoshop-mockupen och översätter dessa egenskaper till CSS. Som utvecklare koder han / hon tittar på förhandsgranskningen för att se hur koden påverkar innehållet tills allt är precis rätt.
Slutsats
Efter att ha läst de tre artiklarna i denna serie borde du ha en gedigen uppfattning om vad HTML och CSS är och hur de arbetar tillsammans för att skapa webbsidor.
Det var inte på något sätt ett uttömmande utseende i någon av dessa syntaxer, och det var inte meningen att du verkligen skulle komma igång med din egen kod. Istället fyller den den konceptuella kunskapsklyftan som är relaterad till hur mycket dessa språk är och hur de används. Huruvida du någonsin vill vara en webbutvecklareAtt ha denna kunskap kommer att göra dig bättre webbdesigner.