Capítulo 3 Estilo para un documento HTML: CSS.3.0 Qué es el estilo?!"#$ "!$ &'!$!($ ) *+ " *, -.,#/-..3.1 Propiedades y valores 0 )" & + 1& &1& 2 " '"
Medidas: 3 + 14 "56 1'#/ 1/5-7 3 1 1 + 1' Colores: ) * 8 ' ", 66"99. :996666 :669966 + :666666 :999999 2 * :99;66 7 " < 1 < 1:996666 " 3 " Nombre Hexadecimal Nombre Hexadecimal beige #F5F5DC lightsalmon #FFA07A black #000000 lime #00FF00 blue #0000FF magenta #FF00FF brown #A52A2A navy #000080 coral #FF7F50 olive #808000 cyan #00FFFF orange #FFA500 darkblue #00008B palegreen #98FB98 darkgreen #006400 pink #FFC0CB darkorange #FF8C00 purple #800080 darkred #8B0000 red #FF0000 fuchsia #FF00FF salmon #FA8072 gray #808080 tomato #FF6347 green #008000 white #FFFFFF lightgreen #90EE90 yellow #FFFF00 8 7 " :99=5>? ) 8 "8 3 :99@@>?) A :++@@5?3" A " 8 :999999
Propiedades relativas a la representación de los caracteres: Propiedad Controla: Valores típicos color Color del texto Colores font-size Tamaño de la letra Cualquier medida entera, general o específica para letras font-weight Espesor del trazo Cualquier medida entera o normal, o bold font-style inclinación Normal (defecto), Italic, oblique font-family Tipo de glifo Serif, sans-serif, cursive, monoespace, fantasy,.. & 88 + 1&1'& 7 3 '8 ' /66B 8 8//66B3 '6;#? Propiedades relativas al contenido del elemento: Propiedad Controla: Valores típicos text-align Colocación del texto Center, left, right padding Tamaño del margen interno, o Medidas separación entre el borde del elemento y su contenido background- Color del fondo Colores color backgroundimage Imagen para el fondo +! $ 1 URL Propiedades relativas al contorno del elemento: Propiedad Controla: Valores típicos border-width Anchura de las líneas que Medidas dibujan el borde del elemento border-color Color de las líneas que forman Colores el borde border-style Aspecto de las líneas que forman el borde None, dotted, dashed, solid, double margin Tamaño del margen externo o medidas separación entre el borde de este elemento y los elementos adyacentes + 1
Propiedades relativas a posición y visibilidad Propiedad Controla: Valores típicos position Forma de medir la posición Absolute, relative top Distancia hacia arriba Medidas left Distancia hacia la izquierda Medidas width Anchura del elemento Medidas height Altura del elemento Medidas z-index Orden de superposición de capas 1, 2, 3, 4, 5,... visibility Si se visualiza o no Visible, hidden display Cómo y dónde se visualiza Block, inline, none.3.2 El atributo STYLE 2 )C+,. + <P STYLE= background-color:green; color:blue; > " 7!D)C+EF F$"! $,. 7 " " * 3 8!0GH$!)7I$* + <DIV STYLE= font-size:16pt > <P>texto que se verá con letra grande.</p> <TABLE><TR><TD>Esto tambien se verá con letra grande </DIV>.3.3 El elemento STYLE de HEAD 2)C+ 8 +0 )C+ <HEAD>.. <STYLE> P { font-size:14pt; color:blue; } TABLE { background-color:palegreen } </STYLE> " 8 #>' 8
<HEAD> <STYLE> TABLE { border-width:10px; border-color:blue; } TD { background-color:palegreen; } </STYLE> + ".3.4 Estilo en fichero separado: css ) ' " *,2 ))".+" " @<0I8 JK )C+ +0 )8 " 8 GIL +0H 9" #" <html><head> <link rel= stylesheet type= text/css href= estilo1.css > </head> <body> <p>esto es un párrafo que vemos en azul.. </body></html> 9"# P { font-size:14pt; color:blue; } TABLE { background-color:palegreen } H2 { font-size:18pt; color:red; }.3.5 La cascada + M + 2 F" " &A 2 " " 8 ' 8 8 9"# table {background-color:palegreen; color:blue;}
9" #" <html><head><link rel="stylesheet" type="text/css" href="es1.css"></head> <body><table> <tr><td>castellón</td><td>valencia</td><td>alicante</td></tr> <tr><td>huesca</td><td>zaragoza</td><td>teruel</td></tr> </table> <p>fondo verde y letra azul segun hoja de estilo es1.css</p> </body></html> 9" /" <html><head><link rel="stylesheet" type="text/css" href="es1.css"> <style> table {background-color:yellow}</style> </head> <body> <table> <tr><td>barcelona</td><td>tarragona</td><td>lleida</td><td>girona</td> </tr> <tr><td>a Coruña</td><td>Ourense</td><td>Lugo</td><td>Pontevedra</td></tr> </table> <p>la letra azul se establece en la hoja de estilo es1.css. También se establece allí el fondo verde, pero queda anulado por el elemento style en head de este documento</p> </body></html> 9" 5" <html><head><link rel="stylesheet" type="text/css" href="es1.css"> <style> table {background-color:yellow}</style> </head> <body> <table> <tr><td>barcelona</td><td>tarragona</td><td>lleida</td><td>girona</td> </tr> <tr><td>a Coruña</td><td>Ourense</td><td>Lugo</td><td>Pontevedra</td></tr> <tr style="color:red"><td colspan=2>cáceres</td><td colspan=2>badajoz</td></tr> </table> <p>la letra azul se establece en la hoja de estilo es1.css. También se establece allí el fondo verde, pero queda anulado por el elemento style en head de este documento. El color azul de letra, se cambia a rojo solo en una fila de la tabla, la que contiene el atributo style para ello</p> </body></html>
.3.6 Facilidades en la expresión del estilo Clases 7 * * 7 8 8 8 8 8 <P CLASS= normal >nnn nnnn nnn <P CLASS= impor >iii iiii iiii <P CLASS= compl >cccccccccccc cccc +" 2)))C+ +0 8' P.normal {font-size..} P.impor {font-size } P.compl {font-size..} G + * '.urgente { color:red } MF <p class= urgente > <h2 class= urgente > <td class= urgente > Pseudoclases para enlaces 0!$ )' a:linkj*k a:visitedj K a:hoverj* "K + a.impor:visitedj--k #dcontrol a:linkj--k
Estilo individual 7 A ) : #entra { } MF7 8 <p id= entra > a a a a a a a </p> N73' A O7 '* " 2)) )" 2))' Estilo para elementos anidados ' div p { }83 div p.impor { }8 3 div.ficha p { }83 " div.ficha p span { }3 83 " #entra span.remarca { } 3 Un estilo para muchos elementos 7 JK ' P, td.impor,.urgente h3, #entra { } *** *+ 8 "53, "5.
.3.7 Bibliografía P202))/Q 7/66/ 78 " P2R*0 84P)2))D/66; 2#/#S;1/// T' D2U7"4" 2))))/66= 28 " 0)9 2))"RVD/66= 23 '*8 2 "W)2)))/66?