CSS Tillbaka till grunderna Terminologier förklarade
CSS eller Cascading Stylesheets fyller det definierande språket för designregler för vår web. Konstnärer överallt använder CSS varje dag för att skapa, organisera och koda regelsatser för grundläggande webbsidor. Detta har blivit det mest populära språket för front-end-design och ger fantastiska förmågor med den senaste versionen av CSS3. Men vad betyder all denna kod egentligen?
Språket självt har utvecklats helt under några år. Förvirring kan uppstå för det mesta på grund av felkommunikation och missbruk av liknande termer. CSS ger många nya koncept till bordet. Vi kommer att täcka några av de mest populära terminologierna att behärska som en CSS-guru.
Varför specialisera med CSS?
Denna fråga har ställts fram förut och till och med in 2011 kan vi se samma resultat som dyker upp. CSS är ett robust språk som inte gillar att skripta eller programmera. Det är ett stil språk, mer specifikt kod som används för att beskriva hur en webbsida ska verka.
Med CSS kan vi direkt manipulera attribut från enskilda HTML-element. Alla block, stycken, länkar och bilder kan påverkas genom CSS-regler. Raffinering av presentationssemantik för webben har alltid varit ett stort steg. Detta är den främsta anledningen till att CSS fortfarande är den ledande aktören för designers - ingen har skapat något bättre!
Egenskaper och värden
Detta är det enklaste sättet att bryta sig in i CSS. All kod faller ner i två handlingar: välja ett element att tillämpa mönster och vad man ska tillämpa. Det senare skapas genom egenskaps- / värdepar.
Som ett exempel färgen röd; är en mycket enkel egenskap / värde par. Den egendom vi använde är Färg vilket tillåter oss att övergå i alla godtagbara värde för att ändra textfärg. Detta kan också vara hex-kod eller RGB-färg (röd-grönblå). Många gånger kommer designers inte att nämna tanken om värderingar eftersom det kan vara vilseledande.
Egenskaper och värderingar är verkligen en enda idé. Varje fastighetsdeklaration kräver ett värde, och värdena är inte meningslösa. Det finns mycket dokumentation på nätet som går över de många olika egenskaperna och hur de påverkar HTML-element. Jag skulle rekommendera att köpa en CSS-referensbok från en närliggande bokhandel. De är ganska billiga och håller mest all information du behöver.
Valvärden
Selectors behövs för att slutföra en hel rad CSS-kod. Det här är vad vi förklarar för att ange vilken typ av element vi riktar in. Det finns många selektörer och många är så invecklade att den genomsnittliga formgivaren inte skulle behöva kompetensen. Kolla W3: s väljardoktor om du vill veta mer.
Det enklaste sättet att börja stildefinitioner är att använda nakna element som egenskapsväljare. Detta innebär att man manipulerar rotkod, t.ex. p för stycken, div för divisioner, och även kropp och html kan användas för att manipulera hela webbsidedokumentet. Nedan är ett snabbt exempel på styling av alla styckeelement.
p font-family: Arial, sans-serif; färg: # 222; font-weight: bold;
Vad som ger CSS verklig vikt är hur exakt väljaren sniping kan vara. Det bästa sättet att åstadkomma riktade stilar är genom 2 metoder som kallas klasser och ID. Dessa är vanliga idéer i HTML där du kan ange vilket element som helst för att ha ett ID och klassvärde genom attribut. Då använder CSS det är enkelt att tillämpa stilar på det specifika blocket.
p # firstpar font-size: 14px; / * stilar stycke med ID för "firstpar" * / p.comment font-size: 1.0em; linjehöjd: 1,3em; / * stilar stycke (er) med klass av "kommentar" * /
Längdenheter och värden
Ofta blir dessa termer blandade, inte en stor överraskning. Värden förklarades tidigare som den placering vi använder för att beskriva en fastighet. Längd enheter är också värden eftersom de används för att beskriva en fastighet.
Skillnaden är att dessa värden kräver numeriska data och måste därför returnera någon form av enheter. Pixlar (px) är de vanligaste och kan användas för de flesta allt: bredd / höjd, teckenstorlek, vaddering / marginaler, för att nämna några.
Annat än dessa kan du se procentandelar (%) som ofta används genom vätskeformat. När du ställer in breddvärden till en procent kommer kompilatorn att anta 100% för att vara hela bredden av webbläsaren. Detta ger mycket precision till designers när man applicerar stilar till layoutstrukturer och jämn sidtypografi.
Deklarationsblocket
Nu efter att ha satt alla dessa villkor tillsammans kan vi äntligen diskutera kärnidén bakom stylesheets. Block av kod används för att avgränsa ämnesområden och specificera elementdetaljering. Till exempel nedan är en kodkod för en enkel navigationsbehållare:
div # nav display: block; bredd: 100%; vaddering: 3px 6px; marginal-botten: 20px;
Det enklaste sättet att visa den här koden är att linjegenskaper efter varandra. CSS-utvecklare har använt blockblock för att bryta varje egendom på sin egen linje. Denna agenda tar inte bara mycket mer utrymme men minskar möjligheten att “skumma” ditt ark för att hitta exakt vad du behöver.
Ett bättre sätt att bryta upp kvarter av kod är att skilja inhopade element in på sig själv när de når ett tröskelvärde. Detta nummer är personligt och kommer att vara annorlunda mellan utvecklare. Det är tipppunkten där logiken dikterar det dumt att hålla allt på en enda rad, främst på grund av läsbarhet.
Nedan har jag skrivit ett exempel på ett block av navigationsegenskaper. Denna övning håller djupare element på samma plats, så ändringar till alla navigeringselement är mycket enklare.
div # nav display: block; bredd: 100%; vaddering: 3px 6px; marginal-botten: 20px; div # nav ul list-style: none; display: block; div # nav ul li float: left; marginal-höger: 10px; fontstorlek: 12px; div # nav ul li a color: # 0f0f0f; text-dekoration: ingen; display: inline-block; vaddering: 2px 5px;
Möjliga framsteg från CSS2 / CSS3
I rubrikerna har det nyligen hunnit prata om de fantastiska fördelarna med CSS3. Men vad har egentligen ändrats på språket? Tydligen gamla koden går fortfarande bra. Detta visar åtminstone fullständig bakåtkompatibilitet mellan kompilatorer (alltid bra).
Stora skillnader är mest relaterade till nya fastigheter. Dessa möjliggör avrundade hörn och drop-shadow-effekter som ska göras i webbläsaren. CSS3 erbjuder också nya verktyg för att beskriva färger i dokument. HSL (Hue-Saturation-Lightness) är den nyaste förutom HSLA som innehåller en Alpha-kanal för att minska opacitet.
Attributväljare är ett stort steg framåt när det gäller rak markup styling. Med denna typ av kod kan du rikta in ett specifikt elementnamn som innehåller attribut med vissa värden. Dessa är mest användbara när man arbetar med markup som XML där det inte finns standarddesignprinciper för att manipulera noder. Exemplet nedan är en relativt enkel idé:
div [attrib ^ = "1"] / * stilar här * /
Koden ovan är en del av CSS Selectors biblioteket. Detta skulle påverka alla div-element med ett attribut “attrib” som också håller värdet “1”. Om det fortfarande är förvirrande, hänvisa exemplet nedan för att klargöra. I teorin bör dessa två väljare utföra samma åtgärder.
p [id ^ = "primary"] / * styles * / p # primära / * stilar * /
Slutsats
Efter att ha brytat några av de mest förvirrade termerna ser CSS ut som en promenad i parken. Språket är väldigt intuitivt och nybörjare kan börja designa inom de första timmarna. Det här gör CSS så populär bland webbutvecklare.
Fördelarna med CSS3 har bara börjat börja träda i kraft. Under de senaste åren kommer utvecklingen av webbtrender att visa oss hur mycket kontroll vi verkligen har över webbdesign. CSS står för närvarande stolt som det dominerande språket för front-end webbplats styling. Att öva på en jämn rudimentär kompetens på mellannivå kan producera riklig designupplevelse och ytterligare kunskaper.
