Capítulo 3 Estilo para un documento HTML: CSS

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Capítulo 3 Estilo para un documento HTML: CSS"

Elvira Olivares Villalba
hace 10 años
Vistas:

1 Capítulo 3 Estilo para un documento HTML: CSS.3.0 Qué es el estilo?!"#$ "!$ &'!$!($ ) *+ " *, -.,#/ Propiedades y valores 0 )" & + 1& &1& 2 " '"

2 Medidas: "56 1'#/ 1/ ' Colores: ) * 8 ' ", 66"99. : : : : * :99;66 7 " < 1 < 1: " 3 " Nombre Hexadecimal Nombre Hexadecimal beige #F5F5DC lightsalmon #FFA07A black # lime #00FF00 blue #0000FF magenta #FF00FF brown #A52A2A navy # coral #FF7F50 olive # cyan #00FFFF orange #FFA500 darkblue #00008B palegreen #98FB98 darkgreen # pink #FFC0CB darkorange #FF8C00 purple # darkred #8B0000 red #FF0000 fuchsia #FF00FF salmon #FA8072 gray # tomato #FF6347 green # white #FFFFFF lightgreen #90EE90 yellow #FFFF " :99=5>? ) 8 "8 3 :99@@>?) A :++@@5?3" A " 8 :999999

#00FF00 blue #0000FF magenta #FF00FF brown #A52A2A navy #000080 coral #FF7F50 olive #808000 cyan #00FFFF orange #FFA500 darkblue #00008B palegreen #98FB98

3 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,.. & &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

cursive, monoespace, fantasy,.. & 88 + 1&1'& 7 3 '8 ' /66B 8 8//66B3 '6;#?

4 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 )C+ <HEAD>.. <STYLE> P { font-size:14pt; color:blue; } TABLE { background-color:palegreen } </STYLE> " 8 #>' 8

.. 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$"!

5 <HEAD> <STYLE> TABLE { border-width:10px; border-color:blue; } TD { background-color:palegreen; } </STYLE> + ".3.4 Estilo en fichero separado: css ) ' " *,2 ))".+" 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;}

+" " @<0I8 JK )C+ +0 )8 " 8 GIL +0H 9" #" <html><head> <link rel= stylesheet type= text/css href= estilo1.

6 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>

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

7 .3.6 Facilidades en la expresión del estilo Clases 7 * * <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

impor {font-size } P.compl {font-size..} G + * '.

8 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.

impor { }8 3 div.ficha p { }83 " div.ficha p span { }3 83 " #entra span.

9 .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?

Documentos relacionados

CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos

CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos Desarrollo de aplicaciones web Manuel Torres Gil [email protected] Departamento de Lenguajes y Computación Universidad de Almería Desarrollo de aplicaciones web 1. Características y ventajas de 2. Sintaxis