Selectors
Met de onderstaande twee selectors heb ik de mijn HTML-elementen van gewijzigde styling voorzien.

• State selectors:hover Ik heb gebruikt gemaakt van een hover-effect. Een hover-effect kan een duidelijk signaal geven om te zien wat klikbaar is. Wanneer gebruikers hun muis over een link bewegen, zullen ze een verandering in kleur of vorm opmerken waardoor ze moeten klikken. Dit voorkomt dat ze links missen. De hover-functie die ik heb gecodeerd is een functie die zorgt voor move-in, move- out effect en daarnaast ook nog een rgba kleur transformatie tijdens het bewegen van de muis over de folder.

• class & #id selectors Ik heb gebruik gemaakt van een class en Id selector. Het attribuut id gebruik je vooral om één specifiek element dat een speciale betekenis of functie op jouw pagina heeft uniek aan te duiden, zoals bijvoorbeeld een verzendknop, container voor andere elementen of een specifieke afbeelding. Het attribuut class kan je gebruiken om verschillende elementen onder een zelfgekozen categorie te hangen, zoals bijvoorbeeld sociale media links, productnamen, de datum van een artikel. Je kan de class attribuut hergebruiken.

Property
Met de onderstaande twee properties heb ik de mijn HTML-elementen van gewijzigde styling voorzien.

• De Border-box eigenschappen width en height bevatten de inhoud, opvulling en rand, maar niet de marge. Houd er rekening mee dat de opvulling en de rand zich in de doos bevinden. Bijvoorbeeld .box {breedte: 350px; border: 10px effen zwart;} geeft een vak weer dat 350px breed is, met een inhoudsgebied van 330px breed. Het inhoudsvak mag niet negatief zijn en is gevloerd tot 0, waardoor het onmogelijk is om een ​​randvak te gebruiken om het element te laten verdwijnen.

• Een animatie laat een element geleidelijk veranderen van de ene stijl naar de andere. Om CSS-animatie te gebruiken, moet je eerst enkele keyframes voor de animatie specificeren. Keyframes bevatten welke stijlen het element op bepaalde tijden zal hebben.

De opbouw van mijn HTML-code voor het Visitekaartje:

een doctype: het eerste html element dat je nodig hebt om een webpagina te maken. De browser maakt gebruik van de <!doctype> tag om te weten hoe de webpagina gemaakt moet worden. een html tag: Het html element markeert het begin en einde van een HTML-document. (altijd het lang attribuut opnemen in een HTML- tag om taal van de webpagina aan te geven. Een HTML-document bestaat uit twee delen.

header: Het head element bevat informatie over de webpagina die niet in het documentvenster wordt weergegeven. Ieder geval het <title> element worden opgenomen. Hiermee wordt een titel vastgelegd. body: Het body element bevat alle inhoud van een HTML-document, zoals koppen, alinea's, afbeeldingen, hyperlinks, tabellen, lijsten, enz. (er kan slechts één -element in een HTML-document zijn.) link: De Link tag definieert de relatie tussen het huidige document en een externe bron. meta: Metadata is data (informatie) over data, Metadata wordt gebruikt door browsers (hoe inhoud weer te geven of pagina opnieuw te laden), zoekmachines (trefwoorden) en andere webservices. Class: Het class attribuut wordt toegepast, wanneer een element niet elke keer in dezelfde stijl moet worden uitgevoerd. div: Een DIV (division) is een HTML-element dat je kunt gebruiken om delen van een pagina in te sluiten zoals titel, menu, paragraaf of een zij-item.

De opbouw van mijn CSS-code voor de Visit card:

margin: De CSS-marge-eigenschappen worden gebruikt om ruimte rond elementen te creëren, buiten de gedefinieerde randen. Met CSS heb je volledige controle over de marges. Er zijn eigenschappen voor het instellen van de marge voor elke zijde van een element (boven, rechts, onder en links) margin auto: De browser berekent de marge margin inherit: Geeft aan dat de marge moet worden overgenomen van het bovenliggende element position: De eigenschap position specificeert het type positioneringsmethode dat voor een element wordt gebruikt (static, relative, fixed, absolute or sticky) -- position relative: elementen worden gepositioneerd ten opzichte van de oorspronkelijke positie. Dat doe je door een top, left, right en/of een bottom waarde toe te kennen aan het element. Element blijft in normale documentstroom -- position absolute: elementen worden gepositioneerd ten opzichte van de gesloten positie. Elementen worden verwijderd uit de normale documentstroom border: De border shorthand CSS-eigenschap stelt de rand van een element in. Het stelt de waarden van randbreedte, randstijl en randkleur in. border-radius: De border-radius CSS-eigenschap rondt de hoeken van de buitenste rand van een element af. transform: Met de eigenschap transform CSS kunt u een element roteren, schalen, scheeftrekken of vertalen. Het wijzigt de coördinatenruimte van het visuele CSS-opmaakmodel. display: De display CSS-eigenschap stelt in of een element wordt behandeld als een blok- of inline-element en de lay-out die voor de onderliggende elementen wordt gebruikt, zoals flow-layout, raster of flex. display-flex: Het element gedraagt ​​zich als een blokelement en geeft de inhoud op volgens het flexbox-model. justify-content: De eigenschap CSS-inhoud rechtvaardigen definieert hoe de browser ruimte verdeelt tussen en rond inhoudsitems langs de hoofdas van een flexcontainer en de inline-as van een rastercontainer. align-items: De eigenschap CSS align-items stelt de align-self-waarde in op alle directe onderliggende items als een groep animation: CSS-animaties maken het mogelijk om overgangen van de ene CSS-stijlconfiguratie naar de andere te animeren. Animaties bestaan ​​uit twee componenten, een stijl die de CSS-animatie beschrijft en een set keyframes die de begin- en eindtoestanden van de animatiestijl aangeven, evenals mogelijke tussenliggende waypoints. font-size: De CSS-eigenschap font-size stelt de grootte van het lettertype in. Als u de lettergrootte wijzigt, worden ook de grootten van de lettergrootte-relatieve -eenheden bijgewerkt, zoals em, ex, enzovoort.