InternetDisseny web

Propietats de color CSS. codis de color

Una de les eines per canviar els estils de pàgina web - color de CSS. Hi ha diverses maneres de canviar aquesta configuració. Cada un té els seus avantatges i els seus desavantatges.

nom

La propietat de color estableix el color de l'article. 145 tons de títols inclosos en el CSS. Entre ells hi ha senzilla (com negre, blau) i complexos (com ara el carmesí, lawngreen).

A causa de que tota la llista de difícil de recordar, el nom del full d'estil s'utilitzen rarament.

RGB

La majoria dels televisors, telèfons intel·ligents, monitors treballen amb el model de color RGB. És a dir, qualsevol color es pot ajustar a una combinació de colors primaris, que són de color vermell, verd i blau. . Un enfocament similar s'utilitza en tots dos dispositius, i en el CSS. основного состава принимают значения от 0 до 255. А количество возможных оттенков равно 16777216. Els colors són valors bàsics composició portarà des de 0 a 255. Un nombre de possibles colors és igual a 16777216.

Atès que el model RGB està directament relacionada amb les lleis físiques d'imatges en color, el negre es van especificar com el RGB (0, 0, 0), blanc - RGB (255, 255, 255). sistema RGBA completament similar a RGB, amb l'addició de la cadena alfa. Afecta la transparència, que es barreja amb el color de fons. En aquesta forma de l'element variarà d'acord amb el "substrat".

HSL

Per entendre com funciona el sistema HLS, cal presentar una roda de color. En el seu centre és de color vermell, llavors (a la dreta) tots els altres colors de l'arc de Sant Martí. цвета при помощи системы HLS требуется задать три параметра: Per determinar els colors al CSS usant el sistema HLS requereix tres paràmetres:

  • tonalitat (en graus) - la direcció del centre del cercle;
  • la saturació (percentatge) - la quantitat de color que necessita;
  • brillantor (en percentatge).

Per exemple, porpra es pot determinar de manera: HSL (315, 100%, 45%). HSL és més convenient per als experiments. Després d'estudiar la roda de color, vostè pot mentre es veu el full d'estil més o menys representen quin color Conjunt d'elements específics. HSLA - mateix HLS, només que amb alpha: HSL (0, 100%, 50, 0,6) - vermell, transparent lleugerament més de la meitat.

HEX

CSS цвета можно задать, используя шестнадцатеричное представление, например оранжевый определяется значением #FF4500 . En CSS, es pot establir el color mitjançant la representació hexadecimal, com el taronja determinat pel valor # FF4500.

Per a una millor comprensió del que la representació hexadecimal, ha de considerar a més el sistema decimal. És un nombre de 0 a 9. Quan s'afegeix la necessitat de comptar nombre més gran que 9 d'un bit, i resulta que 10, després 100, i així successivament. E. Tot exactament igual en notació hexadecimal, però en ella després de les 9 és A, llavors B, i així successivament per a F - el mateix que 15 en el sistema decimal. A continuació, afegir un dígit, i resulta que 10 16 en els termes habituals.

Igual que en RGB, HEX colors per indicar en quines proporcions a utilitzar colors primaris. En aquest cas, no es separen per comes (color: # FFD500). Cada dos caràcters especifiquen el nombre de vermell, verd i blau.

CSS. Per regla general, el sistema HEX no s'utilitza durant els experiments, ja que és impossible trobar el color CSS dreta. может помочь в этом деле, но если постоянно сверяться с ней, работа затянется. La taula pot ajudar en aquest assumpte, però si es fa referència constantment a la mateixa, el treball es retardarà. representació hexadecimal és més convenient quan la plantilla es transfereix des de l'editor gràfic. És molt més fàcil de copiar de només un dígit de tres voltes.

Quin camí és el millor?

A causa d'això, no podem dir res concret. Si els elements de la interfície necessiten transparència, triar entre RGBA i HSLA. Si desitja experimentar al navegador roda de color HLS serà el més convenient. Si utilitzeu una paleta o transferir el disseny de Photoshop, de preferir els codis de color hexadecimals CSS.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 ca.delachieve.com. Theme powered by WordPress.