Vad är skillnaden mellan en fastighet och en väljare? Hur är en deklaration annorlunda än ett deklarationsblock och vad är en CSS-regel? Hur säger jag skillnaden mellan en pseudoklass och ett pseudoelement?
Denna serie kommer att fungera som en grundläggande introduktion till vissa termer som varje ny webbdesigner skulle vara säker på att lägga till i sitt ordförråd. Det kommer inte att vara en uttömmande ordförrådslista utan snarare en primer på några villkor som jag hade svårt att sätta på huvudet när jag var nybörjare. Vi började med HTML tidigare i veckan och idag går vi vidare till några strukturella komponenter i CSS.
CSS
Cascading Style Sheets (CSS) ger stil och formatering till det generellt råa innehållet som serveras via HTML. Precis som vi gjorde med HTML i vår tidigare artikel kan vi skära den här terminologin för att härleda viss mening.
Låt oss börja i slutet. CSS är en stilarksspråk i motsats till a markup språk som HTML eller a skriptspråk gillar JavaScript. Som vi just sagt ovan används stilarkspråk framförallt för att formatera dokument. CSS är isingen på HTML-kakan, vilket innebär att substansen verkligen är i HTML men det skulle se väldigt vanligt utan hjälp av CSS.
Den mer komplicerade delen av denna definition är "cascading" del. Hur stilarken fungerar är att en viss regel som är inställd på en plats faktiskt kan? Kaskad? ner och påverka andra delar av ett dokument, oavsett om du avser det eller inte.
Kaskaden har faktiskt en hel uppsättning regler som den följer med att bestämma hur stilar tillämpas i hela dokumentet. För att läsa mer om detta, kolla Nicolas Gallaghers senaste artikel, CSS: kaskad, specificitet och arv. Detta är en kortfattad men utmärkt förklarad diskussion om hur kaskaden skiljer sig från andra begrepp som specificitet och arv.
CSS3
CSS3 är den tredje stora iterationen av CSS. I CSS2 var det en stor spec men med CSS3 har allt uppdelats i bitar som heter moduler. Några exempel moduler inkluderar följande: CSS Color, Media Queries, CSS Animationer, Flexibel Box Layout, etc. Kontrollera här för en komplett lista.
Varje modul arbetar som en enhet och har en status som i stor utsträckning är oberoende av de övriga modulerna. Till exempel har Selectors Level 3-modulen nått? Rekommendation? status, vilket innebär att den är redo att implementera, medan CSS Flexible Box Layout fortfarande är ett "fungerande utkast" som revideras.
Det intressanta med denna modularitet är att utvecklare helt enkelt inte kan vänta med att leka med alla dessa godsaker. Så även om en viss modul kan ha väldigt lite webbläsarstöd och är ett mycket experimentellt utkast, används det sannolikt fortfarande i levande webbplatser över hela webben. Var alltid försiktig när du använder några nya CSS3-funktioner och var noga med att kontrollera webbläsarkompatibiliteten.
CSS Anatomi
Ett av de grundläggande begreppen som du behöver förstå när du arbetar med CSS är hur de enskilda delarna brukar hänvisas till. Att ta sig tid att behärska detta språk kommer dramatiskt att hjälpa dig att förstå handledning, böcker och andra källor som du lär dig från CSS. Då när du läser eller hör ordet? Egendom? du vet omedelbart vad som diskuteras.
För att börja, här är ett grundläggande diagram över en rad CSS. Som du kan se finns det tre enskilda bitar här: en väljare, en egenskap och ett värde.
Väljare
Den första delen av pusslet ovan är känd som en väljare. Det här är ganska mycket exakt vad det låter som: ett sätt att Välj eller mål något för styling. CSS använder enkla mönster som hänvisar till delar av DOM (som vi lärde oss om i del ett) och tillämpar sedan stilar på det specifika urvalet. Koden ovan, till exempel, riktar sig till alla styckelementen och sätter deras färgvärde till svart.
Vissa selektörer, som ovanstående, är otroligt enkla medan andra är väldigt komplexa. Senare diskuterar vi några av de mer komplicerade terminologierna kring väljare.
Fast egendom
Egenskapen är aspekten av den sak som riktas mot dig som du vill ändra. Varje HTML-element är ett komplicerat objekt som kan kopplas till en serie egenskaper. Exempelvis riktar exemplet ovan några styckeelement, som innehåller standardinställningar för teckensnittstorlek, teckensnittsfamilj, färg, linjehöjd och mycket mer, som var och en kan överskridas via CSS.
Vissa egenskaper hänför sig till mindre estetiska val, men andra kan ha en drastisk effekt på layouten i ditt dokument. För att göra sakerna ännu mer komplicerade, tilldelar olika webbläsare ofta olika standardvärden till olika egenskaper. Projekt som Normalize.css sparar dig massor av arbete genom att försöka ta reda på och eliminera dessa skillnader.
Värde
När du har riktat in något som ska ändras och väljer den del av objektet som ska ändras, är det dags att faktiskt ändra någonting! Värdesdelen gör att du kan ställa in egenskapen till något nytt. Till exempel kan webbläsarens standard faktiskt redan ställa in dina stycken till svart men du tror att en mörkgrå är bättre, så det värde du anger för färg kan vara # 4b4b4b.
Termen? Värde? är lite förvirrande eftersom du förmodligen omedelbart associerar den med något numeriskt. Faktum är att många CSS-värden är numeriska. Värden kan uttryckas i pixlar (fontstorlek: 10px), procentandelar (bredd: 33.33%), ems (linjehöjd: 1em) etc. men de kan också uttryckas på andra sätt. Tänk på följande exempel:
Som du kan se är detta en stor bit av CSS med många värden, men det finns inte ett enda nummer i sikte! Tänk bara på att termen? Värde? är ganska generisk här och kan referera till ett antal olika typer av inmatningar.
Deklaration vs Förklaring Block vs Regel
Dessa är termer som ständigt snubblar mig och för att vara ärlig hade jag inte utforskat det så mycket förrän jag skrev den här artikeln. Deklarationer, deklarationsblock och regler är så lika att det är lätt att få dina etiketter blandade och använda fel terminologi.
I slutändan är det inte det värre i världen om du säger det fel, men än en gång om du läser eller tittar på en handledning hjälper det dig att veta specifikt vad läraren diskuterar. Här är ett snabbt diagram som förhoppningsvis gör det omedelbart klart vad varje term refererar till:
Som ni kan se har vi ett tydligt fall av hierarki här. Låt oss börja små och arbeta uppåt. en deklaration består av en egenskap och ett värde (färg: röd). en deklarationsblocket är en eller flera deklarationer som finns i krökningsfästen och separeras av semikolon: {färg: röd; bredd: 20px;}. Slutligen kasta en väljare i denna mix och du har själv en regel.
Typer av väljare
Du borde nu ha en bra bild av vad väljare är, men visste du att det finns många olika typer av väljare? Här är några som du borde veta om.
Typ Selectors
Dessa är den mest grundläggande typen av väljare. Enligt selektorns nivå 3-modul representerar en typväljare? En förekomst av elementstypen i dokumentträdet.? Exempel på typmarkörer inkluderar de som helt enkelt riktar sig mot en viss typ av HTML-element:
Class Selectors vs ID Selectors
Bortsett från typväljare, är två av de vanligaste typerna av väljare som du ser i CSS klassväljare och ID-väljare. Som vi lärde oss förra gången är den viktigaste skillnaden mellan klasser och ID-nummer det faktum att klasserna är återanvändbara och ID-er är unika.
Du kan rikta in en given klass från din HTML med en klassväljare, som alltid föregås av en period. På samma sätt kan du rikta något ID från din HTML med en ID-väljare, som alltid föregås av en hash-symbol.
Attributväljare
Klasser och ID är egentligen HTML-attribut som är vanliga nog för att förtjäna specialselektorer, men det finns också många andra attribut. Tänk på följande avsnitt:
Här har vi ett par ankareelement som innehåller href attribut. Du vet säkert att du kan använda CSS för att rikta alla ankarkoder på en gång, men visste du att du specifikt kunde rikta ett specifikt href-värde?
Här använde vi en attributväljare att endast rikta href med värdet av 'https://designshack.net/' och ändra färg till vit. Detta ignorerar helt det andra ankret i vårt exempel. Attributväljare ger upphov till några av de mest komplicerade CSS-väljare som du någonsin kommer att se.
Lyckligtvis har vi en bra artikel som lär dig allt om attributväljare och hur man tolkar galen väljare som den ovanstående.
Descendant, Barn och syskon Selectors
Det finns några selektörer som börjar låta som om de är från ett släktträd (vilket knyter samman med vår DOM-diskussion från förra gången). Till exempel, här är descendent combinator:
Detta kommer att rikta sig till några stycken som är efterkommande av rubrikelement. Observera att ättlingar är inte samma som barn. Precis som med din familj är alla objektets barn avkomlingar, men inte alla dess efterkommande är barnen. Väljaren över mål Allt av punkterna här:
Låt oss säga att vi ville bara rikta barnen till rubrikelementet. För att göra detta skulle vi använda barnkombinator. Detta kommer endast att riktas mot de två första styckena i HTML-koden ovan.
Det finns också syskonkombinationer (allmänt och intilliggande). Du hittar dessa och mer i vår artikel, CSS Selectors: Just the Tricky Bits. Så här ser de ut:
Den första väljaren riktar sig till ett stycke som omedelbart föregås av ett h1-element (intilliggande syskon) medan den andra väljaren riktar sig till ett stycke som föregås av en h1, oavsett om det var föregående element (generellt syskon) eller ej.
Pseudoklasser mot pseudoelement
Ett annat särskilt område av väljare är ämnet pseudoklasser och pseudoelement. För att göra denna diskussion tydligare, här är en grafik som jag skapade för The Lowdown på: Före och: Efter i CSS.
Här kan vi se några pseudoklasser som är bekanta som sväva tillsammans med några som lite mer sällsynta som förstfödde. Men hur är dessa olika som pseudoelementen som :innan och :Första linjen?
Svaret är ganska enkelt. Kom bara ihåg att pseudoklasserna är riktade komplettera element eller elementstatus medan pseudoelementen är inriktade deldelar av ett element. Till exempel, sväva pseudoklassen kan appliceras på ett helt ankare, stycke, div etc. Däremot, :Första linjen riktar sig inte mot ett helt stycke men bara en del av det.
Vilka CSS-villkor stör du med?
Jag tänkte att den här artikeln skulle vara lite mer omfattande men jag blev så invecklad i CSS grundstruktur att jag var tvungen att stanna där. Jag kommer troligen att gå vidare och skriva en tredjedel av denna serie som täcker några andra vanliga CSS-jargong som inte diskuterades här.
För att hjälpa till att bränna nästa artikel, lämna en kommentar nedan och berätta vilka CSS-begrepp och villkor du kämpar med. Vilka fraser hör du att användas omväxlande även om de inte nödvändigtvis betyder samma sak?