TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Opplæring i CSS -farger for nybegynnere

2

Farger gjør nettsiden meningsfull. Siden vil se ren og kjedelig ut uten forskjellige farger. Du kan bruke to typer fargeegenskaper med CSS på en webside. Den ene er forgrunnsfarge (vanligvis som farge) for å endre fargen på teksten eller skriften. For det andre er bakgrunnsfarge for å legge til bakgrunnsfarge til forskjellige HTML -elementer. I denne opplæringen la oss utforske hvordan du bruker CSS -fargegenskaper med forskjellige attributter.

Endre tekstfarge i CSS

La oss ta et eksempel på å endre fargen på et avsnittselement

til rødt. Du kan gjøre dette med stildefinisjonen nedenfor i CSS:

p { color: red; }

Det gir følgende resultat i nettleseren:

Dette er et avsnitt i rød farge.

Endre bakgrunnsfarger i CSS

Du kan endre bakgrunnsfargen et hvilket som helst HTML -element ved å bruke CSS -stildefinisjonen nedenfor:

p { background-color:red;color:white; }

Det vil gi følgende resultat:

Dette er et avsnitt i rød farge.

Merk at vi har brukt, hvit tekstfarge slik at den er tydelig lesbar med rød bakgrunn.

Definere farger i CSS

I eksemplene ovenfor har vi brukt røde og hvite farger med navnet. Du kan lage millioner av farger ved å kombinere de tre grunnleggende fargene rød, blå og grønn. Det er ikke mulig å huske navnet på fargene, og de fleste fargene har ikke noe egentlig navn. For å gjøre bruken enkel, tillater CSS følgende måter å definere fargeverdien på:

  • Navn på farger som rød, grønn eller hvit
  • Bruk av kombinasjon av røde, grønne og blå desimalverdier som rgb (20,50,200)
  • Bruk heksadesimale verdier for rødt, grønt og blått som #ffffff
  • Prosentverdi for røde, blå og grønne farger som rgb (10%, 80%, 25%)
  • Bruke fargetone, metning og lyshet som hsl (0,80%, 70%)
  • Legge til opacity til RGB -verdier som rgba (0,0,0,0,8)
  • Legge til opacity til HSL -verdier som hsla (200,75%90%0,6)

Bruke fargenavn i CSS

Vi har allerede sett hvordan vi bruker navn i farge- og bakgrunns -CSS -egenskaper. Det er bare rundt 150 fargenavn som nettlesere kan identifisere. Vi anbefaler at du bruker tall i stedet for navn for farger. Du kan også sjekke fargekodene for populære sosiale nettverk i denne artikkelen.

Bruke RGB -farger i CSS

I RGB -metoden er røde, blå og grønne farger angitt med desimaltall fra 0 til 255. For eksempel er tomatfarge angitt som rgb (255,99,71).

<div style="background-color: rgb(255,99,71);"> This text will have a tomato color background with the RGB value as rgb(255,99,71). </div>

Det gir følgende resultat i nettleseren:

Denne teksten vil ha en tomatfargebakgrunn med RGB -verdien som rgb (255,99,71).

Du kan lage mer enn 16 millioner farger ved å variere de tre grunnfargeverdiene. Sørg imidlertid for å bruke riktig tekstfarge slik at den er lett å lese. Det beste alternativet er å velge nettsikre farger som flate brukergrensesnittfarger for nettstedet ditt.

Bruke heksadesimale fargeverdier

Tomatfargen rgb (255,99,71) kan konverteres til en tilsvarende heksadesimal verdi som FF6347. Dette er bare en konvertering av 255 til FF, 99 til 63 og 71 til 47. Du kan bruke fargeomformerverktøy til å konvertere mellom RGB- til hex -koder.

Du kan bruke heksadesimale fargeverdier i CSS som nedenfor:

<div style="background-color: #FF6347; padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

"Polstring: 15px;" brukes til å legge polstring til tekstinnholdet inne i

element. Det gir følgende resultat i nettleseren:

Denne teksten vil ha en tomatfargebakgrunn med hex -kodeverdien som #FF6347. Husk å bruke # -symbolet foran hex -kodeverdien, og bruk tekstfargen som #FFFFFF. Både liten sak #ff6347 og stor bokstav #FF6347 vil også gi det samme resultatet.

Bruke RGB -verdier som prosent

I stedet for desimaltall fra 0 til 255, kan du også nevne prosentverdien for rødt, grønt og blått.

<div style="background-color: rgb(20%,69%,74%); padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

Det vil gi følgende resultat:

Denne teksten vil ha en tomatfargebakgrunn med hex -kodeverdien som #FF6347. Husk å bruke # -symbolet foran hex -kodeverdien. Både liten sak #ff6347 og stor bokstav #FF6347 vil gi samme resultat.

Legger til ugjennomsiktighet i RGB -farger

