Introduksjon til Cheatsheet CSS3
Cascading Stylesheet (CSS) er i utgangspunktet et stilark som brukes til å implementere utseendet og formateringen til et dokument utviklet på et markeringsspråk. CSS-spesifikasjonen opprettholdes hovedsakelig av World Wide Web Consortium (W3C). Hovedmotoren for implementering av CSS er å vise fram separasjonen av presentasjon og innhold som inkluderer fronter, layoutformater. CSS3 er den siste versjonen eller standarden for CSS etter CSS2. CSS3 er hovedsakelig en blanding av CSS2 spesifikasjoner og litt ny funksjonalitet.
Nedenfor finner du noen viktige moduler i Cheatsheet CSS3:
- Boksemodell
- velgere
- Teksteffekter
- 2D-transformasjoner
- 3D-transformasjoner
- Bilderepresentasjon
- Brukerfase
- Flere kolonneoppsett
- animasjoner
- Innstillinger og justering av innhold
I denne Cheatsheet CSS3-artikkelen vil vi diskutere hva CSS3 er og de forskjellige CSS3-kommandoene.
Kommandoer og innhold på Cheatsheet CSS3
CSS3 har et omfattende bibliotek, interaktivt, utvidbart og inneholder mange innebygde metoder for å beregne vanlige operasjoner. Nedenfor er Cheatsheet CSS3-kommandoene som er nevnt som utfører forskjellige kommandolinjefunksjoner:
|
KOMMANDO |
BESKRIVELSE |
| : fokus | Å fokusere på et element |
| : aktiv | For å vise og velge et aktivt element |
| : aktivert | For å vise et element som er aktivert |
| : krysset av | For å vise et element som er sjekket |
| : lang | For å gjøre det mulig for utvikleren å spesifisere språket for et bestemt element |
| : utvalg | For å vise elementet som er uthevet og valgt |
| : rot | For å vise rotelementet i dokumentet |
| :første barn | For å vise det første søskenelementet |
| :siste barn | For å vise det siste søskenelementet |
| :enebarn | For å vise det eneste barnelementet |
| : Første-av-typen | For å vise det første søskenelementet av en bestemt type |
| : Siste-of-type | For å vise det siste søskenelementet av en bestemt type |
| : Bare-of-type | For å vise det eneste søskenelementet av en bestemt type |
| : tom | For å vise elementet som ikke har barn |
| ::første bokstav | For å legge til en bestemt stil i den første bokstaven i en tekst |
| ::første linje | For å legge til en bestemt stil i den første linjen i en tekst |
| :: etter | For å sette inn noe innhold etter et tekstelement |
| :: før | For å sette inn noe innhold før et tekstelement |
Operatører: - De forskjellige operatortypene i CSS3 er Comparison (Relational) Operators, Assignment Operators, Logical Operators and Identity Operators.
Måleskala : Jukseark CSS3 måleskala er som følger
|
SKALA / PARAMETER |
BESKRIVELSE |
| em | Skriftstørrelse på det gjeldende elementet |
| ex | Fonthøyde på elementet |
| px | Visning av enhetspiksel |
| rem | Root element skriftstørrelse |
| vh | Viewports høyde |
| vw | Viewport's bredde |
| % | Prosentdel |
| pc | Pica |
| pt | Punkt |
Fargekode: Fargenavn = rød, blå, grønn og mørkegrønn. Finn under kodene for det samme
|
KODE |
BESKRIVELSE / BETYDNING |
| 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 | Bruker valgt farge for å tilpasse brukerfasen |
| RGBA (x, y, z, a) | For rød = rgb (255, 0, 0) |
Egenskaper for brukerfase: CSS3 Bruksfaseegenskaper for jukseark er som følger.
|
EIENDOMSVERDIER |
BESKRIVELSE |
| ikon | For å gi ikonet på området |
| resize | For å endre størrelsen på de angitte områdeelementene |
| box-sizing | For å fikse det spesifiserte elementområdet |
| utseende | Å implementere elementene som brukergrensesnittelementer |
| nav-ned | For å flytte ned elementene i henhold til tastaturets pil ned-knapp |
| nav-venstre | For å flytte til venstre elementene i henhold til venstre pilknapp |
| nav-up | For å flytte opp elementene i henhold til venstre pilknapp |
| nav høyre | For å flytte til høyre elementene i henhold til høyre pilknapp |
| omriss-offset | For å tegne konturen av det valgte tekstområdet |
Valgtyper : Jukseark CSS3 velgertyper er som følger.
|
TYPE NAVN |
BESKRIVELSE / BETYDNING |
| Universell | For å vise ethvert element |
| Type | For å vise et bestemt element |
| Klasse | For å vise flere elementer av forskjellige typer |
| id | Å vise og identifisere en enkelt spesifikk elementtype uten å påvirke andre |
| Barn | Å vise et element som direkte faller under faller under et annet element |
| gruppering | Å identifisere flere elementer av forskjellige typer |
| Tilstøtende søsken | For å hente alle elementer som har samme overordnede og elementer og er i umiddelbar rekkefølge |
| Generelle søsken | Å hente alle elementer som har samme overordnede og elementer og ikke nødvendigvis er i umiddelbar rekkefølge |
Gratis tips og triks for å bruke Cheat sheet CSS3-kommandoer: -
- CSS3-blandingsmodus kan brukes til å forene utseendet til det spesifiserte innholdet, og det gjør det også mulig for brukere å angi forskjellige bildefargeversjoner. Det er rundt 15 blandingsmodusverdier til stede i CSS3 Cheat Sheet. Det gir også en ekstra fordel fra brukerfasepresentasjonsperspektiv.
- Klipping er en annen flott funksjon i CSS. Ved hjelp av utklippsfunksjonaliteten kan en bruker definere synligheten av bildeområdet i henhold til kravet. Så hvis en bildedel faller utenfor det ønskede området, kan klipping implementeres for å skjule det ekstra bildeområdet.
- Når det gjelder CSS, kan form-inne og form-utenfor egenskaper implementeres for å pakke innholdet rundt CSS-tilpassede banen, og det kan defineres og fordeles i henhold til sluttbrukerens krav. Det gjør det i utgangspunktet mulig for en bruker å designe grensesnittet i henhold til de definerte spesifikasjonene.
- Bruk av SVG (skalerbar vektorgrafikk) -animasjon er en annen fordel for CSS3. Ved å bruke SVG med CSS3-animasjon vil grensesnittet bli mer interaktiv og SVG har også et eget DOM API.
- Kartfunksjonen blir brukt på alle elementene i en inngangsliste.
- Reduseringsfunksjonen brukes til å bruke noe beregning på en liste og returnerer en verdi
- Hover Effects kan implementeres ved hjelp av CSS3 Cheat Sheet
- En søtmeny kan implementeres ved hjelp av CSS3- og SVG-filtre, og dette hjelper en ny representativ tilnærming fra brukerfaseperspektivet
- Fra webdesignende perspektiv kan parallakseffekter produseres ved hjelp av CSS3.
- Interaktiv 3d-struktur og brukerfase kan produseres ved hjelp av CSS3
- Ved hjelp av forskjellige valgkombinasjoner kan et filformatikon ved siden av nedlastingslenken produseres ved hjelp av CSS3.
Konklusjon
I denne Cheat sheet CSS3-artikkelen har vi sett CSS3 er enkel å bruke og syntaks er enklere å huske. CSS3 kan brukes til å representere webutviklingsteknologier ved å bruke forskjellige tilnærminger og stilarkteknologier som støtter CSS3. Basert på type prosjektbehov, arbeidstid og alle andre forskjellige diskuterte aspekter, bør CSS3 brukes for å nå ønsket mål.
Anbefalte artikler
Dette har vært en guide til Cheat sheet CSS3 her vi har diskutert innhold og kommando samt gratis tips og triks for cheat sheet CSS3. Du kan også se på følgende artikkel for å lære mer -
- Cheat Sheet CSS
- Jukseark HTML
- Utrolig jukseark for UNIX
- Cheat Sheet JavaScript: Funksjoner