El lado del subtítulo de la propiedad CSS

CSS | Caption-side Propiedad : Aquí, vamos a aprender sobre la propiedad caption-side con la sintaxis, ejemplos de CSS (Cascading Style Sheet).

CSS | Caption-side Propiedad

Introducción:

Nos ocupamos de los subtítulos y mesas diaria, mientras que el desarrollo de una página web, pero el hecho poco conocido es que los subtítulos se pueden posicionar como uno desea que sean. Por lo tanto, class logrando existen tales orientación muchas propiedades y uno de los más importantes de ellos es el propiedad caption-side en el CSS .

A Gist:

El del lado del subtítulo es una propiedad de pantalla que hace que sea mucho más fácil de implementar y por lo tanto la orientación de la leyenda puede ser alterado. Ahora que tenemos una idea general de la propiedad vamos a echar un vistazo a la definición formal de esta propiedad for una mejor comprensión y lo que es capaz de hacer.

Definición:

El propiedad caption-side se utiliza para especificar la posición donde se supone que el título de la mesa para ser colocado. Esta propiedad se puede aplicar a cualquier elemento cuya propiedad display se pone a caption-side .

Sintaxis:

    Element{
caption-side : top|bottom;
}

Por lo tanto, debe quedar claro a partir de la definición que la propiedad es una propiedad fácil de usar. Sin embargo, el propiedad caption-side puede tomar dos valores y esos son,

  • inferior
  • superior

Vamos a entender estas propiedades una por una,

rúbrica de: fondo

el primer valor de la propiedad del lado del subtítulo es el valor inferior. Este valor del lado del subtítulo se utiliza para mostrar el título justo por debajo de la mesa.

Sintaxis:

    Element{
caption-side : bottom;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
table {
caption-side: bottom;
}
</style>
</head>
<body>
<h1>The caption-side Property</h1>
<table border="1">
<caption>Student record</caption>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Abc</td>
<td>Compiler Design</td>
<td>93</td>
</tr>
<tr>
<td>xyz</td>
<td>Operating System</td>
<td>70</td>
</tr>
<tr>
<td>uvw</td>
<td>Maths</td>
<td>66</td>
</tr>
</table>
</body>
</html>

salida

The caption-side Property in CSS - 4

En el ejemplo anterior, puede verse que el subtítulo “expediente del estudiante” es por debajo de la mesa y el código no era aún tan difícil, así que adelante y lo pruebe.

rúbrica de: top

El siguiente valor en la lista de propiedad caption-side es el valor superior . Justo enfrente al valor inferior, este valor del lado del subtítulo se utiliza para mostrar el título justo por encima de la mesa.

Nota : El valor parte superior de esta propiedad es también el valor for.

Sintaxis:

    Element{
caption-side : top;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
table {
caption-side: top;
}
</style>
</head>
<body>
<h1>The caption-side Property</h1>
<table border="1">
<caption>Student record</caption>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Abc</td>
<td>Compiler Design</td>
<td>93</td>
</tr>
<tr>
<td>xyz</td>
<td>Operating System</td>
<td>70</td>
</tr>
<tr>
<td>uvw</td>
<td>Maths</td>
<td>66</td>
</tr>
</table>
</body>
</html>

salida

The caption-side Property in CSS - 5

En el ejemplo anterior, es claramente visible que el valor Top funciona igual opuesto al fondo valor que el subtítulo “expediente académico” se coloca encima de la mesa.


Deja un comentario

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