Inleiding tot Cheatsheet CSS3
Cascading Stylesheet (CSS) is eigenlijk een stijlbladtaal die wordt gebruikt voor het implementeren van het uiterlijk en de opmaak van een document dat is ontwikkeld in een opmaaktaal. De CSS-specificatie wordt hoofdzakelijk onderhouden door World Wide Web Consortium (W3C). De belangrijkste moto voor het implementeren van CSS is het laten zien van de scheiding van presentatie en inhoud met fronten, lay-outindelingen. CSS3 is de nieuwste versie of standaard voor CSS na CSS2. CSS3 is voornamelijk een combinatie van CSS2-specificaties en enkele nieuwe functionaliteit.
Hieronder vindt u een paar belangrijke modules van Cheatsheet CSS3:
- Box Model
- selectors
- Teksteffecten
- 2D-transformaties
- 3D-transformaties
- Beeldrepresentatie
- Gebruikersfase
- Meerdere kolomlay-outs
- animaties
- Inhoudsaanpassing en hertoewijzing
In dit Cheatsheet CSS3-artikel zullen we bespreken wat CSS3 is en de verschillende CSS3-opdrachten.
Commando's en inhoud op Cheatsheet CSS3
CSS3 heeft een uitgebreide bibliotheek, interactief, uitbreidbaar en bevat veel ingebouwde methoden om veelgebruikte bewerkingen te berekenen. Hieronder staan de genoemde Cheatsheet CSS3-opdrachten die verschillende opdrachtregelbewerkingen uitvoeren:
|
COMMANDO |
BESCHRIJVING |
| : focus | Zich op een element concentreren |
| : actief | Een actief element weergeven en selecteren |
| : ingeschakeld | Een element weergeven dat is ingeschakeld |
| : aangevinkt | Om een aangevinkt element weer te geven |
| : lang | Om de ontwikkelaar in staat te stellen de taal voor een specifiek element op te geven |
| : selectie | Om het element weer te geven dat gemarkeerd en geselecteerd is |
| : root | Om het root-element in het document weer te geven |
| :eerstgeborene | Om het eerste broer / zus-element weer te geven |
| :laatste kind | Om het laatste broer / zus-element weer te geven |
| :enig kind | Om het enige onderliggende element weer te geven |
| : Eerste-van-type | Om het eerste broer / zus-element van een specifiek type weer te geven |
| : Last-of-type | Om het laatste broer / zus-element van een specifiek type weer te geven |
| : Enkel-of-type | Om het enige broer / zus-element van een specifiek type weer te geven |
| : leeg | Om het element zonder kinderen weer te geven |
| ::eerste brief | Een specifieke stijl toevoegen aan de eerste letter van een tekst |
| ::Eerste lijn | Een specifieke stijl toevoegen aan de eerste regel van een tekst |
| :: na | Inhoud achter een tekstelement invoegen |
| :: voordat | Inhoud voor een tekstelement invoegen |
Operators: - De verschillende typen operators in CSS3 zijn vergelijkende (relationele) operators, toewijzingsoperators, logische operators en identiteitsexploitanten.
Meetschalen: Cheatsheet CSS3-meetschalen zijn als volgt
|
SCHAAL / PARAMETER |
BESCHRIJVING |
| em | Lettergrootte van het huidige element |
| ex | Lettertype hoogte van het element |
| px | Pixel voor apparaat bekijken |
| rem | Lettertype van basiselement |
| vh | Hoogte van Viewport |
| vw | Viewport's breedte |
| % | Percentage |
| pc | Pica |
| pt | Punt |
Kleurcode: kleurnaam = rood, blauw, groen en donkergroen. Zoek hieronder de codes voor hetzelfde
|
CODE |
BESCHRIJVING / BETEKENIS |
| RGB (x, y, z) | Voor rood = rgb (255, 0, 0) |
| RGB (x%, y% z%) | Voor rood = rgb (100%, 0, 0) |
| #RRGGBB | Voor rood = # ff000 |
| flabor | Door de gebruiker geselecteerde kleur om de gebruikersfase aan te passen |
| RGBA (x, y, z, a) | Voor rood = rgb (255, 0, 0) |
Eigenschappen van gebruikersinterfase: CSS3 Eigenschappen van de gebruikersfase-cheatsheet zijn als volgt.
|
EIGENDOMSWAARDEN |
BESCHRIJVING |
| icoon | Om het pictogram op gebied te verstrekken |
| resize | De grootte van de opgegeven gebiedselementen wijzigen |
| box-sizing | Om het opgegeven elementgebied te repareren |
| uiterlijk | Om de elementen als UI-elementen te implementeren |
| nav-down | Om de elementen omlaag te verplaatsen volgens de pijl-omlaag op het toetsenbord |
| nav-left | Om de elementen naar links te verplaatsen volgens de pijl naar links op het toetsenbord |
| nav-up | Om de elementen omhoog te bewegen volgens de pijl naar links op het toetsenbord |
| nav-rechts | Om de elementen naar rechts te verplaatsen volgens de pijl naar rechts op het toetsenbord |
| -Outline offset | Om de omtrek van het geselecteerde tekstgebied te tekenen |
Selectortypen : Cheatsheet CSS3-selectortypen zijn als volgt.
|
TYPE NAAM |
BESCHRIJVING / BETEKENIS |
| universeel | Om een element weer te geven |
| Type | Om een specifiek type element weer te geven |
| Klasse | Om meerdere elementen van verschillende types weer te geven |
| ID kaart | Eén specifiek elementtype weergeven en identificeren zonder andere te beïnvloeden |
| Kind | Een element weergeven dat direct onder valt, valt onder een ander element |
| Groepering | Om meerdere elementen van verschillende typen te identificeren |
| Aangrenzende broer of zus | Alle elementen ophalen die hetzelfde bovenliggende element en dezelfde elementen hebben en in de onmiddellijke volgorde staan |
| Generaal broer of zus | Alle elementen ophalen die dezelfde ouder en elementen hebben en niet noodzakelijkerwijs in de onmiddellijke volgorde staan |
Gratis tips en trucs voor het gebruik van cheatsheet CSS3-opdrachten: -
- CSS3-overvloeimodus kan worden gebruikt om het uiterlijk van de opgegeven inhoud te uniformeren en stelt gebruikers ook in staat om verschillende versies van afbeeldingskleuren in te stellen. Er zijn ongeveer 15 mengmoduswaarden aanwezig in CSS3 Cheat Sheet. Het voegt ook een extra voordeel toe vanuit het perspectief van de weergave van de gebruikersfase.
- Clipping is een andere geweldige functie van CSS. Met behulp van de knipfunctionaliteit kan een gebruiker de zichtbaarheid van het beeldgebied definiëren volgens de vereiste. Dus als een afbeeldingsgedeelte buiten het gewenste gebied valt, kan knippen worden geïmplementeerd om dat extra afbeeldingsgebied te verbergen.
- In het geval van CSS kunnen vorm-binnen- en vorm-buiten-eigenschappen worden geïmplementeerd om de inhoud rond het aangepaste CSS-pad te wikkelen en deze kan worden gedefinieerd en toegewezen volgens de eisen van de eindgebruiker. Het stelt een gebruiker in staat om de interfase te ontwerpen volgens de gedefinieerde specificaties.
- Het gebruik van SVG-animatie (schaalbare vectorafbeeldingen) is een ander voordeel voor CSS3. Bij gebruik van SVG met CSS3-animatie wordt de interfase interactiever en heeft SVG ook een eigen DOM API.
- De kaartfunctie wordt toegepast op alle items in een invoerlijst.
- De verkleiningsfunctie wordt gebruikt om enige berekening toe te passen op een lijst en retourneert een waarde
- Hover-effecten kunnen worden geïmplementeerd met behulp van CSS3 Cheat Sheet
- Een kleverig menu kan worden geïmplementeerd met behulp van CSS3- en SVG-filters en dit helpt een nieuwe representatieve benadering vanuit het perspectief van de gebruikersfase
- Vanuit het perspectief van webontwerp kunnen parallax-effecten worden geproduceerd met behulp van CSS3.
- Interactieve 3D-structuur en gebruikersinterphase kunnen worden geproduceerd met behulp van CSS3
- Met behulp van de combinatie van verschillende selectoren kan een bestandsformaatpictogram naast de downloadlink worden geproduceerd met behulp van CSS3.
Conclusie
In dit CSS3-artikel over cheatsheets hebben we gezien dat CSS3 eenvoudig te gebruiken is en dat de syntaxis ervan gemakkelijker te onthouden is. CSS3 kan worden gebruikt bij de weergave van webontwikkelingstechnologieën door verschillende benaderingen en stylesheettechnologieën te gebruiken die CSS3 ondersteunen. Op basis van het type projectbehoefte, werktijd en alle andere verschillende besproken aspecten, moet CSS3 worden gebruikt om het gewenste doel te bereiken.
Aanbevolen artikelen
Dit is een handleiding voor Cheatsheet CSS3 geweest. Hier hebben we de inhoud en het commando besproken, evenals gratis tips en trucs voor cheatsheet CSS3. Raadpleeg ook het volgende artikel voor meer informatie -
- Cheatsheet CSS
- Cheatsheet HTML
- Geweldig cheatsheet voor UNIX
- Cheat Sheet JavaScript: Functies