CSS Tilbage til grundlæggende Terminologier forklaret
CSS eller Cascading Stylesheets udfylder det definerende sprog for design regler for vores web. Kunstnere overalt bruger CSS hver dag til at oprette, organisere og kode regelsæt for grundlæggende website layouts. Dette er blevet det mest populære sprog til front-end design og giver fantastiske evner med den seneste udgivelse af CSS3. Men hvad betyder hele denne kode faktisk?
Sproget selv er fuldt udviklet i et par år nu. Forvirring kan skyldes for det meste på grund af fejlkommunikation og misbrug af lignende udtryk. CSS bringer mange nye koncepter til bordet. Vi vil dække nogle af de mest populære terminologier til at mestre som en CSS guru.
Hvorfor specialisere sig med CSS?
Dette spørgsmål er blevet stillet før, og selv ind i 2011 kan vi se de samme resultater, der dukker op. CSS er et robust sprog, der ikke kan lide at scribe eller programmere. Det er et stilsprog, mere specifikt kode, der bruges til at beskrive, hvordan en webside skal opføre sig.
Ved hjælp af CSS kan vi direkte manipulere attributter fra individuelle HTML-elementer. Alle blokke, afsnit, links og billeder kan påvirkes gennem CSS-regler. Raffinering af præsentationssemantik til internettet har altid været et stort skridt. Dette er hovedårsagen til, at CSS stadig er den førende spiller for designere - ingen har skabt noget bedre!
Egenskaber og værdier
Dette er den enkleste måde at bryde ind på CSS. Alt kode falder ned i to handlinger: Valg af et element til at anvende design og hvad man skal anvende. Sidstnævnte er oprettet gennem egenskab / værdi par.
Som et eksempel farve: rød; er en meget simpel ejendom / værdi par. Ejendommen vi brugte er farve som tillader os at videregive i enhver acceptabel værdi for at ændre tekstfarve. Dette kan også være hex-kode eller RGB-farve (rød-grøn-blå). Mange gange vil designere ikke nævne ideen om værdier, fordi det kan være vildledende.
Egenskaber og værdier er virkelig en enkelt ide. Hver ejendom erklæring kræver en værdi, og værdier på egen hånd er meningsløse. Der er meget dokumentation online, der går over de mange forskellige egenskaber og hvordan de påvirker HTML-elementer. Jeg vil anbefale at købe en CSS-referencebog fra enhver nærliggende boghandel. De er ret billige og holder de fleste oplysninger, du har brug for.
Vælgerværdier
Selektorer er nødvendige for at fuldføre en hel serie CSS-kode. Dette er, hvad vi erklærer for at angive, hvilken type element vi målretter mod. Der er mange selektorer, og mange er så indviklet, at den gennemsnitlige designer ikke behøver færdighederne. Tjek W3's vælgerdokumenter, hvis du vil vide mere.
Den enkleste måde at starte stildefinitioner på er at bruge barne elementer som ejendomsselektorer. Dette betyder at manipulere rodkode som f.eks p for afsnit, div for divisioner, og endda legeme og html kan bruges til at manipulere hele webside dokumentet. Nedenfor er et hurtigt eksempel på styling af alle stykkeelementer.
p font-family: Arial, sans-serif; farve: # 222; font-weight: bold;
Hvad der giver CSS rigtig vægt er, hvordan præcis vælger sniping kan være. Den bedste måde at opnå målrettede stilarter på er via 2 metoder kendt som klasser og id'er. Disse er almindelige ideer i HTML, hvor du kan indstille ethvert element til at have en ID og klasse værdi gennem attributter. Derefter bruger CSS det er nemt at anvende stilarter til den pågældende blok.
p # firstpar font-size: 14px; / * styles afsnit med ID for "firstpar" * / p.comment font-size: 1.0em; linjehøjde: 1,3em; / * stilarter afsnit (er) med klasse af "kommentar" * /
Længdeenheder og værdier
Ofte bliver disse vilkår blandet sammen, ikke en stor overraskelse. Værdier blev forklaret tidligere som placeringen vi bruger til at beskrive en ejendom. Længde enheder er også værdier, fordi de bruges til at beskrive en ejendom.
Forskellen er, at disse værdier kræver numeriske data og derfor skal returnere en eller anden form for enheder. Pixels (px) er de mest udbredte og kan bruges til de fleste ting: bredde / højde, skriftstørrelse, polstring / marginer for at nævne nogle få.
Bortset fra disse kan du se procentdele (%), der ofte bruges gennem væskeformater. Ved indstilling af breddeværdier til en procent vil compileren antage 100% at være hele bredden af webbrowseren. Dette giver en stor præcision til designere, når man bruger stilarter til layoutstrukturer og endda sidetypografi.
Erklæringsblokken
Nu efter at alle disse udtryk er sat sammen, kan vi endelig diskutere kerneidéen bag stilark. Blokke af kode bruges til at afgrænse emneområder og specificere elementdetaljer. F.eks. Er en kode nedenfor for en simpel navigationsbeholder:
div # nav display: block; bredde: 100%; polstring: 3px 6px; margin-bund: 20px;
Den nemmeste måde at vise denne kode på er at linieegenskaber efter hinanden. CSS udviklere har brugt blokke af kode til at bryde hver ejendom på sin egen linje. Denne dagsorden tager ikke kun meget mere plads, men reducerer evnen til “skimme” dit ark for at finde præcis, hvad du har brug for.
En bedre måde at bryde op blokke af kode er at adskille viklede elementer ind på deres egen, når de når en tærskel. Dette nummer er personligt og vil være forskelligt mellem udviklere. Det er tippestedet, hvor logikken dikterer det fjollet at holde alt på en enkelt linje, hovedsagelig på grund af læsbarhed.
Nedenfor har jeg skrevet et eksempel på en blok navigation egenskaber sammen. Denne praksis holder dybere elementer på samme sted, så ændringer til alle navigationselementer er meget enklere.
div # nav display: block; bredde: 100%; polstring: 3px 6px; margin-bund: 20px; div # nav ul listestil: none; display: blok; div # nav ul li float: left; margen-højre: 10px; skrifttypestørrelse: 12px; div # nav ul li a farve: # 0f0f0f; tekst dekoration: ingen; display: inline-block; polstring: 2px 5px;
Mulige fremskridt fra CSS2 / CSS3
I overskrifterne har for nylig været non-stop tale om de fantastiske fordele ved CSS3. Men hvad har det egentlig ændret på sproget? Det er klart, at den gamle kode stadig kører helt fint. Dette viser i det mindste fuldstændig baglæns kompatibilitet mellem kompilatorer (altid en god ting).
Større forskelle er hovedsagelig relateret til nye ejendomme. Disse giver mulighed for afrundede hjørner og drop-shadow effekter, der skal gøres i browser. CSS3 tilbyder også nye værktøjer til at beskrive farver in-document. HSL (Hue-Saturation-Lightness) er den nyeste ud over HSLA, som indeholder en Alpha-kanal for at reducere opacitet.
Attribut vælgerne er et stort fremskridt i forhold til straight markup styling. Med denne stil kode kan du målrette mod et bestemt elementnavn, der indeholder attributter med bestemte værdier. Disse er mest nyttige, når du arbejder med markup som XML, hvor der ikke er standard design principper til at manipulere knuder. Eksemplet nedenfor er en relativt simpel idé:
div [attrib ^ = "1"] / * styles her * /
Koden ovenfor er en del af CSS selectors biblioteket. Dette ville påvirke alle div-elementer med en attribut “attrib” som også holder værdien “1”. Hvis dette stadig er forvirrende, henvises til nedenstående eksempel for at afklare. I teorien skal disse to selektorer udføre de samme handlinger.
p [id ^ = "primære"] / * styles * / p # primære / * styles * /
Konklusion
Efter at have nedbrudt nogle af de mest forvirrede vilkår virker CSS som en tur i parken. Sproget er meget intuitivt, og begyndere kan begynde at designe inden for de første par timer på hånden. Dette gør CSS så populær blandt webudviklere.
Fordelene ved CSS3 er først lige begyndt at træde i kraft. I løbet af de nye år vil udviklingen i webtendenser vise os, hvor meget kontrol vi virkelig har over webdesign. CSS står i øjeblikket stolt som det dominerende sprog for front-end website styling. Øvelse i lige rudimentære færdigheder på mellemniveau kan producere rigelig design erfaring og yderligere viden.
