CSS Esquema : Aquí, vamos a aprender sobre la indicando, en CSS , cómo perfilar el contenido de CSS?
CSS Esquema
Esquema es una línea que va alrededor del elemento, fuera de la frontera.
En contraste con la frontera, contornos no toma ningún espacio en el modelo de caja. Adición de un esquema para un elemento no afecta a la posición de dicho elemento u otros elementos.
El esencial propiedades de contorno son contorno color , contorno de estilo y esquema de ancho .
Sintaxis:
Element{
Outline:outline-color outline-style outline-width;
}
Algunas propiedades del contorno comunes y sus valores,
| de puntos | de puntos contorno |
| discontinua | esquema rayado |
| sólida | línea de trazo continuo |
| class | class esquema |
| ranura | ranurado esquema, que depende del valor de contorno color |
| canto | contorno acanalado, que depende del valor de contorno color |
| inserción | inserción esquema, que depende del valor de contorno color |
| principio | principio esquema, que depende del valor de contorno color |
| ninguno | sin contorno |
| oculta | esquema oculta |
estilo Esquema
El propiedad de estilo de esquema se utiliza para establecer la estilo de la silueta de un elemento.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.p1 {
border: 1px solid black;
outline-color: red;
outline-style: dotted;
}
p.p2 {
border: 1px solid black;
outline-style: dashed;
outline-color: red;
}
p.p3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
}
</style>
</head>
<body>
<p class="p1">A dotted red outline</p>
<p class="p2">A dashed red outline</p>
<p class="p3">A solid red outline</p>
</body>
</html>
salida
El código anterior sería delinear el contenido dentro de la etiqueta p de acuerdo con el estilo de contorno aplica a ella.
Esquema de ancho
En CSS El propiedad contorno de ancho se utiliza para especificar el ancho del contorno, y puede tener uno de los siguientes valores:
- delgada (típicamente de 1 píxel)
- medio (típicamente 3px)
- de espesor (típicamente 5px)
- un tamaño específico (pt, px, em, cm)
Ejemplo:
<!DOCTYPE html>
<head>
<style>
.p1 {
border: 4px solid blue;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
</style>
</head>
<html>
<body>
<p class="p1">
Some content
</p>
</body>
</html>
salida
el código de seguridad se aplicaría contorno sólido con anchura delgada alrededor de la salida.
Esquema color
El CSS propiedad outline-color de establece el color del contorno. El color se puede ajustar por cualquier tipo (RGB, HEX, NAME).
Ejemplo:
<!DOCTYPE html>
<head>
<style>
.p1 {
border: 2px solid blue;
outline-style: solid;
outline-color: red;
}
</style>
</head>
<html>
<body>
<p class="p1">
Some content
</p>
</body>
</html>
salida
El código anterior se aplicaría línea de trazo continuo, la anchura delgada con el color rojo alrededor de la salida.