MAQUETADO CSS Y DIVS

1
HTML 5
Etiquetas de marcacin semntica
<article> Artculo
Atributos comunes

Globales y eventos

Atributos especficos

Tipo de elemento

En bloque por defecto.

Descripcin

Contenido autoconclusivo, que pueden ser distribuido de forma independiente del resto
del sitio.

<aside> Aparte
Atributos comunes

Globales y eventos

Atributos especficos

Tipo de elemento

En bloque por defecto.

Descripcin

Contenido aparte. Debe estar relacionado con el contenido principal que lo rodea.

<details> Detalles
Atributos comunes

Globales y eventos

Atributos especficos

open indica si el contenido es visible por defecto. No soportado por todos los navegadores.

Tipo de elemento

En bloque por defecto.

Descripcin

Detalles del documento o sus partes. El usuario puede elegir verlos o no haciendo click en
la palabra detalles.

<figcaption>

Pi de foto

Atributos comunes

Globales y eventos

Atributos especficos

Tipo de elemento

En bloque por defecto.

Descripcin

Describe brevemente el contenido de <figure>.

<figure> Figura
Atributos comunes

Globales y eventos

Atributos especficos

Tipo de elemento

En bloque por defecto.

Descripcin

Suele definir el espacio ocupado por una imagen.

<footer> Pi
Atributos comunes

Globales y eventos

Atributos especficos

Tipo de elemento

En bloque por defecto.

Descripcin

Define el pie de la pgina, suele incluir el nombre del autor, la fecha del documento,
informacin de contacto, o la informacin de copyright

<header> Encabezado
Atributos comunes

Globales y eventos

Atributos especficos

Tipo de elemento

En bloque por defecto.

Descripcin

Define el encabezado de la pgina, donde se encuentra la introduccin al contenido e

incluso la botonera de navegacin.

<main> Principal
Atributos comunes

Globales y eventos
1

Atributos especficos

Tipo de elemento

En bloque por defecto.

Descripcin

Define el contenido principal de una pagina. No debe estar dentro de las etiquetas
<article>, <aside>, <footer>, <header> ni <nav>.

<mark> Remarcado
Atributos comunes

Globales y eventos

Atributos especficos

Tipo de elemento

En bloque por defecto.

Descripcin

Resalta parte de un texto.

<nav> Navegacin
Atributos comunes

Globales y eventos

Atributos especficos

Tipo de elemento

En bloque por defecto.

Descripcin

Define una lista de navegacin.

<section> Seccin
Atributos comunes

Globales y eventos

Atributos especficos

Tipo de elemento

En bloque por defecto.

Descripcin

Define las secciones en el documento.

<summary> Sumario
Atributos comunes

Globales y eventos

Atributos especficos

Tipo de elemento

En bloque por defecto.

Descripcin

Debe ser el primer elemento dentro de <details>. Permite modificar el texto sobre el cual
el usuario hace click para ver el contenido de la etiqueta <details>.

<time> Tiempo
Atributos comunes

Globales y eventos

Atributos especficos

datetime=YYYY-MM-DDThh:mm:ssTZD PTDHMS

Tipo de elemento

En bloque por defecto.

Descripcin

Define fechas y horarios, as como duraciones legibles tanto para el usuario como para
los programas.

Etiquetas multimedia
<audio> Audio
Atributos comunes

Globales y eventos

Atributos especficos

autoplay controls loop muted src=URL del video

Tipo de elemento

En bloque por defecto.

Descripcin

Permite colocar audio en el HTML.

<video> Video
Atributos comunes

Globales y eventos

Atributos especficos

autoplay controls loop muted width=nmero height=nmero

poster=URL de la imagen src=URL del video

Tipo de elemento

En bloque por defecto.

Descripcin

Permite colocar video en el HTML.

<source> Origen
Atributos comunes

Globales y eventos
2

Atributos especficos

src=URL del archivo multimedia type=medio/tipo

Tipo de elemento

Descripcin

Etiqueta vaca. Permite definir mltiples fuentes para un archivo de audio o video.

<track> Pista
Atributos comunes

Globales y eventos

Atributos especficos

src=URL del archivo de texto

Tipo de elemento

Descripcin

Etiqueta vaca. Permite colocar un texto que acompae a un audio o video.

<canvas> Lienzo
Atributos comunes

Globales y eventos

Atributos especficos

width=nmero height=nmero

Tipo de elemento

Bloque.

Descripcin

Permite colocar imgenes y animaciones creadas con scripts.

<embed> Incrustar
Atributos comunes

Globales y eventos

Atributos especficos

src=URL del archivo width=nmero height=nmero type=medio/tipo

Tipo de elemento

Bloque.

Descripcin

Permite colocar una aplicacin externa o contenido interactivo (un plug-in).

Atributos globales actualmente soportados por todos los navegadores.

Atributo Descripcin
accesskey

Define un comando de teclas para una funcin.

class

Define una o ms clases para un elemento. Se utiliza para asignar estilos.

contenteditable

Define si un contenido es editable o no.

contextmenu

Define un menu contextual que aparece haciendo click con el botn derecho.

data-*

Permite guardar informacin,

dir

Define la direccin en la que se escribe un texto.

draggable

Define si un contenido puede ser arrastrado.

hidden

Define la visibilidad de un elemento.

id

Define un id nico para un elemento.

lang

Especifica el lenguaje del contenido.

spellcheck

Define si se chequea la ortografa de un contenido.

style

Define un estilo CSS inline.

tabindex

Define el orden en el cual los elementos sern recorridos al presionar Tab.

title

Define informacin adicional sobre un elemento.

CSS
El trmino CSS significa hojas de estilo en cascada (Cascading Style Sheets, CSS); las mismas son un lenguaje formal usado para
definir la presentacin de un documento estructurado escrito en HTML o XML (y por extensin en XHTML). Las ventajas de
utilizar hojas de estilo CSS son:
Control centralizado de la presentacin del sitio web.
Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local que ser aplicada a un sitio web, con lo
que aumenta considerablemente la accesibilidad.
Una pgina puede disponer de diferentes hojas de estilo segn el dispositivo que la muestre.
El cdigo del documento HTML es ms claro y se consigue reducir considerablemente su tamao.

Declaracin de reglas de estilo

