curso de css y css3

CURSO DE CSS Y CSS3

1

ndice de contenidos

Tema 1: introduccin a CSS 2

Tema 2: estilos CSS3 y modelos de capa 4

Tema 3: atributos para fuentes con CSS 9

Tema 4: atributos para texto con CSS 12

Tema 5: margin, padding y border con CSS 15

Tema 6: fondos, listas y cursores con CSS 18

Tema 7: alinear imgenes con texto con CSS 22

Tema 8: men con HTML y CSS 25

Tema 9: men acorden con HTML5 y CSS3 27

Tema 10: ejercicio resuelto, pgina web con HTML5 y CSS3 33

ANEXO I: COLORES EN HEXADECIMAL 37

Para terminar 39

2

Tema 1: introduccin a CSS

Los CSS son hojas de estilo que nos van a permitir definir estilos que luego aplicaremos a nuestras pginas web. Mientras que el lenguaje HTML es el que emplearemos para la programacin no visible de nuestras pginas web (estructura), el lenguaje CSS es el que emplearemos para la programacin visible (diseo).

Vincular una hoja de estilos a nuestra web Lo primero y ms importante a tener en cuenta en los nuevos estilos CSS3, es que no

son iguales para todos los navegadores, ya que no todos saben interpretarlos, pero como

siempre, HTML tiene la solucin para todo y en este caso, la solucin est en la colocacin de

ciertos prefijos antes de los atributos de CSS, ahora pasar a listarlos y ya iremos viendo en los

temas siguientes su utilizacin:

- -moz- para Firefox

- -webkit- para Chrome y Safari

- -o- para Opera

- -khtml- para Konqueror

- -ms- para IExplorer

Veamos cmo integrar CSS a HTML. En el primer tema del curso de HTML y HTML5 vimos

la estructura de cualquier pgina web. Como recordamos, se compone a grandes rasgos de:

Pues bien, dentro del apartado del debemos introducir una

etiqueta nueva para vincular una hoja de estilos a nuestra pgina, la etiqueta . El

siguiente cdigo es para enlazar el CSS a la pgina web:

3

Sintaxis de una hoja de estilo

Primero tenemos que poner el nombre, para lo que tenemos varias opciones: o El nombre puede ser el mismo de la etiqueta de HTML. Por ejemplo, para darle

estilo a todas las etiquetas de prrafos, utilizaramos en el CSSp y con ello estaramos dando estilo (diseo) a todas las etiquetas del cdigo HTML de nuestra pgina web.

o Otro nombre que podemos darle es uno inventado. Para ello, las nicas condiciones que hay es que comience con un punto (.) y que la palabra usada no sea una que emplee HTML como por ejemplo .div,.mitexto s que valdra y en este caso tendramos que declarar mediante una etiqueta en el HTML que queremos referirnos a esta clase, luego veremos cmo.

o Como ltima opcin podramos emplear un nombre inventado pero para una sola clase en concreto. Por ejemplo, podramos crear una clase para dar estilo a las etiquetas del cdigo HTML de nuestra pgina web que nosotros queramos de la siguiente forma: p.mitexto. Adems, solo podramos usar la clase mitexto en etiquetas .

Despus, entre llaves ({}), vamos a poner los atributos, dependiendo de la etiqueta que sea, los encontrars en otro tema de este mismo curso.

Aplicar los estilos de un CSS a nuestra web

Si queremos aplicar un estilo para toda una etiqueta (como por ejemplo la etiqueta p), bastar con usar esa etiqueta. En caso de no ser as, tenemos una opcin para cada caso anterior:

Para aplicarlo a todo un prrafo, imagen o capa, por ejemplo, lo haremos en la etiqueta de apertura, usando el atributo class: texto que queremos que se aplique el estilo

Para solamente una parte del contenido, tendremos que usar la etiqueta ... texto normal, pero este es con estilo

4

Tema 2: estilos CSS3 y modelos de capa

Capas en HTML5 y CSS3 Las capas en HTML se definen mediante la etiqueta . Es muy

recomendable distribuir los elementos dentro de nuestra pgina web mediante capas.

Podramos definir capa como una especie de contenedor que est situado en la web y en su

interior se encuentran elementos visibles.

Como cualquier elemento de HTML, las capas pueden tener un estilo o formato, como

un color de fondo, borde, ancho y alto los veremos todos a continuacin.

Lo primero que debemos hacer es nombrar cualquier elemento de nuestro cdigo

HTML para luego poder referirnos a l en el CSS, esto se ve mejor con un ejemplo ya que es

difcil de explicar. Supongamos que tenemos un archivo llamado index.html que quedara as:

Pgina de prueba

5

POSITION, TOP, LEFT, WIDTH Y HEIGHT Empecemos viendo las 5 cosas que siempre deben incluirse para cualquier capa en el

CSS:

- position: el tipo de posicin que va a tener la capa en nuestra pgina web, hay varios

tipos, pero nos centraremos en dos de ellos:

o absolute: la capa aparecer en la posicin en la que nosotros le indiquemos

con los atributos top y left, sin tener en cuenta otros elementos de la pgina

(opcin recomendada para principiantes).

o relative: la capa aparecer de forma relativa a la posicin en la que la

incluyamos en el cdigo fuente de nuestra web respecto de otros elementos.

- top: el alto de la capa. En caso de que su position sea absolute, ser el alto respecto al

borde superior de la pantalla, y en caso de position relative ser respecto del elemento

anterior.

- left: la distancia desde la izquierda en la que empezar a construirse la capa. En caso

de que sea position absolute ser la distancia desde el borde izquierdo de la pantalla y

