programacion html, css

Programmingin HTML5 with
JavaScript andCSS3
Instructor: Luis Almendras
2014
Día 12

Cómo incluir CSS en un documento
XHTML
1. Incluir CSS en el mismo documento HTML:

Cómo incluir CSS en un documento
XHTML
2. Definir CSS en un archivo externo:

Cómo incluir CSS en un documento
XHTML
Normalmente, la etiqueta incluye cuatro atributos
cuando se enlaza un archivo CSS:
– rel:indica el tipo de relación que tiene el recurso enlazado
y la página HTML. Para los archivos CSS, siempre se utiliza
el valor stylesheet
– type: indica el tipo de recurso enlazado. Sus valores están
estandarizados y para los archivos CSS su valor siempre es
text/css
– href: indica la URL del archivo CSS que contiene los estilos.
La URL indicada puede ser relativa o absoluta y puede
apuntar aun recurso interno o externo al sitio web.
– media: indica el medio en el que se van a aplicar los estilos
del archivo CSS. Más adelante se explican en detalle los
medios CSS y su funcionamiento.

Cómo incluir CSS en un documento
XHTML
3. Incluir CSS en los elementos HTML:

Términos
• términos que permiten describir cada una de
las partes que componen los estilos CSS:

Comentarios• El comienzo de un comentario se indica
mediante los caracteres /* y el final del
comentario se indica mediante :
• Los comentarios pueden ocupar tantas líneas
como sea necesario, pero no se puede incluir
un comentario dentro de otro comentario:

Generar datos para probar
• Remitirse a una de las siguientes URL’s:
– http://es.lipsum.com/
– http://www.blindtextgenerator.com/es
–http://generator.lorem-ipsum.info/
– http://lorem-ipsum.perbang.dk/

Selectores
• La declaración indica "qué hay que hacer" y el
selector indica "a quién hay que hacérselo".
• A un mismo elemento HTML se le pueden
asignar infinitas reglas CSS y cada regla CSS
puede aplicarse a un número infinito de
elementos. En otras palabras, una misma regla
puede aplicarse sobre varios selectores y unmismo selector se puede utilizar en varias
reglas.

Selectores básicos
• Selector universal: Se utiliza para seleccionar
todos los elementos de la página. El selector
universal se indica mediante un asterisco (*).
• A pesar de su sencillez, no se utiliza
habitualmente, ya que es difícil que un mismo
estilo se pueda aplicar a todos los elementos
de una página.

Selectores básicos
•Selector de tipo o etiqueta: Para utilizar este
selector, solamente es necesario indicar el
nombre de una etiqueta HTML.

Selectores básicos
• Selector de tipo o etiqueta: Si se quiere
aplicar los mismos estilos a dos etiquetas
diferentes, se pueden encadenar los
selectores.

Selectores básicos
• Selector de tipo o etiqueta: En las hojas de
estilo complejas, es habitual agrupar laspropiedades comunes de varios elementos en
una única regla CSS y posteriormente definir
las propiedades específicas (Ejemplo1.html):

Selectores básicos
• Selector descendente: Selecciona los
elementos que se encuentran dentro de otros
elementos. Un elemento es descendiente de
otro cuando se encuentra entre las etiquetas
de apertura y de cierre del otro elemento.

Selectores básicos
•Selector descendente: utilizando el selector
descendente es posible aplicar diferentes
estilos a los elementos del mismo tipo
(ejemplo2.html).

Selectores básicos
• Selector descendente: Tomar en cuenta.

Selectores básicos
• Selector de clase: La principal característica de
este selector es que en una misma página
HTML varios elementos diferentes pueden
utilizar el mismo valor en elatributo class
(ejemplo3.html):

Selectores básicos
• Selector de clase: Combinando el selector de
tipo y el selector de clase, se obtiene un
selector mucho más específico
(ejemplo4.html):

Selectores básicos
• Selector de clase: es posible aplicar los estilos
de varias clases CSS sobre un mismo elemento
(ejemplo5.html).

Selectores básicos
• Selector de clase: Tomar en cuenta....