Curso HTML 5 & jQuery - Leccion 6

HTML

CSS – Cascading Style Sheets

CSS es un lenguaje de hojas de estilos creado para definir el aspecto del contenido creado con HTML, separando así la información con la forma como se visualizará.

Esto permite que sea más fácil el mantenimiento del aspecto del sitio web creado.

El primero paso en el proceso de desarrollo de un sitio web es crear el contenido con un lenguaje de marcas como HTML en el que se introducen los contenidos y se identifican con marcas indicando así el papel que ocupara dentro del sitio web (título, párrafo, imagen...)

Una vez creados los contenidos, con CSS se definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, posición de cada elemento dentro de la página, etc.

¿Qué es CSS?

Patron:

elementoHMTL {propiedad: valor;}

¿Qué es CSS?

Una de las técnicas más simples para incorporar estilos CSS a un documento HTML es la de asignar los estilos dentro de las etiquetas por medio del atributo style.

Un documento HTML simple que contiene el elemento <p> modificado por el atributo style con el valor font-size: 20px. Este estilo cambia el tamaño por defecto del texto dentro del elemento <p> a un nuevo tamaño de 20 pixeles.

Cómo incluir un CSS en el mismo HTML

<!DOCTYPE html><html lang="es"><head><title>Este es el título del documento</title></head><body><p style=”font-size: 20px”>Mi texto</p></body></html>


Usar la técnica demostrada anteriormente es una buena manera de probar estilos y obtener una vista rápida de sus efectos, pero no es recomendado para aplicar estilos a todo el documento.

La razón es simple: cuando usamos esta técnica, debemos escribir y repetir cada estilo en cada uno de los elementos que queremos modificar, incrementando el tamaño del documento a proporciones inaceptables y haciéndolo imposible de mantener y actualizar.

Solo imagine lo que ocurriría si decide que en lugar de 20 pixeles el tamaño de cada uno de los elementos <p> debería ser de 24 pixeles. Tendría que modificar cada estilo en cada etiqueta <p> en el documento completo.


La definición de estilos incluida en el mismo documento HTML se hace con la etiqueta <style> de HTML y solamente se pueden únicamente en la cabecera del documento.

Este método puede ser útil cuando se define un número pequeño de estilos. El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar.


<head><title>CSS en el propio html</title><style type="text/css">p { color: black; font-family: Arial; }</style></head><body><p>Ejemplo de párrafo de texto.</p></body>


Todos los estilos CSS se escriben en un archivo css que será enlazado por la página HTML que lo utilice con la etiqueta <link>.

Se pueden usar todos los archivos CSS que sean necesarios para un mismo archivo html.

Cómo incluir CSS en un archivo externo

Código HTML

<head><title>CSS incluido en un archivo externo</title><link rel="stylesheet" type="text/css" href="/css/estilos.css"

media="screen" /></head><body><p>Ejemplo de párrafo de texto.</p></body>

Código CSS

p { color: black; font-family: Arial; }


La etiqueta <link> incluye cuatro campos: ◦ rel: indica el tipo de relación que tiene el recurso enlazado

(en este caso, el archivo CSS) 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 a un recurso interno o externo al sitio web.

◦ media: indica el medio en el que se van a aplicar los estilos del archivo CSS.Los navegadores soportan los valores "all", "screen" y "print".


CSS

Buenas Practicas

Normalizar Estilos

Cuando ustedes crean una hoja de estilos, hay que tener en mente que también se han aplicado anteriormente dos css más: el del navegador y el perfil del usuario. Las propiedades que se establezcan en esos css pueden afectar a su diseño, por ello es importante que normalicemos todas las características para que nuestro diseño se vea igual sin importar el navegador desde el que se visite.Dos normalizadores muy conocidos son reset.css y normalize.css

http://necolas.github.io/normalize.css/

No todos los navegadores interpretan igual las características que se deban aplicar de nuestro css, incluso algunas propiedades por ser mas modernas que la versión del navegador que estemos usando puede que ni siquiera se puedan implementar en el sitio web.

Para evitar estos problemas debemos compatibilizar todas las versiones de los posibles navegadores con nuestro código para asegurarnos que desde cualquier navegador se obtiene el mismo resultado.

https://modernizr.com/download?setclasses

Compatibilizar navegadores

Sangría en HTML Sangría en CSS Comentarios

Desarrollo Ordenado

CSS

Selectores

Utilizando la misma etiqueta que empleada en el html podemos dar estilos a nuestros elementos del sitio web. Si ponemos la etiqueta h2 estos estilos se aplicaran TODOS los h2 que haya en la página.

Código CSS

h2{color: green;}

Selectores de Etiqueta

Si queremos que un mismo estilo se aplique a varios elementos, no tenemos por qué escribirlo varias veces, simplemente podemos separa con comas cada elemento al que queremos aplicarle el estilo.

Código CSS

h2, h3{color: green;}


Si un elemento es usado repetidas veces en todo el html y queremos que de todos ellos, solo algunos tenga cierto aspecto, debemos especificar la ruta descendente en la que se encuentran las etiquetas que queremos diseñar. Para ellos ponemos todos los elementos padres separados con comas hasta llegar a la etiqueta a la que daremos estilo.

Código CSS

h2{color: green;}

header h2{color: blue;}


Cuando hay varios elementos nombrados con la misma etiqueta y queremos que solo algunos de ellos tengan el mismo aspecto, debemos crear una clase que se usara para todos aquellos elementos a los que queramos aplicársela. La clase se referenciara en css con un punto "." seguido del nombre de la clase.

Código HTML<p class="alerta">Párrafo 1</p><p class="alerta">Párrafo 2</p><p>Párrafo 3</p><p>Párrafo 4</p>

Código CSS.alerta{color: darkred;}

Selectores Class - Id

Puesto que el conjunto de características pertenecientes a la misma clase puede aplicarse a diferente tipos de elementos de un html (p, h2, span...) si queremos especificar en algún momento a que etiqueta específica debe aplicarse, lo hacemos indicando el nombre de la etiqueta y después la clase.

Código HTML<p class="alerta">Párrafo 1</p><p class="alerta">Párrafo 2</p><p>Párrafo 3</p><p>Párrafo 4</p><h2 class="alerta">h2 con clase</p>

Código CSSp.alerta{color: darkred;}


Cuando hay varios elementos nombrados con la misma etiqueta y queremos que solo algunos de ellos tengan el mismo aspecto, debemos crear una clase que se usara para todos aquellos elementos a los que queramos aplicársela. La clase se referenciara en css con un punto "." seguido del nombre de la clase.

Código HTML<p class="alerta letragrande">Párrafo</p>

Código CSS.alerta{color: darkred;}.letragrande{font-size: 30px;}


Si queremos identificar de forma especial y única un elemento para diferenciarlo del resto de elementos del mismo tipo de etiqueta, usamos un id al que haremos referencia en css con el símbolo numeral "#".

Código HTML<p id="principal">Párrafo 1</p><p>Párrafo 2</p><p>Párrafo 3</p>

Código CSS#principal{font-size: 40px;}


Siempre debemos recordar que el uso del selector class puede ser aplicado a

varias etiquetas del html incluso de diferente tipo mientras el selector id

debe reservarse para un único elemento del html.

Recordar

Código HTML

<p class="azul">Ejemplo</p><p class="verde letra_grande">Ejemplo</p><p>Ejemplo</p><p id="rojo">Ejemplo</p><h2 title="primer ejemplo de h2">Primer h2</h2><h2 title="segundo ejemplo de h2">Segundo h2</h2><a href="#" lang="es-ES">Español de España</a><a href="#" lang="es-MX">Español de Mexico</a><a href="#" lang="es-CL">Español de Colombia</a>

Selectores de Atributo

Los selectores de atributos permiten asignar estilos a los elementos del html dependiendo de los atributos que tengan o de los valores de sus atributos. Hay 4 formas de emplearlos:◦ [nombre_atributo]◦ [nombre_atributo=valor]◦ [nombre_atributo~=valor]◦ [nombre_atributo|=valor]


etiqueta [ nombre_atributo ]: Se aplicarán los estilos a los elementos que tengan el atributo nombrado, sin importar su valor.

Código CSS

p[class]{text-decoration: underline;}


etiqueta [ nombre_atributo = valor ]: Se aplicarán los estilos a los elementos que tengan el atributo nombrado con un valor igual al indicado.

Código CSS

h2[title="primer ejemplo de h2"]{color: darkred;}


etiqueta [ nombre_atributo ~= valor ]: Un atributo puede tener varios valores como por ejemplo, varias clases. Se aplicarán los estilos a los elementos que tengan al menos uno de los valores igual al indicado en el atributo nombrado.

Código CSS

p[class~="letra_grande"]{text-decoration: none;}


etiqueta [ nombre_atributo |= valor ]: Se aplicarán los estilos a los elementos cuyo valor comience con el indicado y seguido de un guión.

Código CSS

a [ lang |= "es" ]{font-style: italic;}


Elemento1 + Elemento2 Los selectores adyacentes deben reunir dos

requisitos: ◦ Ser hermanos del mismo padre◦ Que el Elemento2 se encuentre inmediatamente después

del Elemento1 en el html.

Código CSS

p + p{text-indent: 30px;}

Selector Adyacente

Elemento1 > Elemento2 Los selectores de hijos deben reunir el siguiente requisito:

◦ Que el Elemento2 sea hijo directo del Elemento1 en el html

A diferencia de los selectores descendentes donde un elemento podia ser descendiente(hijo, "nieto", etc) de otro sin importar como de adentrado estuviera, en el caso del selector de hijo debe ser obligatoriamente un hijo directo para que se le apliquen los estilos.

Código CSS

div > h1{font-size:30px;}

Selector de Hijos

Elemento1 ~ Elemento2 Los selectores de hermanos deben reunir los siguientes

requisitos: ◦ Elemento1 y Elemento2 deben ser hermanos perteneciendo al

mismo padre◦ Elemento2 debe tener como hermano mayor a Elemento1, es decir,

Elemento1 debe encontrarse por encima de Elemento2 en el html. Sin importar si éstos se encuentran consecutivamente.

Código CSS

div ~ h1{font-size:30px;}

Selector de Hermanos

Para administrar bien los estilos que colisionan sobre un mismo elemento html hay que tener en cuenta que en primer lugar las propiedades css se heredan. El navegador carga todas las propiedades en el orden listado a continuación, de forma que cuando encuentra un atributo anteriormente asignado, lo reemplaza por el último que cargó. De forma que hay una jerarquía que determina el resultado final del elemento: ◦ CSS del navegador◦ CSS del perfil de usuario◦ Todas las hojas CSS enlazadas al documento en el orden en el que se

añadieron al head◦ Propiedades que el elemento hereda◦ Propiedades propias del elemento◦ Se cargan una a una las clases según están nombradas◦ Id del elemento ◦ *nota: la propiedad !important se impone a elementos de más peso

jerárquico

Colisión de Estilos

Código HTML

<header><div><h1 id="naranja" class="verde red">Colision de Estilos</h1></div></header>

Código CSS

header{ font-size: 30px; }#naranja{ color: orange; }h1{ color: blue; }.verde{ color: green !important; }.red{ color: red; }

Colisión de Estilos

¿Preguntas?

Emmanuel OrtizConsultor [email protected] / gtalkemmanueltizSkype

mailto:[email protected]

Curso HTML 5 & jQuery - Leccion 6

Internet

Transcript of Curso HTML 5 & jQuery - Leccion 6