De viktigaste CSS3-egenskaperna fuskark
Annons Cascading Style Sheets eller CSS definierar utseendet och känslan på webben som vi känner till det. Medan HTML och JavaScript fokuserar på den funktionella sidan av webben, behandlar CSS de visuella aspekterna av det. Behöver du hjälp med att navigera i världen som är CSS3? Ladda ner vårt "Essential CSS3 Properties Cheat Sheet" idag! När du
Annons
Cascading Style Sheets eller CSS definierar utseendet och känslan på webben som vi känner till det. Medan HTML och JavaScript fokuserar på den funktionella sidan av webben, behandlar CSS de visuella aspekterna av det.
Behöver du hjälp med att navigera i världen som är CSS3? Ladda ner vårt "Essential CSS3 Properties Cheat Sheet" idag!När du har lärt dig hur du bygger statiska webbsidor med HTML är det dags att upptäcka hur man utformar dem och gör dem presentabla med CSS. Och våra CSS3-egenskaper fuskblad nedan kan hjälpa dig med det! Det täcker den väsentliga syntaxen du behöver veta om i CSS3, som är den senaste versionen av CSS.
En kunskap om CSS hjälper dig att anpassa färger, teckensnitt, gränser, bakgrunder, layouter och mycket mer på webbsidor på ett strömlinjeformat sätt. Dessutom är det praktiskt när du utformar webb- och mobilapplikationer också.
GRATIS NEDLADDNING: Detta fuskark är tillgängligt som en nedladdningsbar PDF från vår distributionspartner, TradePub. Du måste fylla i ett kort formulär för att få åtkomst till det endast för första gången. Ladda ner Essential CSS3 Properties Cheat Sheet.
De viktigaste CSS3-egenskaperna fuskark
| Genväg | Verkan |
|---|---|
| Bakgrundsegenskaper | |
| bakgrund | Definierar olika bakgrundsegenskaper inom en deklaration. |
| background-fastsättning | Anger om bakgrundsbilden är fixerad eller rullar med webbsidan. |
| bakgrundsfärg | Definierar bakgrundsfärgen för ett element på webbsidan. |
| bakgrundsbild | Definierar ett elements bakgrundsbild. |
| background-clip | Anger hur långt bakgrundsbilderna eller färgen sträcker sig för ett element. |
| background-ursprung | Anger placeringsområdet för bakgrundsbilderna. |
| bakgrund-positionen | Definierar ursprunget till en bakgrundsbild. |
| bakgrund-repeat | Anger hur bakgrundsbilden ska kaklas. |
| background-storlek | Anger storleken på bakgrundsbilderna. |
| Gränseegenskaper | |
| gräns | Anger kantbredd, stil och färg för alla fyra sidor av ett element. |
| border-botten | Ställer in bredd, stil och färg för den nedre kanten av ett element. |
| border-bottom-färg | Ställer in färgen på bottengränsen för ett element. |
| border-bottom-left-radie | Definierar formen på ett elements nedre vänstra kanthörn. |
| border-bottom-right-radie | Definierar formen på ett elements nedre högra kanthörn. |
| border-bottom-stil | Ställer in stilen på den nedre gränsen för ett element. |
| border-bottom-bredd | Ställer in bredden på bottengränsen för ett element. |
| gräns färg | Ställer in färgen på gränsen på alla fyra sidor av ett element. |
| border-image | Anger hur en bild ska användas i stället för kantstilar. |
| border-image-början | Anger det belopp som gränsbildområdet sträcker sig utöver gränslådan. |
| border-image-repeat | Anger hur kantbilden ska kaklas. |
| border-image-skiva | Anger de inre förskjutningarna för bildgränsen. |
| border-image-source | Anger platsen för bilden som ska användas som en kant. |
| border-image-bredd | Anger bredden på bildgränsen. |
| border-vänster | Ställer in bredd, stil och färg på vänsterkanten på ett element. |
| border-vänster-färg | Ställer in färgen på vänsterkanten på ett element. |
| border-vänster-stil | Ställer in stilen på vänsterkanten för ett element. |
| border-vänster-bredd | Ställer in bredden på vänsterkanten på ett element. |
| border-radius | Definierar formen på gränshörnen på ett element. |
| border-right | Ställer in bredden, stilen och färgen på högerkanten på ett element. |
| border-right-färg | Ställer in färgen på högerkanten på ett element. |
| border-right-stil | Ställer in stilen på högerkanten för ett element. |
| border-right-bredd | Ställer in bredden på högerkanten på ett element. |
| border-style | Ställer in stilen på gränsen på alla fyra sidor av ett element. |
| border-top | Ställer in bredd, stil och färg på det övre gränsen för ett element. |
| border-top-färg | Ställer in färgen på den övre gränsen för ett element. |
| border-top-left-radie | Definierar formen på ett elementets övre vänstra kanthörn. |
| border-top-right-radie | Definierar formen på det övre högra gränshörnet på ett element. |
| border-top-stil | Ställer in stilen på den övre gränsen för ett element. |
| border-top-bredd | Ställer in bredden på det övre gränsen för ett element. |
| gränsbredd | Ställer in bredden på gränsen på alla fyra sidor av ett element. |
| Färgegenskaper | |
| Färg | Definierar och ställer in färgen för text. |
| opacitet | Definierar transparens hos ett element. |
| Dimension Egenskaper | |
| höjd | Definierar höjden på ett element. |
| maximal höjd | Definierar den maximala höjden för ett element. |
| maximal bredd | Definierar maximal elementbredd för ett element. |
| min-höjd | Definierar minimihöjden för ett element. |
| min-bredd | Definierar minsta bredd för ett element. |
| bredd | Ange bredd på ett element. |
| Genererade innehållsegenskaper | |
| innehåll | Infogar genererat innehåll. |
| citat | Anger citattecken för inbäddade offert. |
| counter-reset | Skapar eller återställer ett eller flera räknare. |
| counter-inkrement | Ökar ett eller flera räknarvärden. |
| Flexibel lådalayout | |
| rikta-innehåll | Anger justeringen av flexibla behållares föremål. |
| ALIGN-objekt | Anger standardinställningen för objekt. |
| rikta-själv | Anger justeringen för valda objekt. |
| böja | Anger komponenter med flexibel längd. |
| flex-basis | Anger den ursprungliga huvudstorleken för flexobjektet. |
| flex-riktningen | Anger riktningen för de flexibla artiklarna. |
| flex-flöde | En kort egenskap för flex-riktning och flex-wrap-egenskaper. |
| flex-växa | Anger hur flexartikeln kommer att växa relativt de andra artiklarna i flexbehållaren. |
| flex-krympa | Anger hur flexobjektet kommer att krympa relativt de andra artiklarna i flexbehållaren. |
| flex-wrap | Anger om de flexibla artiklarna ska lindas eller inte. |
| motivera-innehåll | Anger hur flexobjekt är inriktade längs flexaxelns huvudaxel efter att alla flexibla längder och auto marginaler har lösts. |
| beställa | Anger i vilken ordning en flex-objekt visas och läggs ut i en flex-behållare. |
| Teckensnittegenskaper | |
| font | Definierar olika typsnittegenskaper inom en deklaration som typsnittstil, typsnittsvariant, typsnittsvikt, typstorlek / linjehöjd och typsnittfamilj. |
| typsnittsfamilj | Definierar en lista med teckensnitt för element. |
| textstorlek | Definierar teckensnittsstorleken för texten. |
| font-size-justera | Bibehåller läsbarheten för text när teckensnitt fallback uppstår. |
| font-stretch | Väljer ett normalt, kondenserat eller utökat ansikte från ett teckensnitt. |
| typsnitt | Definierar teckensnittstilen för texten. |
| font-variant | Anger teckensnittsvarianten. |
| font-weight | Anger teckensnittets vikt. |
| Listegenskaper | |
| list-style | Definierar visningsstilen för en lista och listelement. |
| list-style-image | Anger bilden som ska användas som listobjektmarkör. |
| list-style-positionen | Anger positionen för listobjektmarkören. |
| list-style-type | Anger markörstil för ett listobjekt. |
| Marginalegenskaper | |
| marginal | Ställer in marginalen på alla fyra sidor av elementet. |
| margin-bottom | Ställer in undermarginalen för elementet. |
| margin-vänster | Ställer in vänstermarginalen för elementet. |
| margin-höger | Ställer in höger marginal för elementet. |
| margin-top | Anger elementets övre marginal. |
| Egenskaper för layout av flera kolumner | |
| kolonn-count | Anger antalet kolumner i ett flerkolumnelement. |
| kolonn-fill | Anger hur kolumner ska fyllas. |
| kolonn-gap | Anger avståndet mellan kolumnerna i ett flerkolumnelement. |
| kolonn-regel | Anger en rak linje, eller "regel", som ska dras mellan varje kolumn i ett flerspaltelement. |
| kolonn-regel-färg | Anger färgen på reglerna som dras mellan kolumner i en layout med flera kolumner. |
| kolumnregel stil | Anger stilen för regeln som dras mellan kolumnerna i en flerspelarslayout. |
| kolonn-regel-bredd | Anger bredden på regeln som dras mellan kolumnerna i en multi-kolumnlayout. |
| kolonn-span | Anger hur många kolumner ett element spänner över i en multi-kolumnlayout. |
| kolumnbredd | Anger den optimala bredden på kolumnerna i ett flerspaltelement. |
| kolonner | En kortvarig egenskap för inställning av kolumnbredd och kolumnräkningsegenskaper. |
| kolonn-count | Anger antalet kolumner i ett flerkolumnelement. |
| Skissegenskaper | |
| översikt | Ställer in bredd, stil och färg för alla fyra sidor av elementets kontur. |
| skissera-färg | Ställer in färgen på konturen. |
| skissera-offset | Ställ in utrymmet mellan en kontur och kantens element. |
| disposition-stil | Ställer in en stil för en kontur. |
| kontur-bredd | Ställer in bredd på konturen. |
| Polstringsegenskaper | |
| stoppning | Ställer in stoppningen på alla fyra sidor av elementet. |
| padding-botten | Ställer in stoppningen på undersidan av ett element. |
| padding-vänster | Ställer in stoppningen på vänster sida av ett element. |
| padding-höger | Ställer in stoppningen på höger sida av ett element. |
| padding-top | Ställer in stoppningen på ovansidan av ett element. |
| Utskriftsegenskaper | |
| page-break-efter | Infogar en sidbrytning efter ett element. |
| page-break-before | Infogar en sidbrytning före ett element. |
| page-break-inside | Infogar en sidbrytning i ett element. |
| Tabellegenskaper | |
| border-kollaps | Anger om tabellcellgränser är anslutna eller separerade. |
| border-avstånd | Ställer in avståndet mellan gränserna för angränsande tabellceller. |
| bildtext-side | Anger positionen för tabellens bildtexter. |
| tomma-celler | Visar eller döljer gränser och bakgrunder för tomma tabellceller. |
| tabell-layout | Anger en tabelllayoutalgoritm. |
| border-kollaps | Anger om tabellcellgränser är anslutna eller separerade. |
| Textegenskaper | |
| riktning | Definierar textriktning / skrivriktning. |
| tab-storlek | Anger längden på flikens karaktär. |
| text-align | Ställer in den horisontella justeringen av inlineinnehållet. |
| text-align-sista | Anger hur den sista raden i ett block eller en linje höger innan en tvingad radbrytning justeras när textjustering är motiverat. |
| text-decoration | Anger den dekoration som läggs till i texten. |
| text-decoration-färg | Anger färgen på textdekorationslinjen. |
| text-decoration-line | Anger vilken typ av linjedekorationer som läggs till elementet. |
| text-decoration-stil | Anger stilen för raderna som anges av egenskapen text-dekoration-rad |
| text-strecksatsen | Intrycker den första raden med text. |
| text-motivera | Anger den motiveringsmetod som ska användas när egenskapen för textjustering är inställd på att motivera. |
| text-overflow | Anger hur textinnehållet ska visas när det översvämmar blockbehållarna. |
| text-shadow | Tillämpar en eller flera skuggor på textinnehållet i ett element. |
| text-trans | Förvandlar texten. |
| radavstånd | Ställer in höjden mellan textrader. |
| vertikal-align | Ställer in den vertikala positioneringen för ett element relativt den aktuella textbaslinjen. |
| teckenavstånd | Ställer in det extra avståndet mellan bokstäver. |
| word-avstånd | Ställer in avståndet mellan ord. |
| white-space | Anger hur vitt utrymme inuti elementet ska hanteras. |
| word-break | Anger hur man bryter rader inom ord. |
| word-wrap | Anger om ord ska brytas när innehållet överskrider behållarens gränser. |
| Transformera egenskaper | |
| backface-synlighet | Anger om "baksidan" av ett transformerat element är synligt när du vänder mot användaren. |
| perspektiv | Definierar perspektivet från vilket alla barnelement i objektet visas. |
| perspektiv-ursprung | Definierar ursprung (försvinnspunkten för 3D-utrymmet) för perspektivegenskapen. |
| omvandla | Tillämpar en 2D- eller 3D-transformation på ett element. |
| transform-ursprung | Definierar ursprunget för transformation för ett element. |
| omvandla stil | Anger hur kapslade element återges i 3D-utrymme. |
| Övergångsegenskaper | |
| övergång | Definierar övergången mellan två tillstånd av ett element. |
| övergång-fördröjning | Anger när övergångseffekten ska starta. |
| Övergångsperiod | Anger antalet sekunder eller millisekunder som en övergångseffekt bör ta för att slutföra. |
| övergång-fastighet | Anger namnen på de CSS-egenskaper som en övergångseffekt ska tillämpas på. |
| övergång-timing-funktion | Anger hastighetskurvan för övergångseffekten. |
| Egenskaper för visuell formatering | |
| visa | Anger hur ett element visas på skärmen. |
| placera | Anger hur ett element är placerat. |
| topp | Anger platsen för den övre kanten på det positionerade elementet. |
| höger | Anger platsen för det positionerade elementets högra kant. |
| botten | Anger platsen för det positionerade elementets underkant. |
| vänster | Anger platsen för det positionerade elementets vänstra kant. |
| flyta | Anger om en ruta ska flyta eller inte. |
| klar | Anger placeringen av ett element i förhållande till flytande element. |
| z-index | Anger en lager- eller staplingsordning för positionerade element. |
| svämma över | Anger behandlingen av innehåll som rinner över elementets ruta. |
| överströmnings-x | Anger hur man ska hantera innehållet när det går över bredden på elementets innehållsområde. |
| överströmnings-y | Anger hur man ska hantera innehållet när det går över höjden på elementets innehållsområde. |
| ändra storlek | Anger om användaren ska ändra storlek på ett element eller inte. |
| klämma | Definierar klippregionen. |
| synlighet | Anger om ett element är synligt eller inte. |
| markören | Anger typ av markör. |
| box-shadow | Tillämpar en eller flera drop-skuggor på elementets ruta. |
| box-dimensionering | Ändrar standardmodellen för CSS-rutan. |
| Animationsegenskaper | |
| animering | Anger beteendet för alla animationer. |
| animering-fördröjning | Anger när animeringen börjar med en fördröjning. |
| animering-riktningen | Anger om animeringen ska spela framåt, bakåt eller i alternativa cykler. |
| animering-varaktighet | Anger antalet sekunder eller millisekunder som en animering ska ta för att slutföra en cykel. |
| animation-fill-mode | Anger hur en CSS-animation ska tillämpa stilar på dess mål före och efter att den körs. |
| animering-iteration-count | Anger hur många gånger en animationscykel ska spelas innan du stoppar. |
| animering-namn | Anger namnet på @keyframes definierade animationer som ska tillämpas på det valda elementet. |
| animation-play-state | Anger om animationen körs eller pausas. |
| animering-timing-funktion | Anger hur en CSS-animation ska utvecklas under varaktigheten av varje cykel. |
Gå utöver grunderna i CSS
När du har behärskat byggstenarna i CSS rekommenderar vi att du uppgraderar dina CSS-färdigheter. Kick-Start Dina CSS-projekt med denna GRATIS e-bok! Starta dina CSS-projekt med denna GRATIS e-bok! Den här gratis e-boken innehåller ett stort antal CSS-baserade exempel som hjälper dig att starta egna webbprojekt. Läs mer och lära dig JavaScript Vad är JavaScript och hur fungerar det? Vad är JavaScript och hur fungerar det? Vad är Javascript? Det är ett programmeringsspråk som används för att förbättra webbsidor. Det inkluderar dynamisk uppdatering av webbsidor, användargränssnitt och mer. Låt oss dyka in i vad Javascript handlar om. Läs mer för att ta dina webbsidor till en ny fantastisk nivå.
Bildkredit: Nick Karvounis på Unsplash
Utforska mer om: Cheat Sheet, CSS, Web Design.
