Los colores se especifican utilizando nombres predefenidos o valores RGB, HEX, HSL, RGBA, HSLA.
Cuando en css queremos defenir un color por el nombre, pues le ponemos el nombre del color, como red, blue, green etc
O tambien lo podemos defenir por sus valores como #ff6347
Nombre de colores
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
...
Nota: CSS/HTML admite 140 nombres de colores estándar .
Color de fondo
CSS puede restabelecer un fondo para los elementos html
Para hacer eso usamos la propriedad background-color seguido del nombre del color que queramos poner
Ejemplo
Una cabecera con fondo DodgerBlue
Hola Mundo
un parrafo con fondo tomato
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil qui quisquam quae, excepturi doloribus vel doloremque dolorem voluptates officia, cum ex repellendus? Maxime unde quo dolore praesentium autem qui sapiente!
codigo fuente de los ejemplos anteriores
<h1 style="background-color:DodgerBlue;">Hola Mundo</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
Color de texto
Tambien le podemos dar color al texto que escribimos
Hola Mundo
Texto en color DodgerBlue
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio ducimus sapiente, dolores suscipit aperiam maiores harum quaerat impedit? Harum mollitia, minima sint consectetur dolore eligendi tempore blanditiis dolorum quo adipisci.
Texto en color MediumSeaGreen
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum asperiores fugit, fugiat impedit atque, exercitationem eius culpa aliquam ab ducimus vitae aspernatur architecto. Officiis voluptatum consequatur quisquam deserunt, quo libero.
codigo fuente de los ejemplos anteriores
<h1 style="color:Tomato;">Hola Mundo</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Color del borde
Podemos poner un borde colorido a nuestro texto,
Hola Mundo
Hola Mundo
Hola Mundo
codigo fuente de los ejemplos anteriores
<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>
Valores de color
En CSS, los colores también se pueden especificar usando valores RGB, valores HEX, HSL valores, valores RGBA y valores HSLA:
En vez de colocarmos tomato le colocamos su valor
ejemplo
RGB (255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
ahora el mismo color con 50% de transparencia
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
Codigo fuente de los ejemplos anteriores
<h1 style="background-color:rgba(255, 99, 71); padding: 10px;">RGB (255, 99, 71)</h1> <h1 style="background-color:#ff6347 ; padding: 10px;">#ff6347 </h1> <h1 style="background-color:hsl(9, 100%, 64%); padding: 10px;">hsl(9, 100%, 64%)</h1> <p>ahora el mismo color con 50% de transparencia</p> <h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias