Tutorial CSS

CSS INICIO Introducción a CSS Sintaxis CSS Selectores de CSS CSS Cómo Comentarios CSS Colores CSS Fondos CSS Bordes CSS Márgenes CSS Relleno CSS Altura/ancho de CSS Modelo de caja CSS Esquema CSS Texto CSS Fuentes CSS Iconos CSS Enlaces CSS Listas CSS Tablas CSS Pantalla CSS Ancho máximo de CSS Posición de CSS Índice Z de CSS Desbordamiento de CSS CSS flotante Bloque en línea CSS Alinear CSS Combinadores de CSS Pseudo-clase CSS Pseudoelemento CSS Opacidad CSS Barra de navegación CSS Menús desplegables de CSS Galería de imágenes CSS Sprites de imagen CSS Selectores de atributos CSS Formularios CSS Contadores CSS Diseño del sitio web CSS Unidades CSS Especificidad CSS CSS !importante Funciones matemáticas CSS

CSS Avanzado

Esquinas redondeadas CSS Imágenes de borde CSS Fondos CSS Colores CSS Palabras clave de color CSS Gradientes CSS Sombras CSS Efectos de texto CSS Fuentes web CSS Transformaciones CSS 2D Transformaciones CSS 3D Transiciones CSS Animaciones CSS Información sobre herramientas de CSS Imágenes de estilo CSS Reflejo de imagen CSS Ajuste de objeto CSS Posición del objeto CSS Enmascaramiento CSS Botones CSS Paginación CSS Columnas múltiples de CSS Interfaz de usuario de CSS Variables CSS Tamaño del cuadro CSS Consultas de medios CSS Ejemplos de CSS MQ Caja flexible de CSS

Responsivo CSS

Introducción a la tracción trasera Vista de RWD Vista de cuadrícula RWD Consultas de medios RWD Imágenes de RWD Vídeos de RWD Marcos RWD Plantillas RWD

Cuadrícula CSS

Introducción a la cuadrícula Contenedor de rejilla Elemento de cuadrícula

CSS SASS

Tutorial de SASS

Ejemplos de CSS

Plantillas CSS Ejemplos de CSS prueba css Ejercicios CSS Certificado CSS

Referencias CSS

Referencia CSS Selectores de CSS Funciones CSS CSS Referencia Aural Fuentes web seguras CSS CSS Animable Unidades CSS Convertidor CSS PX-EM Colores CSS Valores de color CSS Valores predeterminados de CSS Compatibilidad con navegador CSS

Colores CSS


Los colores se especifican utilizando nombres de color predefinidos o valores RGB, HEX, HSL, RGBA, HSLA.


Nombres de colores CSS

En CSS, se puede especificar un color usando un nombre de color predefinido:

Tomate
naranja
DodgerBlue
MedioMarVerde
gris
PizarraAzul
Violeta
Gris claro

CSS/HTML admite 140 nombres de colores estándar .


Color de fondo CSS

Puede establecer el color de fondo para los elementos HTML:

Hola Mundo


El dolor mismo es el amor. Por eso es para el más mínimo por venir, que nuestra práctica normal soporta para aprovechar las consecuencias.

Ejemplo

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>


Color de texto CSS

Puede establecer el color del texto:

Hola Mundo

El dolor mismo es el amor.

Por eso es para el más mínimo por venir, que nuestra práctica normal soporta para aprovechar las consecuencias.

Ejemplo

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Color del borde CSS

Puede establecer el color de los bordes:

Hola Mundo

Hola Mundo

Hola Mundo

Ejemplo

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

En CSS, los colores también se pueden especificar usando valores RGB, valores HEX, valores HSL, valores RGBA y valores HSLA:

Igual que el nombre del color "Tomate":

RGB (255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Igual que el nombre del color "Tomate", pero 50% transparente:

RGBA (255, 99, 71, 0,5)
hsla (9, 100%, 64%, 0.5)

Ejemplo

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Obtenga más información sobre los valores de color

Aprenderá más sobre RGB , HEX y HSL en los próximos capítulos.