De essentielle CSS3-egenskaber snyderark
Reklame Cascading Style Sheets eller CSS definerer udseendet og følelsen af internettet, som vi kender det. Mens HTML og JavaScript fokuserer på den funktionelle side af nettet, beskæftiger CSS de visuelle aspekter af det. Brug for hjælp til at navigere i verden, der er CSS3? Download vores "Essential CSS3 Properties Cheat Sheet" i dag! Når du
Reklame
Cascading Style Sheets eller CSS definerer udseendet og følelsen af internettet, som vi kender det. Mens HTML og JavaScript fokuserer på den funktionelle side af nettet, beskæftiger CSS de visuelle aspekter af det.
Brug for hjælp til at navigere i verden, der er CSS3? Download vores "Essential CSS3 Properties Cheat Sheet" i dag!Når du har lært, hvordan du bygger statiske websider med HTML, er det tid til at opdage, hvordan man kan style dem og gøre dem præsentative med CSS. Og vores CSS3 egenskaber snyderark nedenfor kan hjælpe dig med det! Det dækker den essentielle syntaks, du har brug for at vide om i CSS3, som er den seneste version af CSS.
En arbejdsviden om CSS hjælper dig med at tilpasse farver, skrifttyper, rammer, baggrunde, layout og meget mere på websider på en strømlinet måde. Derudover er det praktisk, mens du designe web- og mobilapplikationer.
GRATIS DOWNLOAD: Dette snyderi er tilgængeligt som en downloadbar PDF fra vores distributionspartner, TradePub. Du skal udfylde en kort formular for kun at få adgang til den for første gang. Download væsentlige CSS3 egenskaber snyderi.
De essentielle CSS3-egenskaber snyderark
| Genvej | Handling |
|---|---|
| Baggrundsegenskaber | |
| baggrund | Definerer en række baggrundsegenskaber inden for en erklæring. |
| background-attachment | Angiver, om baggrundsbilledet er fast eller ruller med webside. |
| baggrundsfarve | Definerer baggrundsfarve på et element på websiden. |
| baggrundsbillede | Definerer et elements baggrundsbillede. |
| background-clip | Specificerer hvor langt baggrundsbilleder eller farve strækker sig for et element. |
| baggrund-oprindelse | Specificerer placeringsområdet for baggrundsbillederne. |
| baggrund-stillingen | Definerer oprindelsen af et baggrundsbillede. |
| background-repeat | Specificerer, hvordan baggrundsbilledet er flisebelagt. |
| baggrund-størrelse | Specificerer størrelsen på baggrundsbillederne. |
| Grænseegenskaber | |
| grænse | Indstiller kantbredde, stil og farve for alle fire sider af et element. |
| border-bottom | Indstiller bredden, stilen og farven for den nederste kant af et element. |
| border-bottom-farve | Indstiller farven på et elements underkant. |
| border-nederste venstre-radius | Definerer formen på det nederste venstre hjørne af et element. |
| border-bottom-højre-radius | Definerer formen på det nederste højre kanthjørne af et element. |
| border-bottom-style | Indstiller stilen på den nederste kant af et element. |
| border-bottom-bredde | Indstiller bredden på den nederste kant af et element. |
| border-color | Indstiller farven på kanten på alle de fire sider af et element. |
| border-billede | Specificerer, hvordan et billede skal bruges i stedet for kantformater. |
| border-image-starten | Angiver det beløb, som grænsebilledområdet strækker sig ud over kantboksen. |
| border-image-repeat | Specificerer, hvordan kantbilledet er flisebelagt. |
| border-image-skive | Specificerer billedkantens indvendige forskydninger. |
| border-image-source | Specificerer placeringen af det billede, der skal bruges som en kant. |
| border-image-bredde | Angiver bredden på billedkanten. |
| border-venstre | Indstiller bredden, stilen og farven på den venstre kant af et element. |
| border-venstre-farve | Indstiller farven på venstre element på et element. |
| border-venstre-stil | Indstiller stilen på venstre element på et element. |
| border-venstre-bredde | Indstiller bredden på den venstre kant af et element. |
| border-radius | Definerer formen på et elements grænsehjørner. |
| border-ret | Indstiller bredden, stilen og farven på højre kant af et element. |
| border-højre-farve | Indstiller farven på det højre kant af et element. |
| border-højre-stil | Indstiller stilen til højre kant af et element. |
| border-højre-bredde | Indstiller bredden på højre kant af et element. |
| border-style | Indstiller stilen på grænsen på alle de fire sider af et element. |
| border-top | Indstiller bredden, stilen og farven på den øverste kant af et element. |
| border-top-farve | Indstiller farven på den øverste kant af et element. |
| border-top-venstre-radius | Definerer formen på det øverste venstre hjørne af et element. |
| border-top-højre-radius | Definerer formen på det øverste højre kant af et element. |
| border-top-style | Indstiller stilen på den øverste kant af et element. |
| border-top-bredde | Indstiller bredden på den øverste kant af et element. |
| border-width | Indstiller bredden på kanten på alle de fire sider af et element. |
| Farveegenskaber | |
| farve | Definerer og indstiller farven for tekst. |
| Gennemsigtighed | Definerer et elements gennemsigtighed. |
| Dimension Egenskaber | |
| højde | Definerer højden på et element. |
| max-højde | Definerer den maksimale højde på et element. |
| max-bredde | Definerer den maksimale bredde på et element. |
| min-højde | Definerer et minimums højde for et element. |
| min-bredde | Definerer minimumsbredden på et element. |
| bredde | Angiv bredden på et element. |
| Genererede indholdsegenskaber | |
| indhold | Indsætter genereret indhold. |
| citater | Specificerer anførselstegn for indlejrede tilbud. |
| counter-reset | Opretter eller nulstiller en eller flere tællere. |
| counter-tilvækst | Trækker en eller flere tællerværdier. |
| Fleksibel bokslayout | |
| tilslutter-indhold | Specificerer justeringen af fleksible containers genstande. |
| tilpasse poster | Specificerer standardjusteringen for poster. |
| tilslutter-self | Specificerer justeringen for valgte poster. |
| flex | Specificerer komponenterne i en fleksibel længde. |
| flex-basis | Specificerer den oprindelige hovedstørrelse på flex-emnet. |
| flex-retningen | Specificerer retningen for de fleksible emner. |
| flex-flow | En kortvarig egenskab til flex-retningen og flex-wrap egenskaberne. |
| flex-vokse | Specificerer, hvordan flexelementet vil vokse i forhold til de andre elementer inde i flexcontaineren. |
| flex-krympe | Specificerer, hvordan flexelementet vil krympe i forhold til de andre elementer inde i flexcontaineren. |
| flex-wrap | Specificerer, om de fleksible emner skal pakkes eller ej. |
| retfærdiggøre-indhold | Specificerer, hvordan flexelementer er rettet langs flexakseens hovedakse, efter at eventuelle fleksible længder og auto marginer er blevet løst. |
| bestille | Specificerer rækkefølgen, i hvilken en flex-genstand vises og er lagt ud i en flex-container. |
| Skrifttegenskaber | |
| skrifttype | Definerer en række skrifttegenskaber inden for en erklæring som font-stil, font-variant, font-vægt, font-størrelse / line-højde og font-familien. |
| font-family | Definerer en liste med skrifttyper for element. |
| skriftstørrelse | Definerer skrifttypestørrelsen for teksten. |
| skriftstørrelse-adjust | Bevarer tekstlæsbarheden, når font fallback opstår. |
| font-stretch | Vælger et normalt, kondenseret eller udvidet ansigt fra en skrifttype. |
| skrifttype | Definerer skrifttypestilen for teksten. |
| font-variant | Specificerer skrifttypevarianten. |
| font-weight | Specificerer skrifttypets vægt på teksten. |
| Listeegenskaber | |
| liste-stil | Definerer visningstil for en liste og listeelementer. |
| liste-stil-billede | Specificerer det billede, der skal bruges som en liste-elementmarkør. |
| liste-stil-stillingen | Specificerer placeringen af markøren for listen. |
| liste-stil-typen | Specificerer markørstilen for et listeobjekt. |
| Marginegenskaber | |
| margen | Indstiller marginen på alle fire sider af elementet. |
| margin-bottom | Indstiller den nederste margin på elementet. |
| margin-left | Indstiller venstre margen for elementet. |
| margin-ret | Indstiller den højre margen for elementet. |
| margin-top | Indstiller den øverste margin på elementet. |
| Egenskaber for layout med flere søjler | |
| kolonne-count | Specificerer antallet af kolonner i et flersøjleselement. |
| kolonne-fill | Specificerer, hvordan kolonner skal udfyldes. |
| kolonne-kløften | Specificerer afstanden mellem kolonnerne i et flersøjleselement. |
| kolonne-reglen | Specificerer en lige linje eller "regel", der skal trækkes mellem hver kolonne i et flersøjleselement. |
| kolonne-regel-farve | Specificerer farven på reglerne, der er trukket mellem kolonner i et flersøjleslayout. |
| kolonne-regel-stil | Specificerer stilen på den regel, der er trukket mellem kolonnerne i et flersøjleslayout. |
| kolonne-regel-bredde | Specificerer bredden på den regel, der er trukket mellem kolonnerne i et multi-kolonnes layout. |
| kolonne-span | Specificerer hvor mange kolonner et element spænder over i et flersøjleslayout. |
| kolonne bredde | Specificerer den optimale bredde på kolonnerne i et flersøjleselement. |
| kolonner | En kortvarig egenskab til indstilling af egenskaber for søjlebredde og søjletælling. |
| kolonne-count | Specificerer antallet af kolonner i et flersøjleselement. |
| Oversigt Egenskaber | |
| omrids | Indstiller bredden, stilen og farven på alle fire sider af elementets kontur. |
| skitse-farve | Indstiller farven på konturen. |
| skitsere-offset | Indstil afstanden mellem en kontur og kantens kanten af et element. |
| skitse-stil | Indstiller en stil til en kontur. |
| outline-width | Indstiller bredden på konturen. |
| Polstring Egenskaber | |
| polstring | Indstiller polstret på alle fire sider af elementet. |
| padding-bottom | Indstiller polstret på undersiden af et element. |
| padding-venstre | Sætter polstret til venstre side af et element. |
| padding-højre | Indstiller polstret til højre for et element. |
| padding-top | Indstiller polstret til oversiden af et element. |
| Udskriv egenskaber | |
| side-break-efter | Indsætter en sideskift efter et element. |
| side-break-før | Indsætter en sideskift før et element. |
| side-break-inde | Indsætter en sideskift i et element. |
| Tabelegenskaber | |
| border-kollaps | Specificerer, om tabelcellegrænser er tilsluttet eller adskilt. |
| border-spacing | Indstiller afstanden mellem grænserne til tilstødende tabelceller. |
| billedtekst-side | Specificerer placeringen af tabellens billedtekst. |
| tomme-celler | Viser eller skjuler grænser og baggrunde for tomme tabelceller. |
| tabel-layout | Specificerer en tabellayout algoritme. |
| border-kollaps | Specificerer, om tabelcellegrænser er tilsluttet eller adskilt. |
| Tekstegenskaber | |
| retning | Definerer tekstretning / skriveretning. |
| Fanen-størrelse | Angiver længden på fanebladets karakter. |
| text-align | Indstiller den vandrette justering af inlineindhold. |
| text-align-sidste | Specificerer, hvordan den sidste linje i en blok eller en linje lige før en tvungen linjeskift justeres, når tekstjustering er berettiget. |
| tekst-dekoration | Specificerer den dekoration, der er tilføjet til teksten. |
| tekst-dekoration-farve | Specificerer farven på tekstdekorationslinjen. |
| tekst-dekoration-line | Specificerer, hvilken slags linjedekorationer der føjes til elementet. |
| tekst-dekoration-stil | Specificerer stilen på de linjer, der er specificeret af egenskaben tekst-dekoration-linje |
| tekst-led | Indrykker den første tekstlinie. |
| tekst-retfærdiggøre | Specificerer den berettigelsesmetode, der skal bruges, når egenskaben for tekstjustering er indstillet til at retfærdiggøre. |
| tekst-overløb | Specificerer, hvordan tekstindholdet skal vises, når det oversvømmer blokcontainerne. |
| tekst-skygge | Anvender en eller flere skygger på tekstindholdet i et element. |
| tekst-transform | Transformerer sagen om teksten. |
| linjehøjde | Indstiller højden mellem tekstlinjer. |
| vertical-align | Indstiller den lodrette placering af et element i forhold til den aktuelle tekstbaseline. |
| Spatiering | Indstiller den ekstra afstand mellem bogstaver. |
| word-spacing | Indstiller afstanden mellem ord. |
| hvidt rum | Specificerer, hvordan hvidt rum inde i elementet skal håndteres. |
| ord-pause | Specificerer, hvordan man bryder linjer i ord. |
| tekstombrydning | Specificerer, om ord skal brydes, når indholdet oversvømmer beholderens grænser. |
| Transform egenskaber | |
| backface-synlighed | Angiver, hvorvidt "bagsiden" af et transformeret element er synligt, når man vender mod brugeren. |
| perspektiv | Definerer det perspektiv, hvorfra alle underordnede elementer i objektet ses. |
| perspektiv-oprindelse | Definerer oprindelsen (forsvindingspunktet for 3D-rummet) for den perspektiviske egenskab. |
| omdanne | Anvender en 2D- eller 3D-transformation til et element. |
| transformationsbaseret oprindelse | Definerer oprindelsen af transformation for et element. |
| omdanne-stil | Specificerer, hvordan indlejrede elementer gengives i 3D-rum. |
| Overgangsegenskaber | |
| overgang | Definerer overgangen mellem to elementer i et element. |
| overgang-forsinkelse | Angiver, hvornår overgangseffekten vil starte. |
| overgang-varighed | Angiver det antal sekunder eller millisekunder, en overgangseffekt skal tage for at afslutte. |
| overgang-ejendom | Specificerer navnene på de CSS-egenskaber, som en overgangseffekt skal anvendes til. |
| overgang-timing-funktion | Specificerer hastighedskurven for overgangseffekten. |
| Egenskaber for visuel formatering | |
| Skærm | Specificerer, hvordan et element vises på skærmen. |
| position | Specificerer, hvordan et element er placeret. |
| top | Specificerer placeringen af den øverste kant af det placerede element. |
| ret | Specificerer placeringen af højre kant af det placerede element. |
| bund | Specificerer placeringen af den nederste kant af det placerede element. |
| venstre | Specificerer placeringen af venstre kant af det placerede element. |
| flyde | Angiver, om en boks skal flyde eller ej. |
| klar | Specificerer placeringen af et element i forhold til flydende elementer. |
| z-index | Specificerer en lagdelings- eller stablingsrækkefølge for placerede elementer. |
| flyde over | Specificerer behandlingen af indhold, der oversvømmer elementets boks. |
| overflow-x | Specificerer, hvordan man styrer indholdet, når det oversvømmer bredden af elementets indholdsområde. |
| overflow-y | Specificerer, hvordan man styrer indholdet, når det løber over højden på elementets indholdsområde. |
| resize | Angiver, om et element kan ændres til størrelse af brugeren eller ej. |
| klip | Definerer udklippningsregionen. |
| sigtbarhed | Angiver, om et element er synligt eller ej. |
| cursoren | Specificerer cursortypen. |
| box-shadow | Anvender en eller flere drop-skygger på elementets boks. |
| box-dimensionering | Ændrer standard CSS-boksemodellen. |
| Animationsegenskaber | |
| animation | Specificerer opførelsen af alle animationer. |
| animation-forsinkelse | Angiver, hvornår animationen skal starte med en forsinkelse. |
| animation-retningen | Specificerer, om animationen skal afspille fremad, bagud eller i alternative cykler. |
| animation-varighed | Specificerer antallet af sekunder eller millisekunder, som en animation skal tage for at gennemføre en cyklus. |
| animation-fill-tilstand | Specificerer, hvordan en CSS-animation skal anvende stilarter på dens mål før og efter at den er udført. |
| animation-iteration-count | Specificerer det antal gange, en animationscyklus skal spilles, før stop. |
| animation-navn | Specificerer navnet på @keyframes-definerede animationer, der skal anvendes på det valgte element. |
| animation-play-tilstand | Angiver, om animationen kører eller er sat på pause. |
| animation-timing-funktion | Specificerer, hvordan en CSS-animation skal udvikle sig i løbet af varigheden af hver cyklus. |
Gå ud over det grundlæggende i CSS
Når du har mestret byggestenene i CSS, anbefaler vi at opgradere dine CSS-færdigheder. Kick-Start dine CSS-projekter med denne GRATIS e-bog! Start dine CSS-projekter med denne GRATIS e-bog! Denne gratis e-bog giver et bredt antal CSS-baserede eksempler, der hjælper dig med at starte dine egne webprojekter. Læs mere og lær JavaScript Hvad er JavaScript, og hvordan fungerer det? Hvad er JavaScript, og hvordan fungerer det? Hvad er Javascript? Det er et programmeringssprog, der bruges til at forbedre websider. Det inkluderer dynamisk opdatering af websider, brugergrænseflader og mere. Lad os dykke ned i hvad Javascript handler om. Læs mere for at tage dine websider til et nyt bedøvelsesniveau.
Billedkredit: Nick Karvounis på Unsplash
Udforsk mere om: Cheat Sheet, CSS, Web Design.