en caso de position relative ser la distancia desde el elemento que tenga a su

izquierda.

- width: el ancho de la capa, podremos usar valores en pixeles o valores porcentuales.

- height: el alto de la capa, podremos usar valores en pixeles o valores porcentuales.

MARGIN Y PADDING - margin: atributo empleado para indicar cunta separacin debe tener la capa respecto

de los elementos que la rodean. Le daremos valor en pixeles (px). En caso de no

especificar qu tipo de margin estamos dando, tendr el mismo valor para el caso

superior, inferior, para la derecha y la izquierda. En caso de querer especificar,

podremos hacerlo del siguiente modo:

o margin-top: para la separacin con el elemento superior

o margin-bottom: para la separacin con el elemento inferior

o margin-left: para la separacin con el elemento de la izquierda

o margin-right: para la separacin con el elemento de la derecha

- padding: emplearemos este atributo para indicar la separacin de los elementos que

contiene la capa respecto de los bordes de la misma. Es como el margin pero interno

(sera como darle un margin a todos los elementos que contenga la capa. Al igual que

el margin, si no se especifica tendr el mismo valor para todos los lados, pero

podemos especificar:

o padding-top: respecto del borde superior de la capa

o padding-bottom: respecto del borde inferior de la capa

o padding-left: respecto del borde izquierdo de la capa

o padding-right: respecto del borde derecho de la capa

6

BORDER Y BACKGROUND - border: vamos a emplear este atributo para establecer un borde para la capa dndole

el grosor y el color. Para ello emplearemos el siguiente cdigo:

o border: 1px solid #000000; como vemos, le estamos dando un borde a

todos los laterales de la capa de 1 pixel de grosor, tipo solido (que es el que

usaremos por ahora) y de color negro. Tambin podemos especificar en qu

lado queremos ponerle el borde:

border-top: para bordes superiores

border-left: para bordes izquierdos

border-right: para bordes derechos

border-bottom: para bordes inferiores

- background: sirve para ponerle un fondo a la capa, para ello tenemos dos opciones,

ponerle un fondo de un color o ponerle una imagen de fondo:

o background-color: para ponerle un color (valor hexadecimal [#a324ds])

o background-image: para ponerle una imagen, y sera un cdigo similar a:

background-image:url(ruta/nombre.png); como vemos, debemos

ponerle la ruta y el nombre de la imagen junto con su extensin (.png

.jpg .gif ). Tambin podemos decirle que en caso de que la imagen

sea ms pequea que la capa, la repita en un solo eje o no la repita, ya

que por defecto la repite en los dos ejes:

background-repeat: no-repeat; no repite

background-repeat: repeat-x la repite en el eje horizontal

background-repeat: repeat-y la repite en el eje vertical

BORDER-RADIUS CSS3 Ahora empezaremos con los elementos tpicos de HTML5. Gracias a ste elemento,

vamos a poder redondear las esquinas de las capas una cantidad de pixeles determinada por

nosotros. Tenemos por lo tanto varias opciones para redondear las capas con este atributo:

- redondear todas las esquinas el mismo valor: border-radius: 15px;

- redondear esquinas una por una, cada una un valor diferente. El orden de las esquinas

es esquina superior izquierda, esquina superior derecha, esquina inferior

derecha y esquina inferior izquierda y quedara:

border-radius: 10px 15px 10px 15px;

- hacer una especie de elipsis, dndole forma a las esquinas (todas a la vez) mediante un

radio horizontal y un radio vertical separados por una barra. Algo como:

border-radius: 20px / 10px;

Hay que recordar que para utilizar el border-radius, como cualquier otro elemento

puro de CSS3 (de los marcados en el ttulo del elemento, como este) es necesario emplear los

prefijos dichos al principio, al menos los 3 comunes:

7

.redondeada { border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px;

}

BOX SHADOW CSS3 Veamos ahora cmo darle un bonito sombreado a nuestras capas. Para ello primero

tendremos que tener en cuenta ciertas cosas bsicas:

- el color: el color se establecer en rgb(), aunque se podr tambin escribir en valor

hexadecimal.

- el desplazamiento de la sombra: son dos valores que indican la distancia horizontal y

vertical desde la sombra al elemento en cuestin. Si ponemos valores negativos,

posicionaremos la sombra a la izquierda y en la parte superior del elemento mientras

que si ponemos positivos, a la derecha y en la parte inferior de la capa. En caso de

poner 0, la sombra quedar detrs de la capa, y podremos crear un efecto difuminado

muy curioso con el siguiente elemento.

- la distancia de difuminacin: es la transparencia de la sombra, cuantos ms pxeles le

demos, ms difuminada aparecer la sombra.

Una vez vistas estas cosas bsicas, veremos ahora la forma de escribir las lneas de cdigo

para esta propiedad:

box-shadow: color desplazamiento_horizontal desplazamiento_vertical distancia;

box-shadow: rgb(150,150,150,0.5) 5px 5px 10px;

Podemos crear una sombra interna para la capa del mismo modo, simplemente tendremos

que aadirle al final de los atributos la palabra inset, de tal forma que:

.sombreada {

box-shadow: rgb(150,150,150,0.5) 5px 5px 10px inset;

-webkit- box-shadow: rgb(150,150,150,0.5) 5px 5px 10px inset;

-moz- box-shadow: rgb(150,150,150,0.5) 5px 5px 10px inset;

}

BACKGROUND GRADIENT CSS3 Gracias a HTML5 podremos realizar degradados en las capas de una forma un tanto

catica pero muy sencilla a la vez (cuando se acaba de comprender), es importante saber que

muchos de estos degradados no funcionarn con IExplorer ni poniendo el prefijo ms- pero

tengo que explicarlos igualmente (tambin ten en cuenta que hoy prcticamente nadie emplea

IExplorer). Hay dos tipos de degradados. Vemoslos:

8

- Lineal: quiz sea el ms sencillo de todos, y el ms vistoso y bonito desde mi punto de

vista. Para hacerlo veremos ciertos parmetros:

o orientacin: lo primero que tendremos que hacer es establecer la orientacin

del degradado en cuestin, ya sea top (de arriba abajo) o left (de izquierda a

derecha), right (derecha a izquierda) o bottom de abajo a arriba.

o color de inicio: el el color desde el que partir el degradado.

o color de fin: el color en el que finalizar el degradado.

Visto esto, lo nico que nos falta ver es cmo hacer un degradado de negro a blanco y

con inicio en el superior:

.degradada { background: -webkit-linear-gradient(top, #000000, #FFFFFF); background: -moz-linear-gradient(top, #000000, #FFFFFF);

} Otra cosa que podemos hacer es declarar los porcentajes en los que finalizar cada color, y sera algo como:

.degradada {

background: -webkit-linear-gradient(top, #000000 50%, #FFFFFF 95%); background: -moz-linear-gradient(top, #000000 50%, #FFFFFF 95%);

}

- Radial: es el otro tipo de degradado bsico que veremos, hay ms avanzados pero ya se vern en otro momento, cuando veamos otros atributos. Este degradado es similar al anterior, pero tendremos otras propiedades y otro orden de las mismas. Veamos:

o posicin: es la posicin del centro del degradado en la capa, puede ser top,

left, right, bottom o center (la ms usada).

o forma: puede tomar dos valores, cicle en caso de que queramos que sea

circular o ellipse en caso de que queramos que tome una forma ovalada

o color de inicio y color de fin: como en el linear.

Veamos por tanto un ejemplo de un degradado circular de blanco en el centro de la

capa, a negro en los bordes.

background: radial-gradient(center, circle, #FFFFFF 0%, #000000 240%);

9

Tema 3: atributos para fuentes con CSS

Tipos de fuente font-family

Vamos a empezar viendo los tipos genricos de fuentes que nos va a permitir seleccionar HTMLEstos tipos de fuentes, al ser generales como hemos dicho antes, sern muy similares en todos los navegadores, pero no idnticos, ya que cada uno lo interpreta de un modo distinto. Vemoslos uno a uno:

font-family: sans-serif;

Tipo de fuente sans-serif

font-family: monospace;

Tipo de fuente monospace

font-family: cursive;

Tipo de fuente cursive

font-family: serif;

Tipo de fuente serif

font-family: fantasy;

Tipo de fuente fantasy

Adems de estas fuentes genricas que hemos visto, podremos indicarle al navegador la fuente concreta que queremos que se emplee en un prrafo. Hay una desventaja con esto, y es que si el navegador en cuestin no reconoce dicha fuente, mostrar la fuente por defecto "Times New Roman", que no tiene por qu ser la ms parecida a la que seleccionamos... Por ello, conviene poner dos o tres fuentes similares para que en caso de no encontrar una, siempre pueda encontrar otra...

Las opciones de fuentes que recomiendo poner son:

font-family:Arial, Helvetica, sans-serif; font-family:"Times New Roman", Times, serif; font-family:"Courier New", Courier, monospace; font-family:Georgia, "Times New Roman", Times, serif; font-family:Verdana, Arial, Helvetica, sans-serif; font-family:Geneva, Arial, Helvetica, sans-serif;

10

Como vemos, ponemos un par de tipos de fuentes y al final una familia o fuente genrica para evitar que el navegador no sepa a qu tipo de fuente atenerse en caso de no reconocer la principal.

Tamao de fuente font-size

Podemos tambin cambiar el tamao de la fuente de los prrafos, para ello emplearemos el atributo font-size. Tenemos tres opciones de indicar el tamao de la fuente:

Mediante porcentajes: el porcentaje por defecto es el 100%, por lo que las fuentes con porcentajes menores o mayores a ste, sern menores o mayores porcentualmente al resto: font-size:80%;

Mediante pxeles: es la ms sencilla y desde mi punto de vista la ms fcil de utilizar: font-size:15px;

Mediante puntos de pantalla: similar a los pixeles: font-size:12pp;

Estilo de fuentes font-style

Esto es algo que nos sonar a cualquier editor de texto que hayamos usado, como Word... Lo que conseguiremos con este atributo de CSS es cambiar el estilo de la fuente a normal, cursiva u oblicua... Veamos unos ejemplos:

font-style:normal;

Estilo de fuente normal

font-style:italic;

Estilo de fuente itlica

font-style:oblique;

Estilo de fuente oblcuo

11

Dureza de fuentes font-weight

Vamos a terminar este tema viendo un atributo que nos permitir determinar la dureza de las fuentes de nuestros prrafos. Para ello tenemos varias opciones dentro de este atributo:

font-weight:bold;

Texto en negrita

font-weight:bolder;

Texto en negrita acentuada

font-weight:lighter;

Texto en negrita ligera

Adems, podemos darle una serie de valores a la dureza de la fuente, de 100 en 100 desde el 100 hasta en 900. Cuanto mayor sea el valor, mayor es la dureza de la fuente. Quiere decir que cuanto mayor sea la centena, mayor ser la negrita.

12

Tema 4: atributos para texto con CSS

Alineacin del texto text-align

Gracias a este atributo vamos a poder alinear el texto en la pantalla de nuestro ordenador en la posicin que queramos. Para ello tenemos varias opciones, que son:

Alineado a la izquierda: text-align:left;

Texto alineado a la izquierda

Alineado al centro: text-align:center;

Texto alineado en el centro

Alineado a la derecha: text-align:right;

Texto alineado a la derecha

Justificado: text-align:justify;

Interlineado line-height

El interlineado define el espacio entre las diferentes lneas del prrafo en medidas estndar.

p {

line-height:35px;

}

En el ejemplo del cdigo fuente anterior, lo que hemos hecho es ampliar el espacio entre

lneas del prrafo que ests leyendo ahora, como vemos, se nota el cambio entre este y

un prrafo normal... El valor por defecto que se le da a este atributo en HTML es de 15

pxeles.

13

Espacio entre caracteres letter-spacing

El espacio entre caracteres, como su propio nombre indica, nos va a permitir declarar el espacio que debe haber entre cada letra que forman las palabras del prrafo. Conviene darle el valor en pxeles. Veamos un ejemplo:

p {

letter-spacing: 15px;

}

E s p a c i a d o d e 1 5 p i x e l e s

Espacio entre palabras Word-spaccing

Es similar al anterior atributo visto, pero sustituyendo la palabra letter (letra) por word (palabra) y nos permite determinar el espacio que han de tener las palabras del prrafos. Como antes, conviene darle un valor en pxeles. Veamos el ejemplo:

p {

word-spaccing: 15px;

}

Espaciado entre palabras de 15 pixels

Sangras text-indent

Uno de los atributos de CSS para texto ms tiles desde mi punto de vista, gracias a l vamos a poder establecer una sangra para nuestros prrafos, y as evitarnos tener que realizarla mediante espacios en blanco. En el ejemplo, vamos a ponerle una sangra estndar de 60 pxeles:

p {

text-indent:60px;

}

Prrafo con sangra de 60 pixels

14

Decoracin del texto color y text-decoration

Vamos a ver dos atributos que nos permitirn decorar el texto de nuestros prrafos.

Color: el color debemos determinarlo mediante su nombre en ingls o lo que es ms recomendable, mediante su valor hexadecimal. Se recomienda esta ltima opcin debido a que es la que reconocen todos los navegadores y la que ms variedad de tonos nos ofrece (en el Anexo 1 de este curso tienes una lista de colores y su valor en hexadecimal, pero hay muchos ms).

p {

color:#FF0000;

}

Texto en color rojo

Decoracin del texto: text-decoration --> tenemos varios valores posibles: o text-decoration:overline;

Texto con lnea superior

o text-decoration:underline;

Texto subrayado

o text-decoration:line-through;

Texto tachado

Transformacin del texto text-transform

Para terminar este manual, vamos a ver un atributo que nos permitir convertir todas las letras del prrafo en minsculas, en maysculas, o lo ms til e interesante de todo, hacer que todas las primeras letras de los prrafos sean maysculas. Para ello:

text-transform:uppercase;

TODO EL TEXTO EN MAYSCULAS

text-transform:lowercase;

todo el texto en minsculas

text-transform:capitalize;

La primera letra en maysculas

15

Tema 5: margin, padding y border con CSS

Mrgenes margin

Gracias a este atributo vamos a poder darle un tamao a la distancia que hay entre el objeto y el resto de elementos que lo rodean. Hay varias formas de darle este valor, ya sea mediante pxeles (px), puntos de pantalla (pt), centmetros (cm) o valores porcentuales (%).

Hay varias formas de determinar los mrgenes:

margin: 25px 30px 35px 40px; --> en este caso, los valores seran de 25 pxeles el margen superior, de 30 px el derecho, de 35 px el inferior y de 40 pxeles el izquierdo.

margin: 25px 30px 40px; --> en este caso, tendran como valores 25 pxeles el margen superior, 30 pixeles el izquierdo y derecho, y 40 px el inferior.

margin: 30px 40px; --> en este ejemplo tendran el superior y el inferior 25 pixeles, mientras que el izquierdo y derecho tendran 40 pxeles.

margin: 25px; --> por ltimo, con esta forma de determinar los mrgenes, los cuatro mrgenes tendran 25 pixeles.

Hay otra forma de determinar los mrgenes. En este caso, vamos a tener que establecerlos uno a uno de la siguiente manera:

margin-top: --> para determinar el margen superior. margin-left: --> para determinar el margen izquierdo. margin-right: --> para el margen derecho. margin-bottom: --> para el margen inferior.

Mediante esta forma de establecer los mrgenes, podremos o establecerlos todos por separado, o dejar por ejemplo alguno por defecto (0px) y determinar otro u otros...

Veamos un ejemplo de un prrafo sin margen y otro con un margen izquierdo de 150px y uno superior de 75px:

p.mar {

margin-left:150px;

margin-top:75px;

}

Prrafo sin margen superior ni izquierdo

Prrafo con mrgenes superior de 75px e izquierdo de 150px

16

Bordes border

Al igual que los mrgenes, podemos darle a los objetos (ya sean prrafos, capas, imgenes...) un borde. Para ello tendremos que decidir varias cosas:

Posicin: podremos determinar distintos bordes para nuestros objetos, ya sean todos por igual o alguno distinto o inexistente... Para ello tenemos varias opciones:

o border: --> emplearemos este atributo para determinar todos los bordes en conjunto (los cuatro iguales).

o border-top: --> en caso de querer determinar solamente el borde superior. o border-left: --> para determinar el borde izquierdo. o border-right: --> para el borde derecho. o border-bottom: --> para el borde inferior.

Tamao: la segunda cosa que tendremos que tener en cuenta es el ancho o grosor que queremos darle al borde. Se recomienda darle el grosor en pixeles ya que es una medida que nunca cambia, por mucho que cambien el tamao de la ventana o la resolucin de la pantalla del dispositivo.

Tipo de borde: lo tercero a tener en cuenta es el tipo de borde que queremos usar, los tipos de borde ya estn vistos en el tema del curso de HTML: Imgenes en HTML.

Color del borde: para terminar, tendremos que establecer el color del borde, podremos hacerlo o bien con valores hexadecimales (la opcin ms recomendada) o bien mediante el nombre del color en ingls (los navegadores no entienden todos los nombres de colores). (en el Anexo 1 de este curso tienes un listado de colores y su valor hexadecimal para HTML).

Pues bien, si unimos todas estas partes que hemos visto que conforman los bordes, tendremos la sintaxis para crearlos: border: 1px solid #FF0000;

Veamos un ejemplo de una capa con bordes superior e inferior de 2 pxeles, tipo solid y color verde y bordes izquierdo y derecho de 6 pixels, tipo solid y color negro:

div.bordes {

border-bottom:2px solid #00FF00;

border-left:6px solid #000000;

border-right:6px solid #000000;

border-top:2px solid #00FF00;

}

17

Mrgenes internos padding

Este atributo es idntico al margin en cuanto a declaracin y sub-atributos, y nos va a permitir establecer mrgenes internos, esto quiere decir que podremos determinar el espacio que queda entre el objeto y los bordes de la capa que lo contiene... La forma de declararlos y los atributos y el resto de elementos que los forman son iguales que en el margin. La nica diferencia es el nombre, que en este caso ser:

padding-top padding-left padding-right padding-bottom padding

Veamos un ejemplo de cmo declarar una capa con un borde de 1px de tipo solid y color negro, con un texto en su interior que tenga unos lmites o mrgenes superior e inferior internos de 20 pixels...

div.padbor {

padding-top:25px;

padding-bottom:25px;

border:1px solid #000000;

}

Capa con texto dentro de borde 1px solid black y padding de 25px

18

Tema 6: fondos, listas y cursores con CSS

Fondos background

Vamos a empezar viendo cmo darle un fondo a las capas, prrafos, textos... Para ello utilizaremos el atributo "background", pero en funcin de qu fondo queramos darle y de cmo queramos modificar su aspecto utilizaremos una serie de "sub-atributos", vemoslos:

Fondo de color: vamos a empezar viendo cmo poner un color de fondo. Para ello, utilizaremos el atributo background-color seguido del color que queremos ponerle en valor hexadecimal. Por ejemplo, para poner un color rojo sera:

div.rojo {

background-color:#FF0000;

}

Fondo de imagen: tambin podemos ponerle una imagen al fondo, para ello, lo primero que tendremos que hacer es subir la imagen que queramos poner de fondo al servidor. Utilizaremos el atributo background-image seguido de la ruta de la imagen. Supongamos que tengo en el servidor una carpeta llamada imgenes y le he subido una imagen llamada imgfondo con extensin .png y que quiero usar para fondo de una capa:

div.imagen {

background-image:url(imagenes/imgfondo.png);

}

Repeticin: al usar imgenes para fondo de capas, se puede dar el caso de que la imagen sea ms pequea que la capa en la que va de fondo, para estos casos tenemos el atributo background-repeat que nos permitir elegir si queremos que la imagen se repita o no, y en caso de querer que se repita, podremos elegir si se repetir en el eje x solamente o en el eje y, o en ambos:

o background-repeat:no-repeat; --> en este caso, la imagen no se repetir aunque no ocupe la totalidad de la capa.

o background-repeat:repeat; --> as haremos que la imagen se repita en ambos ejes, es el valor por defecto as que en caso de no ponerlo, la imagen se repetir en ambos ejes igual.

o background-repeat:repeat-x --> la imagen se repite en el eje x solamente (en horizontal).

o background-repeat:repeat-y --> la imagen se repite en el eje y solamente (en vertical).

19

Posicin: en caso de que la imagen no se repita, podremos elegir la posicin que ocupar dentro de la capa. Para ello usaremos el atributo background-position que puede tener como valores:

o background-position:left; --> quedar colocada a la izquierda (es el valor por defecto)

o background-position:center; --> quedar colocada en el centro de la capa o background-position:right; --> quedar colocada a la derecha de la capa

Estilos para listas list-style

Veamos ahora cmo darle estilo a nuestras listas gracias a una serie de atributos que nos van a permitir modificar su apariencia:

Tipo de vieta: lo primero que vamos a ver es cmo cambiar el tipo de vieta de las listas. Para ello utilizaremos el atributo list-style-type Recordamos que por defecto el tipo que emplean es de tipo disc o disco relleno, pero tenemos muchos ms tipos, que son:

o list-style-type:circle; --> para poner crculos sin rellenar

o circle

o list-style-type:square; --> para cuadrados rellenos

square

list-style-type:lower-roman; --> para nmeros romanos en minscula (para maysculas "roman")

list-style-type:lower-greek; --> para letras griegas en minscula (para maysculas "greek")

list-style-type:lower-latin; --> para letras latinas en minscula (para maysculas "latin" "upper-latin")

a) lower-lattin

list-style-type:armenian; --> para letras armenian

20

list-style-type:decimal; --> para nmeros

1) decimal

list-style-type:decimal-leading-zero; --> para nmeros precedidos de cero Vieta de imagen: tambin podemos incluir una imagen para las vietas de nuestras listas de una forma similar a la de los fondos vistos anteriormente, para ello usaremos el atributo list-style-image. Para ello y como antes, es necesario tener la imagen subida al servidor. Pongamos entonces que he subido una imagen llamada icolist.jpg a una carpeta llamada iconos y quiero incluirla como vieta en mis listas, entonces bastara con:

li {

list-style-image:url(iconos/icolist.jpg);

}

A partir de este momento, todas las listas que cree tendrn la imagen como vieta.

Posicin de las vietas: para terminar, tenemos dos tipos de posicin para colocar las vietas gracias al atributo list-style-position: list-style-position:outside; --> outside se emplea para que la vieta se situ fuera del texto, es decir, en listas con dos lneas o ms, el texto estar colocado en el interior de la vieta, como es el caso del texto que ests leyendo, que la vieta queda en el exterior del mismo. list-style-position:inside; --> inside se emplea para que la vieta se site dentro del texto, es decir, en listas con dos o ms lneas la vieta estar formando parte del texto, como si fuera una letra ms, y estar todo el conjunto al mismo nivel.

Cursores del ratn cursor

Vamos a ver ahora cmo cambiar los cursores del ratn para enlaces. Tendremos que usar el atributo cursor y tendremos varias posibilidades, veamos las ms tiles y utilizadas:

cursor: crosshair;

cursor: e-resize;

21

cursor: help;

cursor: move;

cursor: n-resize;

cursor: pointer; (valor por defecto)

cursor: progress;

cursor: text;

cursor: wait;

22

Tema 7: alinear imgenes con texto con CSS

vertical-align

Veamos cmo alinear imgenes con texto mediante el CSS. Para ello, tendremos que

introducir la imagen junto con el texto que queramos que se alinee dentro del mismo prrafo

(). Si lo introducimos sin ms, se alinear de la forma predeterminada, que es la forma

baseline y se alinear la base de la imagen con la parte superior del texto, quedara:

Alineado normal

Bottom

A partir de aqu vamos a empezar a utilizar el CSS para cambiar las alineaciones. La primera alineacin que veremos es alinear el texto con la base de la imagen, pero no la base baja como en el ejemplo anterior, sino que la base del texto se alinear con la base de la imagen. Para ello usaremos el siguiente cdigo en el CSS:

.base {

vertical-align: bottom;

}

Middle

Con este atributo del vertical-align vamos a conseguir alinear el centro de la imagen con el centro del texto, de forma que quedar el texto en el centro de la imagen, pero solo la primera lnea del texto, si el texto sigue, quedar por debajo de la imagen:

23

.medio {

vertical-align: middle;

}

Top

Veamos cmo alinear la parte superior de la imagen con la parte superior del texto. Ten en cuenta que pasa lo mismo que en el caso anterior, que si el texto sigue, la siguiente lnea saldr debajo de la imagen, quedara:

.arriba {

vertical-align:top;

}

float

float:left

Por ltimo, veremos las dos formas de alineacin de imgenes con texto ms comunes y utilizadas. La primera de ellas es el float:left. Lo que va a realizar este atributo es dejar la imagen flotando a la izquierda, y por tanto, el texto aparecer alineado con ella en la parte superior, pero a diferencia del vertical-align:top, en este caso, si el texto ocupa ms de una lnea, seguir alineado con la imagen (no se pasar a la parte de debajo de la imagen como en otros casos). Vemoslo:

.fiz {

float:left;

}

Alineado flotante a la izquierda, voy a escribir chorradas

hasta que salte el texto de lnea para que veis que sigue

alineado a la izquierda, y que no cae debajo de la imagen,

perdn por escribir siempre lo mismo pero haba que llenar

espacio ;)

24

float:right

Y para terminar veamos lo mismo pero en la otra direccin, en este caso quedar flotando a la derecha de la pantalla, y el texto alineado con ella como en el caso anterior. Con las mismas caractersticas que en el otro float. Veamos:

Alineado flotante a la derecha, voy a escribir chorradas

hasta que salte el texto de lnea para que veis que sigue

alineado a la izquierda, y que no cae debajo de la imagen,

perdn por escribir siempre lo mismo pero haba que llenar

espacio ;)

Una ltima aclaracin

He de decir que todo esto se puede hacer de forma directa en el cdigo de la pgina web (HTML). Es tan sencillo como usar el style con cada caso deseado y sera algo como:

Alineado superior

25

Tema 8: men con HTML y CSS

Una de las cosas que ms busca la gente por internet es cmo realizar un men con

HTML y CSS, por lo que vamos a realizar no solo uno, sino dos. El primero de ellos ser un

men simple utilizando HTML y CSS mientras que el segundo es un men algo ms complejo

con HTML5 y CSS3.

Lo primero a tener en cuenta son los tres estados con los que vamos a trabajar para

realizar nuestro men con CSS:

Estado de reposo: va a ser el estado en el que se encuentren los apartados de nuestro men cuando no estn en uso o con el ratn encima.

Estado de uso: as llamaremos al estado que tendr un apartado de nuestro men cuando est seleccionado.

Estado hover: este es el ms visible de todos, ser el aspecto del apartado sobre el que se encuentre el ratn.

Una vez visto esto, vamos a ir detallando con un ejemplo explicado el procedimiento para realizar nuestro men web con hojas de estilo CSS:

#menu { // Aqu introduciremos las caractersticas del men en

su conjunto

list-style:none; // No queremos que los elementos del men

tengan ni crculos, ni cuadrados, ni nmeros...

margin:0; // Le voy a poner 0 mrgenes, cuestin de esttica

padding:0; // Tampoco quiero mrgenes internos

}

#menu li { // Ahora vamos a especificar las caractersticas de

los elementos del men en el estado de reposo

margin: 10px; // La separacin entre los elementos del menu

float:left; // Haremos que los elementos queden flotando a la

izquierda

}

#menu li a { // Ahondamos ms en las caractersticas de nuestro

menu

display:block; // Hacemos los elementos del menu un bloque

width: 80px; // 80 pixeles de ancho por cada elemento

height: 20px; // 20 pixeles de alto para cada elemento

text-align: center; // Centramos el texto contenido en cada

elemento

font-size: 10px; // Tamao del texto contenido en los

elementos

color: orange; // El color del texto, a nuestro gusto

background-color: green; // El color del fondo de cada

elemento, a nuestro gusto

}

#menu li a:hover { // Ahora especificaremos las caractersticas

de los elementos del menu en estado hover

color: green; // Al pasar el ratn por encima el color de

las letras cambia a verde

background-color: orange; // Al situar el cursor del ratn

encima, el fondo pasar a ser naranja, con esto conseguimos que

26

al pasar el ratn por encima,

se invierta el estilo de nuestro elemento

}

Hasta aqu la parte del CSS, la parte del estilo, solamente nos faltara poner el men en el cdigo fuente de nuestra pgina web, es decir, en el HTML, que debera ser as:

...

Inicio

Categoras

Contacto

...

Y ya tenemos nuestro men, el resto de modificaciones que queris realizar en cuanto apariencia dependern de vosotros... Ya sabis en los temas del curso de HTML y de CSS de este curso podris encontrar todo lo necesario.

Por ltimo os dejo un ejemplo del men en reposo realizado en la explicacin.

o Inicio

o Categoras

o Contacto

27

Tema 9: men acorden con HTML5 y CSS3

Primera parte: EMPEZAMOS

Vamos a emplear todos los conocimientos adquiridos en el curso de html5 y css3 para realizar un vistoso men acorden. Se trata de un men con varios apartados en los que al seleccionar uno de ellos, se abrir una nueva capa desplazando las posteriores, en la que aparecer una descripcin o cualquier tipo de texto.

Cabe detallar los temas de los distintos cursos de HTML y CSS que hemos de leer para entender el funcionamiento y el desarrollo de nuestro proyecto:

Nuevas etiquetas semnticas de html5 Nuevas etiquetas de formularios de html5 Efectos texto y capas css3

Lo primero que debemos realizar es una con un identificador para el CSS, yo la voy a llamar contenedor_menu, y como su propio nombre indica, va a ser el contenedor de las distintas capas que contendrn los apartados del men. Esto quedar como:

[...]

Una vez realizado esto, pasamos a declarar en cada capa de cada elemento un de clase checkbox, una con un id igual que el input anterior, donde pondremos el ttulo de el botn, y un donde detallaremos el texto que aparecer en el momento de pulsar el botn. Suponemos que queremos hacer un men con los botones "inicio", "noticias" y "contacta".

