Cheat sheet CSS3 - Egyszerű és hasznos útmutató a CSS3-hoz

Bevezetés a CSS3 Cheatsheetbe

A lépcsőzetes stíluslap (CSS) alapvetően egy stíluslap nyelv, amelyet a jelölési nyelven kidolgozott dokumentum megjelenésének és formázásának megvalósításához használnak. A CSS specifikációját főként a World Wide Web Consortium (W3C) tartja fenn. A CSS megvalósításának fő célja a bemutatás és a tartalom szétválasztásának bemutatása, amely frontokat, elrendezési formátumokat tartalmaz. A CSS3 a CSS2 utáni legújabb verziója vagy szabványa. A CSS3 elsősorban a CSS2 előírások és néhány új funkció keveréke.

Az alábbiakban található a Cheatsheet CSS3 néhány fontos modulja:

Doboz modell
Szelektorok
Szöveges effektusok
2D transzformációk
3D-s átalakulások
Kép ábrázolása
Felhasználói interfázis
Több oszlop elrendezése
animációk
Tartalom beállítása és újraelosztás

Ebben a Cheatsheet CSS3 cikkben megvitatjuk, mi a CSS3 és a különféle CSS3 parancsokat.

Parancsok és tartalom a CSS3 Cheatsheet oldalon

A CSS3 kiterjedt könyvtárral rendelkezik, interaktív, bővíthető és számos beépített módszert tartalmaz a közös műveletek kiszámításához. Az alábbiakban felsoroljuk a Cheatsheet CSS3 parancsokat, amelyek különféle parancssori műveleteket hajtanak végre:

PARANCS	LEÍRÁS
: fókusz	Összpontosítás egy elemre
: aktív	Az aktív elem megjelenítéséhez és kiválasztásához
: engedélyezve	Az engedélyezett elem megjelenítéséhez
: ellenőrizve	Ellenőrzött elem megjelenítéséhez
: lang	Annak lehetővé tétele, hogy a fejlesztő meghatározza egy adott elem nyelvét
: kiválasztás	A kijelölt és kijelölt elem megjelenítéséhez
: gyökér	A gyökér elem megjelenítéséhez a dokumentumban
:első gyerek	Az első testvér elem megjelenítéséhez
:utolsó gyerek	Az utolsó testvér elem megjelenítéséhez
:egyedüli gyermek	Az egyetlen gyermek elem megjelenítése
: Az első-of-típusú	Egy adott típusú testvér első elemének megjelenítése
: Last-of-típusú	Egy adott típus utolsó testvére elemének megjelenítése
: Csak-a-típusú	Egy adott típus egyetlen testvére elemének megjelenítése
: üres	Az elem megjelenítéséhez, amelynek nincs gyermeke
::első levél	Adott stílus hozzáadása a szöveg első betűjéhez
::első sor	Adott stílus hozzáadása a szöveg első sorához
:: utána	Bizonyos tartalom beszúrása a szöveg elem után
:: korábban	Tartalom beszúrása a szöveges elem elé

Operátorok: - A CSS3 operátorok különféle típusai: Összehasonlító (relációs) operátorok, Hozzárendelési operátorok, Logikai operátorok és Identitás operátorok.

Mérési skálák: A cheat sheet CSS3 mérési skála a következő

MÉRLEG / PARAMÉTER	LEÍRÁS
em	Az aktuális elem betűméretét
volt	Az elem betűmagassága
px	Az eszköz pixelének megtekintése
rem	Gyökér elem betűméret
vh	A kilátó magassága
vw	A nézetablak szélessége
%	Százalék
pc	Ciceró
pt	Pont

Színkód: Színnév = piros, kék, zöld és sötétzöld. Az alábbiakban keresse meg ugyanazokat a kódokat

KÓD	LEÍRÁS / JELENTÉS
RGB (x, y, z)	Piros esetén: rgb (255, 0, 0)
RGB (x%, y%, z%)	Piros: rgb (100%, 0, 0)
#rrggbb	Piros = # ff000 esetén
flabor	A felhasználó által kiválasztott szín a felhasználói interfázis testreszabásához
RGBA (x, y, z, alfa)	Piros esetén: rgb (255, 0, 0)

A felhasználói interfázis tulajdonságai: CSS3 A cheat lap felhasználói interfázis tulajdonságai a következők.

