es:web_development:tables:selectors
Table of Contents
Desarrollo Web Lección 3 - Tablas
Selectores
Objetivo
En esta actividad, veremos los selectores, que le permiten tener más control sobre a qué reglas de CSS se aplican.
Configuración
- Nos basaremos en el trabajo anterior en esta actividad usando sus 'tables.html' y 'style.css'. Aquí está el código de nuevo.
ID
- Es posible que haya notado que el uso de estilos en HTML le permite cambiar un solo elemento, mientras que el uso de CSS le permite cambiar todos los elementos asociados, pero ¿qué sucede si desea cambiar solo ciertos elementos?
- Para ello utilizamos selectores, que identifican los elementos específicos que desea tratar de forma diferente.
- El primero de ellos es
idel que identifica un solo elemento en la página. Debe ser único. - Resaltemos los datos de Carlos en amarillo.
- Primero, necesitamos especificar la fila, pero dándole un
id. Llamémoslo 'carlos'.
<tr id="carlos">
<td>Carlos</td>
- Ahora podemos aplicar una regla a esta fila con CSS usando
#.
#carlos {
font-style: italic;
}
- Ahora el
<tr>y todos los elementos dentro de él están en cursiva.
Class
- Digamos que queremos resaltar la edad de cada jugador, no podemos usarla
idporque debe ser única. - En su lugar, aplicamos
classa cada elemento que queremos cambiar. Llamémoslo 'edad'.
<table>
<head>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Nacionalidad</th>
<th class="edad">Edad</th>
<th>Puesto</th>
</tr>
</thead>
<tbody>
<tr>
<td>David</td>
<td>Ospina Ramírez</td>
<td>Colombia</td>
<td class="edad">33</td>
<td>Portero</td>
</tr>
<tr id="carlos">
<td>Carlos</td>
<td>Eccehomo Cuesta Figueroa</td>
<td>Colombia</td>
<td class="edad">22</td>
<td>Defensa</td>
</tr>
<tr>
<td>Juan Guillermo</td>
<td>Cuadrado Bello</td>
<td>Colombia</td>
<td class="edad">33</td>
<td>Centrocampista</td>
</tr>
<tr>
<td>Radamel Falcao</td>
<td>García Zárate</td>
<td>Colombia</td>
<td class="edad">35</td>
<td>Delantero</td>
</tr>
</tbody>
</table>
- En este ejemplo, he incluido la celda del encabezado porque se vería extraño sin ella.
- Ahora, vamos a darle a esto un fondo amarillo para que se destaque un poco.
.edad {
background-color: yellow;
}
- Observe el nuevo estilo
background-colorque establece el color de fondo. Esto se puede aplicar a cualquier elemento, incluido el<body>que cambiará el fondo de la página.
Combinación de Selectores
- Digamos que queremos darle a la celda que se cruza aún más impacto. Podemos hacerlo combinando los selectores de fila y columna.
#carlos .edad {
font-weight: 900;
}
- También podemos limitar de otras maneras, una es usar una combinación de elementos y clases.
- El siguiente código solo cambiará las celdas sin encabezado (datos) con la clase de edad.
td.edad {
font-size: 150%;
}
- Cuando ejecute esto, debería ver que los números en la columna de edad aumentan en un 50%, pero el encabezado seguirá siendo el mismo porque no es un archivo td.
- Note la diferencia entre los dos últimos ejemplos. El primero #carlos .agecon un espacio entre las opciones dice seleccionar los elementos con clase age dentro del elemento con id carlos. El segundo td.ageno tiene espacio, lo que indica que se seleccionen elementos que sean tanto celdas de datos como edad de clase.
- Hay muchas otras formas de especificar y combinar selectores, pero estas son las principales que usará con frecuencia. Para obtener más información, siga el enlace en la página Resumen.
Codigo Final
es/web_development/tables/selectors.txt · Last modified: 2023/10/24 08:45 by mag
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
