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.

Patron:
elementoHMTL {
propiedad: valor;
}

 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.

<!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ó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".

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

 Sangría en HTML
 Sangría en CSS
 Comentarios

 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;
}

 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>Párrafo 3</p>
<p>Párrafo 4</p>
Código CSS
.alerta{
color: darkred;
}

 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>Párrafo 3</p>
<p>Párrafo 4</p>
<h2 class="alerta">h2 con clase</p>
Código CSS
p.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.

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>

 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;
}

 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;
}

 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;
}

 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

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; }

Emmanuel Ortiz
Consultor Sr.
emmanueltiz@gmail.com
email / gtalk
emmanueltiz
Skype

Curso HTML 5 & jQuery - Leccion 6

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Curso HTML 5 & jQuery - Leccion 6

Curso HTML 5 & jQuery - Leccion 6