CSS Tilbake til grunnleggende terminologier forklart
CSS eller Cascading Stylesheets fullfører det definerende språket av designregler for webområdet vårt. Kunstnere overalt bruker CSS daglig, for å lage, organisere og kode reglene for grunnleggende websidelayouter. Dette har blitt det mest populære språket for front-end design og gir fantastiske evner med den siste utgivelsen av CSS3. Men hva betyr all denne koden egentlig?
Språket i seg selv har blitt fullt utviklet i noen år nå. Forvirring kan oppstå for det meste på grunn av feilkommunikasjon og misbruk av lignende vilkår. CSS bringer mange nye konsepter til bordet. Vi vil dekke noen av de mest populære terminologiene for å mestre som en CSS-guru.
Hvorfor Spesialisere seg med CSS?
Dette spørsmålet har blitt utgitt før, og selv inn i 2011 kan vi se de samme resultatene dukker opp. CSS er et robust språk ikke i det som å skanne eller programmere. Det er et stilsspråk, mer spesifikt kode som brukes til å beskrive hvordan en nettside skal oppføre seg.
Ved hjelp av CSS kan vi direkte manipulere attributter fra enkelte HTML-elementer. Alle blokkene, avsnittene, koblingene og bildene kan påvirkes gjennom CSS-regler. Raffinering av presentasjonssemantikk på nettet har alltid vært et stort skritt. Dette er hovedgrunnen til at CSS fortsatt er den ledende aktøren for designere - ingen har skapt noe bedre!
Egenskaper og verdier
Dette er den enkleste måten å bryte inn på CSS. All kode faller ned i to handlinger: velge et element for å bruke design og hva du skal bruke. Sistnevnte er opprettet gjennom eiendoms- / verdipar.
Som et eksempel fargen rød; er en veldig enkel egenskap / verdi par. Eiendommen vi brukte er farge som tillater oss å passere i noen akseptable verdi for å endre tekstfarge. Dette kan også være heksekode eller RGB (rød-grønn-blå) fargedata. Mange ganger vil designere ikke nevne ideen om verdier fordi det kan være misvisende.
Egenskaper og verdier er egentlig en eneste ide. Hver eiendom erklæring krever en verdi, og verdier på egen hånd er meningsløse. Det er mye dokumentasjon på nettet som går over de mange forskjellige egenskapene og hvordan de påvirker HTML-elementer. Jeg vil anbefale å kjøpe en CSS-referanse bok fra en nærliggende bokhandel. De er ganske billige og holder mest all informasjon du trenger.
Vælgerverdier
Selectors er nødvendig for å fullføre en hel linje med CSS-koden. Dette er det vi erklærer for å angi hvilken type element vi målretter mot. Det er mange selektorer, og mange er så innviklet, at den gjennomsnittlige designeren ikke trenger ferdighetene. Sjekk W3s valgdokumenter hvis du vil finne ut mer.
Den enkleste måten å starte stildefinisjoner på er å bruke bare elementer som eiendomsselektorer. Dette betyr å manipulere rotkoden, for eksempel p for avsnitt, div for divisjoner, og til og med kropp og html kan brukes til å manipulere hele nettsidedokumentet. Nedenfor er et raskt eksempel på styling av alle avsnittelementer.
p font-family: Arial, sans-serif; farge: # 222; font-weight: bold;
Hva gir CSS ekte vekt er hvordan nøyaktig selector sniping kan være. Den beste måten å oppnå målrettede stiler på, er gjennom 2 metoder kjent som klasser og IDer. Dette er vanlige ideer i HTML der du kan angi et hvilket som helst element for å ha en ID og klasse verdi gjennom attributter. Deretter bruker CSS det enkelt å bruke stiler til den aktuelle blokken.
p # firstpar font-size: 14px; / * Stiler avsnitt med ID av "firstpar" * / p.comment font-size: 1.0em; linjehøyde: 1,3em; / * stiler avsnitt (er) med klasse av "kommentar" * /
Lengdeenheter og verdier
Ofte blir disse betingelsene blandet opp, ikke en stor overraskelse. Verdier ble forklart tidligere som plasseringen vi bruker til å beskrive en eiendom. Lengdeenheter er også verdier ved at de brukes til å beskrive en eiendom.
Forskjellen er at disse verdiene krever numeriske data og derfor må returnere noen form for enheter. Piksler (px) er de mest vanlige og kan brukes til de fleste alt: bredde / høyde, skriftstørrelse, polstring / marginer, for å nevne noen få.
Annet enn dette kan du se prosentandeler (%) brukt ofte gjennom væskeoppsett. Når du angir breddeverdier til en prosent, vil kompilatoren anta 100% for å være hele bredden av nettleseren. Dette gir mye presisjon til designere når du bruker stiler til layoutstrukturer og til og med sidetypografi.
Deklarasjonsblokken
Nå etter at alle disse betingelsene er satt sammen, kan vi endelig diskutere kjernenes idé bak stilark. Blokker av kode brukes til å avgrense emneområder og angi elementdetaljering. For eksempel, nedenfor er en kode for en enkel navigasjonsbeholder:
div # nav display: block; bredde: 100%; polstring: 3px 6px; margin-bunn: 20px;
Den enkleste måten å vise denne koden på er å linjene egenskaper etter hverandre. CSS utviklere har brukt blokker med kode for å bryte hver eiendom på egen linje. Denne agendaen tar ikke bare mye mer plass, men reduserer evnen til “skummet” arket ditt for å finne akkurat det du trenger.
En bedre måte å bryte opp blokker med kode er å skille innviklede elementer inn på egenhånd etter at de når en terskel. Dette nummeret er personlig og vil være forskjellig mellom utviklere. Det er tipping punktet der logikken dikterer det dumt å holde alt på en enkelt linje, hovedsakelig på grunn av lesbarhet.
Nedenfor har jeg skrevet et eksempel på en blokk med navigasjonsegenskaper alle sammen. Denne øvelsen holder dypere elementer på samme sted, slik at endringer i alle navigasjonselementer er mye enklere.
div # nav display: block; bredde: 100%; polstring: 3px 6px; margin-bunn: 20px; div # nav ul listestil: none; skjerm: blokk; div # nav ul li float: left; margin-høyre: 10px; skriftstørrelse: 12px; div # nav ul li a color: # 0f0f0f; tekst-dekorasjon: ingen; display: inline-block; polstring: 2px 5px;
Mulige fremskritt fra CSS2 / CSS3
I overskriftene har det nylig vært non-stop snakk om de fantastiske fordelene fra CSS3. Men hva har egentlig endret på språket? Tydelig gammel kode vil fortsatt kjøre helt fint. Dette viser i det minste fullstendig bakoverkompatibilitet mellom kompilatorer (alltid en god ting).
Store forskjeller er hovedsakelig knyttet til nye eiendommer. Disse tillater avrundede hjørner og drop-shadow effekter som skal gjengis i nettleseren. CSS3 tilbyr også nye verktøy for å beskrive farger i dokument. HSL (Hue-Saturation-Lightness) er den nyeste i tillegg til HSLA som inkluderer en Alpha-kanal for å redusere opasitet.
Attributvelgerne er et stort skritt fremover når det gjelder rett markup styling. Med denne kodenes stil kan du målrette mot et bestemt elementnavn som inneholder attributter med bestemte verdier. Disse er mest nyttige når du arbeider med markup som XML der det ikke er standard designprinsipper for å manipulere noder. Eksempelet nedenfor er en relativt enkel ide:
div [attrib ^ = "1"] / * stiler her * /
Koden ovenfor er en del av CSS selectors biblioteket. Dette vil påvirke alle div-elementer med et attributt “attrib” som også holder verdien “1”. Hvis dette fortsatt er forvirrende, referer eksemplet nedenfor for å avklare. I teorien skal disse to seleksjonene utføre de samme handlingene.
p [id ^ = "primær"] / * stiler * / p # primær / * stiler * /
Konklusjon
Etter å ha kuttet ned noen av de mest forvirrede vilkårene, virker CSS som en tur i parken. Språket er veldig intuitivt og nybegynnere kan begynne å designe innen de første par timene. Dette er det som gjør CSS så populær blant webutviklere.
Fordelene med CSS3 har bare nettopp begynt å tre i kraft. I løpet av de nye årene vil utviklingen av webtrender vise oss hvor mye kontroll vi virkelig har over webdesign. CSS står for tiden stolt som det dominerende språket for front-end nettsted styling. Å praktisere til selv rudimentære mellomnivå ferdigheter kan produsere rikelig design erfaring og ytterligere kunnskap.
