clase 2_HTML _ CSS - parte 2

Vista previa del material en texto

Programación Web 
(electiva)
HTML y CSS - parte 2
Agenda
● Repaso
○ HTML
■ Hipervínculos
■ Listas
■ Tablas
● CSS
○ Selectores
○ Box Model
Repaso HTML: Hipervínculos 
Los hipervínculos nos permiten enlazar con otros documentos o también a 
“saltar” a diferentes secciones dentro del propio documento.
<a href=”url_al_documento”>texto a mostrar al usuario</a>
<a href=”#id_del_elemento_interno”>texto a mostrar al usuario</a>
Repaso HTML: Listas
Existen dos tipos de listas de elementos en html.
Listas Ordenadas <ol></ol>
Listas Desordenadas <ul></ul>
Ambas listas pueden contener un conjunto de ítems de lista. <li></li>
Repaso HTML: Listas ejemplo menú
Ejemplo sencillo de un menú, una navegación definida como una lista 
desordenada de hipervínculos.
Repaso HTML: Tablas
El propósito de las Tablas es mostrar datos en forma tabular. Las tablas se 
definen básicamente mediante las siguientes etiquetas:
<table></table>: define una tabla.
<thead></thead>: define una cabecera de una tabla.
<tbody></tbody>: define el cuerpo de una tabla.
<tr></tr>: fila de una tabla, debe de estar dentro de las etiquetas de una tabla.
<th></th>: celda de cabecera en una tabla, debe estar dentro de una fila.
<td></td>: celda de una tabla, debe estar dentro de una fila.
Repaso HTML: Tablas Ejemplo
CSS: Introducción
Hojas de Estilo en Cascada. (Cascading Style Sheet)
Pueden aplicarse cambios en la apariencia a nuestros elementos del documento 
html de tres formas distintas.
1. A un elemento particular utilizando el atributo style.
2. Definir reglas dentro de una etiqueta style.
3. Definir reglas en un documento externo y vincular mediante la etiqueta link.
CSS: Estructura de las reglas
SELECTOR propiedad:valor ; propiedad:valor
CSS: Selectores
Selector Universal (*)
Selector de elemento (nombre de elemento).
Selector por ID (#) hace referencia al valor atributo id de la elemento).
Selector de clase (.) selecciona todos los elementos que tengan el atributo 
class).
Pseudo Clases (:) selectores de estados ejemplo :hover :active :visited
Pseudo Elementos (::) selecciona partes específicas del elemento seleccionado 
ejemplo ::first-line ::before ::after 
CSS: Selectores de atributo
[attr] existe el atributo.
[attr=”valor”] un atributo igual a un valor.
[attr$=”valor”] un atributo que termina con un valor.
[attr^=”valor”] un atributo que comienza con un valor.
/* Selecciona cualquier etiqueta con la propiedad href que comience con https:// 
*/
[href^=”https://”]{ color: green; } 
CSS: Combinaciones
Es posible combinar los selectores cualquiera de los selectores mencionados
/* Selecciona cualquier etiqueta a con la propiedad href que comience con 
https:// */
a[href^=”https://”] { color: green; } 
/* Selecciona cualquier etiqueta a con la clase (.) secure que contenga la 
propiedad href que comience con https:// */
a.secure[href^=”https://”] { color: green; } 
CSS: más selectores
➢ Selector de hijo (>).
➢ Selector de elementos descendientes (un espacio en blanco).
➢ Selector de hermanos adyacentes (+).
Para aplicar los mismos atributos a varios selectores puede usarse varios 
selectores separado por coma (,).
p.rojo, div.rojo{
color:red;
}
CSS: ¿Cuál es el color de fondo del párrafo?
CSS: Especificidad
1) Millares: Se suma un punto si la declaración está en un atributo style o, 
como suelen denominarse, estilos en línea. Tales declaraciones no tienen 
selectores, por lo que su especificidad siempre es 1000.
2) Centenas: Se suma un punto por cada selector con ID.
3) Decenas: Se suma un punto por cada selector de clase, de atributo o 
pseudoclase.
4) Unidades: Se suma un punto por cada selector elemento o pseudoelemento 
que esté contenido en el selector general.
Nota: en Visual Studio Code podemos ver la especificidad del selector 
posicionando el cursor sobre el selector. Selector Specificity:(0,0,1).
CSS: Box Model