I CSS3 har du muligheten til å nevne alfa- eller opasitetsverdien for fargene. Alfa -verdien legges til som et desimaltall mellom 0,0 til 1,0 som en fjerde verdi. Verdien 0 representerer helt gjennomsiktig som er 0% opacity og 1.0 indikerer ugjennomsiktig med 100% opacity.

Nedenfor er syntaksen for å bruke alfa -verdi i rgb -farge med 20% opacitet:

<div style="background-color: rgba(255,0,0,0.2);"> Content Here...... </div>

La oss vise den røde fargen med 20%, 40%, 60%, 800%og 100%av opasitetsverdiene for å gjøre den mer forståelig.

Opplæring i CSS -farger for nybegynnere

Husk at det også er en egen CSS -egenskap kalt "opacity: som også kan brukes til samme formål. Fordelen med ugjennomsiktighet er at den også kan brukes på bilder. Men den støttes ikke av alle nettlesere. Nedenfor ser du hvordan du kan bruke opacity -egenskapen separat:

p { background-color: rgb(255,0,0); opacity: 0.5; }

Bruke HSL -farger i CSS

CSS3 har et ekstra alternativ for å definere en farge ved hjelp av HSL -metoden. HSL står for fargetone, metning, lyshet og har tre verdier:

  • Nyanse er en grad angitt i et fargehjul med referanser som 0 = rødt, 120 = grønt, 240 er blått.
  • Metning er en prosentvis verdi av grått i en farge.
  • Lyshet er en prosentverdi av lys eller mørk der 0% er mørk (svart) og 100% er lys (hvit).

Nedenfor er et eksempel på å lage grønn bakgrunn med HSL -farge i CSS:

<div style="background-color: hsl(120,100%,50%,0.2);"> Content Here...... </div>

HSL med opacity

I likhet med RGBA kan du også legge til opacitet i HSL -farge som fjerde verdi. Opasiteten eller alfa er angitt med et desimaltall mellom 0,0 til 1,0 hvor 0,0 indikerer helt gjennomsiktig og 1,0 indikerer ugjennomsiktig. Nedenfor er et eksempel på å lage grønn farge med 50% opacitet ved bruk av HSLA -erklæring i CSS.

<div style="background-color: hsla(120,100%,50%,0.6);"> Content Here...... </div>

Følgende bokser viser grønn farge på forskjellige alfa -nivåer:

Opplæring i CSS -farger for nybegynnere

Komplett eksempel på bruk av farger i CSS

Per nå har vi sett forskjellige måter å definere farger på CSS. La oss vise et eksempel i full lengde på å lage forgrunns- og bakgrunnsfarger:

<!-- This is CSS --> <style> div {background-color:tomato; padding:10px;} p {color: rgba(50,90,20,0.8);} p {color: #ffffff;} /* This will be the final paragraph color */ h1 {color: yellow;} div > h1 {color:#008754;} /* This will be the final h1 color */ h2 {background:hsla(10,20%,30%,0.8);} h2 {color:#ffffff;} em {color: #4500aa;} p > em {background-color: rgba(60,43,78,0.7); color:yellow;} </style> <!-- This is HTML --> <div> <!-- Background Tomato --> <h1>This is a H1 heading.</h1> <!-- Color #008754 --> <p>Here is a paragraph element.</p> <!-- Color #ffffff --> <h2>This is a H2 heading.</h2> <!-- Background hsla(10,20%,30%,0.8) --> <p>Here is another paragraph. <!-- Color #ffffff --> <em>This is emphasized text inside paragraph.</em> <!-- Background rgba(60,43,78,0.7) Color yellow --> </p> <em>This is emphasized text outside paragraph.</em> <!-- Color #4500aa --> </div>

Det endelige resultatet vil bli vist som nedenfor:

Her er et avsnittselement.

Dette er en H2 -overskrift.

Her er et annet avsnitt.
Dette er understreket tekst inne i avsnittet.
Dette er understreket tekst utenfor avsnitt.

  • Hvis du definerer flere farger i CSS for det samme elementet, vil det siste ha forrang foran alle tidligere erklæringer. I eksemplet ovenfor vil avsnittet ha #ffffff farge på grunn av denne grunnen.
  • Spesifikke stiler vil gå foran den overordnede eller generiske stilen. Fargen h1 vil være #008754 og ikke gul.
  • Du kan også bruke egenskapen for bakgrunnskort for å definere bakgrunnsfargen.

Hvis bakgrunnsfargen ikke er nevnt, vil elementet ha gjennomsiktig bakgrunn. Siden nettlesere bruker hvit bakgrunn, vil du se at de fleste sidene på nettet har hvit bakgrunn. Faktisk er elementet på sidene deklarert med hvit bakgrunn for å sikre riktig visning ettersom brukere kan endre bakgrunnsfargen på nettleseren.

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon