prÁcticas css3
Post on 07-Jul-2015
288 Views
Preview:
TRANSCRIPT
5/9/2018 PRÁCTICAS CSS3 - slidepdf.com
http://slidepdf.com/reader/full/practicas-css3 1/7
Prácticas CSS3 Página 1
CSS3. PRÁCTICA 1
PASO 1
Implementa una página Web para que muestre en el centro del navegador un aspectosimilar al siguiente.
Al finalizar la modificación de los estilos debes añadir la imagen Simbolo.jpg, que
encontrarás en la red para colocarla a la izquierda del título de la página Web (como
puedes ver en la imagen del ejemplo). Fíjate en que la opacidad de la imagen debe ser
alterada para que se muestre semitransparente.
Se pueden utilizar todos los formatos de color (excepto el CMYK por no estar
implementado en la mayoría de los navegadores) y la hoja de estilos de la práctica debe
ser externa al documento HTML.
5/9/2018 PRÁCTICAS CSS3 - slidepdf.com
http://slidepdf.com/reader/full/practicas-css3 2/7
Prácticas CSS3 Página 2
PASO 2
Cambiar los fondos de los distintos elementos para que se vean con degradados, puedes
utilizar los colores que desees y acceder a herramientas on-line que te ayuden en el
desarrollo de las propiedades necesarias.
PASO 3
Suprimir el degradado de la capa principal y fijar como borde la imagen marco2.jpg
(extraer de la red), hacer la operación equivalente con el pie de la página utilizando la
imagen marco3.jpg (extraer de la red).También redondear los bordes de las capas con el
texto I said y añadirle una sombra.
5/9/2018 PRÁCTICAS CSS3 - slidepdf.com
http://slidepdf.com/reader/full/practicas-css3 3/7
Prácticas CSS3 Página 3
PASO 4
Modificar el tipo de letra para que
el título se corresponda con la fuente Cake.ttf
el texto en inglés se corresponda con la fuente East-Side-Italic.ttf
el texto en castellano se corresponda con la fuente SecretAgent.ttf
Las fuentes se pueden descargar de la red
El aspecto de la Web después de realizar la práctica debe ser como la siguiente imagen;
PASO 5
Columnas
En el pie (footer) de la práctica del tema anterior debes incluir el texto (Wikipedia) que
se muestra a continuación organizado en tres columnas y con texto justificado ( text-
align:justify;)
Texto desbordado
Fija las secciones donde residen las letras de las canciones a un tamaño similar a la
imagen donde se ve el resultado.
Añade el texto que se expone a continuación pero utiliza las propiedades CSS3
necesarias para que se vea sólo las seis primeras palabas finalizadas en puntos
suspensivos.
5/9/2018 PRÁCTICAS CSS3 - slidepdf.com
http://slidepdf.com/reader/full/practicas-css3 4/7
Prácticas CSS3 Página 4
Utiliza el texto que viene a continuación
Resultado final (Se recomienda el uso de Chrome)
5/9/2018 PRÁCTICAS CSS3 - slidepdf.com
http://slidepdf.com/reader/full/practicas-css3 5/7
Prácticas CSS3 Página 5
CSS3. PRÁCTICA 2A continuación se muestra un código CSS / HTML5 que el alumno debe analizar
consultando el anexo de CSS para conocer las distintas propiedades que se utilizan para
crear los estilos.
Sobre los estilos definidos para h1, h1 span, body p, y date debe aplicar efectos de
sombras o contornos para conseguir un diseño atractivo.
<!DOCTYPE HTML><html><head><meta charset=”utf -8"><title>Efectos de texto</title><style>h1{font-size:36px;
font-family: Georgia;color: rgb(142,11,0);
}h1 span{
font-size: 34px;}.meta{font-family: Georgia;color: rgba(69,54,37,0.6);font-size: 0.85em;font-style: italic;
letter-spacing: 0.25em;border-bottom: 1px solid rgba(69,54,37,0.2);padding-bottom: 0.5em;
}.meta span{text-transform: capitalize;font-style: normal;color: rgba(69,54,37,0.8);
}.body p{font-family: Verdana;
line-height: 1.5em;color: rgb(69,54,37);text-align:justify;
}date{font-family: Georgia;color: rgba(69,54,37,0.6);font-size: 0.75em;font-style: italic;border-top: 1px solid rgba(69,54,37,0.2);display: block;
padding-top: 0.5em;margin-top: 2em;
5/9/2018 PRÁCTICAS CSS3 - slidepdf.com
http://slidepdf.com/reader/full/practicas-css3 6/7
Prácticas CSS3 Página 6
}</style></head>
<body>
<header><h1>Curso de CSS3 <br>
<span>Ejemplo de efectos sobre el texto</span></h1></header><section><header class="meta">Práctica del<span> alumno</span></header><article class="body"><p>Ya no es necesario crear una imagen con un programa especializadoque permita crear efectos sobre el texto puesto que con el uso exclusivo de
las hojas de estilo es posible modificar el aspecto con el que se muestra untexto.</p></article><footer><date>Creado en Septiembre de 2011</date></footer></div></section></body></html>
El resultado del código inicial de la práctica es
El alumno debe realizar los cambios apropiados sobre la hoja de estilos para conseguir
efectos similares a la imagen siguiente.
5/9/2018 PRÁCTICAS CSS3 - slidepdf.com
http://slidepdf.com/reader/full/practicas-css3 7/7
Prácticas CSS3 Página 7
top related