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 -
- Csaló CSS
- Cheat sheet HTML
- Csodálatos csaló lap a UNIX-hoz
- Cheat Sheet JavaScript: Jellemzők