Propiedades del esquema CSS
Un esquema es una línea trazada alrededor de un elemento - fuera de la frontera. Esto se puede utilizar para hacer un elemento "stand out" .
Los CSS outline propiedades especifican el estilo, color, y la anchura de un esquema.
Este elemento tiene un borde negro fino y un doble esquema que es 10px de ancho y verde.
CSS Outline
Un outline es una línea que se dibuja alrededor de los elementos (fuera de las fronteras) para hacer que el elemento "stand out" .
Sin embargo, el outline propiedad es diferente de la propiedad border - El outline no es una parte de las dimensiones de un elemento; total de anchura y la altura del elemento no se ve afectada por el ancho del contorno.
Outline Estilo
El outline-style propiedad especifica el estilo del contorno.
El outline-style propiedad puede tener uno de los siguientes valores:
-
dotted- Define un contorno de puntos -
dashed- Define una línea discontinua -
solid- Define una línea de trazo continuo -
double- Define un esquema doble -
groove- Define un contorno acanalado 3D. El efecto depende del valor de contorno color -
ridge- Define un contorno acanalado 3D. El efecto depende del valor de contorno color -
inset- Define un esquema de inserción 3D. El efecto depende del valor de contorno color -
outset- Define un esquema de principio 3D. El efecto depende del valor de contorno color -
none- Define sin contorno -
hidden- Define un esquema oculto
En el siguiente ejemplo, se establece por primera vez un fino borde negro alrededor de cada <p> elemento, a continuación, se muestran las diferentes outline-style valores:
Ejemplo
p {
border: 1px solid black;
outline-color: red;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}Resultado:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Inténtalo tú mismo "  | Nota: Ninguna de las otras propiedades del contorno CSS se describen a continuación tendrán ningún efecto a menos que el outline-style propiedad se establece! |
|---|
Esquema de color
El outline-color de propiedades se utiliza para configurar el color del contorno.
El color se puede ajustar por:
- Nombre - indique un nombre de color, como "red"
- RGB - especificar un valor RGB, como "rgb(255,0,0)"
- Hex - especificar un valor hexadecimal, como "#ff0000"
- Invertir - realiza una inversión de color (que se asegura de que el contorno es visible, independientemente de fondo de color)
Ejemplo
p
{
border: 1px solid black;
outline-style: double;
outline-color: red;
}Resultado:
A colored outline.
Esquema Ancho
El outline-width propiedad especifica el ancho del contorno.
El ancho se puede establecer como un tamaño específico (en px, pt, cm, em , etc) o mediante el uso de uno de los tres valores predefinidos: fino, medio o grueso.
Ejemplo
p {border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
Resultado:
A thick outline.
A thinner outline.
Outline - Abreviación de las propiedades
Para acortar el código, también es posible especificar todas las propiedades de contorno individuales en una propiedad.
El outline propiedad es una propiedad abreviada para las siguientes propiedades del contorno individuales:
-
outline-width -
outline-style(requerido) -
outline-color
Ejemplo
p {
border: 1px solid black;
outline: 5px dotted red;
}Resultado:
An outline.
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 »
Todas las propiedades del contorno CSS
| Propiedad | Descripción |
|---|---|
| outline | Establece todas las propiedades del contorno en una declaración |
| outline-color | Establece el color de un esquema |
| outline-offset | Especifica el espacio entre un esquema y el borde o borde de un elemento |
| outline-style | Define el estilo de un esquema |
| outline-width | Establece el ancho de un esquema |