Introducere în Cheatsheet CSS3
Cascading Stylesheet (CSS) este practic un limbaj al foilor de stil care este utilizat pentru implementarea aspectului și formatării unui document dezvoltat într-un limbaj de marcare. Specificația CSS este menținută în principal de World Wide Web Consortium (W3C). Motocicleta principală pentru implementarea CSS este prezentarea separației de prezentare și conținut care include fronturi, formate de aspect. CSS3 este cea mai recentă versiune sau standard pentru CSS după CSS2. CSS3 este în principal un mix de specificații CSS2 și unele funcționalități noi.
Mai jos găsiți câteva module importante ale Cheatsheet CSS3:
- Modelul cutiei
- selectori
- Efecte de text
- 2D Transformări
- Transformări 3D
- Reprezentarea imaginii
- Interfaz utilizator
- Machete de coloane multiple
- Animații
- Ajustarea și realocarea conținutului
În acest articol CSS3 Cheatsheet CSS3, vom discuta despre ce este CSS3 și despre diferitele comenzi CSS3.
Comenzi și conținut pe Cheatsheet CSS3
CSS3 are o bibliotecă extinsă, interactivă, extensibilă și conține multe metode încorporate pentru a calcula operații comune. Mai jos se află Cheatsheet CSS3 comenzile menționate care efectuează diferite operații de linie de comandă:
|
COMANDA |
DESCRIERE |
| : focalizare | Să se concentreze pe un element |
| : activ | Pentru afișarea și selectarea unui element activ |
| : activat | Pentru a afișa un element care este activat |
| : verificat | Pentru a afișa un element care este bifat |
| : langă | Pentru a permite dezvoltatorului să specifice limba pentru un element specific |
| : selectie | Pentru a afișa elementul care este evidențiat și selectat |
| : rădăcină | Pentru a afișa elementul rădăcină în document |
| :primul copil | Pentru a afișa primul element de soră |
| :ultimul copil | Pentru a afișa ultimul element de soră |
| :singurul copil | Pentru a afișa singurul element copil |
| : Primul-de-tip | Pentru a afișa primul element de fratele unui tip specific |
| : Ultima-de-tip | Pentru a afișa ultimul element de soră de un anumit tip |
| : Numai de tip | Pentru a afișa singurul element de frați de un anumit tip |
| : gol | Pentru a afișa elementul care nu are copii |
| ::prima literă | Pentru a adăuga un stil specific la prima literă a unui text |
| ::prima linie | Pentru a adăuga un stil specific la prima linie a unui text |
| :: după | Pentru a introduce un anumit conținut după un element de text |
| :: inainte de | Pentru a introduce un anumit conținut înainte de un element de text |
Operatori: - Diferitele tipuri de operatori din CSS3 sunt operatori de comparație (relaționali), operatori de atribuire, operatori logici și operatori de identitate.
Scări de măsurare: Scara de măsurare CSS3 este următoarea
|
SCALĂ / PARAMETRU |
DESCRIERE |
| em | Dimensiunea fontului elementului curent |
| fără | Înălțimea fontului elementului |
| px | Vizualizarea pixelilor dispozitivului |
| rem | Dimensiunea fontului elementului rădăcină |
| vh | Înălțimea Viewport-ului |
| vw | Lățimea Viewport-ului |
| % | Procent |
| PC | cicero |
| pt | Punct |
Cod Culoare: Numele culorii = roșu, albastru, verde și verde închis. Găsiți mai jos codurile pentru aceleași
|
COD |
DESCRIERE / SIGNIFICARE |
| rgb (x, y, z) | Pentru roșu = rgb (255, 0, 0) |
| rgb (x%, y%, z%) | Pentru roșu = rgb (100%, 0, 0) |
| #RRGGBB | Pentru roșu = # ff000 |
| flabor | Culoarea selectată de utilizator pentru a personaliza interfaza utilizatorului |
| RGBA (x, y, z, alfa) | Pentru roșu = rgb (255, 0, 0) |
Proprietăți interfaza utilizatorului: CSS3 Proprietățile interfazei utilizatorului foii de înșelare sunt următoarele.
|
VALORI DE PROPRIETATE |
DESCRIERE |
| icoană | Pentru a furniza pictograma din zonă |
| resize | Redimensionarea elementelor de zonă specificate |
| box-dimensionare | Pentru a repara zona elementului specificat |
| aspect | Pentru a implementa elementele ca elemente UI |
| nav-down | Pentru a muta elementele în conformitate cu butonul săgeată în jos de la tastatură |
| nav stânga | Pentru a muta elementele din stânga în funcție de butonul săgeată stânga de la tastatură |
| nav-up | Pentru a muta elementele în funcție de butonul săgeată stânga de la tastatură |
| nav-dreapta | Pentru a muta dreapta elementele în funcție de butonul săgeată dreapta a tastaturii |
| Contur de offset | Pentru a desena conturul zonei de text selectate |
Tipuri de selecție : Cheat tipuri de selecție CSS3 sunt următoarele.
|
NUMELE TIPULUI |
DESCRIERE / SIGNIFICARE |
| universal | Pentru a afișa orice element |
| Tip | Pentru a afișa orice element de tip specific |
| Clasă | Pentru a afișa mai multe elemente de diferite tipuri |
| id-ul | Afișarea și identificarea unui singur tip de element specific fără a-i afecta pe ceilalți |
| Copil | Pentru a afișa un element care se încadrează direct se încadrează sub un alt element |
| gruparea | Pentru identificarea mai multor elemente de diferite tipuri |
| Sibling alăturat | Pentru a obține toate elementele care au același părinte și elemente și sunt în secvența imediată |
| Generalul Sibling | Pentru a obține toate elementele care au același părinte și elemente și nu sunt neapărat în secvența imediată |
Sfaturi și trucuri gratuite privind utilizarea Cheat sheet CSS3 Commands: -
- Modul de amestec CSS3 poate fi utilizat pentru a uni aspectul conținutului specificat și permite utilizatorilor să stabilească diferite versiuni de culori ale imaginii. Există în jur de 15 valori ale modului de amestec în CSS3 Cheat Sheet. De asemenea, adaugă un avantaj suplimentar din perspectiva reprezentării interfazei utilizatorului.
- Decuparea este o altă caracteristică excelentă a CSS. Utilizând funcționalitatea de tuns, un utilizator poate defini vizibilitatea zonei imaginii conform cerințelor. Așadar, dacă orice porțiune de imagine se încadrează în zona dorită, atunci pot fi implementate tăierea pentru a ascunde acea zonă de imagine suplimentară.
- În cazul CSS, proprietățile form-inside și forme-exterior pot fi implementate pentru a înfășura conținutul în jurul căii personalizate CSS și poate fi definit și alocat conform cerințelor utilizatorului final. Practic, permite unui utilizator să proiecteze interfaza conform specificațiilor definite.
- Utilizarea animației SVG (grafică vectorială scalabilă) este un alt avantaj pentru CSS3. Folosind SVG cu animație CSS3, interfaza va deveni mai interactivă, iar SVG are și propria sa API DOM.
- Funcția de hartă va fi aplicată tuturor articolelor dintr-o listă de intrare.
- Funcția reduce este utilizată pentru a aplica unele calcule pe o listă și returnează o valoare
- Hover Effects poate fi implementat folosind CSS3 Cheat Sheet
- Un meniu gooey poate fi implementat folosind filtre CSS3 și SVG, ceea ce ajută la o nouă abordare reprezentativă din perspectiva interfazei utilizatorului
- Din perspectiva proiectării web, efectele de paralax pot fi produse folosind CSS3.
- Structura 3d interactivă și interfaza utilizatorului pot fi produse folosind CSS3
- Folosind combinația de selecție diferită, o pictogramă de format de fișier lângă linkul de descărcare poate fi produsă folosind CSS3.
Concluzie
În acest articol Chesheat CSS3, am văzut că CSS3 este ușor de utilizat și sintaxa sa este mai ușor de reținut. CSS3 poate fi utilizat în reprezentarea tehnologiilor de dezvoltare web utilizând abordări diferite și tehnologii de foi de stil care acceptă CSS3. Pe baza tipului de proiect, a timpului de lucru și a tuturor celorlalte aspecte discutate, CSS3 trebuie utilizat pentru a atinge obiectivul dorit.
Articole recomandate
Acesta a fost un ghid pentru Cheat sheet CSS3 aici am discutat conținutul și comanda, precum și sfaturi și trucuri gratuite ale foii de înșelăciune CSS3, puteți să vă uitați și la articolul următor pentru a afla mai multe -
- Ches Sheet CSS
- Cheat sheet HTML
- Foaie de Cheat Uimitor pentru UNIX
- Cheat Sheet JavaScript: Caracteristici