HTML Estático: Hojas de Estilo. HTML Estático: Hojas de Estilo

Tamaño: px

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

Download "HTML Estático: Hojas de Estilo. HTML Estático: Hojas de Estilo"

Marta Iglesias Sáez
hace 6 años
Vistas:

un un párrafo párrafo <p <p style= style= font-size:50;color:green > size:50;color: Esto Esto es

1 escuela técnica superior de ingeniería informática HTML Estático: Hojas de Estilo Departamento de Lenguajes Noviembre 2004 Usando el atributo STYLE dentro de una etiqueta HTML Esto Esto es es un un párrafo párrafo <p <p style= style= font-size:50;color:green > size:50;color: Esto Esto es es un un párrafo párrafo de de color color verde verde y tamaño tamaño de de fuente fuente

tamaño de de fuente fuente 20 20 Usando divisiones dentro del documento (DIV / SPAN) <div <div STYLE="font

2 Usando el atributo STYLE dentro de una etiqueta HTML <p <p style= style= font-size:50;color:green;font-family:verdana > size:50;color: font-family:verdana Esto Esto es es un un párrafo párrafo de de color color verde verde y tamaño tamaño de de fuente fuente Usando divisiones dentro del documento (DIV / SPAN) <div <div STYLE="font STYLE="font-size:20; color:red"> color:red"> esto esto es es un un párrafo párrafo escrito escrito DIV DIV </p> </p> </div </div> 2

</tbody </tbody> </table </table> </div </div> Definiendo el estilo dentro del documento HTML <title <title> Probemos Probemos las las hojas hojas de de

3 Usando divisiones dentro del documento (DIV / SPAN) <div <div STYLE="font STYLE="font-size:80; color:blue"> color:blue"> <table <table BORDER="1" BORDER="1" CELLSPACING="2"> <tbody <tbody> <tr <tr> <td <td> <b>nombre:</b> </b> </td </td> <td <td> Chin Chin Folmato Folmato </td </td> </tr </tr> </tbody </tbody> </table </table> </div </div> Definiendo el estilo dentro del documento HTML <title <title> Probemos Probemos las las hojas hojas de de estilo estilo </title </title> <style <style> P{color:green P{color:green </style </style> <body <body> un un párrago párragoen en verde verde </p> </p> <body <body> 3

4 Definiendo el estilo en otro documento <title <title> este este es es el el título título <title <title> <link <link rel=" rel="stylesheet" type=" type="text/css" text/css href=" href=" tdg-seville info/css default.css" " /> /> default.css body body { background-color: color: #b5c6b5; #b5c6b5; text-decoration text-decoration: none; none; color: color: black; black; font-family font-family: family: Arial, Arial, Helvetica, Helvetica, Verdana, Verdana, Tahoma, Tahoma,, "Times "Times New New Roman", Roman", Times; Times; Cuando haya más de se aplica el estilo más cercano Dentro de las hojas <html> <html> de estilo existen <title>este <title>este este es esel el título título</title> tulo</title> diferentes clases, <style> <style> es decir, variantes  --> </style> </style> <body> <body> <p <p class="roja class="roja"> "> párrafo párrafo rojo rojo </p> </p> </body> </body> <html> <html> 4

5 Propiedades relativas a las fuentes font-family: permite especificar el tipo de la fuente: courier times arial Arial, Verdana, Helvetica, sans-serif,... :// Formato "serif" y "sans-serif Times New Roman es un tipo de letra "serif" Arial es un tipo de letra "sans-serif" font-size: para especificar el tamaño - valores absolutos: xx-small, x-small, small, medium, large, x-large, xx-large - smaller o larger. - cifra: 10, 18, 20, - porcentaje: 25 % quiere decir el 25 por ciento del tamaño que se está usando Propiedades relativas a las fuentes font-stretch: indica el espacio entre letras. condensed, expanded font-style: el estilo que se quiere dar a las fuentes como normal o cursiva (normal, italic) font-weight: el grosor de la fuente: normal, bold (negrita), bolder, lighter ; el valor de normal es de 400 y el de negrita

6 Propiedades relativas al texto color: green, black, white, yelow text-align:left, rigth, center, justify, text-decoration: underline, blink (para que haga que el texto parpadée, NO USAR) Propiedades relativas a los márgenes margin-bottom left right top: 5cm Propiedades relativas a los bordes color: permite indicar el color tanto superior (top), inferior (bottom) y de los laterales (right, left): border-top-color,... border-color. tamaño: permite indicar el grosor del tamaño: borderbottom-width,..., border-width aspecto: permite indicar el tipo de línea que se quiere usar para el borde: border-bottom-style,... border-style: dotted, none, double,... 6

Propiedades relativas a las listas list-style-position: indica si se desea que la marca que etiqueta cada elemento de la lista esté alineado con el texto

. none, circle, disc (default), square, list-style-image: permite poner una imagen como estilo <ul <ul style=" style="list-style-position:inside;list-style-

gif)"> gif)"> <li <li>uno </li </li> <li <li>dos </li </li> <li <li>tres </li </li> </ul </ul> Propiedades relativas al fondo background-image: permite poner una

7 Propiedades relativas a las listas list-style-position: indica si se desea que la marca que etiqueta cada elemento de la lista esté alineado con el texto (inside) o fuera (outside) list-style-type: permite indicar con qué tipo de marca se desea etiquetar cada elemento.. none, circle, disc (default), square, list-style-image: permite poner una imagen como estilo <ul <ul style=" style="list-style-position:inside;list-style- list-style-position inside;list-style- image:url image:url(imagen.gif)"> gif)"> <li <li>uno </li </li> <li <li>dos </li </li> <li <li>tres </li </li> </ul </ul> Propiedades relativas al fondo background-image: permite poner una imagen de fondo. background-color, background: permite indicar el color de fondo: # <html <html> <title <title> este este es es el el título título </title </title> <style <style> BODY BODY { background-image: url(us url(us.gif) us.gif ) </style </style> <body <body> > </body </body> > <html< <html> 7

8 Propiedades relativas a la dimensión height: establece la altura de un elemento width: establece la anchura de un elemento. Pseudo-clases relativas a los enlaces a:link: especifica cómo se ha de mostrar un enlace que aún no ha sido visitado. a:visited: especifica cómo se ha de mostrar un enlace que ha sido visitado. a:link{ font-size:20;color:blue a:hover { text-decoration: underline; color: red; red; font-size:40 a:hover: cómo mostrar un enlace que tiene el ratón encima pero que aún no se ha pinchado. a:active: especifica como mostrar un enlace que se ha pinchado con el ratón. 8

9 style.css body body { background: white; font-family: verdana, Arial; font-size:12; a:link { text-decoration:; color:; background:; p{ p{ color:; font-family:; 9

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 mtorres@ual.es Departamento de Lenguajes y Computación Universidad de Almería Desarrollo de aplicaciones web 1. Características y ventajas de 2. Sintaxis