Introduktion till Cheatsheet CSS3
Cascading Stylesheet (CSS) är i princip ett stilarkspråk som används för att implementera utseendet och formateringen av ett dokument utvecklat på ett markeringsspråk. CSS-specifikationen upprätthålls huvudsakligen av World Wide Web Consortium (W3C). Huvudmotorn för implementering av CSS är att visa upp separationen av presentation och innehåll som inkluderar fronter, layoutformat. CSS3 är den senaste versionen eller standarden för CSS efter CSS2. CSS3 är främst en blandning av CSS2-specifikationer och en del ny funktionalitet.
Hitta nedan några viktiga moduler i Cheatsheet CSS3:
- Boxmodell
- väljare
- Texteffekter
- 2D-transformationer
- 3D-transformationer
- Bildrepresentation
- Användarfas
- Flera kolumnlayouter
- animationer
- Justering av innehåll och omfördelning
I den här fuskarklagen CSS3-artikeln kommer vi att diskutera vad CSS3 är och de olika CSS3-kommandona.
Kommandon och innehåll på Cheatsheet CSS3
CSS3 har ett omfattande bibliotek, interaktivt, utbyggbart och innehåller många inbyggda metoder för att beräkna vanliga operationer. Nedan visas Cheatsheet CSS3-kommandon som nämns som utför olika kommandoradsoperationer:
|
KOMMANDO |
BESKRIVNING |
| : fokus | Att fokusera på ett element |
| : aktiva | För att visa och välja ett aktivt element |
| : aktiverad | För att visa ett element som är aktiverat |
| : kontrollerad | För att visa ett element som är markerat |
| : lang | För att utvecklaren ska kunna ange språket för ett specifikt element |
| : urval | Visa elementet som är markerat och valt |
| : rot | För att visa rotelementet i dokumentet |
| :förstfödde | För att visa det första syskonelementet |
| :sista barnet | För att visa det sista syskonelementet |
| :enda barnet | För att visa det enda barnelementet |
| : Första i-typ | För att visa det första syskonelementet av en viss typ |
| : Sista av typ | För att visa det sista syskonelementet av en viss typ |
| : Endast-of-typ | För att visa det enda syskonelementet av en viss typ |
| : tom | För att visa elementet som inte har barn |
| ::första bokstaven | Lägga till en specifik stil i den första bokstaven i en text |
| ::Första linjen | Lägga till en specifik stil i den första raden i en text |
| :: efter | För att infoga lite innehåll efter ett textelement |
| :: innan | För att infoga lite innehåll före ett textelement |
Operatörer: - De olika typerna av operatörer i CSS3 är jämförande (relationella) operatörer, tilldelningsoperatörer, logiska operatörer och identitetsoperatörer.
Mätskala: Fuskark CSS3-mätvåg är följande
|
SKALA / PARAMETER |
BESKRIVNING |
| em | Teckenstorlek för det aktuella elementet |
| ex | Teckens höjd på elementet |
| px | Visningsenhetspixel |
| rem | Root elementstorlek |
| vh | Viewport's höjd |
| vw | Viewport's bredd |
| % | Procentsats |
| pc | Pica |
| pt | Punkt |
Färgkod: Färgnamn = röd, blå, grön och mörkgrön. Hitta nedanför koderna för samma
|
KODA |
BESKRIVNING / BETYDNING |
| rgb (x, y, z) | För röd = rgb (255, 0, 0) |
| rgb (x%, y%, z%) | För röd = rgb (100%, 0, 0) |
| #RRGGBB | För röd = # ff000 |
| flabor | Användar vald färg för att anpassa användarinterfasen |
| RGBA (x, y, z, alfa) | För röd = rgb (255, 0, 0) |
Användarinterfasegenskaper: CSS3 Cheat ark användarfasegenskaper är följande.
|
FASTIGHETSVÄRDER |
BESKRIVNING |
| ikon | För att tillhandahålla ikonen på området |
| storleksändring | För att ändra storlek på de angivna områdeselementen |
| box-limning | För att fixa det angivna elementområdet |
| utseende | För att implementera elementen som UI-element |
| nav-down | För att flytta ner elementen enligt tangentbordets pil ned-knapp |
| nav-vänster | För att flytta till vänster elementen enligt tangentbordets vänstra pilknapp |
| nav-up | För att flytta upp elementen enligt tangentbordets vänstra pilknapp |
| nav-höger | För att flytta till höger elementen enligt tangentbordets högra pilknapp |
| kontur-offset | För att rita konturen för det markerade textområdet |
Väljartyper : Fuskblad CSS3-väljartyper är följande.
|
TYPNAMN |
BESKRIVNING / BETYDNING |
| Universell | För att visa något element |
| Typ | För att visa något specifikt elementelement |
| Klass | För att visa flera element av olika typer |
| Id | Att visa och identifiera en enda specifik elementtyp utan att påverka andra |
| Barn | Att visa ett element som direkt faller under faller under ett annat element |
| gruppera | Att identifiera flera element av olika typer |
| Intilliggande syskon | Att hämta alla element som har samma förälder och element och är i omedelbar sekvens |
| Allmän syskon | Att hämta alla element som har samma förälder och element och inte nödvändigtvis är i omedelbar sekvens |
Gratis tips och tricks för att använda Cheat sheet CSS3-kommandon: -
- CSS3-blandningsläge kan användas för att förena utseendet på det angivna innehållet och det gör det också möjligt för användare att ställa in olika bildfärgsversioner. Det finns cirka 15 värden för blandningsläge i CSS3 Cheat Sheet. Det ger också en extra fördel från perspektiv för användarinterfasrepresentation.
- Klippning är en annan bra funktion i CSS. Med hjälp av klippfunktionen kan en användare definiera bildens synlighet enligt kravet. Så om någon bilddel faller utanför det önskade området kan klippning implementeras för att dölja det extra bildområdet.
- När det gäller CSS kan form-inuti och form-utvändiga egenskaper implementeras för att svepa innehållet runt CSS-anpassade sökvägen och det kan definieras och fördelas enligt slutanvändarnas krav. Det gör att användaren i princip kan utforma gränssnittet enligt de definierade specifikationerna.
- Användning av SVG (skalbar vektorgrafik) -animering är en annan fördel för CSS3. Genom att använda SVG med CSS3-animering kommer intervallet att bli mer interaktivt och SVG har också ett eget DOM-API.
- Kartfunktionen kommer att tillämpas på alla objekt i en inmatningslista.
- Funktionen för att minska används för att tillämpa viss beräkning på en lista och returnerar ett värde
- Hover Effects kan implementeras med CSS3 Cheat Sheet
- En gooey-meny kan implementeras med hjälp av CSS3- och SVG-filter och detta hjälper en ny representativ strategi ur användarfasperspektivet
- Från webbdesignperspektivet kan parallaxeffekter produceras med CSS3.
- Interaktiv 3D-struktur och användarinterfas kan produceras med CSS3
- Med hjälp av olika väljarkombinationer kan en filformatikon bredvid nedladdningslänken produceras med CSS3.
Slutsats
I den här fusksidan CSS3-artikeln har vi sett CSS3 vara lätt att använda och syntaxen är lättare att komma ihåg. CSS3 kan användas för att representera webbutvecklingsteknologier genom att använda olika tillvägagångssätt och stilarkteknologier som stöder CSS3. Baserat på typ av projektbehov, arbetstid och alla andra olika diskuterade aspekter, bör CSS3 användas för att nå önskat mål.
Rekommenderade artiklar
Detta har varit en guide till fuskark CSS3 här vi har diskuterat innehåll och kommando samt gratis tips och tricks för fuskark CSS3. Du kan också titta på följande artikel för att lära dig mer -
- Cheat Sheet CSS
- Fuskark HTML
- Fantastiskt fuskblad för UNIX
- Cheat Sheet JavaScript: Funktioner