Hoja de Estilos CSS

Instituto Polit
ecnico Nacional
Escuela Superior de C
omputo
Academia de Ingeniera de Software
Pr
actica 1
Alumno: Flores Contreras Osvaldo
M. en C. Tanibet Perez de los Santos Mondragon
Tecnologas para la Web. Primer Parcial.
Grupo: 2CM10
2014
Indice general
1. Desarrollo y Resultados
1.1. Borders . . . . . . . . . . . . . . . . . . . . .
1.1.1. Border Color-Border Styles . . . . . .
1.1.2. Border Width . . . . . . . . . . . . . .
1.1.3. Border Radius . . . . . . . . . . . . .
1.1.4. Border Radius-Hemisphere . . . . . .
1.1.5. Border Radius-Advanced Hempisphere
1.1.6. Round Rectangle . . . . . . . . . . . .
1.1.7. Advanced Round Rectangle . . . . . .
1.1.8. Bullet . . . . . . . . . . . . . . . . . .
1.1.9. Advanced Bullet . . . . . . . . . . . .
1.1.10. Advanced Leaf . . . . . . . . . . . . .
1.1.11. Multiple Backgrounds . . . . . . . . .
1.2. Text Effects . . . . . . . . . . . . . . . . . . .
1.2.1. Colorful Style . . . . . . . . . . . . . .
1.2.2. Double Font Style . . . . . . . . . . .
1.2.3. Neon Glown Style . . . . . . . . . . .
1.2.4. Ouset Style . . . . . . . . . . . . . . .
1.3. Fonts . . . . . . . . . . . . . . . . . . . . . . .
1.4. Shadows . . . . . . . . . . . . . . . . . . . . .
1.4.1. Example 1 . . . . . . . . . . . . . . . .
1.4.2. Example 2 . . . . . . . . . . . . . . . .
1.4.3. Example 3 . . . . . . . . . . . . . . . .
1.4.4. Example 4 . . . . . . . . . . . . . . . .
1.4.5. Example 5 . . . . . . . . . . . . . . . .
1.4.6. Example 6 . . . . . . . . . . . . . . . .
1.4.7. Example 7 . . . . . . . . . . . . . . . .
1.4.8. Example 8 . . . . . . . . . . . . . . . .
1.5. Transformaciones . . . . . . . . . . . . . . . .
1.5.1. Scaling . . . . . . . . . . . . . . . . .
1.5.2. Rotate . . . . . . . . . . . . . . . . . .
1.5.3. Skew . . . . . . . . . . . . . . . . . . .
1.6. Animations . . . . . . . . . . . . . . . . . . .
1.6.1. Delay . . . . . . . . . . . . . . . . . .
2
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
4
6
6
6
7
8
9
9
10
11
12
12
13
15
15
15
16
16
17
18
18
18
19
20
20
21
22
22
23
23
23
24
24
24
INDICE GENERAL
1.6.2. Keyframes . . . . .
1.6.3. Multiple Columns
1.7. Gradients . . . . . . . . .
1.7.1. Gradient1 . . . . .
1.7.2. Gradient2 . . . . .
1.8. Pseudo-classes . . . . . .
1.9. Conclusiones . . . . . . .
1.10. Cuestionario . . . . . . . .
3
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
25
27
28
28
28
29
29
30
Captulo 1
Desarrollo y Resultados
Comenzamos por descargar Boilerplate, el cual nos facilito la construccion
de la p
agina mediante una plantilla de codigo preestablecida. Modificamos el archivo index.html para agregar las diferentes etiquetas necesitabamos, y creamos
un archivo .css para ir agregando atributos a dichas etiquetas. A continuacion
se describe paso a paso el desarrollo de ambos archivos.
En la imagen se observa el inicio del documento html con la etiqueta head,
el cual contiene:
Ttulo de la p
agina Practica1.
Charset para decodificar la pagina (en este caso permite la utilizacion de
acentos y otros smbolos).
Un link que enlaza el documento html con una hoja de estilos, indicando
el tipo y la ubicaci
on del archivo.
Figura 1.1: Inicio de documento .html

Nota: la hoja de estilos debe guardarse en la carpeta css para poder enlazarla.
Posteriormente encontramos la etiqueta body la cual contiene varias etiquetas
p. Para diferenciar cada una de estas etiquetas utilizamos identificadores. Estos
identificadores asignan un nuevo nombre a la etiqueta: id=nombrenuevo
4
CAPITULO 1. DESARROLLO Y RESULTADOS
La mayora de las etiquetas que manejamos contienen la frase Hello World!

This is practice number 1. De no ser as, se indicara en dicho ejercicio.
Figura 1.2: Identificadores

A continuaci
on se muestran las primeras lneas de codigo de la hoja de estilos
en donde a la etiqueta p, sin importar el identificador que tenga, se le asignaran
los siguientes atributos:
Tama
no de la fuente: 20 px
Color de fuente: Blanco
Altura del cuadro de la etiqueta: 150px
Anchura del cuadro de la etiqueta: 270px
Y el padding que establece anchura de ciertas zonas del elemento
Tambien se le asigna al body una alineacion de texto centrado y se coloca una
imagen de fondo para la p
agina, utilizando la etiqueta background y colocando
la direcci
on donde se encuentra guardada dicha imagen.
Figura 1.3: Asignacion a la etiqueta p en todo el documento

Nota: Es recomendable crear una carpeta en el directorio donde se encuentra
el archivo .html para lograr accesar a las imagenes y mantener un orden con los
archivos.
Para indicar en la hoja de estilos el identificador al cual nos referimos, es necesario utilizar el smbolo # . Ejemplo: #identificador
1.1.
1.1.1.
Borders
Border Color-Border Styles
El ejercicio consisti
o en agregar un color de borde a la etiqueta p1, el c
ual
se asigna con un n
umero hexadecimal o con el nombre en ingles. Y un estilo
de borde: solid, dotted, groove y double. Para indicar un color y estilo a cada
borde es necesario saber que hay que agregarlo de la siguiente manera: (superior) (derecha) (inferior) (izquierda) o (top) (right) (bottom) (left). El n
umero
hexadecimal permite colocar una gran gama de colores.
Figura 1.4: Color y estilo de borde
Figura 1.5: Visualizacion en el navegador
1.1.2.
Border Width
El ejercicio consiti
o en observar como puedes cambiar el ancho de los bordes,
indicando mediante pixeles a cada uno de los cuatro bordes. En la imagen se
observa que cada uno de los bordes tiene un ancho distinto.
Figura 1.6: top=5px, right=10px, bottom=15px, left=20px
1.1.3.
Border Radius
o en observar como se pueden curvear los bordes, de igual
manera se indica mediante pixeles. Entre mas grande es el n
umero de pixeles
m
as grande es la curva del borde.
Figura 1.8: top=0px, right=30px, bottom=70px, left=20px
1.1.4.
Border Radius-Hemisphere
o en observar otro comportamiento del border radius
utilizando dos nuevos atributos.
Figura 1.10: moz-border-radius, webkit-border-radius
1.1.5.
Border Radius-Advanced Hempisphere
El ejercicio consiti
o en observar un comportamiento del border radius. A
diferencia de los otros dos, este ya tiene mas un poco mas de complejidad en su
construcci
on. S
olo hay que jugar con el tama
no de los pixeles en los 4 bordes
para lograr resultados como estos.
Figura 1.12: moz-border-radius, webkit-border-radius
1.1.6.
Round Rectangle
o en hacer un rectangulo con las orillas curveadas; para
esto bast
o con dejar border-radius en 20px, moz-border-radius en 20px y webkitborder-radius en 20px.
Figura 1.14: Rectangle
1.1.7.
Advanced Round Rectangle
Figura 1.16: Advanced Rectangle
10
11
1.1.8.
Bullet
o en modificar los bordes de tal manera que se creara una
figura con forma de bala. Como ya mencione, hay que jugar con los pixeles de
los bordes para poder construir distintas formas.
Figura 1.18: Bullet
1.1.9.
12
Advanced Bullet
Se modifican los estilos de bordes y se agregan otros tama

nos de pixeles a
border-radius
Figura 1.20: Advanced Bullet
1.1.10.
Advanced Leaf
Este ejercicio consisti

