TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

CSS färger handledning för nybörjare

64

Färger gör webbsidan meningsfull. Sidan kommer att se enkel och tråkig ut utan olika färger. Du kan använda två typer av färgegenskaper med CSS på en webbsida. Den ena är förgrundsfärg (vanligtvis som färg) för att ändra textens eller teckensnittets färg. För det andra är bakgrundsfärg för att lägga till bakgrundsfärg till olika HTML -element. Låt oss i denna handledning utforska hur du använder CSS -färgegenskaper med olika attribut.

Ändra textfärg i CSS

Låt oss ta ett exempel på att ändra färgen på ett styckeelement

till rött. Du kan göra detta med nedanstående stildefinition i CSS:

p { color: red; }

Det ger följande resultat i webbläsaren:

Detta är ett stycke i röd färg.

Ändra bakgrundsfärger i CSS

Du kan ändra bakgrundsfärgen vilket HTML -element som helst med hjälp av CSS -stildefinitionen nedan:

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

Det ger följande resultat:

Detta är ett stycke i röd färg.

Observera att vi har använt, vit textfärg så att den är tydligt läsbar med röd bakgrund.

Definiera färger i CSS

I exemplen ovan har vi använt röda och vita färger med namnet. Du kan skapa miljontals färger genom att kombinera de tre grundläggande färgerna rött, blått och grönt. Det är inte möjligt att komma ihåg namnet på färgerna och de flesta färgerna har inget egentligt namn. För att göra användningen enkel, tillåter CSS följande sätt att definiera färgvärdet:

  • Namn på färger som rött, grönt eller vitt
  • Använda kombinationen av röda, gröna och blå decimalvärden som rgb (20,50,200)
  • Använda hexadecimala värden för rött, grönt och blått som #ffffff
  • Procentvärde för röda, blå och gröna färger som rgb (10%, 80%, 25%)
  • Använda nyans, mättnad och ljushet som hsl (0,80%, 70%)
  • Lägga till opacitet till RGB -värden som rgba (0,0,0,0,8)
  • Lägga till opacitet till HSL -värden som hsla (200,75%90%0,6)

Använda färgnamn i CSS

Vi har redan sett hur man använder namn i färg- och bakgrunds -CSS -egenskaper. Det finns bara cirka 150 färgnamn som webbläsare kan identifiera. Vi rekommenderar att du använder siffror istället för namn för färger. Du kan också kolla in färgkoderna för den populära sociala nätverkssajten i den här artikeln.

Använda RGB -färger i CSS

I RGB -metoden indikeras röda, blå och gröna färger med decimaltalen från 0 till 255. Till exempel anges tomatfärgen 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 ger följande resultat i webbläsaren:

Denna text kommer att ha en tomatfärgbakgrund med RGB -värdet som rgb (255,99,71).

Du kan skapa mer än 16 miljoner färger genom att variera de tre grundfärgvärdena. Se dock till att använda rätt textfärg så att den är lättläst. Det bästa alternativet är att välja webbsäkra färger som platta UI -färger för din webbplats.

Använda hexadecimala färgvärden

Tomatfärgen rgb (255,99,71) kan konverteras till ett ekvivalent hexadecimalt värde som FF6347. Detta är bara en omvandling av 255 till FF, 99 till 63 och 71 till 47. Du kan använda färgomvandlarverktyg för att konvertera mellan RGB- till hex -koder.

Du kan använda hexadecimala färgvärden i CSS som nedan:

<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>

"Vaddering: 15px;" används för att lägga till vaddering till textinnehållet inuti

element. Det ger följande resultat i webbläsaren:

Denna text kommer att ha en tomatfärgbakgrund med hex -kodvärdet som #FF6347. Kom ihåg att använda # -symbolen framför hex -kodvärdet och använd textfärg som #FFFFFF. Både små fall #ff6347 och versaler #FF6347 ger också samma resultat.

Använda RGB -värden som procent

I stället för decimaltal från 0 till 255 kan du också nämna procentvärdet för rött, grönt och 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 ger följande resultat:

Denna text kommer att ha en tomatfärgbakgrund med hex -kodvärdet som #FF6347. Kom ihåg att använda # -symbolen framför hex -kodvärdet. Både små fall #ff6347 och stora fall #FF6347 ger samma resultat.

Lägger till opacitet i RGB -färger

I CSS3 har du möjlighet att nämna alfa- eller opacitetsvärdet för färgerna. Alfa -värdet läggs till som ett decimaltal mellan 0,0 till 1,0 som ett fjärde värde. Värdet 0 representerar helt transparent vilket är 0% opacitet och 1.0 indikerar ogenomskinligt med 100% opacitet.

Nedan är syntaxen för att använda alfa -värde i rgb -färg med 20% opacitet:

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

Låt oss visa den röda färgen med 20%, 40%, 60%, 800%och 100%av opacitetsvärden för att göra den mer begriplig.

CSS färger handledning för nybörjare

Kom ihåg att det också finns en separat CSS -egenskap som kallas "opacitet: som också kan användas för samma ändamål. Fördelen med opacitet är att den också kan användas på bilder. Men det stöds inte av alla webbläsare. Nedan följer hur du kan använda opacity -egenskapen separat:

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

Använda HSL -färger i CSS

CSS3 har ytterligare möjlighet att definiera en färg med HSL -metod. HSL står för nyans, mättnad, ljushet och har tre värden:

  • Nyans är en grad som anges i ett färghjul med referenser som 0 = röd, 120 = grön, 240 är blå.
  • Mättnad är ett procentvärde av grått i en färg.
  • Ljushet är ett procentvärde av ljus eller mörker där 0% är mörkt (svart) och 100% är ljus (vitt).

Nedan är ett exempel på att göra grön bakgrund med HSL -färg i CSS:

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

HSL med opacitet

I likhet med RGBA kan du också lägga till opacitet i HSL -färg som fjärde värde. Opaciteten eller alfa indikeras med ett decimaltal mellan 0,0 till 1,0 där 0,0 indikerar helt transparent och 1,0 indikerar ogenomskinligt. Nedan följer ett exempel på att skapa grön färg med 50% opacitet med HSLA -deklaration i CSS.

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

Följande rutor visar grön färg på olika alfa -nivåer:

CSS färger handledning för nybörjare

Komplett exempel på användning av färger i CSS

Från och med nu har vi sett olika sätt att definiera färger i CSS. Låt oss visa ett exempel på full längd för att skapa för- och bakgrundsfärger:

<!-- 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 slutliga resultatet kommer att visas som nedan:

Här är ett styckeelement.

Detta är en H2 -rubrik.

Här är ett annat stycke.
Detta är betonad text inuti paragrafen.
Detta betonas text utanför paragrafen.

  • Om du definierar flera färger i CSS för samma element kommer det senaste att ha företräde framför alla tidigare deklarationer. I exemplet ovan kommer stycket att ha #ffffff färg på grund av detta skäl.
  • Specifika stilar har företräde framför den överordnade eller generiska stilen. H1 -färgen blir #008754 och inte gul.
  • Du kan också använda bakgrunden stenografiegenskap för att definiera bakgrundsfärgen.

Om bakgrundsfärgen inte nämns kommer elementet att ha transparent bakgrund. Eftersom webbläsare använder vit bakgrund ser du att de flesta sidor på webben har vit bakgrund. Faktiskt deklareras elementet på sidorna med vit bakgrund för att säkerställa korrekt visning eftersom användare kan ändra webbläsarens bakgrundsfärg.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer