Leccion 6

HTML
CSS – Cascading Style

Sheets
HTML
¿Qué es CSS?
 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;
}
Cómo incluir un CSS en el mismo
HTML
 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.
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>
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.
HTML
 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.
HTML
<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>
Cómo incluir CSS en un archivo
externo
 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.
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; }

externo
 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".
Buenas Practicas
CSS
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/
Compatibilizar navegadores
 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
Desarrollo Ordenado
 Sangría en HTML
 Sangría en CSS
 Comentarios
Selectores
CSS
Selectores de Etiqueta
 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;
}
Selectores Class - Id
 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;
}
Recordar
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.
Selectores de Atributo
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;
}
Selector Adyacente
 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 de Hijos
 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 Hermanos
 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;
}
Colisión de Estilos
 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; }
¿Preguntas?
Emmanuel Ortiz
Consultor Sr.
emmanueltiz@gmail.com
email / gtalk
emmanueltiz
Skype

Leccion 6

Cargado por

Copyright:

Formatos disponibles

Leccion 6

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Leccion 6

Cargado por

Copyright:

Formatos disponibles

HTML

CSS – Cascading Style

 Un documento HTML simple que contiene el

 La razón es simple: cuando usamos esta técnica, debemos

 Solo imagine lo que ocurriría si decide que en lugar de 20

 Este método puede ser útil cuando se define

 Se pueden usar todos los archivos CSS que

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

Siempre debemos recordar que el uso del

 Los selectores de atributos permiten asignar

h2[title="primer ejemplo de h2"]{

 A diferencia de los selectores descendentes donde un elemento

div > h1{

header{ font-size: 30px; }

También podría gustarte