TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

CSS Colors -opetusohjelma aloittelijoille

2

Värit tekevät verkkosivusta merkityksellisen. Sivu näyttää tavalliselta ja tylsältä ilman eri värejä. Voit käyttää kahdenlaisia ​​väriominaisuuksia CSS: n kanssa verkkosivulla. Yksi on etualan väri (yleensä väri) tekstin tai kirjasimen värin muuttamiseksi. Toinen on taustaväri, joka lisää taustaväriä eri HTML -elementteihin. Tässä opetusohjelmassa tutkitaan, miten CSS -väriominaisuuksia käytetään eri määritteiden kanssa.

Tekstin värin muuttaminen CSS: ssä

Otetaan esimerkki kappale -elementin värin muuttamisesta

punaiseksi. Voit tehdä tämän käyttämällä CSS: n alla olevaa tyylimääritelmää:

p { color: red; }

Se tuottaa seuraavan tuloksen selaimessa:

Tämä on punaisen värin kappale.

Taustavärien muuttaminen CSS: ssä

Voit muuttaa minkä tahansa HTML -elementin taustaväriä alla olevan CSS -tyylimäärityksen avulla:

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

Se tuottaa seuraavan tuloksen:

Tämä on punaisen värin kappale.

Huomaa, että olemme käyttäneet valkoista tekstiväriä niin, että se on selvästi luettavissa punaisella taustalla.

Värien määrittäminen CSS: ssä

Yllä olevissa esimerkeissä olemme käyttäneet punaista ja valkoista väriä nimen kanssa. Voit luoda miljoonia värejä yhdistämällä kolme perusväriä: punainen, sininen ja vihreä. Värien nimeä ei voi muistaa, eikä useimmilla väreillä ole varsinaista nimeä. Käytön yksinkertaistamiseksi CSS sallii seuraavat arvot värin määrittämiseksi:

  • Värien nimet, kuten punainen, vihreä tai valkoinen
  • Käyttämällä punaisen, vihreän ja sinisen desimaaliarvojen yhdistelmää, kuten rgb (20,50,200)
  • Käyttämällä heksadesimaalisia arvoja punaiselle, vihreälle ja siniselle, kuten #ffffff
  • Prosenttiarvo punaisille, sinisille ja vihreille väreille, kuten rgb (10%, 80%, 25%)
  • Käyttämällä värisävyä, kylläisyyttä ja vaaleutta, kuten hsl (0,80%, 70%)
  • Peittävyyden lisääminen RGB -arvoihin, kuten rgba (0,0,0,0,8)
  • Peittävyyden lisääminen HSL -arvoihin, kuten hsla (200,75%90%0,6)

Värinimien käyttäminen CSS: ssä

Olemme jo nähneet, miten nimeä käytetään väri- ja tausta -CSS -ominaisuuksissa. Selaimet voivat tunnistaa vain noin 150 värinimeä. Suosittelemme, että käytät väreissä numeroiden sijasta nimiä. Voit myös tarkistaa suosittujen sosiaalisen verkostoitumisen sivustojen värikoodit tästä artikkelista.

RGB -värien käyttö CSS: ssä

