Introduktion til Cheatsheet CSS3
Cascading Stylesheet (CSS) er dybest set et stilarksprog, der bruges til at implementere udseendet og formateringen af et dokument, der er udviklet på et markeringssprog. CSS-specifikationen opretholdes hovedsageligt af World Wide Web Consortium (W3C). Det vigtigste moto til implementering af CSS er at vise adskillelsen af præsentation og indhold, der inkluderer fronter, layoutformater. CSS3 er den seneste version eller standard for CSS efter CSS2. CSS3 er hovedsageligt en blanding af CSS2-specifikationer og noget ny funktionalitet.
Find et par vigtige moduler i Cheatsheet CSS3 nedenfor:
- Kassemodel
- vælgere
- Teksteffekter
- 2D-transformationer
- 3D-transformationer
- Billedrepræsentation
- Brugerinterfase
- Flere kolonnelayouter
- Animationer
- Indstilling af indhold og omfordeling
I denne Cheatsheet CSS3-artikel vil vi diskutere, hvad CSS3 er, og de forskellige CSS3-kommandoer.
Kommandoer og indhold på Cheatsheet CSS3
CSS3 har et omfattende bibliotek, interaktivt, udvideligt og indeholder mange indbyggede metoder til beregning af almindelige operationer. Nedenfor er de nævnte Cheatsheet CSS3-kommandoer, der udfører forskellige kommandolinjefunktioner:
|
KOMMANDO |
BESKRIVELSE |
| : fokus | At fokusere på et element |
| : aktiv | For at få vist og vælge et aktivt element |
| : aktiveret | Sådan vises et element, der er aktiveret |
| : tjekket | Sådan vises et element, der er markeret |
| : lang | For at gøre det muligt for udvikleren at specificere sproget for et specifikt element |
| : valg | For at få vist det element, der er fremhævet og valgt |
| : rod | Sådan vises rodelementet i dokumentet |
| : Første-barn | For at få vist det første søskenelement |
| :sidste barn | For at få vist det sidste søskenelement |
| :enebarn | For at vise det eneste underordnede element |
| : Første af typen | For at vise det første søskendeelement af en bestemt type |
| : Sidste-of-typen | For at få vist det sidste søskendeelement af en bestemt type |
| : Kun-of-typen | For at vise det eneste søskenelement af en bestemt type |
| : tom | Viser det element, der ikke har børn |
| :: første bogstaver | For at tilføje en bestemt stil til det første bogstav i en tekst |
| ::første linje | For at tilføje en bestemt stil til den første linje i en tekst |
| :: efter | Sådan indsættes noget indhold efter et tekstelement |
| :: Før | Sådan indsættes noget indhold før et tekstelement |
Operatører: - De forskellige typer af operatører i CSS3 er Comparison (Relational) Operators, Assignment Operators, Logical Operators og Identity Operators.
Måleskalaer: Snydeark CSS3 måleskalaer er som følger
|
SKALA / PARAMETER |
BESKRIVELSE |
| em | Skriftstørrelse på det aktuelle element |
| ex | Elementets skrifthøjde |
| px | Visning af enhedspixel |
| rem | Root element skriftstørrelse |
| vh | Viewport's højde |
| vw | Viewport's bredde |
| % | Procent |
| pc | Pica |
| pt | Punkt |
Farvekode: Farvenavn = rød, blå, grøn og mørkegrøn. Find nedenunder koder for det samme
|
KODE |
BESKRIVELSE / BETYDELSE |
| rgb (x, y, z) | For rød = rgb (255, 0, 0) |
| rgb (x%, y%, z%) | For rød = rgb (100%, 0, 0) |
| #rrggbb | For rød = # ff000 |
| flabor | Bruger valgt farve til at tilpasse brugerfasen |
| RGBA (x, y, z, a) | For rød = rgb (255, 0, 0) |
Brugerinterfaseegenskaber: CSS3 Cheat ark brugerfaseegenskaber er som følger.
|
EJENDOMSVÆRDIER |
BESKRIVELSE |
| ikon | At give ikonet på området |
| resize | Sådan ændrer du størrelsen på de specificerede områdeelementer |
| box-dimensionering | For at fastsætte det specificerede elementområde |
| udseende | At implementere elementerne som UI-elementer |
| nav-down | Sådan flytter du elementerne ned efter tastaturets pil ned-knap |
| nav-venstre | For at flytte til venstre elementerne i henhold til tastaturets venstre pilknap |
| nav-up | For at flytte elementerne op i henhold til tastaturets venstre pilknap |
| nav-højre | For at flytte elementerne til højre i henhold til højre-pilknappen på tastaturet |
| skitse-offset | For at tegne konturen af det valgte tekstområde |
Vælgertyper : Snydereark CSS3-valgtyper er som følger.
|
TYPE NAVN |
BESKRIVELSE / BETYDELSE |
| Universel | At vise ethvert element |
| Type | At vise ethvert specifikt typeelement |
| klasse | Sådan vises flere elementer af forskellige typer |
| Id | At vise og identificere en enkelt bestemt elementtype uden at påvirke andre |
| Barn | At vise et element, der direkte falder under, falder ind under et andet element |
| Gruppering | At identificere flere elementer af forskellige typer |
| Tilstødende søskende | At hente alle elementer, der har den samme overordnede og elementer og er i den umiddelbare rækkefølge |
| Generelt søskende | At hente alle elementer, der har den samme overordnede og elementer og ikke nødvendigvis er i den umiddelbare rækkefølge |
Gratis tip og tricks ved brug af Cheat sheet CSS3-kommandoer: -
- CSS3-blandingstilstand kan bruges til at forene udseendet på det specificerede indhold, og det giver også brugere mulighed for at indstille forskellige billedfarveversioner. Der er omkring 15 blandingsfunktionsværdier til stede i CSS3 Cheat Sheet. Det tilføjer også en ekstra fordel fra perspektivet for brugerfaserepræsentation.
- Klipning er en anden stor funktion ved CSS. Ved hjælp af klipfunktionen kan en bruger definere synligheden af billedområdet i henhold til kravet. Så hvis en billeddel falder uden for det ønskede område, kan klipning implementeres for at skjule det ekstra billedområde.
- I tilfælde af CSS kan form-indvendige og form-udvendige egenskaber implementeres for at pakke indholdet rundt om den CSS-tilpassede sti, og det kan defineres og fordeles i henhold til slutbrugerens krav. Det giver grundlæggende en bruger mulighed for at designe interfasen i henhold til de definerede specifikationer.
- Brug af SVG (skalerbar vektorgrafik) -animation er en anden fordel for CSS3. Brug af SVG med CSS3-animation, interfasen bliver mere interaktiv, og SVG har også sin egen DOM API.
- Kortfunktionen anvendes til alle elementerne i en inputliste.
- Funktionen Reducer bruges til at anvende en vis beregning på en liste og returnerer en værdi
- Hover Effects kan implementeres vha. CSS3 Cheat Sheet
- En gooey-menu kan implementeres ved hjælp af CSS3- og SVG-filtre, og dette hjælper en ny repræsentativ tilgang fra brugerfaseperspektivet
- Fra webdesignende perspektiv kan parallaxeffekter produceres ved hjælp af CSS3.
- Interaktiv 3d-struktur og brugerfase kan produceres ved hjælp af CSS3
- Ved hjælp af forskellige valgkombinationer kan et filformatikon ved siden af downloadlinket produceres ved hjælp af CSS3.
Konklusion
I denne Cheat sheet CSS3-artikel har vi set CSS3 er let at bruge, og dens syntaks er lettere at huske. CSS3 kan bruges til repræsentation af webudviklingsteknologier ved at bruge forskellige tilgange og stilarkteknologier, der understøtter CSS3. Baseret på typen af projektbehov, arbejdstid og alle andre forskellige diskuterede aspekter, bør CSS3 bruges til at nå det ønskede mål.
Anbefalede artikler
Dette har været en guide til Snydeark CSS3 her, vi har diskuteret indhold og kommando samt gratis tip og tricks fra snyderik CSS3. Du kan også se på følgende artikel for at lære mere -
- Cheat Sheet CSS
- Snyd ark HTML
- Fantastisk snyderi til UNIX
- Cheat Sheet JavaScript: Funktioner