CSS Tilbake til grunnleggende: Terminologier forklart

Denne artikkelen er en del av vår "HTML5 / CSS3 Tutorials Series" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her for å se flere artikler fra samme serie.

CSS eller Cascading Stylesheets fullfører det definerende språket av designregler for vår web. Kunstnere overalt bruker CSS daglig, for å lage, organisere og kode regler 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å hovedsakelig 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 eiendom / verdi par.

Som et eksempel color: red; er en veldig enkel egenskap / verdi par. Egenskapen vi brukte er farge som gjør at vi kan passere i en hvilken som helst akseptabel 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.

Selektorsverdier

Selectors er nødvendig for å fullføre en hel linje med CSS-koden. Dette er hva 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 vite mer.

Den enkleste måten å starte stildefinisjoner på er å bruke bare elementer som eiendomsselektorer. Dette betyr at man manipulerer rotkode som p for avsnitt, div for divisjoner, og til og med body 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 som kalles 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 disse 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 en rekke 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 opp mye mer plass, men reduserer muligheten til å "skumme" 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 seg 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 opaciteten.

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å inneholder 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. Øvelse i selv rudimentære mellomnivå ferdigheter kan produsere rikelig design erfaring og ytterligere kunnskap.

Forstå dokumentobjektmodell (DOM) i detaljer

Vi har alle hørt om DOM, eller Document Object Model, som blir nevnt fra tid til annen, relatert til JavaScript. DOM er et ganske viktig konsept i webutvikling. Uten det ville vi ikke kunne dynamisk endre HTML-sider i nettleseren.Lære og forstå DOM gir bedre måter å få tilgang til, endre og overvåke ulike elementer på en HTML-side. Dokume

(Tekniske og design tips)

Bygg Responsive Sorterable Grid Layouts With This Script

Egendefinerte grensesnitt er noen av de tøffeste funksjonene å skape fra grunnen av. Du kan finne mange mursteinplugger, men de har sine egne begrensninger og krav .Muuri-skriptet er et sterkt alternativ for alle som trenger sorterbare og responsive gridelementer med berøringsstøtte .Den er bygget på Velocity.js f

(Tekniske og design tips)