html___css_fácil_y_sencillo

8/13/2019 html___css_fcil_y_sencillo

1/93


2/93


3/93

3

INDICE ___________________________________________________

1.-INTRODUCCIN..........................................................42.-HTML-Estructura de un documento HTML.................53.-HTML-Caracteres especiales..........................................64.-HTML-Colores en hexadecimal......................................85.-HTML-El texto y sus parmetros....................................9

6.-HTML-Imgenes............................................................167.-HTML-Hipervnculos.....................................................178.-HTML-Tablas.................................................................189.-HTML-Marcos................................................................2410.-HTML-Formularios.......................................................2711.-HTML-Capas.................................................................3712.-CSS-Estructura de un documento CSS..........................3813.-CSS-Reglas especiales....................................................4014.-CSS-Selectores................................................................4115.-CSS-Pseudo-clases.........................................................4416.-CSS-Propiedades de las cajas........................................4617.-CSS-Fondos, colores y sus atributos..............................5018.-CSS-Apariencia visual....................................................5519.-CSS-Efectos visuales......................................................6220.-CSS-Medidas..................................................................6521.-CSS-Interfaz de usuario..................................................7022.-CSS-Estilo en listas........................................................7523.-Ejemplos finales............................................................77


4/93

4

1.-INTRODUCCIN

Con la lectura de ste libro se pretende que el lector adquiera losconocimientos necesarios para el desarrollo y diseo de unapgina web partiendo desde cero, utilizando para ello HTML yCSS.El libro est enfocado ms como un manual de consulta, quecomo un libro de lectura. Los contenidos han sido estructuradosde una forma clara y vistosa para ser fcilmente consultados.

HTML son las siglas de HyperText Markup Language (Lenguajede Marcas de Hipertexto). Es el lenguaje utilizado para definir laestructura de una pgina web y el contenido en forma de texto,as como implementar objetos como pueden ser imgenes.Su utilizacin es muy sencilla, mediante el uso de etiquetasdelimitadas por los smbolos .Ejemplo:contenido

