Los elementos de bloques (block) ocupan todo el ancho de la página y fuerzan a una nueva línea antes y después.
<article> <aside> <canvas> <div> <footer> <h1>, <h2>,
<h3>, <h4>, <h5>, <h6> <header> <p> <pre> <section>
<ul>...
Los elementos de linea (inline) Estos elementos solo ocupan el ancho necesario y no fuerzan nuevas líneas:
<em> <a> <br> <img> <span> <button> <input> <select>
<textarea>...
Elemento block DIV:
El elemento <div> es un elemento de bloque usado para contener otros elelmentos html en su interior. El elemento <div> no tiene ningún significado es semánticamente neutro. El <div> lo usamos para estructurar bloques lo que antes se hacia con tablas <tables>. Cuando se utiliza junto con CSS establece los atributos de estilo del bloque:
Atributos:
ID: Lo identifica como elemento único dentro de una página. En CSS el selector #box se refiere al elemento con atributo id="box". Ejemplo: #box {color blue}
CLASS: Define una clase de elementos html, puede tener varios atributos Class.
El selector CSS .cabecera se refiere a todos los elementos de la clase cabecera que llevan el atributo class="cabecera", Ej. .cabecera {color red}
Elemento inline <span>
El elemento html <span> se emplea como contenedor de texto, no tiene significado es semánticamente neutro. Cuando se utiliza junto con CSS, establece los atributos de estilo para las partes del texto mediante un identificador ID o una clase CLASS.
Los elementos <div> y <span> se emplean para definir normas de estilo más específicas.
El atributo ID se emplea para identificar un elemento único.
El atributo CLASS se empleaa cuando hay más de un elemento parecido y pueden compartir este estilo.
En HTML5, los bloques son sustituidos por bloques semánticos que muestran significado por ellos mismos. Se crearon nuevas etiquetas:
<header> para la cabecera
<nav> para el menú de navegación
<section> para la sección a cual pertenece el artículo.
<article> para el artículo
<footer> para el pie de la pagina
<aside> para la barra lateral
Herencia CSS: La estructura html, debe realizarse en el sentido lógico de lectura.Para entender como funcionan los selectores y la herencia CSS es necesario entender que el árbol del documento.
Ancestor (Ancestros): Es un elemento conectado pero más arriba en la estructura del documento.
Descendientes: Son elementos conectados pero más abajo de la estructura del elemento.
Parents (padre): Es un elemento conectado directamente sobre la estructura del elemento.
Child (hijo):Es un elemento conectado directamente bajo la estructura del elemento.
Siblings (algo como hermanos): Es un elementos conectados en la misma linea de la estructura del elemento.
