Väreillä on tärkeä rooli tiedon välittämisessä ei-verbaalisesti. Interaktiivisilla väreillä varustettua verkkosivustoa pidetään houkuttelevana ja visuaalisesti houkuttelevana. HTML-elementtien värien käyttämiseen on erilaisia tapoja: RGB, RGBA, HEX Code, HSLA ja HSL. Voit kuitenkin löytää värikoodeja tarkastelemalla sivua, valitsemalla värit värivalitsimesta tai käyttämällä Developers Tool -paneelin silmätippausominaisuutta.
Tässä tutkimuksessa käsittelemme menetelmiä värikoodin löytämiseksi HTML:stä
Tapa 1: Etsi värikoodi HTML:stä tarkastelemalla Web-sivua
Seuraavien vaiheiden avulla löydät värikoodin tarkastelemalla sivua.
Vaihe 1: Avaa Web-sivu
Avaa ensin vaadittu verkkosivu:
Vaihe 2: Valitse tarkastusvaihtoehto
Napsauta sivua hiiren kakkospainikkeella ja valitse ' Tarkastaa ' -vaihtoehto valikosta, joka tarjoaa pääsyn ' Kehitystyökalut ”paneeli:
Tämän seurauksena ' Elementit ” -välilehti tulee näkyviin selaimen alareunaan:
Vaihe 3: Säädä kehittäjätyökalupaneelin paikkaa
Klikkaamalla kulman kolmea pistettä voit valita paneelin sijainnin. Olemme esimerkiksi valinneet vihreänä korostetun kuvakkeen. Lisäksi tarkastusikkunan kokoa voidaan muuttaa vetämällä sen kulmia:
Vaihe 4: Valitse tarkastettava elementti
Napsauta sitten korostettua kuvaketta valitaksesi elementin, jonka haluat tarkastaa:
Vaihe 5: Valitse elementti
Vie hiiren kohdistin elementtiin, jonka värikoodi on löydettävä, ja napsauta sitä. Tämän seurauksena ' Tyylit ” -välilehti avautuu ja näyttää valitun elementin tyyliominaisuudet, josta sinun on valittava väri vihreän korostetun ruudun osoittamalla tavalla:
Vaihe 6: Valitse väri värivalitsimesta
Kopioi värikoodi avautuneesta värivalintaikkunasta:
Alla oleva kuva osoittaa, että voimme valita värejä myös napsauttamalla punaisella korostettuja pieniä väriruutuja. Kun taas keltainen laatikko edustaa osoitinta, jota muutetaan asteittain, jotta näet valitun elementin värin:
Vaihe 7: Säädä värin peittävyyttä
Voit myös säätää värien peittävyyttä alla olevan GIF-kuvan osoittamalla tavalla:
Tapa 2: Etsi värikoodi HTML:stä käyttämällä silmätippausominaisuutta
Eye dropper -ominaisuutta voidaan käyttää myös minkä tahansa värin valitsemiseen verkkosivulta. Tämä ominaisuus on erittäin kätevä, koska se voi valita värin mistä tahansa näytetyn ikkunan kohdasta.
Huomautus: Silmäpipat-ominaisuutta edustaa punainen korostettu laatikko alla olevassa kuvassa:
Tässä on esitys silmätippaustyökalun toiminnasta:
Kun olet valinnut elementin värin, kopioi värikoodi ja liitä se projektisi CSS:ään.
Johtopäätös
HTML-elementtien värien käyttämiseen on erilaisia tapoja: RGB, RGBA, HEX Code, HSLA ja HSL. Löydät värikoodit ' Tarkastus 'millä tahansa verkkosivulla tai valitsemalla värit ' värinvalitsija ' ja käyttämällä ' Silmäpisara ”-ominaisuus. Tässä artikkelissa on esitetty yksityiskohtaisten esimerkkien avulla menetelmä värikoodien löytämiseksi HTML:stä.