CSS es un lenguaje utilizado para definir la presentacin de undocumento escrito en HTML. Surge de la idea de separar laestructura del aspecto. As, por un lado tendremos nuestra webescrita en HTML, y por otra parte la hoja de estilos que definir eldiseo de nuestra pgina web.Ejemplo:.principal{background-color: #000000;color: #FFFFFF; width: 50%}


5/93


6/93

6

3.-HTML-Caracteres especialesEn HTML hay determinados caracteres como por ejemplo la que debido a los distintos tipos de codificacin existentes puedenno verse igual siempre en todos los navegadores. Por ello esaconsejable usar su equivalente en cdigo ASCII:

Carcter Representacin

& &


7/93

7

Espacio en blanco

Ejemplo:

El nio se encontr 1.El nio se encontr1.


8/93

8

4.-HTML-Colores en hexadecimalLos colores en HTML se representan mediante un nmero enhexadecimal. A diferencia de un nmero decimal, que va del 0 al9, en el hexadecimal puede tomar valores que van del 0 al 9 y dela A a la F. Un nmero en hexadecimal se representa de lasiguiente forma:

#CC6600En la siguiente tabla se muestran algunos ejemplos de colores enHTML:

Color HexadecimalNegro #000000Blanco #FFFFFFRojo #FF0000 Azul #0000FF

Amarillo #FFFF00Gris #808080 Verde #008000

Una buena forma de saber el cdigo exacto de un color es

buscando tablas de cdigos de colores como stas:http://html-color-codes.info/codigos-de-colores-hexadecimaleshttp://www.webtaller.com/utilidades/csscoder/colores.phphttp://www.2createawebsite.com/build/hex-colors.html

Tambin existe la posibilidad de escribir el color directamente eningls como: white, black, yellow, green.., en vez de en cdigohexadecimal.


9/93

9

5.-HTML-El texto y sus parmetros A la hora de escribir en HTML, debemos tener en cuenta que hayque formatear correctamente el texto, sino nos aparecer todo eltexto seguido. Podemos utilizar las siguientes etiquetas:
.- Salto de lnea.

Ejemplo:

El nio jugaba
a la pelota en el parque.El nio jugabaa la pelota en el parque.

.- Muestra el texto tal cual se escribe en el editor. No sepueden utilizar dentro de sta etiqueta :,,,,,.

Ejemplo:

El nio jugaba a la pelotaen el parque.El nio jugaba a la pelotaen el parque.

.- Se utiliza para sangrar texto. El textointroducido en sta etiqueta tendr un margen mayor, y obliga aque est en una nueva lnea.

Ejemplo:


10/93

10

El nio

jugaba a la pelota en el parque.El nio

jugaba a la pelota en el parque.

.- Introduce una lnea horizontal. sta etiqueta no esnecesario cerrarla. Se le pueden aadir los siguientes atributos:align .- fija la alineacin de la lnea. Valores:left , right , center .noshade .- elimina el sombreado de la lnea. width .- define el ancho, ya sea en pxeles como en tanto porciento.size .-define el alto de la lnea. Se expresa con un nmero.

Ejemplo:

.- Define un prrafo. Cada prrafo se considera una lnea,por lo que no hace falta aadir un salto de lnea. Se le puedeaadir el atributoalign que admite los valoresleft, right, center y justify.

Ejemplo:

El nio jugaba
a la pelota en el parque.


11/93

11

El nio jugaba a la pelota en el parque.

.- Se utiliza para centrar el texto.

Ejemplo:



Encabezados ( h1,h2,h3,h4,h5,h6 ).- Para la utilizacin deencabezados se utilizan stas etiquetas, que van de mayor a menortamao, siendoh1 el de mayor tamao, yh6 el de menor. Admiteel atributoalign.

Ejemplo:

Encabezado

Encabezado .- Se utiliza para insertar una marquesina. Admitelos siguientes atributos:behavior.- indica el tipo de movimiento, puede seralternate,scroll,o slide.direction .- puede modificarse la direccin a la que se mover eltexto, que puede serup, down, lefto right.bgcolor .- se utiliza para cambiar el fondo de la marquesina.

Ejemplo:


12/93

12

.- Las propiedades del texto pueden modificarse con staetiqueta, la cual admite stos atributos:face .- nombre de la fuente a utilizar. Ejemplo: Verdana.color .- color del texto.size .- tamao del texto.

Ejemplo:

El niojugaba a la pelota en el parque.

.- Con sta etiqueta definimos un tipo de fuente

para todo el documento. En caso de haber algun , tomarlas propiedades de ste ltimo. No necesita cierre.

Ejemplo:


.- Convierte el texto a negrita.

Ejemplo:

El nio jugaba a la pelota en el parque.El nio jugaba a la pelota en el parque.


13/93

13

.- Convierte el texto a cursiva.

Ejemplo:

El nio jugaba a la pelota en el parque. El nio jugaba a la pelota en el parque..

.- Subraya el texto.

Ejemplo:


.- Tacha el texto.

Ejemplo:


.- Posiciona el texto como subndice.

Ejemplo:


El nio jugabaa la pelota en el parque.


14/93

14

.- Posiciona el texto como superndice.

Ejemplo:


El nio jugabaa la pelota en el parque.

.- Se utiliza para crear listas. Va incluido dentro de las

etiquetas en el caso de ser una lista desordenada, o en caso de tratarse una ordenada.

Ejemplo:

(Lista desordenada, a travs del atributotype deul puede elegirseentrecircle(crculo), disk (disco) osquare (cuadrado) )CasaApartamentoBungalow

CasaApartamentoBungalow

(Lista ordenada, a travs del atributotype de ol puede elegirseentre1 (nmeros), a (letras minsculas), A (letras maysculas), i(nmeros romanos en minscula) o I (nmeros romanos enmayscula))


15/93

15

Uno

DosTres

1. Uno2. Dos

3. Tres


16/93

16

6.-HTML-ImgenesEl dicho dice que una imagen vale ms que mil palabras. Y estoes perfectamente trasladable a las pginas web. No slo basta contener texto, sino tambin imgenes que complementen esainformacin y aporten una mayor informacin visual.Para introducir una imagen se utiliza la etiqueta, no senecesita cerrarla. Se le pueden aadir los siguientes atributos:src .- ste es obligatorio, indica la ruta donde est la imagen.alt .- Muestra un texto en caso de que la imagen no se puedacargar.title .- Muestra un cuadro de texto con informacin al pasar elcursor por encima de la imagen. border .- Para indicar el borde de una imagen. width .- Indica el ancho de una imagen, puede ser un numerosolamente o un numero seguido del smbolo % para indicarlo enporcentaje.

height .- Indica la altura de una imagen, ya sea en numero o tantopor ciento.align .- Para establecer la alineacin de la imagen. Puede tomarlos valoresabsbottom (inferior absoluta), absmiddle (medioabsoluta), baseline (lnea de base), bottom (inferior),left(izquierda),middle (medio),right (derecha),texttop (textosuperior), otop (superior).

Ejemplo:


17/93

17

7.-HTML-HipervnculosUn hipervnculo o hiperenlace es un enlace que al pulsarlo noslleva de una pgina o archivo a otra/o. Para crearlo debemosusar las etiquetas y , y el enlace podr llevar texto ouna imagen.La etiqueta tiene los siguientes atributos:href .- Es obligatorio utilizarlo, ya que indica la ruta a la que seaccede.target .- Determina en qu ventana se abrir el enlace. Hay variasopciones, _blank (abre el vnculo en una ventana nueva), _parent (abre el vnculo en otra pestaa), _self (opcinpredeterminada, en la misma ventana), _top (lo abre en la ventana completa).title .- Muestra un cuadro de texto al pasar el cursor por encimadel enlace.

Ejemplo:


18/93

18

8.-HTML-TablasLas tablas en HTML son muy tiles para organizar lainformacin. Se dividen en filas y columnas, y estn formadas porceldas. Se utilizaban mucho a la hora de definir el diseo de una web, si bien ltimamente esa funcin la estn cubriendo las capas.Para definir una tabla se utilizan las etiquetas ,dentro de stas utilizaremos para crear las filas y y para crear los encabezados y celdas,respectivamente.

Ejemplos:

Mi primera tabla

Marcas de coches

PeugeotMercedesBMW

CitrenRenaultSubaru


19/93

19

Mi segunda tabla

Notas del examen

NombreNota

Paco7

Mara10


20/93

20

Jess6

A se le pueden aadir los siguientes atributos: width .- Define el ancho de la tabla, ya sea slo nmero, oseguido de porcentaje. Ejemplo: width=15, width=50%.height .- Define la altura de la tabla, en numero o seguido deporcentaje. Ejemplo: height=20, height=100%.cellspacing .- Sirve para establecer el espacio entre celdas.Ejemplo: cellspacing=5.

cellpadding .- Indica el espacio entre el contenido de las celdas yel borde. Ejemplo: cellpadding=3.border .- Establece el grosor del borde. Ejemplo: border=1.


21/93

21

align .- Alineacin de la tabla en la pgina. Admite los valoresleft (izquierda),right (derecha) ycenter (centro).bgcolor .- Color del fondo de la tabla. Ejemplo:bgcolor=#F0F0F0.background .-Se utiliza para poner una imagen como fondo dela tabla. Ejemplo: background=imagenes/imagen.jpg.bordercolor .- Cambia el color del borde. Ejemplo:bordercolor=#000000.

En cuanto a y admiten los siguientesatributos: width .- Define el ancho de la celda. Se indica con nmero, oseguido de porcentaje. Ejemplo: width=15, width=25%.height .- Define la altura de la celda. Se indica con nmero, oseguido de porcentaje. Ejemplo: height=69, height=45%.align .- Sita el contenido de la celda en la posicin deseada. Admite los valoresleft (izquierda),right (derecha), ocenter (centro). Ejemplo: align=left. valign .- Define la alineacin vertical del contenido de la celda. Admite los valoresbaseline (linea de base),bottom (inferior),middle (medio),top (superior). Ejemplo: valign=top.bgcolor .- Color del fondo de la celda. Ejemplo:bgcolor=#E14400.background .- Para poner una imagen de fondo en la celda.Ejemplo: background=imagenes/fondocelda.gif.bordercolor .- Cambia el color del borde de la celda. Ejemplo:bordercolor=#404040.colspan .- Especifica el nmero de columnas que ocupar lacelda. Como valor se le pone siempre un nmero. Ejemplo:colspan=2.rowspan .- Especifica el nmero de filas que ocupar la celda. Su valor es siempre un nmero. Ejemplo: rowspan=3.


22/93

22

Ejemplo:

PIB per cpita

1Luxemburgo78559

2Noruega58141

3Emiratos rabes

Unidos50417

4Singapur


23/93

23

49287

Total de pasesmostrados/Ao

4

2008


24/93

24

9.-HTML-MarcosLos marcos, tambin denominados frames, se utilizan paradistribuir el contenido de forma que ciertas partes quedenestticas. Por ejemplo, si tenemos una web con una cabecera, unmen lateral y el contenido, podremos dejar los dos primerosfijos en la pantalla, y que el contenido tenga scroll.Hoy en da sin embargo, su uso no est recomendado, ya queexisten otras alternativas ms cmodas y eficientes.En el caso de querer o tener que usar un frame, es recomendableutilizar iframe, pero siempre para cosas puntuales.

Para utilizar iframes debemos utilizar las etiquetas .Iframe tiene los siguientes atributos:

Atributo Valor Descripcinscrolling auto,YES o NO Define el tipo de

scrollframeborder nmero Ancho del borde

del iframe width nmero Define la anchura

del iframeheight nmero Define la altura del

iframe

Ejemplo:

Tenemos dos ficheros html, uno con nuestra pgina, y otro con elcontenido del iframe.Fichero 1, pagina.html:

Pgina con iframe


25/93

25

sta pgina tiene un iframe:

Fichero 2, iframe.html:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Curabitur bibendum hendrerit metus a porttitor. Aeneancongue semper tellus vitae vehicula. Integer arcu massa,lacinia quis interdum in, rhoncus eu nibh. Vestibulumelementum lorem vel dui ullamcorper nec malesuadametus interdum. Sed metus tortor, congue elementumhendrerit id, ullamcorper quis elit. Nullam orci urna,

posuere sagittis lacinia sit amet, vestibulum ac eros. Proinac metus id est lacinia convallis ac ut turpis. Lorem ipsumdolor sit amet, consectetur adipiscing elit. Vestibulum anteipsum primis in faucibus orci luctus et ultrices posuerecubilia Curae; Donec vestibulum, metus vel volutpatlobortis, tellus libero mattis lectus, nec faucibus nisi purusultricies est. Vivamus at lorem ante. Fusce eget laoreet mi.Integer rhoncus ante at lorem placerat lobortis. Morbisollicitudin tellus et leo rutrum ut porta erat mattis


26/93

26


27/93

27

10.-HTML-FormulariosLos formularios son muy utilizados en Internet, ya que nospermiten recopilar informacin sobre nuestros visitantes yposteriormente realizar una accin con ella. Son muy comuneslos formularios de contacto que resultan muy eficaces para lacomunicacin entre el propietario de la web y el usuario, o losformularios de registro, que permiten al visitante crearse unacuenta en la web y almacenar su datos en la base de datos.Cabe decir que un formulario es mucho ms que HTML, que eslo que veremos en sta parte. Para el envo de la informacin haymltiples alternativas como PHP o Perl.Para crear un formulario debemos emplear las etiquetas y . stas admiten los siguientes atributos:action .- Indica a qu pgina o direccin de e-mail se va a mandarel formulario.method .- Indica el mtodo por el que se enviar la informacin,su valor puede serget o post. Es recomendable utilizar post.

enctype .- Sirve para indicar el modo en que ser cifrada lainformacin.

Dentro de las etiquetas y podemos utilizar lassiguientes: .- Muestra controles que permiten a losusuarios ingresar datos en un formulario. Permite los siguientes

atributos:

Atributo Valor Descripcinaccept MIME_type Especifica el tipo

de ficheros quepueden ser subidos,solo para el tipo

file. align left

rightEspecifica laalineacin de unaimagen, slo para el


28/93

28

topmiddle

bottom

tipoimage.

alt texto Especifica un textoalternativo en casode no podermostrar la imagen,solo para el tipoimage.

checked checked Especifica que undeterminadoelemento debe estaractivo al cargar lapgina. Slo paralos tiposcheckbox o radio.

disabled disabled Deshabilita unelemento al cargarla pgina.

maxlength nmero Limita el nmerode caracteres de uninput tipo text o password.

name texto Especifica elnombre para unelemento input.

readonly readonly Establece unelemento inputcomo de slolectura, slo paralos tipostext y password.

size nmero Establece el anchode un elementoinput.


29/93

29

src URL Especifica la URLde la imagen amostrar en el

botn.type button

checkboxfilehiddenimage

passwordradioresetsubmittext

Especifica el tipode un elementoinput.

value valor Indica el valor de

un elemento input.

.- Muestra una lista desplegable con varios valores posibles que podemos elegir. Admite los siguientesatributos:

Atributo Valor Descripcindisabled disabled Deshabilita la lista

desplegable.multiple multiple Permite seleccionar

mltiples valores.name texto Especifica el

nombre de la listadesplegable.

size nmero Especifica elnmero de valores visibles.


30/93

30

Dentro de stas etiquetas, y para cada valor posible se debeincluir y . Tiene los siguientes atributos:

Atributo Valor Descripcindisabled disabled Con ste atributo,

la opcinpermanecerdeshabilitada.

label texto Especifica una versin ms cortade una opcin.

selected selected Indica que ese valorestar activo pordefecto al cargar lapgina.

value texto Asigna un valor a laopcin.

.- Define un cuadro de texto de variaslneas, donde el usuario podr escribir ms de lo que le permiteun input de tipo text. Admite los siguientes atributos:

Atributo Valor Descripcincols nmero Indica el ancho del

textarearows nmero Indica el nmero

de filas del textareadisabled disabled Deshabilita el

textareaname texto Asigna un nombre

al textareareadonly readonly Establece que el

textarea sea slo delectura


31/93

31

Ejemplos:

Acceder como usuario

Acceder como

usuario

Nombre de usuario:Contrasea:


32/93

32

Registro de usuario

Formulario de registro de

usuario

Nombre:

Apellidos:

Nombre de usuario: Contrasea:

Confirme contrasea:

Estoy de


33/93

33

acuerdo con la clusula de privacidad

Deseorecibir los boletines de noticias


34/93

34

Formulario de contacto

Formulario de contacto

Nombre:

Asunto:

SugerenciasQuejasOtrasconsultas

Tu edad:

16-24 25-50


35/93

35

65" name="edad">50-65+65

Comentario:

Tusaficiones:

DeportesInformticaViajarLeer Cine

Teatro


36/93

36


37/93

37

11.-HTML-CapasLas capas son unos recuadros en los que podemos insertarcontenido y a las que podemos aplicar estilos de formaindependiente y posicionar como deseemos en la pgina.Existen dos tipos de capas,div yspan: .- Permite agrupar varios elementos en lneadentro de un mismo bloque, para posteriormente aplicarle estilos. .- El elemento div es un elemento contenedor,abarca ms contenido del que puede contener span. Es muyutilizado tambin para maquetar webs, sustituyendo en stafuncin a las tablas.Para sacarle todo el potencial a las capas se utiliza CSS, por lo quems adelante se ver en profundidad.

Ejemplos:

Div de prueba

Span de prueba


38/93

38

12.-CSS-Estructura de un documento CSSLas hojas de estilos definen la composicin visual de un ficheroHTML, separando el contenido de la apariencia. Tienenextensin .css, y para trabajar con ellas podemos utilizarcualquier editor de texto, si bien el trabajar con editores comoDreamweaver o TopStyle nos facilitar bastante las cosas.La principal ventaja del CSS es que nos permite ahorrar grancantidad de cdigo en los ficheros HTML, pudiendo aplicar unaregla para varias etiquetas.Por ejemplo, si en un prrafo queramos aplicar un estilo al texto,

tenamos que hacerlo as:


39/93

39

Podemos trabajar con hojas de estilo de tres formas:-Con un fichero.css externo, como en el ejemplo anterior. Paraello, en el documento HTML debemos incluir entre las etiquetas y el siguiente cdigo:

-De forma incrustada en el fichero HTML:

CSS Incrustado p { color: #F1C200; }

Esto es una prueba

-Hoja de estilo en lnea:

Esto es una prueba


40/93

40

13.-CSS-Reglas especiales-Comentarios:

En cualquier lugar del fichero CSS se pueden incluir comentarios,para ello se utiliza la siguiente sintaxis:/* Esto es un comentario */

-La regla @import:Permite importar hojas de estilo desde otras. Se puede usar dedos formas:@import url (fichero.css);

@import fichero.css;

-La regla !important:Se utiliza para dar mayor prioridad a determinados parmetros.En ste ejemplo se da prioridad al primer valor de width. En casode no utilizar la regla !important el valor que tendra width sera elsegundo:.principal{

width: 1024px !important; width: 800px;

}


41/93

41

14.-CSS-SelectoresUn selector identifica a un elemento dentro de una pgina web,pudiendo as aplicarle un determinado formato. Hay diversostipos:-Selectores de tipos .- Son los que identifican a un tipo deelemento propio de HTML.Ejemplo:

p

{text-align: center;

}

-Selectores de ID.- Se aplican a un nico elemento de la pgina.Ejemplo:

p#parrafo1{

text-align: center;}

En el cdigo HTML debe aparecer as:

Prrafo de prueba

-Selectores de clases .- Se utilizan para identificar a varioselementos de una misma clase. Se diferencian de los selectores deID en que pueden repetirse tantas veces como se desee.

Ejemplo:


42/93

42

p.azul{

background-color: blue;}

En el cdigo HTML debe aparecer as:

Prrafo de prueba

-Selectores universales.- Representan a cualquier elemento dela pgina. Se escriben con un *.Ejemplos:

*{

color: black;}

*#principal{

background-color: #E2F100; color: black;

}

