Scribd Logo
Upload

Welcome to Scribd!

  • Untitled

    Uploaded by

    Oscar Flores
    16 views16 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    16 views16 pages

    Untitled

    Uploaded by

    Oscar Flores

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 16

    Estilos CSS Los estilos CSS son usados para configurar una pgina web definiendo la apariencia y colocacin

    de sus diferentes elementos, ofreciendo la ventaja de que si modific amos un estilo se actualizarn automticamente todos los elementos a los que se haya aplicado. Podemos incluir estilos CSS en nuestras pgina web de dos formas, tal y como hemos indicado en nuestro Tutorial de HTML: usando la etiqueta HTML <style> dentro de <head>, o bien creando un archivo de Hoja de Estilos CSS (normalmente con exten sin .css) y enlazndolo a la pgina web con la etiqueta <link>. Lo recomendable es tenerlos en un archivo externo, puesto que con ello separamos el contenido (el archivo .html) de la presentacin (el archivo .css): de este mod o podremos usar la misma Hoja de Estilos CSS desde varias pginas web sin tener qu e repetir cdigo en cada una de ellas. Durante el presente curso de CSS usaremos de base las siguientes pginas web (el cd igo CSS debers guardarlo en un archivo de Hoja de Estilos aparte llamado 'estilos .css', en la misma carpeta en que est el .html anterior). Tambin puedes descargarlos, junto con los de la seccin Ejemplos con CSS haciendo c lick aqu. index1.html: copytextpop-up <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>

    <body>

    <p>Esta es una lnea.</p> <p>Esta es una lnea.</p>

    <span id="rojo">Este texto est en rojo.</span><br/>

    <span class="verde">El texto de esta lnea est en verde.</span><br/> <span class="verde">Esta lnea est en verde tambin.</span><br/> <span class="verde">Y esta tambin est en verde.</span>

    </body> </html> <html> <head>

    <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <body> <p>Esta es una lnea.</p> <p>Esta es una lnea.</p> <span id="rojo">Este texto est en rojo.</span><br/> <span class="verde">El texto de esta lnea est en verde.</span><br/ > <span class="verde">Esta lnea est en verde tambin.</span><br/> <span class="verde">Y esta tambin est en verde.</span> </body> </html> Collapse Code Expand Code index2.html: copytextpop-up <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>

    <body>

    <p>Este prrafo est dentro del body y fuera del div.</p>

    <div> <p>El texto de esta lnea est en rojo.</p> <span class="verde">Esta lnea est en verde.</span> </div>

    </body> </html> <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" />

    </head> <body> <p>Este prrafo est dentro del body y fuera del div.</p> <div> <p>El texto de esta lnea est en rojo.</p> <span class="verde">Esta lnea est en verde.</span> </div> </body> </html> Collapse Code Expand Code index3.html: copytextpop-up <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>

    <body>

    <div id="div1"> <p>Esto es un prrafo.</p> </div>

    <div id="div2"> <p>Esto es otro prrafo.</p> </div>

    </body> </html> <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <body>

    <div id="div1"> <p>Esto es un prrafo.</p> </div> <div id="div2"> <p>Esto es otro prrafo.</p> </div> </body> </html> Collapse Code Expand Code index4.html: copytextpop-up <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>

    <body>

    <div id="div1"> <span>Esto es un prrafo.</span> </div>

    <div id="div2"> <span>Esto es otro prrafo.</span> </div>

    </body> </html> <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <body> <div id="div1">

    <span>Esto es un prrafo.</span> </div> <div id="div2"> <span>Esto es otro prrafo.</span> </div> </body> </html> Collapse Code Expand Code index5.html: copytextpop-up <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>

    <body>

    <p>Lista desordenada:</p> <ul id="lista1"> <li>Opcin 1</li> <li>Opcin 2</li> <li>Opcin 3</li> </ul>

    <p>Lista ordenada:</p> <ol id="lista2"> <li>Opcin 1</li> <li>Opcin 2</li> <li>Opcin 3</li> </ol>

    </body>

    </html> <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <body> <p>Lista desordenada:</p> <ul id="lista1"> <li>Opcin 1</li> <li>Opcin 2</li> <li>Opcin 3</li> </ul> <p>Lista ordenada:</p> <ol id="lista2"> <li>Opcin 1</li> <li>Opcin 2</li> <li>Opcin 3</li> </ol> </body> </html> Collapse Code Expand Code index6.html: copytextpop-up <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>

    <body>

    <a href="http://www.google.es/">Ir a Google</a><br/> <a href="http://www.yahoo.es/">Ir a Yahoo</a>

    </body> </html> <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>

    <body> <a href="http://www.google.es/">Ir a Google</a><br/> <a href="http://www.yahoo.es/">Ir a Yahoo</a> </body> </html> Collapse Code Expand Code index7.html: copytextpop-up <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or g/TR/html4/loose.dtd" > <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>

    <body>

    <table border="1"> <caption>I. Tabla de ejemplo</caption>

    <thead> <tr> <th>AO</th> <th>VENTAS</th> </tr> </thead>

    <tbody> <tr> <td>2010</td> <td>100.000</td>

    </tr> <tr> <td>2011</td> <td>110.000</td> </tr> </tbody>

    <tfoot> <tr> <td>TOTAL</td> <td>210.000</td> </tr> </tfoot>

    </table>

    </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or g/TR/html4/loose.dtd" > <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <body> <table border="1"> <caption>I. Tabla de ejemplo</caption> <thead> <tr> <th>AO</th> <th>VENTAS</th> </tr> </thead> <tbody> <tr> <td>2010</td> <td>100.000</td> </tr>

    <tr> <td>2011</td> <td>110.000</td> </tr> </tbody> <tfoot> <tr> <td>TOTAL</td> <td>210.000</td> </tr> </tfoot> </table> </body> </html> Collapse Code Expand Code index8.html: copytextpop-up <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or g/TR/html4/loose.dtd" > <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>

    <body>

    <a href="http://www.google.es/">Ir a Google</a>

    </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or g/TR/html4/loose.dtd" > <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <body> <a href="http://www.google.es/">Ir a Google</a>

    </body> </html> Collapse Code Expand Code index9.html: copytextpop-up <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>

    <body>

    <div>Texto en el div</div>

    <span>Este texto est dentro del body y fuera del div</span>

    </body> </html> <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <body> <div>Texto en el div</div> <span>Este texto est dentro del body y fuera del div</span> </body> </html> Collapse Code Expand Code index10.html: copytextpop-up <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or g/TR/html4/loose.dtd" > <html> <head>

    <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>

    <body>

    <div> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> </div>

    </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or g/TR/html4/loose.dtd" > <html>

    <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <body> <div> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p> </div> </body> </html> Collapse Code Expand Code index11.html: copytextpop-up <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or g/TR/html4/loose.dtd" > <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>

    <body>

    <div id="div1"> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> <p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ips um</p> </div>

    <div id="div2"> <p>Esto es otro prrafo.</p> </div>

    </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or g/TR/html4/loose.dtd" > <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>

    <body> <div id="div1"> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> </div> Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum

    - Lorem - Lorem - Lorem - Lorem - Lorem - Lorem - Lorem - Lorem - Lorem - Lorem - Lorem - Lorem

    <div id="div2"> <p>Esto es otro prrafo.</p> </div> </body> </html> Collapse Code Expand Code index12.html: copytextpop-up <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or g/TR/html4/loose.dtd" > <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head>

    <body>

    <div id="div1"> <div id="div2"> <p>Este div est dentro del otro</p> </div> </div>

    </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or g/TR/html4/loose.dtd" > <html> <head> <title>Tutorial CSS</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <body> <div id="div1"> <div id="div2"> <p>Este div est dentro del otro</p> </div> </div> </body> </html> Collapse Code Expand Code Lamentablemente no todos los navegadores web soportan todas las caracters ticas del estndar CSS del mismo modo, siendo Internet Explorer el que ms problemas ocasiona a los maquetadores web debido a ello (aunque en las ltimas versiones ha n mejorado su soporte). Si deseamos poner comentarios en el cdigo CSS hemos de escribirlos entre /* y */. Acceder a las etiquetas HTML desde CSS Lo primero que tenemos que aprender es cmo acceder a elementos HTML desde CSS. Pa ra ello, en la siguiente imagen de ejemplo observa que en el cdigo CSS, para acce der a un elemento HTML se escribe el nombre de un selector y luego el cdigo CSS d eseado entre llaves: Hemos usado los siguientes tipos de selectores: Selector [1] y [2]: para acceder a una determinada etiqueta HTML todas las veces que aparezca en la pgina web, simplemente tenemos que escribirla como selector. Selector de ID ([3]): para acceder a una etiqueta HTML que tiene asignado un id (no debe haber ms de una con el mismo en el cdigo HTML). Selector de clase ([4]): para acceder a las etiquetas HTML que tienen asignada u na determinada clase CSS. Otra forma de acceder a un elemento HTML es usando un selector descendente como

    vemos en el cdigo fuente del siguiente ejemplo. En el cdigo CSS asignamos un color azul al texto de la etiqueta HTML <p> que se e ncuentra dentro del <div> (en la que est fuera no se realizan cambios). En caso de necesitar acceder desde CSS a elementos HTML <input>, los cuales pued en ser de varios tipos (text, button, submit...) podemos hacerlo del modo indica do en el siguiente cdigo CSS de ejemplo: copytextpop-up input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; }

    input[type="button"] { width:120px; margin-left:35px; display:block; } input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type="button"] { width:120px; margin-left:35px; display:block; } Tambin podemos agrupar varios selectores separndolos con comas. En el siguiente cdi go CSS definimos que los textos en las etiquetas HTML <p> y <span> deben mostrar se en color azul: En este ejemplo hemos usado selectores normales, pero podemos hacerlo con cualqu ier otro tipo de ellos. copytextpop-up p, span { color:blue; }

    You might also like