CSS-vælger og dens rolle i formatering af html-dokumenter

Ved at oprette dit websted og udfylde det med visse elementer på en webside, vil alle sikkert komme på tværs af et koncept som en CSS-vælger. Det tjener til nøjagtigt at bestemme alle elementer i html-filen, deres design og placere på siden. For at gøre dette skal du oprette et CSS-dokument, som foreskriver dem eller andre vælgere og parametre til deres formatering: farve, størrelse, position og andre. Hver webdesigner skal vide og være i stand til korrekt at indtaste de ønskede selektorer. De er opdelt efter typer, hvoraf de vigtigste vil blive betragtet nedenfor.

Typer af selektorer i CSS

Afhængigt af hvilket html-element formateringen anvendes til, kan CSS-vælgeren henvise til en af følgende grupper:

• Selektoren af tags;
• Klassevælger;
• id-vælgeren;
• Egenskabsvælger.

Selector Tag

Det kaldes også en "type vælger" eller "ved element", det er den enkleste og mest almindelige. Som navnet i CSS-dokumentet er navnene på de elementer i den html-fil, som vi beskriver. Hvis vi f.eks. Skal angive en afsnitstil, angiver vi egenskaberne og deres værdier for p {background: x; Farve: y; Størrelse: z}. I dette tilfælde vil alle afsnit på websiden have samme formatering (baggrundsfarve, tekst, størrelse osv.).

Klassevælger

Og hvad hvis du har brug for at indstille din egen stil anderledes for andre for hvert afsnit? Til dette er der en klassevælger.

CSS-dokumentet i dette tilfælde vil indeholde følgende post: p.first {color: x; Skriftstørrelse: y}. Således sætter vi egenskaberne "farve" og "størrelse" kun til afsnit af klasse først.

I html-dokumentet skal du i dette tilfælde indtaste klassetributtet med navnet på stilen først. Klasser kan være så mange som de stilarter, du vil anvende til elementer på en webside.

Selector efter id

Ofte er der behov for at definere stilen endnu mere præcist, for eksempel til et enkelt element på siden eller til deres prøve. I denne situation kommer id-vælgeren til undsætning. I html-filen tildeler vi navnet til det ønskede element og identificerer det blandt de andre. For eksempel vil elementet, som vi ønsker at indstille forskelligt fra den anden stil, være titlen på artiklen.

Derefter i html-dokumentet tildeler vi identifikatoren h1 til overskriften, for eksempel articlename. Og i en CSS-fil skal du indstille stilen ved at tilføje et gitter inden identifikationsnavnet: #articlename {color: blue; Tekst-align: center}. Nu har vores overskrift farve blå og centerjustering.

Hver af ovennævnte typer kan kaldes en "enkel CSS-vælger". De definerer formatering for en bestemt parameter i et HTML-dokument: en samling af lignende elementer (f.eks. Alle afsnit i en artikel), en klasse (for eksempel kun det første afsnit) eller et bestemt element (f.eks. En artikels titel).

Egenskabsvælger

Ud over ovenstående er der CSS-attributtselektorer - en mere kompleks måde at anvende stilarter på. Det giver dig mulighed for at formatere HTML-elementer med den valgte attribut eller dens værdi. Der er flere sorter af denne vælger:

• Ved tilstedeværelsen af en attribut;
• Med sin præcise værdi
• Ved delvis attributværdi
• Med sin specifikke betydning.

Lad os se nærmere på hver af disse sorter:

1. Det første tilfælde. Formatering bruges, hvis der findes en specifik attribut i html-koden (de kan være p, div, header osv.). Hvis det mangler, bruges en universel stil til alle elementer. For eksempel for emner, der har en titel (et værktøjstip).
2. Det andet tilfælde. Stilen gælder kun for de html-elementer, der har nøjagtige matches af attributværdier. For eksempel til de inputelementer, hvis værdi af typen attributten er lig med at indsende.
3. Den tredje sag. Formatering er begrænset til elementer med et bestemt ord i listen over værdier. For eksempel sidebar i attributten "klasse" af div-elementer.
4. Den fjerde sag. Stilen er kun angivet for de elementer i HTML-dokumentet, for hvilken en bestemt attribut har en bestemt værdi og begynder med den. For eksempel er anvendelsen af den angivne farve på alle elementer, hvis sprog for attributter er engelsk (dette kan være en, en-rus, en-au osv.).

Således kan du ved hjælp af en bestemt CSS-vælger bedst designe både hele websiden og beskrive dets individuelle elementer.