-Agrupamiento .- Cuando varios selectores comparten losmismos estilos podemos agruparlos para aplicarles a todos elmismo estilo, separndolos por comas.Ejemplo:


43/93

43

table, p, h3{

font-family: Verdana; color: black;}

-Selectores de descendientes.- Permiten especificar elementosque se encuentran dentro de otros.Ejemplo:

p h1{

color: white;}


44/93

44

15.-CSS-Pseudo-clases-:link .- Hace referencia a los enlaces que an no han sido visitados.Ejemplo:

a:link{

color: blue;}

-:visited.- Hace referencia a los enlaces ya visitados.Ejemplo:

a:visited

{color: gray;

}

- :hover.- Se aplica al pasar el cursor por encima del enlace.Ejemplo:

a:hover{

color: yellow;}

-:active.- Se aplica cuando un elemento es activado.Ejemplo:


45/93


46/93

46

16.-CSS-Propiedades de las cajasUna caja es un elemento de una pgina HTML donde sealmacena contenido y que tiene un padding (relleno),border(borde) y unmargin (margen).

-Propiedades del margen margin-left, margin -top, margin -righty margin -bottom. Admite un tamao de ancho fijo o porcentaje.

-Propiedades del relleno padding-left, padding-top, padding-righty padding-bottom. Admite un tamao fijo o porcentaje.

-Propiedades del borde

border-left, border-top, border-righty border-bottom.


47/93

47

border-width .- Se utiliza para definir el tamao de los 4 bordesque componen la caja. Si queremos definir el tamao de un bordeen concreto debemos utilizar:

border-top-width .-Borde superior.border-right-width .- Borde derecho.border-left-width.-Borde izquierdo.border-bottom-width .- Borde inferior.

Admite uno de los siguientes valores:

Valor Descripcinthin Borde fino.medium Borde medio.thick Borde grueso.medida Un tamao concreto.

-Color del bordeborder-top-color, border-left-color, border-right-color,border-bottom-color

Admite los siguientes valores:

Valor Descripcincolor Borde de un color en

hexadecimal o ingls.transparent Borde transparente.


48/93

48

-Estilo del bordeborder-top-style, border-left-style, border-right-style,border-bottom-style

Puede tomar uno de stos valores:

Valor Descripcinnone Ningn borde.hidden Borde oculto.dotted Borde a base de puntos.dashed Borde compuesto por

pequeos segmentos de lnea.solid El borde es un nico segmento

de lnea.double Borde de doble segmento de

lnea.groove Borde con apariencia de

tallado.ridge Borde sobresaliendo.inset Borde con relieve hacia

adentro de la pgina.outset Borde con relieve que