RGB -menetelmässä punaiset, siniset ja vihreät värit ilmoitetaan desimaaliluvuilla 0 – 255. Esimerkiksi tomaatin väri ilmoitetaan rgb: nä (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>

Se tuottaa seuraavan tuloksen selaimessa:

Tässä tekstissä on tomaatinvärinen tausta, jonka RGB -arvo on rgb (255,99,71).

Voit luoda yli 16 miljoonaa väriä vaihtamalla kolmea perusväriarvoa. Varmista kuitenkin, että käytät oikeaa tekstin väriä, jotta se on helppo lukea. Paras vaihtoehto on valita verkkosivustollesi turvalliset värit, kuten litteät käyttöliittymävärit.

Heksadesimaalisten väriarvojen käyttäminen

Tomaatin väri rgb (255,99,71) voidaan muuntaa vastaavaksi heksadesimaaliluvuksi kuin FF6347. Tämä on pelkkä 255: n muuntaminen FF: ksi, 99: stä 63: ksi ja 71: stä 47. Voit käyttää värinmuuntotyökaluja muuntaaksesi RGB: stä heksadesimaalikoodeiksi.

Voit käyttää heksadesimaalisia väriarvoja CSS: ssä, kuten alla:

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

"Pehmuste: 15px;" käytetään pehmusteen lisäämiseen tekstin sisältöön

elementti. Se tuottaa seuraavan tuloksen selaimessa:

Tässä tekstissä on tomaatinvärinen tausta, jonka heksadesimaalikoodi on #FF6347. Muista käyttää # -merkkiä heksadesimaalikoodin arvon edessä ja käyttää tekstin väriä #FFFFFF -muodossa. Lisäksi sekä pieni kotelo #ff6347 että iso kirjain #FF6347 tuottavat saman tuloksen.

RGB -arvojen käyttäminen prosentteina

Desimaalilukujen 0–255 sijasta voit myös mainita punaisen, vihreän ja sinisen prosenttiosuuden.

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

Se tuottaa seuraavan tuloksen:

Tässä tekstissä on tomaatinvärinen tausta ja heksadesimaalikoodiarvo #FF6347. Muista käyttää # -merkkiä heksadesimaalikoodin arvon edessä. Sekä pieni kotelo #ff6347 että iso kirjain #FF6347 tuottavat saman tuloksen.

Peittävyyden lisääminen RGB -väreihin

CSS3: ssa voit mainita värien alfa- tai opasiteettiarvon. Alfa -arvo lisätään desimaalilukuna välillä 0,0 – 1,0 neljänneksi arvoksi. Arvo 0 edustaa täysin läpinäkyvää, joka on 0% opasiteettia ja 1,0 osoittaa läpinäkymätöntä 100% opasiteetilla.

Alla on syntaksi, jossa käytetään alfa -arvoa rgb -väreissä, joiden opasiteetti on 20%:

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

Näytämme punaisen värin 20%, 40%, 60%, 800%ja 100%opasiteetti -arvoista, jotta se olisi ymmärrettävämpi.

CSS Colors -opetusohjelma aloittelijoille

Muista, että on myös erillinen CSS -ominaisuus nimeltä “opasiteetti: jota voidaan käyttää myös samaan tarkoitukseen. Opasiteetin etuna on, että sitä voidaan käyttää myös kuvissa. Mutta kaikki selaimet eivät tue sitä. Alla voit käyttää opasiteettiominaisuutta erikseen:

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

HSL -värien käyttö CSS: ssä

CSS3: lla on lisämahdollisuus määrittää väri HSL -menetelmällä. HSL tarkoittaa värisävyä, kylläisyyttä, vaaleutta ja sillä on kolme arvoa:

  • Värisävy on asteikko, joka on merkitty väripyörässä viittauksilla 0 = punainen, 120 = vihreä, 240 on sininen.
  • Värikylläisyys on prosenttiosuus harmaan väristä.
  • Vaaleus on prosentteina valon tai pimeyden arvo, jossa 0% on tumma (musta) ja 100% on vaalea (valkoinen).

Alla on esimerkki vihreän taustan tekemisestä HSL -väreillä CSS: ssä:

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

HSL ja läpinäkyvyys

Samoin kuin RGBA, voit myös lisätä peittävyyttä HSL -väreihin neljänä arvona. Opasiteetti tai alfa ilmoitetaan desimaaliluvulla välillä 0,0 – 1,0, jossa 0,0 tarkoittaa täysin läpinäkyvää ja 1,0 osoittaa läpinäkymätöntä. Alla on esimerkki vihreän värin luomisesta 50%: n opasiteetilla käyttämällä HSLA -ilmoitusta CSS: ssä.

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

Seuraavissa laatikoissa on vihreä väri eri alfa -tasoilla:

CSS Colors -opetusohjelma aloittelijoille

Täydellinen esimerkki värien käytöstä CSS: ssä

Tähän mennessä olemme nähneet erilaisia ​​tapoja määritellä värit CSS: ssä. Näytämme täysimittaisen esimerkin etualan ja taustavärien luomisesta:

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

Lopputulos näytetään alla:

Tässä on kappale -elementti.

Tämä on H2 -otsikko.

Tässä on toinen kappale.
Tämä on korostettu tekstin kappaleen sisällä.
Tätä korostetaan tekstin ulkopuolella.

  • Jos määrität CSS: ssä useita värejä samalle elementille, viimeisin on ensisijainen kaikkiin aiempiin ilmoituksiin nähden. Yllä olevassa esimerkissä kappaleen väri on #ffffff tästä syystä.
  • Tietyt tyylit ovat etusijalla emo- tai yleiseen tyyliin. H1 -väri on #008754 eikä keltainen.
  • Voit myös käyttää taustan lyhenne -ominaisuutta taustavärin määrittämiseen.

Jos taustaväriä ei mainita, elementillä on läpinäkyvä tausta. Koska selaimet käyttävät valkoista taustaa, näet, että useimmilla verkkosivuilla on valkoinen tausta. Itse asiassa sivujen elementit on merkitty valkoisella taustalla, jotta ne voidaan näyttää oikein, koska käyttäjät voivat muuttaa selaimen taustaväriä.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja