De essensielle CSS3-egenskapene Jukseark
Annonse Cascading Style Sheets eller CSS definerer utseendet og følelsen av nettet slik vi kjenner det. Mens HTML og JavaScript fokuserer på den funksjonelle siden av nettet, handler CSS om de visuelle aspektene ved det. Trenger du hjelp til å navigere i verden som er CSS3? Last ned vårt "Essential CSS3 Properties Cheat Sheet" i dag! Et
Annonse
Cascading Style Sheets eller CSS definerer utseendet og følelsen av nettet slik vi kjenner det. Mens HTML og JavaScript fokuserer på den funksjonelle siden av nettet, handler CSS om de visuelle aspektene ved det.
Trenger du hjelp til å navigere i verden som er CSS3? Last ned vårt "Essential CSS3 Properties Cheat Sheet" i dag!Etter at du har lært hvordan du bygger statiske nettsider med HTML, er det på tide å finne ut hvordan du kan style dem og gjøre dem presentable med CSS. Og våre CSS3 egenskaper jukseark nedenfor kan hjelpe deg med det! Den dekker den essensielle syntaks du trenger å vite om i CSS3, som er den siste versjonen av CSS.
En arbeidskunnskap om CSS hjelper deg å tilpasse farger, skrifter, grenser, bakgrunner, oppsett og mye mer på websider på en strømlinjeformet måte. Det kommer mer til nytte når du designer web- og mobilapplikasjoner også.
GRATIS NEDLASTING: Dette juksearket er tilgjengelig som en nedlastbar PDF fra vår distribusjonspartner, TradePub. Du må fylle ut et kort skjema for å få tilgang til det bare for første gang. Last ned Essential CSS3 Properties Cheat Sheet.
De essensielle CSS3-egenskapene Jukseark
| snarvei | Handling |
|---|---|
| Bakgrunnsegenskaper | |
| bakgrunn | Definerer en rekke bakgrunnsegenskaper i en erklæring. |
| Bakgrunnen-feste | Angir om bakgrunnsbildet er fast eller ruller med nettsiden. |
| bakgrunnsfarge | Definerer bakgrunnsfargen til et element på nettsiden. |
| bakgrunnsbilde | Definerer et elementets bakgrunnsbilde. |
| bakgrunn klype | Angir hvor langt bakgrunnsbildene eller fargen strekker seg for et element. |
| background-opprinnelse | Angir posisjonsområdet for bakgrunnsbildene. |
| Bakgrunnen-stilling | Definerer opprinnelsen til et bakgrunnsbilde. |
| background-repeat | Angir hvordan bakgrunnsbildet skal flislegges. |
| background-size | Angir størrelsen på bakgrunnsbildene. |
| Grenseegenskaper | |
| grense | Angir kantbredde, stil og farge for alle fire sider av et element. |
| nedre kant | Angir bredden, stilen og fargen for den nederste grensen til et element. |
| nedre kant-farge | Angir fargen på den nederste grensen til et element. |
| nedre kant venstre-radius | Definerer formen til det nederste venstre hjørnet av et element. |
| border-bottom-høyre-radius | Definerer formen til det nederste høyre hjørne av et element. |
| border-bottom-stil | Angir stilen på den nederste grensen til et element. |
| nedre kant bredde | Angir bredden på den nederste grensen til et element. |
| grensefarge | Angir fargen på grensen på alle de fire sidene av et element. |
| border-image | Angir hvordan et bilde skal brukes i stedet for kantlinestilene. |
| border-image-starten | Spesifiserer beløpet som rammebildets område strekker seg utover grenseboksen. |
| border-image-repeat | Angir hvordan kantbildet skal flislegges. |
| border-image-slice | Spesifiserer innvendige forskyvninger av bildegrensen. |
| border-bildekilde | Angir plasseringen av bildet som skal brukes som kantlinje. |
| border-bilde-bredde | Angir bredden på bildekanten. |
| border-left | Angir bredden, stilen og fargen på venstre kant av et element. |
| border-left-farge | Angir fargen på venstre kant av et element. |
| border-left-style | Angir stilen på venstre kant av et element. |
| border-venstre-bredde | Angir bredden på venstre kant av et element. |
| border-radius | Definerer formen på grensehjørnene til et element. |
| border-right | Angir bredden, stilen og fargen på høyre grense for et element. |
| border-right-farge | Angir fargen på høyre kant på et element. |
| border-right-stil | Angir stilen på høyre grense for et element. |
| border-høyre-bredde | Angir bredden på høyre kant av et element. |
| border-style | Angir stilen på grensen på alle de fire sidene av et element. |
| border-top | Angir bredden, stilen og fargen på øverste kant av et element. |
| border-top-farge | Angir fargen på øverste kant av et element. |
| border-top-venstre-radius | Definerer formen på det øverste venstre hjørnet av et element. |
| border-top-right-radius | Definerer formen til øverste høyre hjørne av et element. |
| border-top-stil | Angir stilen på øverste kant av et element. |
| border-topp-bredde | Angir bredden på øverste kant av et element. |
| border-bredde | Angir bredden på grensen på alle de fire sidene av et element. |
| Fargeegenskaper | |
| farge | Definerer og angir farge for tekst. |
| opasitet | Definerer gjennomsiktigheten til et element. |
| Dimensjonsegenskaper | |
| høyde | Definerer høyden på et element. |
| max-høyde | Definerer maksimal høyde på et element. |
| max bredde | Definerer maksimal bredde på et element. |
| min-høyde | Definerer minimumshøyden på et element. |
| en minstebredde | Definerer minimumsbredden til et element. |
| bredde | Angi bredden på et element. |
| Genererte innholdsegenskaper | |
| innhold | Setter inn generert innhold. |
| sitater | Angir anførselstegn for innebygde sitater. |
| teller for tilbakestilling | Oppretter eller tilbakestiller ett eller flere tellere. |
| teller-inkrement | Øker en eller flere tellerverdier. |
| Fleksibel boksoppsett | |
| juster-innhold | Spesifiser justering av fleksible containergjenstander. |
| justere elementer | Angir standardjustering for elementer. |
| juster-selv | Angir justeringen for valgte elementer. |
| flex | Angir komponentene med fleksibel lengde. |
| flex-basis | Angir den innledende hovedstørrelsen på flex-elementet. |
| flex-retningen | Angir retningen på de fleksible elementene. |
| flex-flow | En kortfattet egenskap for flex-direction og flex-wrap egenskaper. |
| flex-vokse | Angir hvordan flex-elementet vil vokse i forhold til de andre elementene inne i flex-beholderen. |
| flex-krympe | Angir hvordan flex-elementet vil krympe i forhold til de andre elementene inne i flex-beholderen. |
| flex-wrap | Angir om de fleksible elementene skal pakkes inn eller ikke. |
| rettferdig-innhold | Spesifiserer hvordan fleksible elementer er justert langs hovedaksen til flexbeholderen etter at eventuelle fleksible lengder og auto marginer er løst. |
| rekkefølge | Angir rekkefølgen som en flex-element vises og legges ut i en flex-beholder. |
| Skriftegenskaper | |
| font | Definerer en rekke fontegenskaper innenfor en deklarasjon som font-stil, font-variant, font-vekt, font-størrelse / line-høyde og font-familien. |
| font-family | Definerer en liste over skrifter for element. |
| skriftstørrelse | Definerer skriftstørrelsen for teksten. |
| font-size-juster | Bevarer tekstens lesbarhet når font fallback oppstår. |
| font-strekning | Velger et normalt, kondensert eller utvidet ansikt fra en skrift. |
| fontstil | Definerer skrifttypen for teksten. |
| font-variant | Spesifiserer fontvarianten. |
| font-vekt | Angir skriftvekten på teksten. |
| Listeegenskaper | |
| list-style | Definerer visningsstilen for en liste og listeelementer. |
| list-style-image | Spesifiserer bildet som skal brukes som markeringsliste. |
| list-style-posisjon | Angir plasseringen av markeringslisten. |
| list-style-type | Angir markørstilen for et listeelement. |
| Marginegenskaper | |
| margin | Angir margen på alle fire sider av elementet. |
| margin-bottom | Angir bunnmarginen til elementet. |
| margin-left | Angir venstre marg for elementet. |
| margin-right | Angir høyre margin for elementet. |
| margin-top | Angir toppmarginen til elementet. |
| Egenskaper for multi-kolonneoppsett | |
| kolonne-count | Spesifiserer antall kolonner i et flerkolonneelement. |
| kolonne-fill | Angir hvordan kolonner skal fylles. |
| kolonne-gap | Angir gapet mellom kolonnene i et flersøyleselement. |
| kolonne-regelen | Spesifiserer en rett linje, eller "regel", som skal tegnes mellom hver kolonne i et flersøyleelement. |
| kolonne-regel-farge | Angir fargen på reglene tegnet mellom kolonner i en flersøyleoppsett. |
| kolonne-regel-stil | Spesifiser stilen til regelen tegnet mellom kolonnene i en flersøyleoppsett. |
| kolonne-regel-bredde | Angir bredden på regelen tegnet mellom kolonnene i en flersøyles layout. |
| kolonne-span | Spesifiserer hvor mange kolonner et element spenner over i en layout med flere kolonner. |
| kolonnebredde | Angir den optimale bredden på kolonnene i et flersøyleelement. |
| kolonner | En kortfattet egenskap for å angi kolonnebredde og kolonnetellingegenskaper. |
| kolonne-count | Spesifiserer antall kolonner i et flerkolonneelement. |
| Oversikt Egenskaper | |
| omriss | Angir bredden, stilen og fargen for alle fire sider av elementets omriss. |
| omriss-farge | Angir fargen på omrisset. |
| skissere-offset | Angi mellomrommet mellom et omriss og kantlinjen til et element. |
| omrisset-stil | Angir en stil for et omriss. |
| omriss bredde | Angir bredden på omrisset. |
| Polstring Egenskaper | |
| padding | Stiller inn polstringen på alle fire sider av elementet. |
| padding-bottom | Setter polstringen til undersiden av et element. |
| padding-left | Setter polstring til venstre side av et element. |
| padding-right | Setter polstringen til høyre side av et element. |
| padding-top | Setter polstringen til oversiden av et element. |
| Utskriftsegenskaper | |
| side-break-etter | Setter inn et sideskift etter et element. |
| side-break-før | Setter inn et sideskift før et element. |
| side-break-inne | Setter inn et sideskift i et element. |
| Tabellegenskaper | |
| border-kollaps | Angir om tabellcellegrenser er tilkoblet eller separert. |
| kant-avstand | Angir avstanden mellom grensene til tilstøtende tabellceller. |
| tekst-side | Angir plasseringen av tabellens bildetekst. |
| tomme-cellene | Viser eller skjuler grenser og bakgrunner for tomme tabellceller. |
| tabell-layout | Angir en tabelloppsettalgoritme. |
| border-kollaps | Angir om tabellcellegrenser er tilkoblet eller separert. |
| Tekstegenskaper | |
| retning | Definerer tekstretning / skriveretning. |
| tab-størrelse | Angir lengden på kategorien. |
| tekst-Juster | Stiller inn den horisontale justeringen av inlineinnhold. |
| text-align-siste | Angir hvordan den siste linjen i en blokk eller en linje rett før en tvungen linjeskift justeres når tekstjustering er rettferdiggjort. |
| text-decoration | Angir dekorasjonen som er lagt til i teksten. |
| text-decoration-farge | Angir fargen på tekstdekorasjonslinjen. |
| text-decoration Online | Angir hva slags linjedekorasjoner som blir lagt til elementet. |
| text-decoration-stil | Angir stilen på linjene som er spesifisert av egenskapen tekstdekorasjonslinje |
| text-indent | Innrykk den første tekstlinjen. |
| tekst-rettferdig | Angir begrunnelsesmetoden som skal brukes når egenskapen for tekstjustering er satt til å rettferdiggjøre. |
| tekst-overløp | Angir hvordan tekstinnholdet skal vises når det flommer over blokkeringsbeholderne. |
| text-shadow | Bruker en eller flere skygger på tekstinnholdet i et element. |
| text-transform | Transformerer saken om teksten. |
| linjehøyde | Angir høyden mellom tekstlinjer. |
| vertical-align | Angir den vertikale plasseringen av et element i forhold til gjeldende tekstbaseline. |
| avstand mellom bokstavene | Angir den ekstra avstanden mellom bokstavene. |
| ord-spacing | Angir avstanden mellom ord. |
| white-space | Angir hvordan hvit plass inni elementet skal håndteres. |
| word-break | Spesifiser hvordan bryte linjer i ord. |
| word-wrap | Angir om ord skal brytes når innholdet oversvømmer beholderens grenser. |
| Transformer egenskaper | |
| backface-synlighet | Angir om "baksiden" av et transformert element er synlig når du vender mot brukeren. |
| perspektiv | Definerer perspektivet som alle barnelementer av objektet blir sett på fra. |
| perspektiv-opprinnelse | Definerer opprinnelse (forsvinningspunktet for 3D-rommet) for perspektivegenskapen. |
| forvandle | Bruker en 2D- eller 3D-transformasjon på et element. |
| forvandle-opprinnelse | Definerer opprinnelsen til transformasjon for et element. |
| forvandle stil | Angir hvordan nestede elementer blir gjengitt i 3D-plass. |
| Overgangsegenskaper | |
| overgang | Definerer overgangen mellom to tilstander i et element. |
| Overgangen-forsinkelse | Angir når overgangseffekten skal starte. |
| Overgangen-varighet | Angir antall sekunder eller millisekunder en overgangseffekt bør ta for å fullføre. |
| Overgangen-egenskap | Angir navnene på CSS-egenskapene som en overgangseffekt skal brukes til. |
| Overgangen-timing-funksjon | Angir hastighetskurven for overgangseffekten. |
| Egenskaper for visuell formatering | |
| vise | Angir hvordan et element vises på skjermen. |
| stilling | Angir hvordan et element er plassert. |
| topp | Angir plasseringen av overkanten av det plasserte elementet. |
| Ikke sant | Angir plasseringen av høyre kant av det plasserte elementet. |
| bunn | Angir plasseringen av den nedre kanten av det plasserte elementet. |
| venstre | Angir plasseringen av venstre kant av det plasserte elementet. |
| flyte | Angir om en boks skal flyte eller ikke. |
| klar | Angir plassering av et element i forhold til flytende elementer. |
| z-indeks | Angir en lagdeling eller stablingsrekkefølge for plasserte elementer. |
| flyte | Spesifiserer behandlingen av innhold som renner over elementets boks. |
| flow-x | Angir hvordan du skal administrere innholdet når det flommer over bredden på elementets innholdsområde. |
| flow-y | Angir hvordan du skal administrere innholdet når det strømmer over høyden til elementets innholdsområde. |
| endre størrelse på | Angir om brukeren kan endre størrelse på et element eller ikke. |
| klemme | Definerer utklippsregionen. |
| synlighet | Angir om et element er synlig eller ikke. |
| markør | Spesifiserer markørtypen. |
| box-shadow | Bruker en eller flere drop-skygger på elementets boks. |
| box-sizing | Endrer standard CSS-boksemodell. |
| Animasjonsegenskaper | |
| animasjon | Angir oppførselen til alle animasjoner. |
| animasjon-forsinkelse | Angir når animasjonen skal starte med en forsinkelse. |
| animasjon-retningen | Angir om animasjonen skal spille av fremover, bakover eller i alternative sykluser. |
| animasjon-varighet | Angir antall sekunder eller millisekunder en animasjon bør ta for å fullføre en syklus. |
| animasjon-fill-mode | Angir hvordan en CSS-animasjon skal bruke stiler på målet før og etter at den er utført. |
| animasjon-iterasjon-count | Angir antall ganger en animasjonssyklus skal spilles av før du stopper. |
| animasjon-navn | Angir navnet på @keyframes definerte animasjoner som skal brukes på det valgte elementet. |
| animasjon-play-state | Angir om animasjonen skal kjøres eller pauses. |
| animasjon-timing-funksjon | Angir hvordan en CSS-animasjon skal utvikle seg over varigheten av hver syklus. |
Gå utover det grunnleggende om CSS
Når du har mestret byggesteinene til CSS, anbefaler vi at du oppgraderer CSS-ferdighetene dine. Kick-Start CSS-prosjekter med denne GRATIS eBok! Start dine CSS-prosjekter med denne GRATIS eBok! Denne gratis eboken inneholder et bredt antall CSS-baserte eksempler som kan hjelpe deg med å starte dine egne nettprosjekter. Les mer og lær JavaScript Hva er JavaScript og hvordan fungerer det? Hva er JavaScript, og hvordan fungerer det? Hva er Javascript? Det er et programmeringsspråk som brukes til å forbedre websidene. Det inkluderer dynamisk oppdatering av websider, brukergrensesnitt og mer. La oss dykke inn i hva Javascript handler om. Les mer for å ta nettsidene dine til et nytt imponerende nivå.
Bildekreditt: Nick Karvounis på Unsplash
Utforsk mer om: Cheat Sheet, CSS, Web Design.