sobresale.


49/93

49


50/93

50

17.-CSS-Fondos, colores y sus atributosLas propiedades de CSS permiten personalizar por completocualquier elemento, pudiendo elegir su color frontal y de fondo.En el caso del fondo, se puede elegir entre seleccionar un color, ouna imagen, el modo en que se repite, si permanece fija conrespecto a la pantalla y su posicin.

-Color del primer planoDescribe el color del primer plano de un elemento.

Ejemplo:

div{

color: #000000;}

div{

color: black;}

-Color de fondo

Determina el color de fondo de un elemento.Ejemplo:


51/93

51

div{

background-color: #F0F0F0;}div{

background-color: gray;}

-Imagen de fondoPermite utilizar una imagen como fondo de un elemento.Ejemplo:

body

{background-image: url (imagenes/imagen.jpg);

}

Pueden utilizarse las siguientes propiedades para definir laspropiedades de la imagen de fondo:

background-repeat .- Especifica si la imagen se repite o no. Admite los siguientes valores:

Valor Descripcinrepeat Repite la imagen tanto vertical

como horizontalmente.repeat-x Repite la imagen slo

horizontalmente.


52/93

52

repeat-y Repite la imagen slo verticalmente.

no-repeat Muestra la imagen, pero no larepite ni horizontal, ni verticalmente.

Ejemplo:

body{

background-image: url(imagenes/imagen.jpg);background-repeat: repeat-y;

}

background-attachment .- Se utiliza para indicar si la imagenpermanecer fija o se desplazar junto con la pgina. Admite los valores:

Valor Descripcinfixed La imagen permanece fija.

scroll La imagen se mueve junto conel documento.

Ejemplo:


53/93

53

body{

background-image: url(imagenes/imagen.jpg);background-attachment: fixed;}

background-position .- Define la posicin inicial de unaimagen de fondo. Admite como valores:

Valor Descripcin palabras clave left, center, right, top, bottom. porcentajes Un nmero seguido del

smbolo %.longitudes Una medida concreta, la

medida ms utilizada es en px.

Al utilizar background-position, la posicin horizontal seespecifica primero, seguida por la vertical.

Ejemplo:

body{

background-position: center top;}

background .- Se utiliza para fijar todas las propiedades delfondo sin tener que escribir varias lneas.


54/93

54

Ejemplo:

body{background: url(imagenes/imagen.jpg) #000000

fixed;}


55/93

55

18.-CSS-Apariencia visual-display

La propiedaddisplay define de qu forma se mostrar unelemento. Admite los siguientes valores:

Valor Descripcinnone No genera ningn elemento

por pantalla, pero el navegadors lo carga.

block Crea un elemento de bloque,con saltos de lnea antes ydespus

inline Genera un elemento en lneasin saltos de lnea antes odespus. Es la opcin pordefecto.

inline-block Genera un elemento debloque, pero dispuesto comoun elemento en lnea.

inline-table Crea un elemento en lnea,como una tabla, pero sin saltosde lnea antes o despus delelemento.

list-item Genera un elemento de bloquey un elemento en lnea para lalista de marcadores.

run-in Crea un elemento de bloque oen lnea segn el contexto.

table El elemento creado tendr uncomportamiento parecido alde una tabla. Tendr un saltode lnea antes y despus delelemento.

table-caption El elemento se comportar


56/93

56

como el caption de una tabla.table-cell El elemento tendr un

comportamiento parecido a lacelda de una tabla.

table-column El elemento se comportarcomo la columna de una tabla.

table-column-group El elemento se comportarcomo un grupo de columnasde una tabla.

table-footer-group El elemento se mostrar comoun grupo de pies de tabla.

table-header-group El elemento sera mostradocomo un grupo de una o msfilas.

table-row El elemento se comportarcomo la fila de una tabla.

table-row-group El elemento se comportarcomo un grupo de filas de unatabla.

inherit El elemento hereda el formatodel elemento padre.

Ejemplo:

div.prueba{

display: inline;}

-Positionsta propiedad permite ubicar los elemento donde se prefiera.Puede tener los siguientes valores:


57/93

57

Valor Descripcin

absolute Genera un elementoposicionado de formaabsoluta.

fixed Genera un elementoposicionado de formaabsoluta, cuya posicin finalser fija.

relative Genera un elementoposicionado de forma relativa.

static Posicin por defecto. Elelemento se posicionar de laforma que establezca el cdigoHTML.

inherit Especifica que el valor de laposicin del elemento serheredado del elemento padre.

-leftsta propiedad especifica la distancia a la que se desplazar elelemento hacia la derecha del borde izquierdo.

Ejemplo:

div#main{

left: 15px;}


58/93

58

-rightsta propiedad especifica la distancia a la que se desplazar elelemento hacia la izquierda del borde derecho.

Ejemplo:

div#main{

right: 15px;}

-topsta propiedad especifica la distancia a la que se desplazar elelemento por debajo del borde superior.

Ejemplo:

div#main{

top: 15px;}

-bottomsta propiedad especifica la distancia a la que se desplazar elelemento por encima del borde inferior.

Ejemplo:


59/93

59

div#main{

bottom: 15px;}

-z-indexUn elemento con un nmero mayor de orden estar delantesiempre de uno que tenga uno menor. z-index admite lossiguientes valores:

Valor Descripcinauto Valor por defecto. El nmero

de orden es igual al delelemento padre.

nmero Selecciona un nmero deorden. Admite valoresnegativos.

inherit Especifica que el z-index debeser heredado del elementopadre.

Ejemplo:

img{

z-index: -1;}

-floatLa propiedad float especifica si un elemento debe flotar. Admitelos siguientes valores:


60/93

60

Valor Descripcinleft El elemento flota en la parte

izquierda.right El elemento flota en la parte

derecha.none El elemento no flota. Es el

valor por defecto.inherit El valor de la propiedad float

se hereda del elemento padre.

Ejemplo:

div#menu{

float: left;}

-clearLa propiedad clear especifica qu lados de un elemento nopueden alinearse con elementos flotantes. Admite los siguientes valores:

Valor Descripcinleft No permite elementos flotantes

a su izquierda.right No permite elementos flotantes

a su derecha.

both No permite elementos flotantesa ambos lados.

none Opcin por defecto. Permite


61/93

61

elementos flotantes a amboslados.

inherit Especifica que el valor de clearse heredar del elemento padre.

Ejemplo:

img{

float: right;clear: both;

}


62/93

62

19.-CSS-Efectos visualesHay propiedades que permiten establecer el comportamiento visual de algunos elementos, como por ejemplo especificar queocurre si sobrepasa el tamao o su grado de visibilidad.-overflowPor lo general, el contenido de una caja permanece delimitada porel tamao de sta, pero en ocasiones puede desbordar dichotamao. La propiedad overflow especifica el comportamiento dela caja en dicha situacin. Admite los siguientes valores:

Valor Descripcin visible Opcin por defecto. El

desbordamiento no se recorta,se hace fuera de la caja.

hidden El desbordamiento esrecortado y el resto decontenido ser invisible.

scroll El desbordamiento esrecortado, pero se aade unabarra de scroll para poder verel resto de contenido.

auto Si se produce desbordamiento,se aade una barra de scroll.

inherit Se especifica que el valor deoverflow se heredar delelemento padre.

Ejemplo:

div

{ width: 200px;


63/93

63

height: 50px;overflow: auto;

}

-clipsta propiedad permite recortar el tamao de un elementoposicionado de forma absoluta. Admite los siguientes valores:

Valor Descripcinshape Recorta un elemento. El nico

valor posible es rect (top, right,bottom, left).

auto No se aplica ningn recorte.Es la opcin por defecto.

inherit Especifica que el valor del

recorte ser heredado delelemento padre.

Ejemplo:

img{

position:absolute;clip:rect(10px,30px,25px,13px);}

-visibilityLa propiedad visibility especifica si un elemento es o no visible. Admite los siguientes valores:

Valor Descripcin


64/93

64

visible El elemento es visible. Es laopcin por defecto.

hidden El elemento es invisible, sibien es cargado por elnavegador.

collapse Si se usa en elementos que nosean tablas toma el mismo valor que hidden. Cuando seutiliza en tablas elimina una filao columna.

inherit Especifica que el valor de visibility ser hereado de unelemento padre.

Ejemplo:

div{

visibility: hidden;}


65/93


66/93

66

Valor Descripcinauto Es la opcin por defecto. El

navegador calcula la altura.medida Define la altura en px,em,cm...% Define la altura en tanto por

ciento.inherit Especifica que el valor de la

altura es heredada delelemento padre.

Ejemplo:

p.parrafo1{

height: 100%;

}

-min-widthEspecifica el ancho mnimo que debe tener un elemento. Puedetener los siguientes valores:

Valor Descripcinlength Define el ancho mnimo en

px,em,cm...% Define el ancho mnimo en

tanto por ciento.inherit Especifica que el valor del

ancho mnimo ser heredado

del elemento padre.

Ejemplo:


67/93

67

p.parrafo1

{ min-width: 50%;}

-max-widthEspecifica el ancho mximo de un elemento Admite lossiguientes valores:

Valor Descripcinnone Opcin por defecto. No hay

mximo de ancho.medida Define el ancho mximo en

px, cm , em....

% Define el ancho mximo entanto por ciento.

