Betekenis van haakjes in CSS

Video: (2020) Brackets Explained in Coding / Easiest Explanation

Inhoud

sleutels
haakje
beugels
chevrons
CSS-opmerkingen
Referenties
middelen

Het acroniem CSS komt van de Engelse "cascading style sheets" of "cascading style sheets". CSS geeft een grotere mate van artistieke en ontwerpcontrole aan webontwikkelaars en ontwerpers door inhoud van de weergaveparameters te scheiden. De CSS-instructies worden in de koptekst van een webdocument geplaatst en vervolgens tussen accolades - {} weergegeven in de hoofdtekst van de webpagina. Binnen in de accolades staan de haakjes - () - of haakjes - [] - die andere CSS-elementen aanduiden.

CSS-haakjes worden gebruikt in de body van een webdocument (Comstock / Comstock / Getty Images)

sleutels

Sleutels zijn de belangrijkste elementen van de CSS-syntaxis. Ze betekenen het openen en sluiten van alle CSS-parameters die daarin voorkomen. Vertegenwoordigd als {} volgen ze CSS-elementen die een afbeelding, positie, weergave-element of een combinatie van elementen betekenen. Sleutels kunnen voorkomen in elk div-element / laag en bevinden zich altijd in de tags '</ body>'. Hier is een voorbeeld:

div # voorbeeld {opvulling: 5px; marge: 20px; breedte: 350 px; }

haakje

Relationele elementen, zoals percentages en kleuren, staan tussen haakjes. Haakjes geven een extra definitie van CSS-elementen. In CSS-versies vóór CSS3 konden haakjes elementen op dezelfde manier definiëren als toetsen. Twee voorbeelden zijn respectievelijk kleur (gedefinieerd door hexadecimale code) en achtergrondafbeeldingen:

kleur: rgb (128, 128, 255); afbeelding: url ("/ images / bg.png")

beugels

Haakjes - [] -, ook wel attribuutselectoren genoemd, worden gebruikt om attribuutwaarden van een element aan te duiden. Er waren vier verschillende waarden in CSS2 en er zijn er maar drie toegevoegd met CSS3. De vier oorspronkelijke selectors definiëren de aanwezigheid van het attribuut - [title], corresponderend met elk element dat een gespecificeerd "title" attribuut heeft; de eenvoudige kenmerkwaarde - invoer [type = "verzenden"], corresponderend met elk invoerelement waarvan het kenmerktype gelijk is aan "verzenden"; de attribuutwaarde van de lijst - p [class ~ = "literary"], corresponderend met alinea's waarvan het klassekenmerk een lijst is van woorden gescheiden door spaties, waarvan er één "literair" is; en gedeeltelijke attribuutwaarde - [href ^ = "http:"], corresponderend met koppelingselementen waarvan de attribuutwaarde begint met "http:". De haakjes werden niet veel gebruikt vóór de introductie van Internet Explorer 7, omdat IE6 ze niet herkende.

Veel algebraïsche symbolen worden gebruikt als CSS-elementen (BananaStock / BananaStock / Getty Images)

chevrons

De selectors en secties van de HTML-documenten (Basic Hypertext Markup Language) en Extensible Markup Language (XML) worden gescheiden door punaises, ook wel punthaken genoemd. . Ze vertegenwoordigen ook een onderliggende element van sommige CSS-elementen. In CSS bestaat een "kindselector" uit twee of meer items gescheiden door het vignet ">". Deze geven bepaalde gedefinieerde secties van een webpagina aan: de hoofdtekst, die de pagina zichtbaar is; de lagen, die als vellen papier bovenop elkaar kunnen worden gestapeld; of titratie, aanduidende bepaalde objecten of data bekend als "microformats".

CSS-opmerkingen

Gescheiden van CSS-haakjes, maar nog steeds een waardevol organisatorisch hulpmiddel voor uitgebreide CSS-lay-outs, het zijn stylesheet-notities. Dit zijn opmerkingen die niets toevoegen aan de HTML-code en daarom de laadtijd van de pagina's niet verhogen; ze bieden een overzicht voor lange en uitgebreide CSS. Opmerkingen in CSS worden geplaatst in hun eigen kenmerk - / * - zoals dit:

/ Alle opmerkingen worden weergegeven in segmenten gescheiden door een schuine streep en een sterretje. /

Ze kunnen enorm waardevol zijn om u te helpen door secties van trapsgewijze stylesheets te navigeren.

CSS kan u helpen bij het ontwerpen van pagina's voor verschillende schermformaten zonder afzonderlijke lay-outs te maken (Comstock / Comstock / Getty Images)