Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Curso HTML + Css

    Cargado por

    Usiel Valencia Perez
    3 vistas52 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    3 vistas52 páginas

    Curso HTML + Css

    Cargado por

    Usiel Valencia Perez

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 52

    Curso HTML + CSS

    Abril 2005

    Jordi Llonch jordi@laigu.net

    Basado en los cursos de: http://www.webestilo.com/html/ http://www.webestilo.com/css/

    http://creativecommons.org/licenses/by-sa/2.0/

    Curso HT ! " C##

    Conceptos bsicos
    World Wide Web (WWW): Sistema de informacin. Navegador: Es el programa que nos ofrece acceso a nternet. Servidor: Se encarga de proporcionar al navegador los documentos ! medios que
    este solicita.

    "##$: Es el protocolo de transferencia de %iperte&to' o sea' el protocolo que los ,-*: Es el *ocali(ador ,niforme de -ecursos. "#)*: .*engua/e para marcado de %iperte&to..

    servidores de World Wide Web utili(an para mandar documentos "#)* a trav+s de nternet.

    Curso HT ! " C##

    El lengua/e "#)*
    *engua/e que estructura el documento. $roporciona el contenido (utilizaremos CSS para el formato...) Compatibilidad. Etiquetas:
    0tag1 te&to afectado 02tag1

    Curso HT ! " C##

    Estructura bsica de un doc. "#)*: Cabecera ! cuerpo del documento

    0"#)*1: *imitan el documento e indica que se encuentra escrito en este lengua/e. 0"E341: Especifica el prlogo del resto del arc%ivo. Son pocas las tags que van dentro de ella' destacando la del titulo 0# #*E1. 056471: Encierra el resto del documento' el contenido.

    Curso HT ! " C##

    $rimer e/emplo "#)*

    <HTML> <HEAD> <TITLE>Ejemplo 1</TITLE> </HEAD> <BODY> Hola mundo </BODY> </HTML>

    Curso HT ! " C##

    $rimeros pasos: 0"81 0$1 05-1


    0"81' 0"91' 0":1...: #itulares. Sirven para dividir el te&to en secciones. Se pueden definir seis niveles de titulares. 0$1: $rrafos. 05-1: Saltos de l;nea. 0<== ==1: Comentarios.

    Curso HT ! " C##

    E/emplo
    $HT !% $H&A'% $T(T!&%&)emplo 2$/T(T!&% $/H&A'% $*+',% $H-% i primera p.gina$/H-% $/-- A0ui va un comentario 0ue no es interpreta1o por el navega1or --% $2%Hola mun1o3 esta es un p.gina con titular3 0ue tiene tambi4n un p.rra5o y unos cuantos saltos 1e l6nea.$/2% 7no$br% 'os$br% Tres$br% $/*+',% $/HT !%

    Curso HT ! " C##

    Creacin de enlaces 031


    *o caracter;stico del lengua/e "#)* es el poder generar v;nculos de %iperte&to para enla(ar con ellos todos sus documentos en >eb:
    03 "-E?@.,-*.1.....0231: Sirve para saltar entre diferentes ,-*s. <A NAME="parte1"> r!mera parte</A>: ,tili(amos el atributo name para dar nombre a una seccin de nuestro documento.

    Curso HT ! " C##

    E/emplo enlaces
    <HTML> <HEAD> <TITLE>Eje !lo "<#TITLE> <#HEAD> <B$D%> <A &AME'(arri)a(><H*>+,gina de enlaces<#H*><#A> <A H-E.'(/a)ajo(>Ir a)ajo<#A><)r> <A H-E.'(ej0.ht l(>Ir a eje !lo 0<#A><)r><)r> <A H-E.'(htt!:##111.1e)estilo.co #(>Ir a 2e)Estilo<#A><)r> <)r>.<)r>.<)r>.<)r>.<)r>.<)r>.<)r>.<)r><)r> <)r><)r><)r><)r><)r><)r><)r><)r><)r><)r><)r><)r> <)r><)r><)r><)r><)r><)r><)r><)r><)r><)r><)r><)r> <)r><)r><)r>.<)r>.<)r>.<)r>.<)r>.<)r> <A &AME'(a)ajo(><)r><#A> <A H-E.'(/arri)a(>Ir arri)a<#A> <#B$D%> <#HTML>

    Curso HT ! " C##

    ,-*: *ocali(ador ,niversal de -ecursos


    *os ,-* son las direcciones de las informaciones que buscamos en nternet. Constan de: $rotocolo: $rograma que utili(ar el navegador para obtener el arc%ivo elegido. ("##$' ?#$...) Nombre del %ost: Se trata del sistema donde se encuentra almacenada la informacin que buscamos. -uta del fic%ero: Se trata de la ubicacin del arc%ivo dentro del %ost. E/: http://www.bienvenidos.es/publico/saludos.html

    10

    Curso HT ! " C##

    #ipos de ,-*
    "##$: *os utili(ados por los servidores de WWW. ?#$: 3puntar arc%ivos que est+n en servidores que usan el protocolo ?#$ (?ile #ransfer $rotocol). ,tili(ado para enviar ! recibir fic%eros. ?ile: 3puntan %acia arc%ivos contenidos en el mismo disco que se encuentra el navegador )ailto: Se usa para mandar correos electrnicos. (>ebmasterAbienvenidos.es) Ne>s: Son ,-* de grupos de noticias.

    11

    Curso HT ! " C##

    *istas 0,*1 06*1 0* 1


    <HTML> <HEAD> <TITLE>Eje !lo 3<#TITLE> <#HEAD> <B$D%> <H*>Listas<#H*> 4na lista ordenada <ol> <li>4no<#li> <li>Dos<#li> <li>Tres<#li> <#ol> <)r><)r> 4na lista sin ordenar <ul> <li>4no<#li> <li>Dos<#li> <li>Tres<#li> <#ul> <)r><)r> 4na lista de glosario <dl> <dt>T5eacute6 ino *<#dt> <dd>De7inici5oacute6n *<#dd> <dt>T5eacute6 ino 8<#dt> <dd>De7inici5oacute6n 8<#dd> <#dl> <)r><)r> Listas anidadas <ul> <li>4no <ul> <li>4no<#li> <li>Dos<#li> <li>Tres<#li> <#ul> <#li> <li>Dos<#li> <li>Tres<#li> <#ul> <#B$D%> <#HTML>

    12

    Curso HT ! " C##

    Estilos de caracter 051 0,1 0 1


    <HTML> <HEAD> <TITLE>Eje !lo 9<#TITLE> <#HEAD> <B$D%> <H*>Estilos de caracter<#H*> 4n eje !lo de te:to de <EM>real;ado<#EM>.<)r> 4n eje !lo de te:to de <<T-$&=>real;ado<#<T-$&=>.<)r> 4n eje !lo de te:to de <>$DE>real;ado<#>$DE>.<)r> 4n eje !lo de te:to de <<AM+>real;ado<#<AM+>.<)r> 4n eje !lo de te:to de <?DB>real;ado<#?DB>.<)r> 4n eje !lo de te:to de <@A->real;ado<#@A->.<)r> 4n eje !lo de te:to de <D.&>real;ado<#D.&>.<)r> 4n eje !lo de te:to de <>ITE>real;ado<#>ITE>.<)r> <)r> 4n eje !lo de te:to de <B>real;ado<#B>.<)r> 4n eje !lo de te:to de <I>real;ado<#I>.<)r> 4n eje !lo de te:to de <4>real;ado<#4>.<)r> 4n eje !lo de te:to de <TT>real;ado<#TT>.<)r> <#B$D%> <#HTML>

    13

    Curso HT ! " C##

    Saltos ! lineas 0"-1 05-1


    <HTML> <HEAD> <TITLE>Eje !lo A<#TITLE> <#HEAD> <B$D%> <H*><altos B lineas<#H*> <H-> <H- 1idth'(CDE(> <H- 1idth'(3DE(> <H- 1idth'(0DE(> <H- 1idth'(8DE(> FFFF <)r><)r><)r> FFFF <#B$D%> <#HTML>

    14

    Curso HT ! " C##

    Carcteres especiales
    nsertar un carcter que no sea 3SC en nuestro documento "#)*. Estas entidades pueden ser:
    Nombradas: Se suelen construir con el signo B' la abreviatura del carcter ! acabado con el signo punto ! coma. El s;mbolo de registrado se construir;a: BregC Numeradas: Se constru!en con los signos BD' el nEmero correspondiente a la posicin del carcter en el con/unto S6=*atin=8 ( S6=FFGH=8). El mismo s;mbolo de registrado' ser;a a%ora: BD8IJC

    E&isten unas entidades reservadas:


    signo 0' entidad BltC signo 1' entidad BgtC signo B' entidad BampC signo .' entidad BquotC

    15

    Curso HT ! " C##

    #ablas
    <HTML> <HEAD> <TITLE>Eje !lo *D<#TITLE> <#HEAD> <B$D%> <H*>Ta)las )5aacute6sicas<#H*> <TABLE B$-DE-'(*(> <T-> <TH>>a)ereca *<#TH> <TH>>a)ereca 8<#TH> <TH>>a)ereca "<#TH> <#T-> <T-> <TD>Dato *<#TD> <TD>Dato 8<#TD> <TD>Dato "<#TD> <#T-> <T-> <TD>Dato 0<#TD> <TD>Dato G<#TD> <TD>Dato 3<#TD> <#T-> <#TABLE> <#B$D%> <#HTML>

    16

    Curso HT ! " C##

    #ablas avan(adas
    #;tulo Cuando queramos titular una tabla usamos los tags 0caption1.....02caption1. El tag de apertura puede llevar el atributo align que indicar si el t;tulo va encima o deba/o de la tabla. align@.top. indicar;a encima de la tabla ! align@.bottom. indicar;a en la parte de aba/o. 3lineacin de celdas 3tributo align@ define %ori(ontalmente los datos al margen i(quierdo (le"t)' al derec%o (r!#$t) o centrado (%enter). 3tributo valign@ define verticalmente los datos en la parte superior (top)' en la parte inferior (&ottom) o centrado (m!ddle). Celdas e&tendidas $ara crear una celda que abarque varias filas o columnas' debemos colocar en las tags 0t%1 o 0td1 los atributos: ro>span@ ms un valor para indicar el nEmero de filas que se quiere abarcar. colspan@ ms un valor para indicar el nEmero de columnas que se quiere abarcar.

    17

    Curso HT ! " C##

    E/emplo tabla avan(ada


    <ht l><head> <title>Eje !lo *D<#title> <#head> <)odB> <h*>Ta)las ),sicas<#h*> <ta)le )order'(*(> <ca!tion>THtulo ta)la<#ca!tion> <tr> <th>>a)ereca *<#th> <th>>a)ereca 8<#th> <th>>a)ereca "<#th> <#tr> <tr> <td cols!an'(8(>Dato *<#td> <td>Dato "<#td> <#tr> <tr> <td ro1s!an'(8(>Dato 0<#td> <td align'(center( Ialign'( iddle(>Dato G<#td> <td>Dato 3<)r><)r><#td> <#tr> <tr> <td align'(center( Ialign'( iddle(>Dato G<#td> <td>Dato 3<)r><)r><#td> <#tr> <#ta)le> <#)odB><#ht l>

    18

    Curso HT ! " C##

    #ablas (espaciado)
    $odemos modificar el aspecto de la tabla cambiando el anc%o de los bordes' el espaciado entre celdas ! el anc%o de las mismas. >idt%@ 3compaKa a 0table1 ! especifica el anc%o de la tabla' tanto en nEmero de pi&eles como en porcenta/e respecto al anc%o de la pantalla. #ambi+n puede acompaKar a las tags 0t%1 o 0td1 para especificar el anc%o de las columnas. cellspacing@ Suele acompaKar a la tag 0table1. ndica el nEmero de pi&eles que separan cada celda. El valor predeterminado suele ser 9. cellpadding@ #ambi+n acompaKa a la tag 0table1. ndica el espacio en pi&eles entre el borde de la celda ! su contenido. El valor predeterminado suele ser 8.

    19

    Curso HT ! " C##

    E/emplo tabla avan(ada (espaciado)


    <HTML> <HEAD> <TITLE>Eje !lo **<#TITLE> <#HEAD> <B$D%> <H*>Ta)las aIan;adas<#H*> <TABLE 2IDTH'(GDE( B$-DE-'(*( >ELL<+A>I&='("( >ELL+ADDI&='(8(> <T-> <TD >$L<+A&'(8( ALI=&'(right(>Dato *<#TD> <TD>4n te:to cualJuiera<#TD> <TD -$2<+A&'(8(>Dato "<#TD> <#T-> <T-> <TD>Dato 0<#TD> <TD>Dato 0<#TD> <TD ALI=&'(center(>Dato G<#TD> <#T-> <#TABLE> <#B$D%> <#HTML>

    20

    Curso HT ! " C##

    mgenes 0 )L1
    ncluir imgenes en una presentacin >eb es mu! sencillo' solo debe de tener en cuenta que las imgenes tienen que tener los formatos L ?' M$EL o $NL. *as imgenes en l;nea' se especifican a partir de la tag 0img1 que no tiene una tag correspondiente de cierre pero que puede acompaKarse de los siguientes atributos: src@ Este atributo es obligatorio e indica el nombre del arc%ivo de imagen (entre comillas) o la ,-* que se va a representar. align@ $ermite controlar la alineacin de una imagen con respecto a una l;nea de te&to ad!acente o a otras imgenes en esa l;nea. *os tres valores posibles son los !a conocidos left' rig%t' top' middle ! bottom. alt@ Es la alternativa que se estableci cuando todav;a e&ist;an visuali(adores de solo te&to. Entre comillas podremos escribir un te&to que suplantara a esta imagen si no se carga o mientras se carga o cuando' visuali(ando !a la imagen' pasamos el ratn por encima. >idt%@ Este atributo es opcional pero es recomendable ponerlo para a!udar al navegador a representar la imagen' significa el anc%o de la imagen que vamos a representar. %eig%t@3l igual que el atributo W 4#"' es opcional ! recomendable ponerlo' este significa el alto de la imagen. border@ Con 56-4E- especificamos el anc%o de un borde que rodea la imagen.

    21

    Curso HT ! " C##

    E/emplo imagen
    <HTML> <HEAD> <TITLE>Eje !lo *8<#TITLE> <#HEAD> <B$D%> <H*>I 5aacute6genes<#H*> <IM= <->'(#gra7icos#)e)e*.j!g( 2IDTH'*0D HEI=HT'8*D B$-DE-'D ALT'(4n )e)5eacute6( ALI=&'(-I=HT(> <IM= <->'(#gra7icos#)e)e*.j!g( 2IDTH'*0D HEI=HT'8*D B$-DE-'" ALT'(4n )e)5eacute6( ALI=&'(LE.T(> 4n te:to cualJuiera. <#B$D%> <#HTML>

    22

    Curso HT ! " C##

    ?ormularios
    *os formularios permiten solicitar informacin al visitante. #ags 0form1.....02form1 ! dentro de ellas se recogern todas las variables de entrada.
    action@.. ndica el programa que va a tratar las variables enviadas con el formulario. met%od@.. ndica el m+todo de transferencia de las variables. $ost' si se env;a a trav+s del STDIO. Let' si se env;a a trav+s de la ,-*.

    23

    Curso HT ! " C##

    E/emplo formulario
    <HTML> <HEAD> <TITLE>Eje !lo *0<#TITLE> <#HEAD> <B$D%> <H*>.or ularios<#H*> <.$-M A>TI$&'(!rue)a.!h!( METH$D'(+$<T(> <I&+4T T%+E'(te:t( &AME'(no )re(><B-> <I&+4T T%+E'(su) it(> <I&+4T T%+E'(-eset(> <#.$-M> <#B$D%> <#HTML>

    24

    Curso HT ! " C##

    Campos de entrada 0 N$,#1


    3tributos: t!pe@.. tipo de variable a introducir. te&t Campo te&to. Sus atributos: ma&leng%t@.. NEmero m&imo de carcteres a introducir. si(e@.. *imitar el numero de carcteres a mostrar en pantalla. value@.. Nalor inicial del campo. pass>ord ndica que el campo a introducir ser una palabra de paso. )ostrar asteriscos. 3tributos igual que para te&t. c%ecObo& 6pcion casilla cuadrada. value@.. Nalor de la casilla. c%ecOed )arcada por defecto. radio Narias opciones en casilla circular. value@.. Nalor de la casilla. image El campo contendr el valor en coordenadas del punto de la imagen que %a!a pinc%ado. 3tributo obligatorio: src@.. Nombre del arc%ivo de imagen. %idden nvisible. Se debe aKadir el atributo value@.. name@.. Nombre del campo.

    25

    Curso HT ! " C##

    E/emplo N$,#
    $HT !% $H&A'% $T(T!&%&)emplo -5$/T(T!&% $/H&A'% $*+',% $H-%8ormularios$/H-% $8+9 ACT(+:;<prueba.php< &TH+';<2+#T<%

    Te=to: $(:27T T,2&;<te=t< :A &;<nombre<%$*9% 2asswor1: $(:27T T,2&;<passwor1< :A &;<contra<%$*9% #e=o:$(:27T T,2&;<ra1io< :A &;<boton-< >A!7&;<-<% Hombre $(:27T T,2&;<ra1io< :A &;<boton-< >A!7&;<2<% u)er$*9% >ehiculo:$(:27T T,2&;<chec?bo=< :A &;< oto< >A!7&;<#i<% oto $(:27T T,2&;<chec?bo=< :A &;<Coche< >A!7&;<< CH&C@&'%Coche $*9%$*9% $(:27T T,2&;<submit<%$(:27T T,2&;<9eset<% $/8+9 % $/*+',% $/HT !%

    26

    Curso HT ! " C##

    Campos de seleccin 0SE*EC#1


    *as tags 0select1.....02select1 encierran los valores que podremos elegir a partir de una lista. 3tributos:
    name@.. Nombre del campo. si(e@.. NEmero de opciones visibles. 8' menE desplegable. Nalor ma!or' lista con barra de despla(amiento. multiple Si se pueden reali(ar multiples selecciones.

    *as diferentes opciones de la lista se indicarn mediante la tag 0option1 que puede acompaKarse del atributo selected.

    27

    Curso HT ! " C##

    E/emplo 0SE*EC#1
    <HTML> <HEAD> <TITLE>Eje !lo *3<#TITLE> <#HEAD> <B$D%> <H*>.or ularios<#H*> <.$-M A>TI$&'(!rue)a.!h!( METH$D'(+$<T(> <<ELE>T &AME'(>olores( M4LTI+LE> <$+TI$& @AL4E'(r(>-ojo<#$+TI$&> <$+TI$& @AL4E'(g(>@erde<#$+TI$&> <$+TI$& @AL4E'()(>A;ul<#$+TI$&> <#<ELE>T> <B-><B-> <<ELE>T &AME'(>olores( <IKE'(*(> <$+TI$& @AL4E'(r(>-ojo<#$+TI$&> <$+TI$& @AL4E'(g(>@erde<#$+TI$&> <$+TI$& @AL4E'()(>A;ul<#$+TI$&> <#<ELE>T> <B-><B-> <I&+4T T%+E'(su) it(><I&+4T T%+E'(-eset(> <#.$-M> <#B$D%> <#HTML>

    28

    Curso HT ! " C##

    3reas de te&to 0#EP#3-E31 ! botones 0 N$,# #7$E@QsubmitQ1


    $HT !% $H&A'% $T(T!&%&)emplo -A$/T(T!&% $/H&A'% $*+',% $H-%8ormularios$/H-% $8+9 ACT(+:;<prueba.php< &TH+';<2+#T<% $T&BTA9&A C+!#;20 9+C#;-0 :A &;<Te=to<% $/T&BTA9&A% $*9%$*9% $(:27T T,2&;<submit<% $(:27T T,2&;<9eset<% $/8+9 % $/*+',% $/HT !%

    29

    Curso HT ! " C##

    Capas 0div1
    *as capas se pueden definir como pginas que se pueden incrustar dentro de otras. $ropiedades de estilo:
    left ! top: SitEan la esquina superior i(quierda de la capa respecto a la esquina superior i(quierda de la capa donde est+. >idt% ! %eig%t: 4eterminan la anc%ura ! altura de la capa. clip: rea que se podr ver dentro de la capa
    e/: clip:rect( !p" #!p" $!p" %!p"&' recortar la capa creando un cuadro visible cu!a esquina superior i(quierda est a 8R pi&els por la i(quierda ! 9R por arriba de la de la capa ! cu!o tamaKo ser;a de :R=8R de anc%o ! JR=9R de alto. rect(top ri(ht bottom left&

    (=inde&: *as capas con un ma!or (=inde& se colocarn ms arriba visibilit!: visible' %idden (oculta) o in%erit (%ereda la visibilidad de la capa padre)

    30

    Curso HT ! " C##

    CSS
    Separar el formato visual de la pgina del contenido. CSS son las siglas de .Cascade St!leS%eet.. Se trata de una especificacin sobre los estilos f;sicos aplicables a un documento "#)*' ! trata de dar la separacin definitiva de la lgica (estructura) ! el f;sico (presentacin) del documento. HTML Render ><< 31 +antalla

    Curso HT ! " C##

    ntroduccin

    6b/etivos 4ar formato pginas >eb Separar diseKo S contenido Centrali(ar propiedades aspecto ?acilitar mantenimiento diseKo
    32

    Curso HT ! " C##

    Caracter;sticas

    ?ic%ero de te&to ?ormato de pginas "#)*' $"$' ... "erencia de propiedades entre elementos (/erarqu;a) Clases definibles por el usuario
    33

    Curso HT ! " C##

    $ropiedades
    *ongitud (por e/.' mrgenes):
    T=UNNtipo
    NN:
    em (el alto de la ) ma!Escula) e& (la mitad de la altura de la ) ma!Escula) relativas p& (p;&el) pt (puntos) pc (picas) in (inc%es) absolutas mm (mil;metros) cm (cent;metros).

    Color:
    Notacin D--LL55' siendo --' LL' 55 los valores en %e&adecimal de las componentes ro/a' verde ! a(ul del color. Nombre predefinido (>%ite' !ello>...). ,sando la funcin rgb(-'L'5)' donde -' L' 5 son los valores en decimal.

    34

    Curso HT ! " C##

    $ropiedades S ?uente ! #e&to

    35

    Curso HT ! " C##

    $ropiedades S ?ondo ! Clasificacin

    36

    Curso HT ! " C##

    $ropiedades = )arco

    37

    Curso HT ! " C##

    $ropiedades = )arco

    -eferencia: %ttp:22>>>.>:.org2#-2-EC=CSS8
    mar(in) mar(in*left) border) bac+(round) font*famil,...

    38

    Curso HT ! " C##

    $gina de estilos
    e s tilo .c s s p a g in a 1 .% tm l p a g in a 2 .p % p p a g in a 3 .% tm p a g in a 4 .d % tm l

    <html> <head> <link rel=stylesheet href=estilo.css type=text/css> </head> <body> ... </body> </html>

    39

    Curso HT ! " C##

    3plicacin

    3plicacin directa en etiquetas. -edefinicin de etiqueta. Separar "#)* de CSS.

    40

    Curso HT ! " C##

    3plicacin directa en etiquetas


    $HT !% $H&A'% $T(T!&%&)emplo -A$/T(T!&% $/H&A'% $*+',% !a negrita 0ue vemos $* #T,!&;<5ont-siDe:-EptFcolor:re1<% es m.s gran1e y est. en ro)o$/*% $/*+',% $/HT !% !a negrita 0ue vemos es m.s gran1e y est. en ro)o

    41

    Curso HT ! " C##

    -edefinicin de etiqueta
    $HT !% $H&A'% $T(T!&% &)emplo con blo0ue 1e estilo $/T(T!&% <<T%LE T%+E'(te:t#css(> <LFF B$D% M7ontF7a ilB:@erdanaNsansFseri767ontFsi;e::Fs all6 arginFle7t:D.8Gin6 arginFright:D.8GinO H8 M7ontF7a ilB:@erdanaNsansFseri767ontFsi;e:*0!t6color:redO BN TD M7ontF7a ilB:@erdanaNsansFseri767ontFsi;e::Fs all6color:oliIeO TH M7ontF7a ilB:@erdanaNsansFseri767ontFsi;e::Fs all6 color:1hite6)acPgroundFcolor:/DDCD>DO +-EN TTN >$DE M7ontF7a ilB:>ourier &e1N>ourier67ontFsi;e:A!t6color: aroonO ##FF> <#<T%LE> $/H&A'% $*+', *GC+!+9;white% $H2%2rueba 1e 1e5iniciHn 1e estilos en un blo0ue aparte$/H2% Como pue1e verse3 la apariencia 1e esta p.gina 0ue1a completamente 1e5ini1a por los estilos 0ue hemos especi5ica1o en el blo0ue #T,!& en la cabecera 1el 1ocumento. !os m.rgenes son m.s amplios 1e lo habitual3 la $*%negrita$/*% tiene un tamaIo y un color 5i)os3 los troDos 1e te=to en teletipo como $TT%este 5ragmento$/TT% tambi4n tienen 1e5ini1a su 5uente3 tamaIo y color3 y vamos a ver cHmo 0ue1an las tablas3 para 5inaliDar el e)emplo: $2% $C&:T&9% $TA*!& *+9'&9;- C&!!#2AC(:G;2 C&!!2A''(:G;2% $T9% $TH%Cabecera -$/TH% $TH%Cabecera 2$/TH% $/T9% $T9% $T'%Cel1a J-3-K$/T'% $T'%Cel1a J-32K$/T'% $/T9% $/TA*!&% $/C&:T&9% $/*+',% $/HT !%

    42

    Curso HT ! " C##

    Separar "#)* de CSS


    <HTML> <HEAD> <TITLE> Eje !lo con hoja de estilo e:terna <#TITLE> <LI&? -EL'(stBlesheet( T%+E'(te:t#css( H-E.'(eje !lo.css(> <#HEAD> <B$D% B=>$L$-'1hite> <H8>+rue)a de de7iniciQn de estilos en una hoja de estilo e:terna<#H8> >o o !uede IerseN la a!ariencia de esta !,gina Jueda co !leta ente de7inida !or los estilos Jue he os es!eci7icado en el )loJue <T%LE en la ca)ecera del docu ento. Los ,rgenes son ,s a !lios de lo ha)itualN la <B>negrita<#B> tiene un ta aRo B un color 7ijosN los tro;os de te:to en teleti!o co o <TT>este 7rag ento<#TT> ta )iSn tienen de7inida su 7uenteN ta aRo B colorN B Ia os a Ier cQ o Juedan las ta)lasN !ara 7inali;ar el eje !lo: <+> <>E&TE-> <TABLE B$-DE-'* >ELL<+A>I&='8 >ELL+ADDI&='8> <T-> <TH>>a)ecera *<#TH> <TH>>a)ecera 8<#TH> <#T-> <T-> <TD>>elda T*N*U<#TD> <TD>>elda T*N8U<#TD> <#T-> <#TABLE> <#>E&TE-> <#B$D%> <#HTML>

    B$D% M7ontF7a ilB:@erdanaNsansFseri767ontFsi;e::Fs all6 arginFle7t:D.8Gin6 arginFright:D.8GinO H8 M7ontF7a ilB:@erdanaNsansFseri767ontFsi;e:*0!t6color:redO BN TD M7ontF7a ilB:@erdanaNsansFseri767ontFsi;e::Fs all6color:oliIe TH M7ontF7a ilB:@erdanaNsansFseri767ontFsi;e::Fs all6 color:1hite6)acPgroundFcolor:/DDCD>DO +-EN TTN >$DE M7ontF7a ilB:>ourier &e1N>ourier67ontFsi;e:A!t6c

    43

    Curso HT ! " C##

    "erencia de estilos
    E&iste una /erarqu;a de etiquetas que contienen a otras' para darnos una relacin de %erencia:

    <B$D%>

    Herencia 1e estilo

    <+> ... <#+> <DI@> ... <#DI@> ... <#B$D%>

    44

    Curso HT ! " C##

    E/emplo %erencia
    <HTML> <HEAD> <TITLE> Eje !lo * de herencia <#TITLE> <LI&? -EL'(stBlesheet( T%+E'(te:t#css( H-E.'(eje !lo.css(> <#HEAD> <B$D% B=>$L$-'1hite> Todo el te:to tiene de7inido el estilo .uente:@erdanaN Ta aRo::Fs allN Margen i;Juierdo:D.8GinN Margen derecho:D.8GinN <<+A& <T%LE'(color:red(>!ero este tro;o de lHnea es de un color distintoN conserIando el resto de !ro!iedades<#<+A&>N B eso hace interesante la herencia B la !osi)ilidad de ca )iar en !artes concretas los estilos heredados. <#B$D%> <#HTML>

    #V De7iniciQn de estilos en un archiIo a!arte V# #V Estilo !ara el docu ento V# B$D% M7ontF7a ilB:@erdanaNsansFseri767ontFsi;e::Fs all6 arginFle7t:D.8Gin6 arginFright:D.8GinO #V Estilo !ara la ca)ecera de niIel 8 V# H8 M7ontF7a ilB:@erdanaNsansFseri76 7ontFsi;e:*0!t6color:redO #V Estilos !ara otras etiJuetas V# BN TD M7ontF7a ilB:@erdanaNsansFseri767ontFsi;e::Fs all6 color:oliIeO TH M7ontF7a ilB:@erdanaNsansFseri767ontFsi;e::Fs all6 color:1hite6)acPgroundFcolor:/DDCD>DO +-EN TTN >$DE M7ontF7a ilB:>ourier &e1N>ourier6 7ontFsi;e:A!t6color: aroonO

    45

    Curso HT ! " C##

    Estilo en funcin del conte&to


    Si queremos que el te&to en negrita sea de color verde cuando se encuentre en una celda de una tabla' o que sea de color pErpura cuando forme parte de una lista. Esto lo definir;amos como sigue: T' * Lcolor:greenM 7! * Lcolor:purpleM

    46

    Curso HT ! " C##

    Clases
    ,na clase es una definicin de estilo que no est asociado a ninguna etiqueta "#)*' pero que podemos asociar' en el documento' a etiquetas concretas. 4efinimos la clase:
    .NombreVdeVlaVClase Wpropiedad8:valorC...CpropiedadN:valorX

    ,tili(aremos el parmetro C*3SS como sigue:


    0etiqueta C*3SS@.NombreVdeVlaVClase.1 ... 02etiqueta1

    47

    Curso HT ! " C##

    E/emplo clases
    $HT !% $H&A'% $T(T!&% &)emplo 1e uso 1e clases $/T(T!&% $#T,!& T,2&;<te=t/css<% $/-*+', L5ont-5amily:>er1ana3sans-seri5F5ont-siDe:=-smallM 23A3* Lcolor:re1M .*ADul Lcolor:blueM //--% $/#T,!&% $/H&A'% $*+', *GC+!+9;white% &n este e)emplo vamos a ver cHmo se aplican las clases. 2or e)emplo3 $*%esta negrita$/*% utiliDa el estilo 1e5ini1o en el blo0ue3 pero $* C!A##;<*ADul<%esta otra negrita$/*% tiene un color 1istinto. , no sHlo po1emos usar la clase para la negrita. 2or e)emplo3 $#2A: C!A##;<*ADul<%este troDo 1e l6nea tambi4n utiliDa la clase para su estilo particular$/#2A:%. $/*+',% $/HT !%

    48

    Curso HT ! " C##

    Etiquetas
    Cualquier etiqueta "#)* puede tener como parmetro la etiqueta 4 seguida de un nombre:
    0etiqueta 4@.Nombre-eferencia.1 ... 02etiqueta1

    Este .Nombre-eferencia. debe ser Enico en el documento "#)*. $ara definir un estilo mediante un 4:
    DNombreVdelV 4 Wpropiedad8:valorC...CpropiedadN:valorX

    49

    Curso HT ! " C##

    $seudoclases
    "a! ocasiones en las que "#)* da a algunas etiquetas un estilo propio: por e/emplo' los enlaces aparecen por defecto de otro color ! subra!ados. Estos elementos son las pseudoclases. $or a%ora' slo estn definidas para la etiqueta 031. 4efinicin: etiqueta:pseudoclase Wpropiedad8:valorC...CpropiedadN:valorX ! las pseudoclases de que disponemos son: linO Nos dice el estilo de un enlace que no %a sido visitado. visited Nos dice el estilo de un enlace que %a sido visitado. active Nos dice el estilo de un enlace que est siendo pulsado. %over Nos dice el estilo de un enlace sobre el que est pasando el ratn.

    50

    Curso HT ! " C##

    E/emplo pseudoclases
    $or e/emplo' si deseasemos que apareciesen todos los enlaces sin subra!ar' definiriamos los siguientes estilos:
    A'l!n()A'*!+!ted)A'a%t!*e ,te-t.de%orat!on'none/

    *as pseudoclases pueden usarse de forma con/unta con las clases:


    3.NombreClase:pseudoclase

    ! tambi+n se pueden usar en funcin del conte&to. 51

    Curso HT ! " C##

    Enlaces
    -eferencia "#)* J: %ttp:22>>>.>:.org2#-2-EC=%tmlJR2 -eferencia CSS8: %ttp:22>>>.>:.org2#-2-EC=CSS8 Cursos:
    "#)*:
    %ttp:22>>>.programacion.com2%tml2tutorial2curso2 %ttp:22>>>.>ebestilo.com2%tml2

    CSS:
    %ttp:22>>>.programacion.com2%tml2tutorial2css82 %ttp:22>>>.>ebestilo.com2css2

    E/emplos: %ttp:22>>>.domedia.org2oveOl!OOen2articles.p%p Nalidadores: %ttp:22validator.>:.org2

    52

    También podría gustarte