- HTML: div y span.
- CSS: width y height.
- CSS: overflow.
- Modelo de cajas.
- CSS: padding.
- CSS: border.
- CSS: margin.
- Aprende y practica sobre el tema en Khan Academy.
- Evaluación.
1. Etiquetas HTML: div y span.
La principal diferencia entre las etiquetas div y span, es que el primero se
define como un elemento en bloque y el segundo como un elemento en línea.
La etiqueta <div>, viene de división, prácticamente funciona de
contenedor de bloque, puede contener uno o varios elementos HTML dentro de
ella, es bastante utilizada para agrupar varios elementos que luego serán
apuntados con CSS con la finalidad de dar un estilo adecuado a dicho grupo.
Ejemplo:
La etiqueta <span>, también funciona como un contenedor pero
esta definida como un elemento en línea, utilizada para destacar una palabra
o expresión dentro de un párrafo poniendole un estilo CSS. Ejemplo:
2. Propiedades CSS: width y height.
La propiedad width, permite establecer el ancho de
cualquier elemento HTML, ya sea un contenido especifico o un contenedor,
indicándole un valor de medida (px, em, pt) o porcentaje (%). Ejemplo:
La propiedad height, indica la altura de cualquier elemento
HTML, ya sea un elemento tipo bloque o línea, su valor de medida se indica
en (px, em, pt) o porcentaje (%). Ejemplo:
3. Propiedad CSS: overflow.
La propiedad overflow, permite mantener visible con el valor
visible u ocultar con el valor
hidden el contenido excedente que puede tener un elemento o región de la pagina
web. Además es posible mostrar barras de desplazamiento con el valor scroll
y asi poder observar el contenido que quedo oculto. Ejemplo:
4. Modelo de cajas.
Para entender el modelo de cajas, es importante considerar que todos los
elementos HTML están contenidas en cajas, es decir, para CSS cada elemento
presente en una pagina web esta dentro de una caja.
En la siguiente imagen se observa la representacion grafica del modelo de
cajas, notando las 4 partes que tiene una caja, esto será muy importante en
el diseño web.
- Contenido, es el elemento o etiqueta HTML propiamente dicho (imagen, párrafo, título, etc).
- Relleno, es el espacio que existe entre el borde y el contenido (margen o separación interna).
- Borde, es una línea entre el relleno y el margen.
- Margen, es el espacio entre el borde del contenido y el elemento padre que lo contiene (margen o separación externa).
5. Propiedad CSS: padding.
La propiedad padding, permite establecer un relleno (separación interna)
indicando un valor numérico en px, em, pt o %. Existen 3 formas de utilizar
esta propiedad:
- Relleno uniforme. Simplemente establecemos la propiedad padding y el valor deseado. Ejemplo:
- Rellenos diferentes a cada lado con una sola propiedad (shorthand). Indicamos 4 valores, el primero para el relleno superior, el segundo para el lado derecho, el tercero para el inferior y el cuarto para el lado izquierdo. Ejemplo:
- Rellenos independientes con propiedades independientes. Existe la posibilidad de establecer una medida especifica solo para un lado y con un valor, utilizando las siguientes propiedades:
- padding-top, relleno superior.
- padding-bottom, relleno inferior.
- padding-left, relleno izquierdo.
- padding-right, relleno derecho.
6. Propiedad CSS: border.
Colocar un borde con CSS a un elemento HTML puede marcar una notable
diferencia, añade personalidad y con una combinacion adecuada, puede
convertir simples elementos en atractivos bloques de contenido.
Para establecer un borde, básicamente necesitamos definir su ancho o tamaño,
color y estilo o tipo de borde. Ejemplo:
7. Propiedades CSS: margin.
Funciona de forma similar a la propiedad padding. Margin establece un margen
para el contenido, es el espacio que se encuentra fuera del borde, pero
asociada al elemento, de tal manera que los separa de otros bloques del
contenido.
Al igual que el padding, existen 3 formas de establecer o utilizar el
margin:
- Márgenes uniformes.
- Márgenes diferentes a cada lado.
- Márgenes específicos e independientes.
- margin-top.
- margin-bottom.
- margin-left.
- margin-right.
Comentarios
Publicar un comentario