inherit Especifica que el valor deanchura mxima ser heredadodel elemento padre.

Ejemplo:

p.parrafo1{

max-width: 800px;}

-min-heightEstablece la altura mnima que debe tener el elemento. Puedetener los siguientes valores:


68/93

68

Valor Descripcinmedida Define la altura mnima en px,

cm, em....% Define la altura mnima en

tanto por ciento.inherit Especifica que el valor de la

altura mnima ser heredadodel elemento padre.

Ejemplo:

p.parrafo1{

min-height: 50px;}

-max-heightEspecifica la altura mxima que puede tener el elemento. Admitelos siguientes valores:

Valor Descripcin

none Valor por defecto. No hayaltura mxima.medida Define la altura mxima en px,

cm, em....% Define la altura mxima en

tanto por ciento.inherit Especifica que el valor de la

altura mxima ser heredadodel elemento padre.


69/93

69

Ejemplo:

p.parrafo1{max-height: 75%;

}


70/93

70

21.-CSS-Interfaz de usuario-cursor

sta propiedad especifica el tipo de cursor a utilizar en unelemento. Puede tener los siguientes valores:

Valor Descripcinauto Opcin por defecto. El

navegador establece un cursor.crosshair Cursor con forma de cruz

simple.default Cursor por defecto. pointer El cursor es un puntero que

indica enlace.move El cursor indica que se puede

mover.

help El cursor indica que hay ayudadisponible.text El cursor indica texto. wait El cursor indica que est

ocupado.inherit Especifica que el valor del

cursor ser heredado del

elemento padre.

Ejemplo:

div.cuadrodeespera{

cursor: wait;}


71/93

71

-outlineOutline es una propiedad que permite dibujar lneas alrededor delos elementos, fuera de los bordes. Las propiedades que puedenser definidias son:outline-color, outline-styley outline-width. Tambin se puede utilizar nicamenteoutline y aadir todos los valores en la misma lnea.

Valor Descripcinoutline-color Permite especificar el color de

la lnea exterior.outline-style Define el estilo de la lnea

exterior.outline-width Especifica el ancho de la lnea

exterior.inherit Especifica que el valor de la

propiedad outline serheredado del elemento padre.

Ejemplo:

p{

border: 1px solid black;outline: #808080 dotted;

}

outline-coloradmite los siguientes valores:

Valor DescripcinNombre del color Especifica el color de la lnea

exterior con el nombre de un


72/93

72

color, por ejemploblack .Nmero en hexadecimal Especifica el color de la lnea

exterior con un color enhexadecimal, como porejemplo#808080.

Nmero RGB Especifica el color de la lneaexterior con un color RGB,como por ejemplorgb(255,0,0)

invert Es la opcin por defecto.

Realiza una inversin del color.sta opcin permite que lalnea exterior sea visible,independientemente del colorde fondo.

inherit Especifica que las propiedadesde la lnea exterior seanheredadas del elemento padre.

Ejemplo:

p{

outline-style: dotted;outline-color: #808080;

}

outline-styleadmite los siguientes valores:

Valor Descripcinnone Sin lnea exterior.dotted Especifica una lnea exterior a


73/93

73

base de puntos.dashed Especifica una lnea exterior a

base de guiones.solid Especifica una lnea exterior

slida.double Especifica una lnea exterior

doble.groove Especifica una lnea exterior

con apariencia de tallado.

ridge Especifica una lnea exteriorcon apariencia de estarsobresaliendo.

inset Especifica una lnea exteriorcon relieve hacia adentro.

outset Especifica una lnea exteriorcon relieve hacia afuera.

inherit Especifica que el valor deoutline-style sea heredado delelemento padre.

Ejemplo:

p{

outline-style: outset;}


74/93

74

outline-widthadmite los siguientes valores:

Valor Descripcinthin Especifica un borde exteriordelgado.

medium Es la opcin por defecto.Establece un borde exterior detamao medio.

thick Especifica un borde exterior

grueso.length Permite definir el grueso delborde exterior.

inherit Especifica que el grueso delborde exterior vendrdeterminado por el elementopadre.

Ejemplo:

p{

outline-style: solid;

outline-width: 3px;}


75/93

75

22.-CSS-Estilo en listasLa propiedadlist-style-type define la apariencia del marcadorutilizado en una lista. Admite los siguientes valores:

Valor Descripcinnone Sin marcador.circle Marcador en forma de crculo.disc Opcin por defecto. Marcador

en forma de cculo relleno.square Marcador en forma de

cuadrado.armenian Marcador en numeracin

tradicional Armenia.decimal El marcador es un nmero.decimal-leading-zero El marcador es un nmero

precedido por un 0. 01,02,03...

georgian Marcador en numeracintradicional georgiana.lower-alpha El marcador es una letra en

minscula.lower-greek El marcador es una letra griega

minscula.lower-latin Similar a lower-alpha.

lower-roman El marcador es un nmeroromano en minscula.

upper-alpha El marcador es una letra enmayscula.

upper-latin Similar a upper-alpha.upper-roman El marcador es un nmero

romano en mayscula.inherit Especifica que el valor de list-

style-type ser heredado delelemento padre.


76/93

76

Ejemplo:

ul.primeralista{list-style-type: square;

}ol{

list-style-type: upper-roman;}


77/93

77

23.-Ejemplos finalesSuperposicin de dos DIV con los bordes redondeados:

index.html

Superposicin de Divs

estilo.css

#superior{

width: 400px;height: 400px;background-color:#FF0000; position:absolute;z-index:1;margin: 20px 20px 200px;-moz-border-radius: 15px;-webkit-border-radius: 15px;

}


78/93

78

#inferior{

width: 400px;

height: 400px;background-color:#0033CC; position:absolute;z-index:0;margin: 60px 60px 200px;-moz-border-radius: 15px;-webkit-border-radius: 15px;

}

Resultado:


79/93

79

Maquetacin de una web utilizando DIVs:

index.html

Maquetacin de una web utilizandodivs

sta es la cabecerasta es la barra lateralizquierdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget lacus mi, sit amet bibendum mi. Suspendisse potenti. Sed ac sem cursus turpis sodales condimentum inac purus. Vivamus eget leo turpis. Pellentesque vehiculadiam id velit scelerisque facilisis. Class aptent tacitisociosqu ad litora torquent per conubia nostra, per inceptoshimenaeos. Suspendisse nisi turpis, vestibulum sed volutpat et, sagittis ac turpis. Etiam viverra sollicitudinmagna nec semper. Proin quam turpis, lobortis ut


80/93

80

vulputate vitae, blandit at urna. Aliquam enim est,dignissim sed fermentum a, pharetra nec est. Integermassa lacus, euismod sed imperdiet quis, ornare at arcu.

Etiam sit amet lorem a felis pellentesque iaculis id quis est.

Ut mattis, nisi sed commodo consequat, neque felis placerat augue, a luctus lacus nisl nec lectus. Vestibulumdiam ligula, vestibulum a tincidunt quis, sollicitudin sitamet justo. Mauris vestibulum lacus in sem posuere etaccumsan leo iaculis. Donec eleifend commodo odio non viverra. Proin ac tortor nec nibh hendrerit lacinia ac velquam. Nam tincidunt vestibulum nisi, eu laoreet felis viverra et. Sed et arcu ut massa venenatis tempus sed atneque. Integer non mauris nisl, quis commodo turpis.Nulla rhoncus bibendum aliquam. Morbi vitae felis nulla,nec congue elit. Sed eget quam nunc, et pellentesque enim.Praesent ac metus nisl, id porta magna. Pellentesque velnibh enim. Donec at justo sapien, a condimentum tellus.Donec nec malesuada eros. Maecenas in enim neque, sed pulvinar risus.

Sed porttitor laoreet enim ac hendrerit. Cras temporscelerisque odio pulvinar lacinia. Ut ornare ante a turpisfacilisis commodo. Sed elit justo, dapibus eu accumsan eu,convallis sit amet justo. Cras molestie consequat turpis sitamet commodo. Nulla lacus sapien, malesuada eu viverra

ut, pulvinar quis turpis. Quisque sit amet suscipit nisl.Proin at rutrum metus. Donec laoreet blandit elit atcongue. Mauris sed vehicula nibh. Pellentesque habitantmorbi tristique senectus et netus et malesuada fames acturpis egestas. Nam ornare lacus a lectus porttitor quisornare purus elementum. Pellentesque imperdiet faucibusauctor. Morbi sit amet nisi urna, sed scelerisque turpis.Nulla facilisi. Morbi pulvinar purus sit amet lacus placerattristique. Aenean libero neque, vehicula in venenatis vitae,malesuada sit amet augue. Ut mattis lacinia purus in porttitor.


81/93

81

sta es la barra lateral derecha.

Pie de pgina 2010

estilo.css

#contenedor

{border: 1px solid black; width: 800px;margin: 0 auto;}#cabecera

{ width: 800px;height: 50px;background-color: #FF9900;}#barraizquierda{ width: 100px;


82/93

82

height: 500px;background-color:#FFCC00;

position: absolute;}#contenido{ width: 600px;height: 500px;

background-color:#0099CC;margin-left: 100px; position: absolute;}#barraderecha{

width: 100px;height: 500px;background-color:#FFCC00;margin-left: 700px;}#piedepagina

{ width: 800px;height: 25px;background-color: #FF9900;text-align:center;}


83/93

83

Resultado:


84/93

84

Galera de imgenes en CSS

index.html

Galera de imgenes
Gato 1


85/93


86/93

86

}a

{text-decoration: none;}.contenedor{margin:0 auto;

width: auto; padding: 1em 1em 1em 1em;text-align: center;background-color: #000;height: auto;}

.contenedor p{color: #fc7;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;}

.miniatura img{border: 2px solid #000000;margin: 0 3px 5px 3px;}.miniatura:hover img

{border: 2px solid #000000;


87/93

87

}.miniatura span

{ position: absolute;top: 150px;left: -1000px; visibility: hidden;color: #fc7;

font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;}.miniatura:hover span{background-color: #333;

visibility: visible;right: 0;top: 150px;left: 0px;z-index: 50;margin: 0 auto;

width: auto;}.miniatura span img{border: 1px solid #000; padding: 5px 5px 40px 5px;

background-color: #FFFFFF;}


88/93

88

#footer{

width: 20%; position: absolute;bottom: 10px;right: 10px;clear: both; padding-top: 8px;

text-align: center;border-top: 1px solid #C6D4E6;color: #fff;font-family: Verdana, Arial, sans-serif;font-size: 20px;}

#footer a{color: #fc0;text-decoration:none;font-weight: bold;}


89/93

89

Resultado:


90/93

90

Tabla con formato en CSS:

index.html

Cuota de uso de navegadorestable

{border: 1px solid green;margin: 0 auto; width: 40%;}th#nombretabla

{background-color: #336633;color:#FFFFFF;}th.seccion{

background-color: #339933;color:#FFFFFF;}


91/93

91

td{

text-align:center;background-color:#33FF66;}

Cuota de uso denavegadores

Nombre del navegadorCuota(%)Internet Explorer66,77

Firefox20,78

Safari7,13


92/93

92

Google Chrome

0,83Opera0,71

Netscape0,53Mozilla

0,08Opera Mini0,06


93/93

Resultado:

html___css_fácil_y_sencillo

Documents

Transcript of html___css_fácil_y_sencillo