o en una combinacion de los efectos y propiedades que
habamos estado utilizando, cambiando colores, tama
nos de pixeles y estilos.
13
Figura 1.22: Advanced Leaf
1.1.11.
Multiple Backgrounds
o en colocar 3 imagenes dentro de una etiqueta. Para esto
se le asign
o a esta una altura y un ancho distinta a las demas etiquetas, para
que de esta manera se apreciaran las 3 imagenes. Con la etiqueta background
indicamos que ser
a una im
agen de fondo, y con url indicamos la ruta en donde
se buscar
an las im
agenes as como el nombre del archivo.
14
Figura 1.24: top y bottom asignan a la imagen la posicion donde se colocaran

Nota: las im
agenes deben guardarse en el directorio donde esta el archivo
.html
1.2.
15
Text Effects
Para manejar estos efectos es necesario saber conocer la sintaxis:

text-shadow=(X-offset)(Y-offset)(blur-radius)(color)
1.2.1.
Colorful Style
El atributo text-shadow sirve para crear sombras en el texto. Se le indica

la posici
on de la sombra que se creara, tanto hacia arriba(x) como hacia los
lados(y), as como el color de la sombra.
Figura 1.26: text-shadow
1.2.2.
Double Font Style
En este ejercicio el texto se duplico y se posiciono uno mas arriba que el

otro; se cambi
o el color tambien.
Figura 1.28: double font
1.2.3.
Neon Glown Style
Figura 1.30: Neon glown style
1.2.4.
Ouset Style
Figura 1.32: Outset Style
16
1.3.
17
Fonts

o en colocar otra fuente a un texto de una etiqueta.
Para esto fue necesario descargar una o mas fuentes de internet, las cuales tienen
una extensi
on de archivo .ttf (en caso de utilizar IE era necesario convertir las
fuentes a una extensi
on .eot). Ya teniendo las fuentes se realizo lo siguiente en
la hoja de estilos:
Figura 1.34: Font

Se puede ver que se declaro una nueva fuente colocando el nombre de esta(fontfamily) as como la ruta de ubicacion del archivo .ttf. Posteriormente, en la etiqueta donde se utilizar
a la fuente, se indica el tama
no(font-size) y el nombre de
esta.

Nota: se recomienda guardar las fuente en una carpeta que se encuentre en
el mismo directorio que el archivo .html
1.4.
1.4.1.
Shadows
Example 1
Figura 1.36: effect
1.4.2.
Example 2
Figura 1.38: effect
18
1.4.3.
Example 3
Figura 1.40: effect
19
1.4.4.
Example 4
Figura 1.42: effect
1.4.5.
Example 5
Figura 1.44: effect
20
1.4.6.
Example 6
Figura 1.46: effect
21
1.4.7.
Example 7
Figura 1.48: effect
1.4.8.
Example 8
Figura 1.50: effect
22
1.5.
1.5.1.
Transformaciones
Scaling
Figura 1.52: Scaling
1.5.2.
Rotate
Figura 1.53: Rotate
23
24
Figura 1.54: Escala y rotacion de la imagen
1.5.3.
Skew
Figura 1.55: Texto inclinado
1.6.
1.6.1.
Animations
Delay
o en que la etiqueta apareciera despues de un cierto tiempo en la p
agina, definiendo los tiempos de intervalo.
25
Figura 1.57: Aparecer/desaparecer
1.6.2.
Keyframes

o en hacer que la etiqueta cambiara de tama
no al momento de colocar el cursor sobre el. Utilizamos la pseudo-clase hover para lograr
este efecto
Figura 1.59: Aparecer/desaparecer
Figura 1.60: Texto antes de colocar el cursor sobre el
26
Figura 1.61: Colocando el cursor sobre el
1.6.3.
Multiple Columns
Figura 1.62: Texto inclinado
27
1.7.
Gradients
1.7.1.
Gradient1
Figura 1.64: Gradiente lineal
1.7.2.
Gradient2
Figura 1.66: Gradiente Radial
28
1.8.
29
Pseudo-classes
Figura 1.68: :root

Se coloca un m
argen color rojo. En caso de que la pagina no tuviera una
im
agen de fondo este aparecera color rojo.
1.9.
Conclusiones
La creaci
on de una p
agina web conlleva la utilizacion de muchos atributos y
etiquetas, los cuales permiten establecer un dise
no mas estructurado pero tambien m
as complejo. Gracias a la hoja de estilos CSS3 es mas sencillo dise
nar
estos aspectos pues permiten llevar un control de todo lo que se utiliza. Todos
los archivos externos, como imagenes, fuentes, etc. se deben almacenar en directorios distintos para que, si la pagina se vuelve demasiado grande, se pueda
modificar o corregir de manera mas eficiente. A
un hay muchos atributos y etiquetas que tenemos que abordar, pero al realizar esta practica ya comprendimos
la manera conjunta en que HTML5 y CSS3 trabajan.
1.10.
30
Cuestionario
1. Cu
ales son las etiquetas semanticas de HTML5?
R: <header> </header>
<hgroup> </hgroup>
<nav> </nav>
<article> </article>
<section> </section>
<aside> </aside>
<figure> </figure>
<footer> </footer>
<address> </address>
2. Menciona cu
al es la diferencia entre CSS2 y CSS3
R: La mayor diferencia entre CSS2 y CSS3 es que este u
ltimo ha sido
dividido en diferentes secciones llamadas modulos. Cada uno de estos
m
odulos hace su camino a traves de WC3 en varios niveles del proceso
recomendado. CSS2 fue presentado como un u
nico documento con toda
la informaci
on dentro de las hojas de estilo en cascada Gracias a estos
m
odulos, se ha podido trabajar independientemente; tenemos un rango
mucho m
as amplio de navegadores que soporten modulos CSS3 CSS3 trae
nuevos selectores y 16 nuevas pseudoclases.
3. Enlista las ventajas y desventajas de usar HTML5 y CSS3. Analizar los
resultados (p
agina Web) de la practica en varios navegadores (Internet
explorer versi
on 7, 8 y 9, Chrome, Firefox y Opera)
Ventajas
Sitios web de alto impacto visual, llamativos y modernos.
Desarrollo de aplicaciones web amigables con iPhone, Andriod, BlackBerry y otros dispositivos moviles.
Optimizar y alcanzar un excelente posicionamiento seo en google y
otros buscadores.
Reproducir con HTML5 de forma nativa en el navegador audio y
video, ente otros elementos, que antes solo era posible incorporar
mediante plugins.
Evitar las desventajas que el uso de plugins puede traer en compatibilidad, rendimiento y seguridad.
Mejorar la sem
antica de los sitios web adaptando de mejor manera
el contenido tem
atico para mostrar a los buscadores y agregadores
el significado de su contenido permitiendo que la indizacion de los
documentos sea mas certera.
31
CSS3 es el lenguaje encargado de que se vea amigable el sitio web.

Permite lograr estilos y efectos visuales que antes no era posible lograr.
Un sitio hecho en HTML5 y CSS3 te coloca a la vanguardia frente a
tus competidores.
Desventaja
La parte de compatibilidad con los navegadores. El mas problematico
es Internet Explorer y al tener que hacer una pagina compatible con
la mayora de los navegadores es necesario trabajar con muchas lneas
de c
odigo extra y por ahora no hablamos de sitios responsivos, lo cual
generara de 3 a 4 veces mas de codigo en el CSS.
4. Los resultados de la pr
actica Son iguales en los navegadores mencionados
previamente?
R: En algunos aspectos son distintas. Por ejemplo, en Chrome se pueden
utilizar las fuentes .ttf pero al momento de abrir la pagina con Internet
Explorer no lo hace, es necesario convertir la fuente a una extension .eot.
Los gradientes no se observan en Internet Explorer, mientras que en Chrome s.
5. Enlista 10 caractersticas no compatibles entre navegadores R:
6. Investiga las tecnologas que permiten compatiblilidad entre navegadores
R: Existen diferentes formas de hacerlo, una es crear las etiquetas de
HTML5 en javascript y despues aplicar los estilos CSS a dichas etiquetas, el c
odigo javascript seria:
Figura 1.70: script

Y como CSS pondramos
32
Figura 1.71: css

