web_design:tablas:selectores
Table of Contents
Lección 3 de desarrollo web - Tablas
Selectores
Objetivo
En esta actividad, veremos los selectores, que le permiten un mayor control sobre a qué se aplican las reglas CSS.
Preparacion
- Como de costumbre, nos basaremos en trabajos anteriores en esta actividad utilizando jsfiddle . Aquí está el código de nuevo.
HTML
<tabla>
<thead>
<tr>
<th> Nombre </th>
<th> Apellido </th>
<th> Nacionalidad </th>
<th> Edad </th>
<th> Posición </th>
</tr>
</thead>
<tbody>
<tr>
<td> David </td>
<td> Ospina Ramírez </td>
<td> Colombia </td>
<td> 33 </td>
<td> Portero </td>
</tr>
<tr>
<td> Carlos </td>
<td> Eccehomo Cuesta Figueroa </td>
<td> Colombia </td>
<td> 22 </td>
<td> Defensa </td>
</tr>
<tr>
<td> Juan Guillermo </td>
<td> Cuadrado Bello </td>
<td> Colombia </td>
<td> 33 </td>
<td> Centrocampista </td>
</tr>
<tr>
<td> Radamel Falcao </td>
<td> García Zárate </td>
<td> Colombia </td>
<td> 35 </td>
<td> Delantero </td>
</tr>
</tbody>
</table>
CSS
td, th {
border-width: 1px;
border-style: solid;
}
td {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
table {
border-collapse: collapse;
}
Identificador Único
- 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 concretos que queremos tratar de forma diferente.
- El primero de ellos es
<id>que identifica un solo elemento en la página. Debe ser único. - Resaltemos los datos de Carlos en amarillo.
- Primero, necesitamos especificar la fila, dándole un id. Llamémoslo 'carlos'.
<tr id = "carlos">
<td> Carlos </td>
</tr>
- Ahora podemos aplicar una regla a esta fila con CSS usando #.
#carlos {
font-style: italic;
}
- Ahora,
<tr id="carlos">y todos los elementos que contiene están en cursiva.
Clase
- ¿Y si queremos resaltar la edad de cada jugador? No podemos usar
idporque debe ser único. - En su lugar, aplicamos un classa cada elemento que queremos cambiar. Llamémoslo 'edad'.
<table>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Nationality</th>
<th>Age</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>David</td>
<td>Ospina Ramírez</td>
<td>Colombia</td>
<td>33</td>
<td>Portero</td>
</tr>
<tr>
<td>Carlos</td>
<td>Eccehomo Cuesta Figueroa</td>
<td>Colombia</td>
<td>22</td>
<td>Defensa</td>
</tr>
<tr>
<td>Juan Guillermo</td>
<td>Cuadrado Bello</td>
<td>Colombia</td>
<td>33</td>
<td>Centrocampista</td>
</tr>
<tr>
<td>Radamel Falcao</td>
<td>García Zárate</td>
<td>Colombia</td>
<td>35</td>
<td>Delantero</td>
</tr>
</tbody>
</table>
- En este ejemplo, he incluido la celda de encabezado porque se vería extraño sin ella.
- Ahora, démosle a esto un fondo amarillo para que se destaque un poco.
.age {
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.
Combinando Selectores
- Queremos darle aún más impacto a la celda que se cruza. Podemos hacerlo combinando los selectores de fila y columna.
#carlos .age {
font-weight: 900;
}
- También podemos limitar de otras formas, una es utilizar una combinación de elementos y clases.
- El siguiente código solo cambiará las celdas sin encabezado (datos) con la clase de edad.
td.age {
font-size: 150%;
}
- Cuando ejecute esto, debería ver que los números en la columna de edad aumentan en un 50%, pero el título seguirá siendo el mismo porque no es un
td. - Note la diferencia entre los dos últimos ejemplos. El primero
#carlos .agecon un espacio entre las opciones dice seleccionar los elementos con edad de clase dentro del elemento con id carlos. El segundotd.ageno tiene espacio, lo que dice seleccionar 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 utilizará con frecuencia. Para obtener más información, siga el enlace de la página Resumen.
web_design/tablas/selectores.txt · Last modified: 2023/08/16 09:33 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