Inicio

Ests en la pgina de inicio: bienvenido a

www.todocursosonline.es

Conoces el resto de elementos del portal?

Prueba a entrar en:

Nuestro blog

Nuestro foro

28

Noticias

Ests en la pgina de noticias: en estos

momentos no hay noticias nuevas

Prueba a entrar ms tarde.

Contacta

Ests en la pgina de contacto: escribenos

tus sugerencias a:

[email protected]

Hasta aqu no debera haber ningn problema... Ahora empezamos con el cdigo del CSS. Lo primero es determinar el tamao del contenedor del men. Para ello:

.contenedor_menu {

width:700px;

}

Ahora le adornaremos un poco los botones del men, sin complicarnos mucho, simplemente unos colores, una altura y un sombreado. La nica clave aqu es establecerles un z-index...

.contenedor_menu label {

position:relative;

z-index:20;

display:block;

background:#6EB1EB;

height:25px;

font-family:cursive;

font-size:15px;

text-align:center;

color:#0C2943;

box-shadow: 0px 5px 5px #333;

-webkit-box-shadow: 0px 5px 5px #333;

-moz-box-shadow: 0px 5px 5px #333;

}

Suficiente por ahora. Hasta ahora tenemos algo parecido a esto, pero nos saldrn los textos seguidos del botn debido a que no hemos programado an los :hover de las capas, no os asustis...:

29

Segunda parte: EFECTOS HOVER

Vamos a continuar con el men acorden con HTML5 y CSS3. Empezaremos con los efectos :hover que nos van a permitir dejar ver los textos en las capas ocultas que creamos anteriormente. Podramos empezar cambiando el color de fondo de los ttulos al pasar el ratn por encima:

.contenedor_menu lavel:hover {

background:#BEDAF2;

}

Ahora tenemos que intentar comenzar con el funcionamiento en s. Lo primero que debemos realizar es que al seleccionar una label, se marque y se sepa que est marcada, esa etiqueta o label y lo que a ella est asociado:

.contenedor_menu input:checked + label,

.contenedor_menu input:checked + label:hover {

background-color:#BEDAF2;

color:#fff;

text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.6);

box-shadow: 0px 0px 0px 2px rgba(155, 155, 155, 0.3), 0px 3px

3px rgba(0, 0, 0, 0.1);

}

La nica duda que nos puede surgir hasta este punto es el uso del input programado junto con el :hover del mismo tipo. Esto es porque todo lo seleccionado (label) est precedido por el input.

Ahora empieza la parte curiosa del efecto acorden del men. Para comenzar, debemos crear una transicin de apertura y una de cierre para el texto que en el post anterior encerramos dentro de las etiquetas . Para la de cierre, jugaremos con la seleccin (checked) del input anteriormente programado:

.contenedor_menu article {

margin-top:-1px;

overflow:hidden;

height:0px;

position:relative;

transition: height 0.5s ease-in-out,

box-shadow 0.7s linear;

}

.contenedor_menu input:checked article {

transition: height 0.7s ease-in-out,

box-shadow 0.3s linear;

box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8);

}

Como recordars, en el apartado anterior definimos varias alturas o posiciones para los distintos textos (bd_primero, bd_medio bd_ultimo), pues lo que debemos realizar ahora es una animacin para que al seleccionar el label, se desplace el article que antes tena un height de 0 pixels, a una altura determinada que estableceremos ahora:

.contenedor_menu input:checked article.bd_primero {

height:140px;

}

30

.contenedor_menu input:checked article.bd_medio {

height:180px;

}

.contenedor_menu input:checked article bd_ultimo {

height: 230px;

}

Pues con esto tendramos algo parecido a:

Un poco soso, feo y difcil de ver no? No os preocupis, en el siguiente y ltimo apartado veremos cmo darle algo ms de movimiento, bastante ms visibilidad, transiciones ms suaves y quitaremos las casillas input de verificacin

31

Tercera parte: ADORNNDOLO

Bien, pues ya solo nos queda adecentar visiblemente el men... Lo primero que deberamos hacer es ocultar el cuadrado que sale del ... Para ello:

.contenedor_menu input {

display:none;

}

Ahora deberamos separar un poco las label, ya que as juntas quedan como un nico ttulo... y ya de paso, pondremos el texto en negrita y le daremos un color azul oscuro. Para todo esto, tendremos que aadirle una serie de lneas de cdigo a .contenedor_menu label:

.contenedor_menu label {

margin-bottom:10px;

font-weight:bold;

color:#000066;

}

Lo siguiente que me gustara hacer sera "unir" el

33

Tema 10: ejercicio resuelto, pgina web con HTML5 y CSS3

Realizar una pgina web como la de la imagen sabiendo que:

a) CAPA 1: una capa superior con un tamao del 100% de ancho de la pantalla y de 150

pixels de alto, con un degradado de blanco a #CCCCCC

b) CAPA 2: una capa de men con un tamao de 1000x50 pixeles, un color de fondo #555

y un sombreado, con un borde de 2 pixeles de color #333

a. BOTON 1: fondo de #CCCCCC y sombreado interior, tamao de 100x30 pixeles

b. BOTON 2: fondo de #CCCCCC y sombreado interior, tamao de 100x30 pixeles

c. BOTON 3: fondo de #CCCCCC y sombreado interior, tamao de 100x30 pixeles

d. BOTON 4:fondo de #CCCCCC y sombreado interior, tamao de 100x30 pixeles

c) CAPA 3: una capa cuerpo con un tamao del 100% de la pantalla de ancho y de 455

pixeles de alto, un fondo de #CCCCCC, un borde de 2 pixeles superior de color #333 y

una sombra interna inferior.

d) CAPA 4: una capa de pie de pgina con unas medidas del 100% de ancho y 50 pixeles

de alto y un fondo #333.

34

Solucin al CSS .capa1 {

position:absolute;

top:10px;

left:0px;

width:100%;

height:150px;

background: linear-gradient(top, #fff, #ccc );

background: -moz-linear-gradient(top, #fff, #ccc );

background: -webkit-linear-gradient(top, #fff, #ccc );

background: -ms-linear-gradient(top, #fff, #ccc );

background: -o-linear-gradient(top, #fff, #ccc );

}

.capa2 {

position:absolute;

top:135px;

left:50px;

width:1000px;

height:50px;

border:2px solid #333333;

border-radius:30px;

background:#555;

z-index:6;

box-shadow: 0px 10px 15px #000000;

}

.capa3 {

position:absolute;

top:160px;

left:0px;

background:#CCCCCC;

width:100%;

height:455px;

border-top:2px solid #333;

box-shadow:inset 0px -5px 5px #000000;

}

.capa4 {

position:absolute;

top:617px;

left:0px;

width:100%;

height:50px;

background:#333333;

}

.boton1 {

position:absolute;

top:10px;

35

left:50px;

width:100px;

height:30px;

border-radius:30px;

background:#CCCCCC;

box-shadow: inset 0px 10px 15px #000000;

}

.boton2 {

position:absolute;

top:10px;

left:190px;

width:100px;

height:30px;

border-radius:30px;

background:#CCCCCC;


}

.boton3 {

position:absolute;

top:10px;

left:330px;

width:100px;

height:30px;

border-radius:30px;

background:#CCCCCC;


}

.boton4 {

position:absolute;

top:10px;

left:470px;

width:100px;

height:30px;

border-radius:30px;

background:#CCCCCC;


}

.boton5 {

position:absolute;

top:10px;

left:850px;

width:100px;

height:30px;

border-radius:30px;

background:#CCCCCC;


}

36

Solucin al HTML

Documento sin ttulo

37

ANEXO I: COLORES EN HEXADECIMAL

38

Para terminar

Para terminar decirte que cualquier duda, sugerencia, comentario o agradecimiento que

tengas acerca de este manual puedes escribrmelo al correo [email protected]

Estar encantado de solucionar todo en la medida de lo posible.

Ya has terminado el curso de CSS y CSS3, el siguiente curso que te recomiendo que descargues

es el de ejemplos hover, animaciones y ms para HTML5 y CSS3, para seguir el orden correcto

en la programacin web.

Puedes descargarlo del mismo lugar del que descargaste este.

Un Saludo:

Javier Garca Rodrguez

curso de css y css3

Documents