Denna artikel tar fram ett intressant och ett viktigt ämne som kallas Väljare och följer upp det med en praktisk praktisk demonstration. Följande tips kommer att behandlas i den här artikeln,
- Styling HTML-element
- CSS-väljare
- CSS Id-väljare
- CSS klassväljare
- CSS Universal Selector
- CSS-gruppväljare
Så låt oss komma igång då,
Styling HTML-element
Låt oss förstå vad CSS är innan vi kommer till CSS-väljare. Om HTML ska betraktas som ett skelett är CSS (Cascading Style Sheets) som musklerna och huden. Hjärnan är JavaScript. Så för en webbsida är CSS-stilar i huvudsak layout och design. Direkt från placering av bilder och text till teckensnittsstorlek och bakgrundsfärg styr CSS hur HTML-elementen ser ut i en webbläsare.
Du kan förstå CSS bättre om du har ett bra grepp om vad CSS-väljare är. Med dessa väljare kan du rikta in dig på specifika HTML-element så att du kan använda rätt stil på dem.
Låt oss förstå hur vi kan välja HTML-element,
vad är ett dödläge i java
Hur man väljer element?
Säg, du vill att en viss rubrik ska utformas annorlunda än resten av innehållet på en webbsida. Nu, med CSS-väljare kan du rikta in det HTML-elementet för att utforma det annorlunda. CSS-väljare hjälper till att definiera de element för vilka en viss uppsättning CSS-regler gäller. Det finns olika typer av CSS-väljare som låter dig exakt välja de element du vill utforma. Du kan ge hela webbsidan en allmän utformning och sedan arbeta dig för att utforma andra delar av sidan.
Väljare är en del av en CSS-regel, och dessa väljare kommer strax före deklarationen av CSS-block. För en bättre förståelse kan du hänvisa till bilden nedan.
Fortsätter med CSS Selectors-artikeln
CSS-väljare
Med den här väljaren kan du välja ett HTML-element efter dess namn.
Tänk på koden nedan:
p {text-align: center color: magenta}Denna stil kommer att tillämpas på varje stycke.
Paragraf 1
Punkt 2
Den här koden ger dig följande resultat:
Denna stil kommer att tillämpas på varje stycke
Paragraf 1
Punkt 2
I ovanstående kod har HTML-elementen centrerats och har färgen 'magenta'.
Fortsätter med CSS Selectors-artikeln
CSS Id-väljare
Genom att välja id-attribut för ett HTML-element kan du välja det specifika elementet. Eftersom id: t är unikt för en sida kan du välja rätt element genom att använda id-attributet.
Du kan välja HTML-elementet med hjälp av '#' följt av id för det elementet. Till exempel väljer '# första namn' det element där id är 'förnamn'.
Tänk på följande kod:
# para1 {text-align: center color: orange}Hej världen
Denna punkt påverkas inte.
Utgången för ovanstående kod är:
Hej världen
Denna punkt påverkas inte.
Som du kan se i ovanstående utgång, genom att inkludera id = ”para1 ″, kunde vi ändra färgen på det elementet till orange. Det andra elementet som inte har detta förblir opåverkat.
Fortsätter med CSS Selectors-artikeln
CSS klassväljare
Med hjälp av klassväljaren kan du välja HTML-element som har ett specifikt klassattribut. Du kan definiera väljaren med hjälp av en punkt (fullstoppsymbol) följt av klassnamnet. Exempelvis väljer .intro de element där klassen är ”intro”. En sak att tänka på är att du aldrig kan börja ett klassnamn med ett nummer.
Tänk på följande kod:
.center {text-align: center color: pink}Denna rubrik är rosa och mittjusterad.
Detta stycke är rosa och mittjusterat.
Utgången från ovanstående kod är:
Denna rubrik är rosa och mittjusterad.
Detta stycke är rosa och mittjusterat.
Du kan använda CSS-klassväljare för ett specifikt element. Om du bara vill att ett specifikt element ska utformas kan du använda elementnamnet tillsammans med klassväljaren.
Tänk till exempel på följande kod:
p.center {text-align: center color: pink}Denna rubrik påverkas inte
Detta stycke är rosa och mittjusterat.
Utgången från ovanstående kod är:
Denna rubrik påverkas inte
Detta stycke är rosa och mittjusterat.
Som du kan se i utgången påverkas inte rubriken h2 av stilen. Eftersom vi har angett 'p.center' påverkas endast stycket av stilen.
Gå vidare med den här CSS Selectors-artikeln,
CSS Universal Selector
Denna typ av väljare kan betraktas som ett jokertecken som markerar alla element på sidan. Det markerar alla element på sidan och det specificeras av “*”.
Tänk till exempel på följande kod:
* {färg: mörkgrön teckenstorlek: 30 pixlar}Detta är ett test (mindre typsnitt)
Detta är ett stycke.
Utgången för ovanstående kod är:
Hej världen
Detta är ett test (mindre typsnitt)
Detta är ett stycke.
Som du kan se i utdata har alla element som definieras med gruppväljaren samma stildefinition - de är mittjusterade och teckensnittsfärgen är cyan.
Detta leder oss till slutet av den här artikeln.
Kolla in vår som kommer med instruktörsledad live-utbildning och verklig projektupplevelse. Denna utbildning gör dig skicklig i färdigheter för att arbeta med back-end och front-end webbteknik. Det inkluderar utbildning om webbutveckling, jQuery, Angular, NodeJS, ExpressJS och MongoDB.
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen i artikeln så återkommer vi till dig.