Tulajdonságok	LEÍRÁS
ikon	Annak érdekében, hogy az ikon megjelenjen a területen
átméretezés	A megadott terület elemek átméretezése
box-méretezés	A megadott elemterület rögzítése
megjelenés	Az elemek felhasználói felületként történő megvalósítása
nav-down	Az elemek mozgatása lefelé a billentyűzet lefelé mutató nyílának megfelelően
nav-bal	Az elemek balra mozgatása a billentyűzet bal nyílgombja szerint
nav-up	Az elemek felfelé mozgatásához a billentyűzet bal nyílgombja szerint
nav-jobbra	Az elemek jobbra mozgatásához a billentyűzet jobb nyílgombja szerint
vázlat-eltolás	A kiválasztott szövegterület vázlatának rajzolása

Választó típusok : A cheat sheet CSS3 választó típusok a következők.

TÍPUS NEVE	LEÍRÁS / JELENTÉS
Egyetemes	Bármely elem megjelenítéséhez
típus	Bármely meghatározott elem elem megjelenítéséhez
Osztály	Különböző típusú több elem megjelenítése
Id	Egy adott elemtípus megjelenítése és azonosítása anélkül, hogy másokat befolyásolna
Gyermek	Egy elem közvetlen megjelenítéséhez egy másik elem alá tartozik
Csoportosítás	Különböző típusú több elem azonosítása
Szomszédos testvér	Az összes elem szkennelése, amelyeknek azonos szülője és elemei vannak, és amelyek azonnali sorrendben vannak
Testvér tábornok	Az összes elem lekérése, amelyeknek azonos szülője és elemei vannak, és amelyek nem feltétlenül a közvetlen sorrendben vannak

Ingyenes tippek és trükkök a CSS3 parancsok Cheat sheet használatához: -

A CSS3 keverési mód használható a megadott tartalom megjelenésének egységesítésére, és lehetővé teszi a felhasználók számára a kép különböző színű verzióinak beállítását is. Körülbelül 15 keverési mód érték jelen van a CSS3 Cheat Sheet-ben. További előnyt jelent a felhasználói interfázisok ábrázolása szempontjából.
A vágás a CSS másik nagyszerű tulajdonsága. A vágófunkció segítségével a felhasználó meghatározhatja a képterület láthatóságát a követelménynek megfelelően. Tehát, ha valamelyik képrész kívül esik a kívánt területen, akkor a kivágást meg lehet valósítani az extra képterület elrejtése érdekében.
A CSS esetében az alak-belső és az alak-külső tulajdonságok megvalósíthatók a tartalom körültekercselésére a CSS testreszabott elérési útja körül, és meghatározhatók és kioszthatók a végfelhasználó igényei szerint. Alapvetően lehetővé teszi a felhasználó számára az interfázis megtervezését a meghatározott specifikációk szerint.
Az SVG (méretezhető vektorgrafika) animáció használata a CSS3 másik előnye. Az SVG használatával a CSS3 animációval az interfázis interaktívabbá válik, és az SVG-nek is van saját DOM API-ja.
A térkép funkciót a bemeneti lista összes elemére alkalmazni kell.
A redukciós függvény felhasználja a számításokat egy listára, és egy értéket ad vissza
A Hover Effects a CSS3 Cheat Sheet segítségével valósítható meg
A gooey menü CSS3 és SVG szűrőkkel valósítható meg, és ez a felhasználói interfázis szempontjából új reprezentatív megközelítést segít elő.
A webes tervezés szempontjából párhuzamos effektusok állíthatók elő a CSS3 használatával.
Az interaktív 3D-s felépítés és a felhasználói interfázis CSS3 használatával készíthető
A különféle választóelemek kombinációjával a letöltési hivatkozás melletti fájlformátum ikon létrehozható a CSS3 használatával.

Következtetés

Ebben a Cheat sheet CSS3 cikkben láttuk, hogy a CSS3 könnyen használható, és szintaxisa könnyebben megjegyezhető. A CSS3 felhasználható a webfejlesztési technológiák ábrázolásához, különféle megközelítések és stíluslap technológiák alkalmazásával, amelyek támogatják a CSS3-ot. A projekt igényének típusa, a munka időtartama és az összes többi tárgyalt szempont alapján a CSS3-t kell használni a kívánt cél eléréséhez.

Ajánlott cikkek

Ez egy útmutató a CSS3 Cheat laphoz, itt tárgyaltuk a CSS3 cheat lap tartalmát és parancsát, valamint ingyenes tippeket és trükköket. További tudnivalókat a következő cikkben tekinthet meg -