Si bien otra soluci
on seria utilizar el fichero html5.js con lo que no tendramos
que utilizar el c
odigo javascript simplemente incluirle en nuestro archivo
html con la orden:
Figura 1.72: script

7. Aplica alguna tecnologa para que las caractersticas que no son compatibles lo sean.
R: Crear las etiquetas de HTML5 en javascript y despues aplicar los estilos
CSS a dichas etiquetas
8. Evidencia (con impresiones de pantalla) el antes y el despues de aplicar
las tecnologas que brindan compatibilidad
Figura 1.73: Sin fuente en Internet Explorer
Figura 1.74: Haciendo compatibles los navegadores
Figura 1.75: Agregando en css
Figura 1.76: Fuente en Internet Explorer
33

Hoja de Estilos CSS

Cargado por

Información del documento

Título original

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

Hoja de Estilos CSS

Cargado por

Copyright:

Formatos disponibles

Instituto Polit

Alumno: Flores Contreras Osvaldo

M. en C. Tanibet Perez de los Santos Mondragon

Tecnologas para la Web. Primer Parcial.

Figura 1.1: Inicio de documento .html

CAPITULO 1. DESARROLLO Y RESULTADOS

La mayora de las etiquetas que manejamos contienen la frase Hello World!

Figura 1.2: Identificadores

Figura 1.3: Asignacion a la etiqueta p en todo el documento

CAPITULO 1. DESARROLLO Y RESULTADOS

Figura 1.4: Color y estilo de borde

Figura 1.5: Visualizacion en el navegador

CAPITULO 1. DESARROLLO Y RESULTADOS

Figura 1.6: top=5px, right=10px, bottom=15px, left=20px

Figura 1.7: Visualizacion en el navegador

Figura 1.8: top=0px, right=30px, bottom=70px, left=20px

CAPITULO 1. DESARROLLO Y RESULTADOS

Figura 1.9: Visualizacion en el navegador

Figura 1.10: moz-border-radius, webkit-border-radius

Figura 1.11: Visualizacion en el navegador

CAPITULO 1. DESARROLLO Y RESULTADOS

Border Radius-Advanced Hempisphere

Figura 1.12: moz-border-radius, webkit-border-radius

Figura 1.13: Visualizacion en el navegador

CAPITULO 1. DESARROLLO Y RESULTADOS

Figura 1.14: Rectangle

Figura 1.15: Visualizacion en el navegador

Advanced Round Rectangle

Figura 1.16: Advanced Rectangle

CAPITULO 1. DESARROLLO Y RESULTADOS

Figura 1.17: Visualizacion en el navegador

Figura 1.18: Bullet

Figura 1.19: Visualizacion en el navegador

CAPITULO 1. DESARROLLO Y RESULTADOS

Se modifican los estilos de bordes y se agregan otros tama

Figura 1.20: Advanced Bullet

Figura 1.21: Visualizacion en el navegador

Este ejercicio consisti

CAPITULO 1. DESARROLLO Y RESULTADOS

Figura 1.22: Advanced Leaf

Figura 1.23: Visualizacion en el navegador

CAPITULO 1. DESARROLLO Y RESULTADOS

Figura 1.24: top y bottom asignan a la imagen la posicion donde se colocaran

Figura 1.25: Visualizacion en el navegador

CAPITULO 1. DESARROLLO Y RESULTADOS

Para manejar estos efectos es necesario saber conocer la sintaxis:

El atributo text-shadow sirve para crear sombras en el texto. Se le indica

Figura 1.26: text-shadow

Figura 1.27: Visualizacion en el navegador

Double Font Style

En este ejercicio el texto se duplico y se posiciono uno mas arriba que el

Figura 1.28: double font

Figura 1.29: Visualizacion en el navegador

CAPITULO 1. DESARROLLO Y RESULTADOS

Neon Glown Style

Figura 1.30: Neon glown style

Figura 1.31: Visualizacion en el navegador

Figura 1.32: Outset Style

Figura 1.33: Visualizacion en el navegador

CAPITULO 1. DESARROLLO Y RESULTADOS

Este ejercicio consisti

Figura 1.34: Font

Figura 1.35: Visualizacion en el navegador