Son reglas que mencionan selectores a los que se les asigna una serie de propiedades. En HTML hay tres opciones para definir
reglas de estilos estilos:
Hoja de estilo externa
Las reglas de estilo se crean en un archivo CSS independiente que se vincula a los archivos HTML, es posible tener muchas
pginas enlazando a la misma hoja de estilos y vicerversa.
Debe incuirse la siguiente lnea contenida por la etiqueta <head>:
<link target=_blank href=URL de la hoja de estilo rel=stylesheet type=text/css />
Las hojas de estilo pueden vincularse mediante una hoja intermedia que haga de hoja maestra:
<link rel=stylesheet target=_blank href=hoja_maestra.css type=text/css media=all>
A su vez, desde dentro de hoja_maestra.css podemos importar distintas hojas:
@importurl(default.css);
@importurl(impresion.css);
@import url(pantalla.css);
@import url(palm.css);
@import url(celular.css);
Hoja de estilo incrustada en el encabezado del documento
Se incluye la informacin referente a los estilos entre las etiquetas <style> y </style>, ubicadas dentro de <head>. Este mtodo prevalecer si a la vez se incluye una hoja de estilo externa.
Estilos en lnea
Consiste en incluir el atributo style dentro de algn elemento HTML.
Sintaxis de las reglas de estilo
Selector { atributo: valor; }
Ejemplo: regla de estilo con un solo atributo
h1 { background-color:#ff2200; }
Ejemplo: regla de estilo con varios atributos
h1 { background-color:#ff2200;
font-size:15px;
color:#ff0011 }
Si se decide utilizar una hoja de estilo incrustada, las reglas de estilo deberan ser contenidad por la etiqueta <style>.
En el caso de los estilos en lnea, la sintaxis ser: style= atributo: valor; atributo: valor;
Selectores
Los selectores indican a qu elemento del HTML se le aplicar una regla de estilo.
Elementos HTML (etiquetas)
Redefinen el aspecto de una etiqueta especfica. Por ejemplo, para establecer reglas de estilo para los prrafos:
p { atributo: valor;
atributo: valor; }
Identificadores
Es posible elegir un nico elemento utilizando su atributo id (nico en cada documento HTML). Para ello, se emplea el carcter #:
#id del elemento a modificar { atributo: valor;
atributo: valor; }
Clases
Es posible definir una clase como atributo de mltiples elementos; luego, al escribir la regla de estilo se pone un punto antes
del nombre de la clase.
.clase a modificar {atributo: valor;
atributo: valor; }
Selectores de grupo

Es posible agrupar selectores, separndolos con comas, como en el siguiente ejemplo:

h1,h2,h3,h4,h5,h6 { atributo: valor; }
Selectores de contexto
Son cadenas de dos o ms selectores simples separados por espacio en blanco. Debido a las reglas del orden de cascada, tendrn precedencia sobre selectores simples.
Por ejemplo:
nav a .boton { declaracin CSS }
Selector universal
El selector universal * se corresponde con el nombre de cualquier tipo de elemento. Suele utilizarse para establecer en cero a los
mrgenes y los rellenos, atributos que suelen interpretarse por defecto de manera diferente por los navegadores:
* { margin: 0;
padding: 0;
}
Estructura y Herencia
La estructura del documento es determinante para la forma en que CSS aplica los estilos al documento, dadas las relaciones
entre elementos padres y sus hijos.
Por ejemplo, si queremos definir que los EM que estn dentro de un H1 sern grises, podemos definir la siguiente regla:
H1em {color: gray;}
Herencia
Es la propiedad por al cual un estilo que se aplica a un elemento es heredado por sus descendientes. No todas las propiedades
se heredan.

Orden de cascada
Cuando se usan varias reglas de estilo, puede haber un conflicto sobre cul controla a un selector en particular. En estas situaciones, existen reglas para definir la hoja de estilo que prevalece.
Puede establecerse una regla como importante al especificar !important. Un estilo designado como importante prevalecer
sobre estilos contradictorios de similar nivel. Si tanto el autor como el lector especifican una regla como importante, primar la
del autor.
Ejemplo:
background-repeat: repeat-x !important;
Las reglas del autor prevalecern sobre las reglas del lector de similar jerarqua. Tanto las hojas de estilo del autor como las del
lector primarn sobre las hojas de estilo incorporadas por el navegador. Los autores deberan ser cautelosos con el empleo
de reglas !important. Un usuario puede, por ejemplo, necesitar de grandes tamaos de fuentes o colores especiales debido a
problemas de visin, y querr declarar que ciertas reglas de estilo sean !important, ya que son vitales para que pueda leer una
pgina.Jerarquas y especificidad
Las hojas de estilo tambin pueden primar sobre hojas de estilo en conflicto basndose en su nivel de especificidad, donde un
estilo ms especfico siempre prevalecer sobre uno menos especfico. La especificidad de un selector puede calcularse contan5

do la cantidad de id en el selector, la cantidad de class en el selector y finalmente el nmero de etiquetas HTML en el selector.
Se escriben los tres nmeros en ese mismo orden obteniendo un nmero de tres dgitos (es posible que sea necesario convertir
los nmeros a una base mayor para obtener tres dgitos). Los nmeros ms altos priman sobre los ms bajos.
La siguiente es una lista de selectores ordenados por especificidad:
#id {................................................. a=1 b=0 c=0 especificidad = 100
ul ul li .clase {............................... a=0 b=1 c=3 especificidad = 013
li .clase {......................................... a=0 b=1 c=1 especificidad = 011
li {..................................................... a=0 b=0 c=1 especificidad = 001
Cuando dos reglas tienen el mismo peso, prrevalece la ltima regla especificada.
Algunas propiedades CSS
Propiedad

Valores

Descripcin

Heredada

color

color

Define el color del texto

si

opacity

0.0 a 1.0

Define el nivel de opacidad de un elemento

no

background

varios

Permite definir mltiples propiedades del fondo en una sola declaracin.

no

Define si la imagen de fondo permanece fija o no.

no

Define el color de fondo de un elemento.

no

background-attachment fixed | local

background-color

color | transparent

background-image

url(url imagen 1), url(url imagen 2) Define una o ms imagenes de fondo.

no

background-position

x% y% | left top | left center

left bottom | right top | right center
right bottom | center top
center center | center bottom

Define la posicin del fondo.

no

background-repeat

repeat | repeat-x | repeat-y

no-repeat

Define cmo se repetir el fondo.

no

background-clip

border-box | padding-box
content-box

Define el rea a cubrir por el fondo.

no

background-origin

padding-box | border-box
content-box

Define desde dnde aparece el fondo.

no

background-size

alto ancho | auto | cover | contain

Define el tamao del fondo.

no

border-color

color | transparent

Define el color de los bordes del elemento.

no

border-radius

1 a 4 tamaos | 1 a 4 %

Define el radio de las esquinas de los bordes.

no

border-style

none | hidden | dotted | dashed

solid | double | groove | ridge
inset | outset

Define el estilo del borde.

no

border-width

medium | thin | thick | espesor

Define el espesor del borde.

no

box-shadow

none
sombra-h shadow-v blur spread color

Define la sombra proyectada por el elemento.

no

display

block | list-item | run-in | table

table-caption | table-column-group
table-header-group
table-footer-group
table-row-group | table-cell
table-column | table-row

Define cmo se muestra un elemento.

no

height

auto | alto | %

Define la altura de un elemento.

no

margin

auto | 1 a 4 tamaos | 1 a 4 %

Define los cuatro mrgenes del elemento.

Puede adoptar valores negativos.

no

overflow

visible | hidden | scroll | auto

Define qu sucede cuando el contenido excede

al contenedor.

no

padding

1 a 4 tamaos | 1 a 4 %

Define los cuatro padding del elemento.

no

Propiedad

Valores

Descripcin

Heredada

width

auto | alto | %

Define el ancho de un elemento.

no

vertical-align

baseline | length | sub | super | top

text-top | middle | bottom
text-bottom

Define la alineacin vertical de un elemento.

no

letter-spacing

normal | distancia

Aumenta o disminuye el interletrado.

si

line-height

normal | nmero | distancia

Define el alto de la lnea de texto.

si

text-align

left | right | center | justify

Define la alineacin horizontal del texto.

si

text-align-last

auto | left | right | center | justify

start | end

Define la alineacin de la ltima lnea de un

texto justificado. No odos los navegadores lo
aceptan.

si

text-indent

distancia

Define la sangra de la primera lnea de texto.

si

text-transform

none | capitalize | uppercase

lowercase

Controla las maysculas del texto.

si

text-decoration

none | underline | overline

line-through

Define el decorado de un texto.

no

text-shadow

h-shadow v-shadow blur-radius color Aade sombra a un texto.

si

@font-face

font-family: nombre de la tipografa

src: url(url de la fuente);

Permite utilizar tipografas que no sean seguras.

no

font-family

nombre de la familia tipogrfica

serif | sans-serif | cursive | fantasy
monospace

Define la familia tipogrfica para el texto.

si

font-size

tamao | %

Define el tamao del texto

si

font-style

normal | italic | oblique

Define el estilo de la tipografa.

si

font-variant

normal | small-caps

Define si el texto aparece en versalitas.

si

font-weight

normal | bold | bolder

Define el espesor de la tipografa.

si

border-collapse

separate | collapse

Define si los espacios entre celdas deben colapsar

o no.

si

border-spacing

distancia

Define el espacio entre celdas.

si

caption-side

top | bottom

Define la ubicacin de la leyenda de la tabla.

si

empty-cells

show | hide

Define si los bordes de las celdas vacas son

visibles.

si

list-style-image

url(url de la imagen)

Define una imagen como vieta para las listas.

si

list-style-position

inside | outside

Define si las vietas se ubican o no dentro del

flujo del documento.

si

list-style-type

armenian | circle | cjk-ideographic

decimal | decimal-leading-zero
georgian | hebrew | hiragana
hiragana-iroha | katakana
katakana-iroha | lower-alpha
lower-greek | lower-latin
lower-roman | none | square
upper-alpha | upper-latin
upper-roman

Define la vieta de la lista.

si

Comentarios
Es posible incluir comentarios en la hoja de estilo de la siguiente forma:
/* Contenido del comentario */

Etiqueta div
Las etiquetas div son elementos de bloque que permiten estructurar el contenido del documento en divisiones.
Por su condicin de elemento de bloque las etiquetas div, siempre se ubicaran una debajo de la otra ocupando el 100% de
7

ancho, en el mismo orden en el cual aparecen el en flujo normal de documento HTML.

Suele utilizarse junto a hojas de estilo CSS, por lo que se les debe asignar un valor de id o class.
Ejemplo:
<div id=botonera></div>
Float y clear
La propiedad float permite que los elementos se apilen en la direccin indicada por el valor asignado, siendo estos:
left | right (izquierda y derecha).
La propiedad clear impide que un elemento se ubique del lado indicado por el valor asignado, siendo estos:
left | right | both (izquierda, derecha, ambos)
Estas dos propiedades son fundamentales para la diagramacin con divs.
Diagramacin avanzada con posicin
Para crear diseos con diagramaciones ms complejas deberemos utilizar el atributo Position, que permite ubicar los divs en el
lugar exacto de la pantalla que deseemos.
La propiedad position
Define el mtodo de posicionamiento de un elemento. Puede adoptar cuatro valores:
static
relative
fixed
absolute
Los valores relative, fixed y absolute son utilizados en conjunto con las propiedades top, bottom, left y right cuyos valores indican la distancia de la posicin en cantidad de pxeles (positiva o negativa) o un porcentaje.
position:static; (esttica)
Valor por defecto de todos los elementos, su posicin en la ventana estar determinada por el flujo del documento. Slo sirve
para sobrescribir un valor previo de otro tipo.
position: relative; (relativa)
El elemento relativo se desplaza en relacin a la posicin que habra ocupado si hubiese estado posicionado estticamente. Si
no es acompaado de las propiedades top, bottom, left y right, el elemento se ubica en el mismo lugar que ocupara si fuera
esttico. Esto ltimo es de utilidad para ubicar otros elementos utilizando position:absolute;.
position: absolute; (absoluta)
A este tipo de posicionamiento se lo puede llamar como CSS-P o capas. La posicion de estos elementos es relativa al elemento
que lo contiene, llamado bloque contenedor, siendo su ancestro (parent) posicionado ms cercano, o de no existir tal elemento, el bloque contenedor inicial del documento, body o html, elegido por el navegador. Los elementos posicionados de forma
absoluta no siguen el flujo del documento.
position: fixed; (fija)
Un elemento con position:fixed est siempre posicionado de forma absoluta respecto a la ventana del navegador. El elemento
no sigue el flujo del documento y se queda en su lugar aunque el usuario se mueva (scroll) por el documento.

Pseudoclases de vnculos
La pseudo-clase :link se aplica a los vnculos que an no han sido visitados, mientras que :visited se aplica una vez que el vnculo
ha sido visitado por el usuario. Estos estados son mutuamente excluyentes.
Pseudo clases dinmicas
CSS no define qu elementos pueden estar en los siguientes estados o cmo se ingresa y se sale de ellos. Mediante el uso de
scripts se puede decidir si los elementos reaccionan a los eventos del usuarios o no, y los distintos dispositivos y aplicaciones del
usuario pueden tener diferentes maneras de apuntar o activar los elementos.
Las aplicaciones del usuario no son obligadas a redibujar el documento en uso a causa de las transiciones de las pseudo-clases.
Por ejemplo, un hoja de estilo puede especificar que la propiedad font-size de un vnculo :active debe ser mayor que la de un
vnculo inactivo, pero como esto puede ocasionar que las letras cambien de posicin cuando el lector selecciona el vnculo, una
AU puede ignorar la regla de estilo correspondiente.
La pseudo-clase :hover se aplica mientras el usuario posa en cursor sobre el elemento, pero no lo activa.La pseudo-clase :active
se aplica mientras un elemento est siendo activado por el usuario. Por ejemplo, el lapso durante el cual el usuario presiona el
8

botn del ratn y lo suelta.

La pseudo-clase :focus se aplica mientras un elemento tiene el foco (acepta eventos del teclado u otras formas de entrada de
texto).
Estas pseudo-clases no son mutuamente excluyentes. Un elemento puede recibir varias de ellas al mismo tiempo.
Ejemplo:
a:link { color: red }
a:visited { color: blue }
a:hover { color: yellow }
a:active { color: lime }
Observe que a:hover debe ir despus que las reglas a:link y a:visited, de otro modo las reglas de cascada ocultarn la propiedad
color de la regla a:hover. Tambin, debido a que a:active est ubicada despus de a:hover, el color activo (lime) ser aplicado
cuando el usuario active y seale el elemento a.
Ejemplo de combinacin de pseudo-clases dinmicas:
a:focus { background: yellow }
a:focus:hover { background: white }

Pseudo elementos
El pseudo-elemento ::first-line aplica estilos especiales a la primera lnea de un prrafo.
Ejemplo:
p::first-line { text-transform: uppercase }
La longitud de la primera lnea depende de factores como el ancho de la pgina, el tamao de la fuente, etc. El pseudo-elemento ::first-line slo puede ser aplicado en elementos a nivel de bloque y slo se le aplican las siguientes propiedades:
propiedades de la fuente
propiedades del color
propiedades del fondo
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
ine-height
clear
El pseudo-elemento ::first-letter puede ser usado para las capitulares y capitulares cadas. Las propiedades que se aplican a los
pseudo-elementos ::first-letter son:
propiedades de la fuente
propiedades del color
propiedades del fondo
propiedades de mrgen
propiedades de relleno
propieades de borde
text-decoration
vertical-align (slo para float:none)
text-transform
line-height
float y clear
Ejemplo de una capitular cada que abarca dos lneas:
9

p::first-letter {
font-size: 200%;
float: left;
font-style: italic;
font-weight: bold;
}
Los pseudo-elementos ::before y ::after ubican el valor de content luego del elemento indicado.
Ejemplo:
p::before {
content: Inicio ;
}
p::after {
content: Fin;
}
Harn que antes de cada prrafo aparezca la palabra Inicio y que al final de estos aparezca la palabra Fin.
Estos pseudo elementos pueden ser cobinados con ::first-line y ::first-letter.

10