PRÁCTICAS CSS3

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.




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.




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.




Utiliza el texto que viene a continuación

Resultado final (Se recomienda el uso de Chrome)




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;




}</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.

PRÁCTICAS CSS3

Documents

Transcript of PRÁCTICAS CSS3