Esbozar el contenido en CSS

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,

Parámetro
detalles

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

Outlining the content in CSS - 4

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

Outlining the content in CSS - 5

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

Outlining the content in CSS - 6

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

Outlining the content in CSS - 7

El código anterior se aplicaría línea de trazo continuo, la anchura delgada con el color rojo alrededor de la salida.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *