Sissejuhatus Cheatsheet CSS3
Kaskaadlaadistiil (CSS) on põhimõtteliselt stiililehe keel, mida kasutatakse märgistuskeeles välja töötatud dokumendi väljanägemise ja vormindamise rakendamiseks. CSS spetsifikatsiooni hooldab peamiselt veebikeskkonna konsortsium (W3C). CSS-i rakendamise peamine eesmärk on tutvustada esitlust ja sisu, mis hõlmab rindeid, küljendusvorminguid. CSS3 on CSS-i järel uusim versioon või standard. CSS3 on peamiselt segu CSS2 spetsifikatsioonidest ja mõnest uuest funktsionaalsusest.
Altpoolt leiate mõned olulised Cheatsheet CSS3 moodulid:
- Karbimudel
- Valijad
- Tekstirefektid
- 2D teisendused
- 3D-teisendused
- Kujutise esitus
- Kasutaja vahefaas
- Mitu veeru paigutust
- Animatsioonid
- Sisu kohandamine ja ümberjaotamine
Selles Cheatsheet CSS3 artiklis käsitleme, mis on CSS3 ja millised on erinevad CSS3 käsud.
Käsud ja sisu Cheatsheet CSS3
CSS3-l on ulatuslik interaktiivne, laiendatav raamatukogu, mis sisaldab palju sisseehitatud meetodeid tavaliste toimingute arvutamiseks. Allpool on mainitud Cheatsheet CSS3 käsud, mis täidavad erinevaid käsurea toiminguid:
|
KÄSK |
KIRJELDUS |
| : fookus | Et keskenduda mõnele elemendile |
| : aktiivne | Aktiivse elemendi kuvamiseks ja valimiseks |
| : lubatud | Lubatud elemendi kuvamiseks |
| : kontrollitud | Kontrollitud elemendi kuvamiseks |
| : lang | Võimaldamaks arendajal täpsustada konkreetse elemendi keelt |
| : valik | Esiletõstetud ja valitud elemendi kuvamiseks |
| : juur | Juurelemendi kuvamine dokumendis |
| : esimene laps | Esimese õde-venna elemendi kuvamiseks |
| :viimane laps | Viimase õde-venna elemendi kuvamiseks |
| :ainuke laps | Ainsa lapseelemendi kuvamiseks |
| : esimene tüüp | Konkreetse tüübi esimese õdede-vendade elemendi kuvamine |
| : viimast tüüpi | Konkreetse tüübi viimase õde-venna elemendi kuvamine |
| : ainult tüüpi | Ainut tüüpi õdede-vendade elemendi kuvamiseks |
| : tühi | Selle elemendi kuvamiseks, millel pole lapsi |
| :: esitäht | Konkreetse stiili lisamiseks teksti esimesele tähele |
| ::esimene rida | Konkreetse stiili lisamiseks teksti esimesele reale |
| :: pärast | Sisu lisamiseks tekstielemendi järele |
| :: enne | Mõne sisu sisestamiseks enne tekstielementi |
Operaatorid: - CSS3 erinevat tüüpi operaatorid on võrdlus (suhtelised) operaatorid, määramisoperaatorid, loogilised operaatorid ja identiteedi operaatorid.
Mõõteskaalad : petuleht CSS3 mõõteskaalad on järgmised
|
KAAL / PARAMETER |
KIRJELDUS |
| em | Praeguse elemendi kirjasuurus |
| nt | Elemendi tähekõrgus |
| px | Seadme piksli vaatamine |
| rem | Juurelemendi fondi suurus |
| vh | Vaateakna kõrgus |
| vw | Vaateakna laius |
| % | Protsent |
| tk | Pica |
| pt | Punkt |
Värvikood: Värvinimi = punane, sinine, roheline ja tumeroheline. Allpool leiate sama koodi koodid
|
KOOD |
KIRJELDUS / TÄHENDUS |
| rgb (x, y, z) | Punase jaoks = rgb (255, 0, 0) |
| rgb (x%, y%, z%) | Punase jaoks = rgb (100%, 0, 0) |
| #rrggbb | Punase jaoks = # ff000 |
| flabor | Kasutaja valitud faas kasutaja vahelise faasi kohandamiseks |
| rgba (x, y, z, alfa) | Punase jaoks = rgb (255, 0, 0) |
Kasutajavaheliste faaside atribuudid: CSS3 Petmise lehe kasutajafaaside vahelised omadused on järgmised.
|
OMANDI VÄÄRTUSED |
KIRJELDUS |
| ikoon | Ikooni esitamiseks piirkonnas |
| muuta suurust | Määratletud piirkonna elementide suuruse muutmiseks |
| kasti suurus | Määratud elemendi ala fikseerimiseks |
| välimus | Elementide rakendamine kasutajaliidese elementidena |
| navigeerimata | Elementide liigutamiseks vastavalt klaviatuuri allanoolnupule |
| nav-vasak | Elementide vasakule liikumiseks vastavalt klaviatuuri vasakule nooleklahvile |
| navigeerimine üles | Elementide ülespoole liikumiseks vastavalt klaviatuuri vasakule nooleklahvile |
| navigeerimata | Elementide paremale liigutamiseks vastavalt klaviatuuri paremale nooleklahvile |
| kontuur-nihe | Valitud tekstiala kontuuri joonistamine |
Valija tüübid : peibutuslehe CSS3 valija tüübid on järgmised.
|
TÜÜPNIMI |
KIRJELDUS / TÄHENDUS |
| Universaalne | Mis tahes elemendi kuvamiseks |
| Tüüp | Mis tahes konkreetse tüübi elemendi kuvamiseks |
| Klass | Erinevat tüüpi mitmete elementide kuvamiseks |
| Id | Üksiku konkreetse elemendi tüübi kuvamine ja tuvastamine ilma teisi mõjutamata |
| Laps | Elemendi kuvamiseks, mis langeb otse alla, kuulub teine element |
| Rühmitamine | Erinevat tüüpi mitmete elementide tuvastamiseks |
| Külgne õde | Kõigi elementide, millel on sama vanem ja elemendid ning mis asuvad vahetus järjekorras, toomiseks |
| Üldine õde | Kõigi elementide, millel on sama vanem ja elemendid, hankimiseks, mis pole tingimata vahetus järjestuses |
Tasuta näpunäited ja näpunäited CSS3 käskude petulehe kasutamiseks: -
- CSS3 segamisrežiimi saab kasutada määratud sisu ilme ühtlustamiseks ja see võimaldab kasutajatel seada ka erinevaid pildi värviversioone. CSS3-lehel on umbes 15 segamisrežiimi väärtust. See lisab ka lisaeelise kasutajafaaside vahelise esindatuse vaatenurgast.
- Lõikamine on CSS-i veel üks hea omadus. Lõikamisfunktsiooni abil saab kasutaja määratleda pildiala nähtavuse vastavalt nõudele. Niisiis, kui mõni kujutise osa jääb soovitud alast väljapoole, saab selle täiendava pildiala peitmiseks lõigata.
- CSS-i korral saab sisu sisemise ja väliste omaduste rakendamiseks mähkida sisu ümber CSS-i kohandatud tee ning selle saab määratleda ja eraldada vastavalt lõppkasutaja nõuetele. Põhimõtteliselt võimaldab see kasutajal kujundada vahefaas vastavalt määratletud spetsifikatsioonidele.
- CSG3 eeliseks on ka SVG (skaleeritava vektorgraafika) animatsiooni kasutamine. Kasutades SVG-d koos CSS3 animatsiooniga, muutub interfaas interaktiivsemaks ja SVG-l on ka oma DOM-i API.
- Kaardifunktsiooni rakendatakse sisestusloendi kõigile üksustele.
- Vähendamise funktsiooni kasutatakse mõne arvutuse rakendamiseks loendis ja väärtus tagastatakse
- Hover-efekte saab rakendada CSS3-peitlehe abil
- Gooey menüüd saab rakendada CSS3 ja SVG filtrite abil ning see aitab kasutajafaaside vahelisel ajal uut esinduslikku lähenemist
- Veebikujunduse vaatenurgast saab parallaksi efekte luua CSS3 abil.
- Interaktiivset 3D-struktuuri ja kasutajaliideseid saab luua CSS3 abil
- Erineva valija kombinatsiooni abil saab CSS3 abil luua allalaadimislingi kõrval asuva failivormingu ikooni.
Järeldus
Selles Cheat sheet CSS3 artiklis nägime, et CSS3 on lihtne kasutada ja selle süntaksit on kergem meelde jätta. CSS3 saab kasutada veebiarendustehnoloogiate esindamisel, kasutades erinevaid lähenemisviise ja stiililehtede tehnoloogiaid, mis toetavad CSS3. Projektivajaduse tüübist, tööajast ja kõigist muudest arutletud aspektidest lähtudes tuleks soovitud eesmärgi saavutamiseks kasutada CSS3.
Soovitatavad artiklid
See on juhend Cheat sheet CSS3. Siin oleme arutanud Cheat sheet CSS3 sisu ja käske ning tasuta näpunäiteid ja näpunäiteid. Lisateabe saamiseks võite vaadata ka järgmist artiklit -
- CSS-i petuleht
- Petmise leht HTML
- Hämmastav petuleht UNIX-i jaoks
- Cheat Sheet JavaScript: funktsioonid