DiseñO Web Taller 3
0 recomendaciones526 vistas
El documento describe las propiedades y valores que se pueden usar para dar estilo a elementos de texto en HTML y CSS. Explica cómo se pueden modificar propiedades como color, tamaño de fuente, tipo de fuente, negrita, subrayado, etc. Además, muestra ejemplos de código HTML con la sintaxis de estilo incorporada para ilustrar los diferentes estilos que se pueden aplicar.
DiseñO Web Taller 3
- 1. <style type="text/css"> body { font-family: Verdana,Arial,sans-serif; font-size: 15px; color: #111111; text-align: justify; background-color: #063306;} h1 { margin-left: 80px; margin-top: 20px; font-size: 180%; color: #338433;} h2, h3 { font-family: Georgia,Times,serif; font-size: 150%; color: #a52a2a; margin-top: 0; margin-left: 30px;} h3 { color: #916908;} p { margin: 35px; line-height: 1.5em; text-indent: 15px;} img { border: 2px solid #005b00; margin: 10px; float: right;} div.cuerpo { margin: 0 20px 20px; background-color: #f3f3f3;} .azul { font-weight: bold; color: #3333ff;} </style> propiedad: valor; propiedad: valor1 valor2 valor3; color:red; font-size:120%
- 2. Head <style type="text/css"> ... </style> body body body { font-family: Verdana,Arial,sans-serif; font-size: 15px; color: #111111; text-align: justify; background-color: #063306;} H1 h1 { margin-left: 80px; margin-top: 20px; font-size: 180%; color: #338433;} H1 Body H2 H3 H3 H3 p Body p .azul {font-weight: bold; color: #3333ff;} span <p> En esta web encontrarás <span class="azul">información </span>sobre nuestra institución y una colección de fotografías de las instalaciones.</p>
- 3. font-family font-family: arial font- family: "Times New Roman"; font-family:Georgia, "Times New Roman", Times, serif; font-size font-style normal oblique italic font-weight normal bold text-decoration none underline overline line-through blink text-transform uppercase lowercase capitalize none font-variant small-caps normal
- 4. <html> <head> <title>Estilo del Texto</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> </head> <body> <h1 style="font-size:100%">Éste es un h1 del mismo tamaño que un párrafo normal.</h1> <p>Éste es un párrafo normal.</p> <p style="color:red">Éste párrafo es de color rojo, con algunas palabras en <span style="color:blue">azul</span>.</p> <p>Podemos cambiar la fuente: <span style="font-family:serif;">y poner este texto en serif</span>, <span style="font-family:sans-serif;">esta parte en sans-serif</span>, <span style="font- family:cursive;"> la familia de esta palabra es cursive</span>, <span style="font- family:fantasy;">también tenemos fantasy</span>, <span style="font-family:monospace;">y acabamos con monospace</span>. </p> <p style="font-weight:bold; text-decoration:underline">Este párrafo (<span style="font-weight: normal; text-decoration: none;">menos esta parte</span>) está en negrita y subrayado. <span style="text-decoration:overline">Este fragmento, además sobrerrayado</span>.</p> <p style="text-transform:lowercase;"><span style="font-size:85%;">ÉSTE,</span> ESTÁ <span style="font-size:110%;">ESCRITO TODO </span><span style="font-size:120%;">EN MAYÚSCULAS</span>, <span style="font-size:130%;">Y ADEMÁS VA</span><span style="font-size:140%;"> CRECIENDO.</span></p> </body> </html> style <style type="text/css"> ... </style> <head> <link href="hoja_de_estilo.css" rel="stylesheet" type="text/css" /> href rel stylesheet alternate stylesheet