Johdatus Cheatsheet CSS3: een
CSS (CSS) on pohjimmiltaan tyylisivun kieli, jota käytetään merkintäkielellä kehitetyn asiakirjan ulkoasun ja muotoilun toteuttamiseen. CSS-eritelmää ylläpitää pääasiassa World Wide Web Consortium (W3C). CSS: n toteuttamisen pääasiallisena tavoitteena on esitellä esityksen ja sisällön erottelu, joka sisältää rintamut, asettelumuodot. CSS3 on CSS: n uusin versio tai standardi CSS2: n jälkeen. CSS3 on pääosin sekoitus CSS2-eritelmiä ja joitain uusia toimintoja.
Alla on muutama tärkeä Cheatsheet CSS3 -moduuli:
- Laatikkomalli
- valitsimet
- Tekstitehosteita
- 2D-muunnokset
- 3D-muutokset
- Kuvan esitys
- Käyttäjän välivaihe
- Useita sarakkeiden asetteluja
- animaatiot
- Sisällön säätäminen ja uudelleenjako
Tässä Cheatsheet CSS3 -artikkelissa kerrotaan, mikä CSS3 on ja mitä eri CSS3-komentoja on.
Komennot ja sisältö Cheatsheet CSS3: lla
CSS3: lla on laaja kirjasto, interaktiivinen, laajennettavissa ja sisältää monia sisäänrakennettuja menetelmiä tavallisten toimintojen laskemiseksi. Alla on mainittu Cheatsheet CSS3 -komennot, jotka suorittavat erilaisia komentorivitoimintoja:
|
KOMENTO |
KUVAUS |
| : keskittyä | Keskittyminen elementtiin |
| : aktiivinen | Voit näyttää aktiivisen elementin ja valita sen |
| : käytössä | Käynnistetyn elementin näyttäminen |
| : valittu | Tarkistetun elementin näyttäminen |
| : lang | Jotta kehittäjä voi määrittää tietyn elementin kielen |
| : valinta | Korostetun ja valitun elementin näyttäminen |
| : juuri | Juurielementin näyttäminen asiakirjassa |
| :ensimmäinen lapsi | Ensimmäisen sisaruselementin näyttäminen |
| :viimeinen lapsi | Viimeisen sisaruselementin näyttäminen |
| :ainoa lapsi | Näyttää ainoan lapsielementin |
| : Ensimmäinen-of-tyyppinen | Näyttää tietyn tyyppisen ensimmäisen sisaruselementin |
| : Viimeinen-of-tyyppinen | Näyttää tietyn tyyppisen viimeisen sisaruselementin |
| : Vain-of-tyyppinen | Näyttää tietyn tyyppisen ainoan sisaruselementin |
| : tyhjä | Näytetään elementti, jolla ei ole lapsia |
| ::ensimmäinen kirjain | Tietyn tyylin lisääminen tekstin ensimmäiseen kirjaimeen |
| ::ensimmäinen linja | Tietyn tyylin lisääminen tekstin ensimmäiselle riville |
| :: jälkeen | Sisällön lisääminen tekstielementin jälkeen |
| :: ennen | Sisällön lisääminen ennen tekstiä |
Operaattorit: - CSS3: n erityyppiset operaattorit ovat vertailuoperaattorit, toimeksiantajaoperaattorit, loogiset operaattorit ja identiteettioperaattorit.
Mitta-asteikot: Huijauskoodin CSS3-mitta-asteikot ovat seuraavat
|
SKALA / PARAMETRI |
KUVAUS |
| em | Nykyisen elementin fonttikoko |
| entinen | Elementin fonttikorkeus |
| px | Laitepikselin katseleminen |
| rem | Juurielementin kirjasinkoko |
| vh | Näkymäportin korkeus |
| VW | Näkymäportin leveys |
| % | prosenttimäärä |
| PC | pica |
| pt | Kohta |
Värikoodi: Värin nimi = punainen, sininen, vihreä ja tummanvihreä. Löydä samojen koodien alapuolella
|
KOODI |
KUVAUS / TÄRKEYS |
| rgb (x, y, z) | Punaiselle = rgb (255, 0, 0) |
| rgb (x%, y% z%) | Punaiselle = rgb (100%, 0, 0) |
| #rrggbb | Punaiselle = # ff000 |
| flabor | Käyttäjän valitsema väri käyttäjän välivaiheen mukauttamiseksi |
| RGBA (x, y, z, alfa) | Punaiselle = rgb (255, 0, 0) |
Käyttäjän välivaiheen ominaisuudet : CSS3 Huijauskoodien käyttäjän välivaiheen ominaisuudet ovat seuraavat.
|
OMINAISUUDEN ARVOT |
KUVAUS |
| ikoni | Antaaksesi kuvakkeen alueella |
| resize | Määritetyn alueen elementtien koon muuttaminen |
| box-mitoitus | Määritetyn elementtialueen korjaaminen |
| ulkomuoto | Elementtien toteuttaminen käyttöliittymäelementeinä |
| nav-down | Elementtien siirtäminen alas näppäimistön alanuolipainikkeen mukaisesti |
| nav-vasen | Elementtien siirtäminen vasemmalle näppäimistön vasemman nuolen painikkeen mukaisesti |
| nav-up | Elementtien siirtäminen ylöspäin näppäimistön vasemman nuolen painikkeen mukaisesti |
| nav-oikeus | Elementtien siirtäminen oikealle näppäimistön oikeanpuoleisen nuolen painikkeen mukaisesti |
| ääriviivat-offset | Piirrä valitun tekstialueen ääriviivat |
Valitsintyypit : Huijauskoodin CSS3-valitsintyypit ovat seuraavat.
|
TYYPPI NIMI |
KUVAUS / TÄRKEYS |
| yleismaailmallinen | Voit näyttää minkä tahansa elementin |
| Tyyppi | Minkä tahansa tietyn tyyppisen elementin näyttäminen |
| luokka | Näyttää useita erityyppisiä elementtejä |
| Id | Yhden tietyn elementtityypin näyttäminen ja tunnistaminen vaikuttamatta muihin |
| Lapsi | Suoraan kuuluvan elementin näyttäminen kuuluu toisen elementin alle |
| ryhmittely | Tunnistaa useita erityyppisiä elementtejä |
| Vierekkäiset sisarukset | Hakea kaikki elementit, joilla on sama emo ja elementit ja jotka ovat välittömässä järjestyksessä |
| Kenraali sisarus | Hakea kaikki elementit, joilla on sama vanhempi ja elementit eivätkä välttämättä ole välittömässä järjestyksessä |
Ilmaiset vinkit ja vinkit Cheat sheet CSS3 -komentojen käyttämiseen: -
- CSS3-sekoitusmoodia voidaan käyttää määritellyn sisällön ulkoasun yhtenäistämiseen ja se antaa käyttäjille mahdollisuuden myös asettaa erilaisia kuvanväriversioita. CSS3-huijaussivulla on noin 15 sekoitustilan arvoa. Se lisää myös ylimääräisen edun käyttäjän vaiheidenväliseen esitystapaan.
- Leikkaus on toinen CSS: n hieno ominaisuus. Leikkaustoiminnolla käyttäjä voi määritellä kuva-alueen näkyvyyden vaatimuksen mukaisesti. Joten jos jokin kuvaosa jää halutun alueen ulkopuolelle, leikkaus voidaan toteuttaa piilottamaan ylimääräinen kuva-alue.
- CSS: n tapauksessa muoto-sisä- ja ulko-ominaisuudet voidaan toteuttaa kiertämään sisältö CSS: n mukautetun polun ympärille, ja se voidaan määritellä ja allokoida loppukäyttäjän vaatimusten mukaisesti. Periaatteessa käyttäjä voi suunnitella välivaiheen määriteltyjen eritelmien mukaisesti.
- SVG (skaalautuva vektorigrafiikka) -animaation käyttö on CSS3: n toinen etu. Käyttämällä SVG: tä CSS3-animaation kanssa, välivaiheesta tulee interaktiivisempi ja SVG: llä on myös oma DOM-sovellusliittymä.
- Karttatoimintoa käytetään kaikkiin syöttölistan kohteisiin.
- Pienennä-toimintoa käytetään joitain laskelmia luettelossa ja palauttaa arvon
- Hover-tehosteet voidaan toteuttaa käyttämällä CSS3-huijauslomaketta
- Gooey-valikko voidaan toteuttaa CSS3- ja SVG-suodattimilla ja tämä auttaa uutta edustavaa lähestymistapaa käyttäjän välivaiheiden näkökulmasta
- Verkkosuunnittelun kannalta parallaksia voidaan luoda CSS3: lla.
- Interaktiivinen 3D-rakenne ja käyttäjän välivaihe voidaan tuottaa CSS3: lla
- Eri valitsinyhdistelmiä käyttämällä CSS3: lla voidaan tuottaa latauslinkin vieressä oleva tiedostomuotokuvake.
johtopäätös
Tässä Cheat sheet CSS3 -artikkelissa olemme havainneet, että CSS3 on helppo käyttää ja sen syntaksi on helpompi muistaa. CSS3: ta voidaan käyttää verkkokehitysteknologioiden esittämiseen käyttämällä erilaisia lähestymistapoja ja tyylitekniikkatekniikoita, jotka tukevat CSS3: ta. CSS3: ta tulisi käyttää halutun päämäärän saavuttamiseen projektityypin, työajan ja kaikkien muiden erilaisten käsiteltyjen näkökohtien perusteella.
Suositellut artikkelit
Tämä on opas Cheat sheet CSS3: lle. Tässä olemme keskustelleet cheat sheet CSS3: n sisällöstä ja komennoista sekä ilmaisista vinkistä ja temppuja. Voit myös tarkastella seuraavaa artikkelia saadaksesi lisätietoja -
- Cheat Sheet CSS
- Huijata arkin HTML
- Amazing huijauskortti UNIX: lle
- Huijauskoodin JavaScript: Ominaisuudet