Buscar Más buscado

Completo tutorial de CSS - Usos de las CSS y II

4 - Usos de las CSS y II

[editar]
Tutorial creado por Indaya.com. Extraido de: http://www.indaya.com
11 de Septiembre de 2005
< anterior | 1 ... 2 3 4 5 6 7 8 ... 11 | siguiente >
Estilo definido para toda una página
Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la página. Es una manera muy cómoda de darle forma al documento y muy potente, ya que estos estilos serán seguidos en toda la página y nos ahorraremos así muchas etiquetas HTML que apliquen forma al documento. Además, si deseamos cambiar los estilos de la página lo haremos de una sola vez.
Este ejemplo es más complicado, puesto que se utiliza la sintaxis CSS de manera más avanzada. Pero no te preocupes puesto que con los ejemplos irás aprendiendo su uso y más tarde comentaremos la sintaxis en profundidad.
En el ejemplo vemos que se utiliza la etiqueta
colocada en la cabecera de la página para definir los distintos estilos del documento. <br><br /><br><br />A grandes rasgos, entre de <STYLE> y

, se coloca el nombre de la etiqueta que queremos definir los estilos y entre llaves -{}- colocamos en sintaxis CSS las características de estilos. 
<html>
<head>
 <title>Ejemplo de estilos para toda una
p&aacute;gina</title>
 <STYLE type="text/css">
 <!
 H1 {text-decoration: underline; text-align:center}
 P {font-Family:arial,verdana; color: white; background-color:
black}
 BODY {color:black;background-color: #cccccc; text-indent:1cm}
  -->
 </STYLE>
</head>
<body>
<h1>P&aacute;gina con estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera, pero esto es un ejemplo sin
m&aacute;s importancia</p>
</body>
</html>

Como se puede apreciar en el código, hemos definido que la etiqueta se presentará






  • Subrallado
  • Centrada

También, por ejemplo, hemos definido que el cuerpo entero de la página (etiqueta ) se le apliquen los estilos siguientes:






  • Color del texto negro
  • Color del fondo grisaceo
  • Margen lateral de 1 centímetro




Caber destacar que si aplicamos estilos a la etiqueta , estos serán heredados por el resto de las etiquetas del documento. Esto es así siempre y cuando no se vuelvan a definir esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta más concreta será el que mande. Puede verse este detalle en la etiqueta

, que tiene definidos estilos que ya fueron definidos para . Los estilos que se tienen en cuenta son los de la etiqueta

, que es más concreta.
Por último, ha de apreciarse los comentarios HTML que engloban toda la declaración de estilos: . Estos comentarios se utilizan para que los navegadores antiguos, que no comprenden la sintaxis CSS, no incluyan ese texto en el cuerpo de la página. Si no se pusiera, los navegadores antiguos (por ejemplo Netscape 3) escribirían ese "feo código" en la página.
Hemos preparado la misma página, pero con declaraciones de estilos distintas, para que comprobéis las diferencias en la forma del documento con sólo unos cambios en sus estilos.
Estilo definido para todo un sitio web
Una de las características más potentes de la programación con hojas de estilos consiste en que, de una vez, podemos definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo.
De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas. Con las ventajas añadidas de que se ahorra en líneas de código HTML (lo que reduce el peso del documento) y se evita la molestia de definir una y otra vez los estilos con el HTML, tal como se comentó anteriormente.
Veamos ahora cómo el proceso para incluir estilos con un fichero externo.
1- Creamos el fichero con la declaración de estilos
Es un fichero de texto normal, que puede tener cualquer extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es decir, sería erroneo incluir código HTML en el: etiquetas y demás. Podemos ver un ejemplo a continuación.  

||
||
||
|| P  {
 font-size : 12pt;
 font-family : arial,helvetica;
 font-weight : normal;
}
H1  {
 font-size : 36pt;
 font-family : verdana,arial;
 text-decoration : underline;
 text-align : center;
 background-color : Teal;
}
TD  {
 font-size : 10pt;
 font-family : verdana,arial;
 text-align : center;
 background-color : 666666;
}
BODY  {
 background-color : #006600;
 font-family : arial;
 color : White;
}
  ||
|| ||
||





2- Enlazamos la pána web con la hoja de estilos
Para ello, vamos a colocar la etiqueta
con los atributos






  • rel="STYLESHEET" indicando que el enlace es con una hoja de estilos
  • type="text/css" porque ela archivo es de texto, en sintaxis CSS
  • href="estilos.css" indica el nombre del fichero fuente de los
    estilos




Veamos una página web entera que enlaza con la declaración de estilos anterior: 


||
||
||
|| <!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.0 TransitionalEN">
<html>
<head>
 <link rel="STYLESHEET" type="text/css" href="estilos.css">
 <title>P&aacute;gina que lee estilos</title>
</head>
<body>
<h1>P&aacute;gina que lee estilos</h1>
Esta p&aacute;gina tiene en la cabecera la etiqueta necesaria para
enlazar con la hoja de estilos. Es muy f&aacute;cil.
<br>
<br>
<table width="300" cellspacing="2" cellpadding="2" border="0">
<tr>
    <td>Esto est&aacute; dentro de un TD,
luego tiene estilo propio, declarado en el fichero externo</td>
</tr>
<tr>
    <td>La segunda fila del TD</td>
</tr>
</table>
</body>
</html>
||
|| ||
||

Reglas de importancia en los estilos
Los estilos se heredan de una etiqueta a otra, como se indicó anteriormente. Por ejemplo, si tenemos declarado en el unos estilos, por lo general, estas declaraciones también afectatarán a etiquetas que estén dentro de esta etiqueta, o lo que es lo mismo, dentro de todo el cuerpo.
En muchas ocasiones más de una declaración de estilos afecta a la misma porción de la página. Siempre se tiene en cuenta la declaración más particular. Pero las declaraciones de estilos se pueden realizar de múltiples modos y con varias etiquetas, también entre estos modos hay una jerarquía de importancia para resolver conflictos entre varias declaracionesde estilos distintas para una misma porción de página. Se puede ver a continuación esta jerarquía, primero ponemos las formas de declaración más generales, y por tanto menos respetadas en caso de conflicto:





  • Declaración de estilos con fichero externo. (Para todo un sitio web)
  • Declaración de estilos para toda la página. (Con la etiqueta ) en la cabecera de la página) </li><br /> <li>Estilos definidos en una parte de la página. (Con la etiqueta <DIV>) </li><br /> <li>Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en cuestión) </li><br /> <li>Declaración de estilo para una porción pequeña del documento. (Con la etiqueta <SPAN>) </li><br /></ul><br /><p>Ya vimos cómo incluir estilos en la página, de todas las maneras posibles e hicimos un repaso con la lista anterior. Ahora estás en condiciones de empezar a usar las hojas de estilo en cascada para mejorar tus páginas y aumentar la productividad de tu trabajo. Pero estate atento a los siguientes capítulos donde aprenderás las lecciones que te faltan para dominar bien la materia: conocer la sintaxis, los distintos atributos de estilos y otras cosas que mejorarán tus páginas. <br><br /></p><br /><table width="100%"><br /> <tr><br /> <td alig="left" width="50%"><a href="http://www.indaya.com/modules/sections/index.php?op=viewarticle&artid=181"><img align="left" border="0" src= "images/atras.gif" width="35" height="35"></a></td><br /><td align="right" width="50%"><a href="http://www.indaya.com/modules/sections/index.php?op=viewarticle&artid=183"><img align="right" border="0" src= "images/sigue.gif" width="35" height="35"></a><br /></td><br /> </tr><br /> </table><br /><br /><table width='100%' border='0' cellspacing='0' cellpadding='2'><tr><td><a href="index.php">Volver a Tutoriales</a></td> <td align='right'><a href="index.php">Volver a Tutoriales</a></td></tr></table></td></tr>
<tr><td align='center'>[ <a href='index.php?op=listarticles&secid=8'>Volver a CSS</a> |
<a href='index.php'>Volver a Tutoriales</a> | <a href='index.php?op=printpage&artid=182'><img src= 'http://www.indaya.com/modules/sections/images/print.gif" alt="image" />' border='0' alt='Inprimir Pagina' /></a>]</td></tr></table>
</div>
<br />
<table width="98%" cellpadding="3" cellspacing="0" align="center">
<tr>
<td class="centercolumn" valign="top" colspan="2">
<div class="centercolumn">
<!-- Start center-center blocks loop -->
<!-- End center-center blocks loop -->
</div>
</td></tr>
</table>
</td>
<td class="rightcolumn" valign="top" align="right" style="background-image: url(http://www.indaya.com/themes/x2t/bg_right.gif);"><div class="rightcolumn">
<!-- Start right blocks loop -->
<div class="blockTitle">Gente Online</div>
<div class="blockContent"><div align="center"><b>8</b> user(s) are online (<b>1</b> user(s) are browsing <b>Tutoriales</b>)<br /><br /><img src= http://www.wikilearning.com/imagescc/4461/online_members.gif" alt="image" /> width="16" height="16" alt=" " border="0" />&nbsp;Members: 0<br /><img src= http://www.wikilearning.com/imagescc/4461/online_guests.gif" alt="image" /> width="16" height="16" alt=" " border="0" />&nbsp;Guests: 8<br /><br /> <a href="javascript:openWithSelfMain('http://www.indaya.com/misc.php?action=showpopups&amp;type=online','Online',420,350);">more...</a></div></div> <div class="blockTitle">Nuevos Miembros</div>
<div class="blockContent"><marquee behavior="scroll" direction="up" width="100%" height="100" scrollamount="1" scrolldelay="60" onmouseover="this.stop()" onmouseout="this.start()">
<table width="100%" class="subType" border="0" cellpadding="0" cellspacing="1">
<tr>
<td align="center" class="mediumRow">
<a href="http://www.indaya.com/userinfo.php?uid=12362">niko</a>
</td>
<td align="center" class="mediumRow">2005/9/11</td>
</tr>
<tr>
<td align="center" class="darkRow">
<a href="http://www.indaya.com/userinfo.php?uid=12349">debianita</a>
</td>
<td align="center" class="mediumRow">2005/9/11</td>
</tr>
<tr>
<td align="center" class="mediumRow">
<a href="http://www.indaya.com/userinfo.php?uid=12346">kakolu</a>
</td>
<td align="center" class="mediumRow">2005/9/11</td>
</tr>
<tr>
<td align="center" class="darkRow">
<a href="http://www.indaya.com/userinfo.php?uid=12345">jjk1</a>
</td>
<td align="center" class="mediumRow">2005/9/11</td>
</tr>
<tr>
<td align="center" class="mediumRow">
<a href="http://www.indaya.com/userinfo.php?uid=12331">daya_apesta</a>
</td>
<td align="center" class="mediumRow">2005/9/10</td>
</tr>
<tr>
<td align="center" class="darkRow">
<a href="http://www.indaya.com/userinfo.php?uid=12324">jhonn</a>
</td>
<td align="center" class="mediumRow">2005/9/10</td>
</tr>
<tr>
<td align="center" class="mediumRow">
<a href="http://www.indaya.com/userinfo.php?uid=12315">said_t</a>
</td>
<td align="center" class="mediumRow">2005/9/10</td>
</tr>
<tr>
<td align="center" class="darkRow">
<a href="http://www.indaya.com/userinfo.php?uid=12304">The Mask</a>
</td>
<td align="center" class="mediumRow">2005/9/10</td>
</tr>
<tr>
<td align="center" class="mediumRow">
<a href="http://www.indaya.com/userinfo.php?uid=12298">kozul</a>
</td>
<td align="center" class="mediumRow">2005/9/10</td>
</tr>
<tr>
<td align="center" class="darkRow">
<a href="http://www.indaya.com/userinfo.php?uid=12293">Alejandro_Stay1</a>
</td>
<td align="center" class="mediumRow">2005/9/10</td>
</tr>
</table>
</marquee></div> <div class="blockTitle">Encuesta</div>
<div class="blockContent"><form action="http://www.indaya.com/modules/xoopspoll/index.php" method="post">
<table width="100%" class="subType" border="0" cellpadding="2" cellspacing="1">
<tr>
<td align="center" colspan="2" class="darkRow" width="100%"><input type="hidden" name="poll_id" value="11" /><b>Crees que la nueva version de IE sea mejor que las anteriores?</b></td>
</tr>
<tr class="even">
<td align="center" width="1%"><input type="checkbox" name="option_id[]" value="58" /></td>
<td align="left" width="99%">Por supuesto que si.</td>
</tr>
<tr class="odd">
<td align="center" width="1%"><input type="checkbox" name="option_id[]" value="59" /></td>
<td align="left" width="99%">Se ve mucho mas grafico.</td>
</tr>
<tr class="even">
<td align="center" width="1%"><input type="checkbox" name="option_id[]" value="60" /></td>
<td align="left" width="99%">Se ve mejor pero sigue siendo la misma ...</td>
</tr>
<tr class="odd">
<td align="center" width="1%"><input type="checkbox" name="option_id[]" value="61" /></td>
<td align="left" width="99%">Quiza traiga mejoras, pero por ahora no las veo.</td>
</tr>
<tr class="even">
<td align="center" width="1%"><input type="checkbox" name="option_id[]" value="62" /></td>
<td align="left" width="99%">Es la misma vieja con maquillaje.</td>
</tr>
<tr class="odd">
<td align="center" width="1%"><input type="checkbox" name="option_id[]" value="63" /></td>
<td align="left" width="99%">Hasta que no cumpla los requerimientos de W3C sera MALA</td>
</tr>
<tr>
<td align="center" colspan="2" class="mediumRow" width="100%"><input type="submit" value="Votar!" class="formButton" /> <input type="button" value="Resultados" onclick="location='http://www.indaya.com/modules/xoopspoll/pollresults.php?poll_id=11'" class="formButton" /></td>
</tr>
</table>
</form>
<br />
</div> <div class="blockTitle">TITULARES</div>
<div class="blockContent"><a href="http://e.ututo.org.ar" target="_blank">UTUTO</a><br />
<ul>
<li><a href="https://www.ututo.org/xp/modules/news/article.php?storyid=177" target="_blank">Nuevas Herramientas Libres</a></li>
<li><a href="https://www.ututo.org/xp/modules/news/article.php?storyid=176" target="_blank">Como conectarse a la red internet usando IPv6</a></li>
<li><a href="https://www.ututo.org/xp/modules/news/article.php?storyid=175" target="_blank">UTUTO Project site over IPV6 protocol</a></li>
<li><a href="https://www.ututo.org/xp/modules/news/article.php?storyid=174" target="_blank">UTUTO FreeTV is here</a></li>
<li><a href="https://www.ututo.org/xp/modules/news/article.php?storyid=173" target="_blank">New Server for UTUTO Project</a></li>
<li><a href="https://www.ututo.org/xp/modules/news/article.php?storyid=172" target="_blank">Radio Ututo Internacional</a></li>
<li><a href="https://www.ututo.org/xp/modules/news/article.php?storyid=171" target="_blank">Solar y UTUTO en FISL 6.0 por InfomediaTV</a></li>
<li><a href="https://www.ututo.org/xp/modules/news/article.php?storyid=163" target="_blank">UTUTO XS Upgrade to 2005.2 (Security and other upgrades)</a></li>
<li><a href="https://www.ututo.org/xp/modules/news/article.php?storyid=170" target="_blank">Intel/64 optimization in UTUTO for next release</a></li>
<li><a href="https://www.ututo.org/xp/modules/news/article.php?storyid=169" target="_blank">UTUTO CD with LinuxPro in Italy!!</a></li>
</ul>
</div> <div class="blockTitle">Patrocinador</div>
<div class="blockContent"><table align=center>
<tr align=center><td align=center>
<iframe src="http://delivery.geopromos.com/rotation/?99951.19421@3" frameborder="no" border="0" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="no" width="120" height="600"><a href=http://www.geopromos.com/escaparate/noiframehref.asp?99951.19421 target=_blank><img src= http://www.geopromos.com/escaparate/noiframeimg.asp?3 width=120 height=600 border=0></a><br><a href=http://www.geopromos.com>Programas de afiliados gestionados por Geopromos.com: ganar dinero con pago por click (CPC), sms, dialers...</a></iframe>
</td></tr></table></div> <!-- End right blocks loop -->
</div>
</td>
</tr>
<tr>
<td colspan="3" width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="10"><img src= http://www.wikilearning.com/imagescc/4461/hbar_left.gif" alt="image" /> width="10" height="23" alt=" " /></td>
<td style="background-image: url(http://www.indaya.com/themes/x2t/hbar_middle.gif);" align="center">&nbsp;<span class="copyright">Copyleft © 2002-2004 Indaya teaM derechos publicados bajo licencia <a href="http://gnu.org/copyleft/fdl.es.html" target="_blank">GNU/FDL</a></span></td>
<td width="10"><img src= http://www.wikilearning.com/imagescc/4461/hbar_right.gif" alt="image" /> width="10" height="23" alt=" " /></td></tr>
</table>
</td></tr></table>
<script type="text/Javascript">
<!--
istat = new Image(1,1);
istat.src = "http://indaya.com/modules/istats/include/counter.php?sw="+screen.width+"&sc="+screen.colorDepth+"&refer="+escape(document.referrer)+"&page="+location.href;
-->
</script>
</body>
</html>
[editar]
< anterior | 1 ... 2 3 4 5 6 7 8 ... 11 | siguiente >

Opinar
3 opiniones

COMPLETO TUTORIAL DE CSS

En estas páginas de CSS pretendemos dar a conocer la tecnología con un enfoque práctico para que en pocos capítulos podáis usar las CSS de una manera depurada
wet

stt
ñ

ñl{l

Tutoriales relacionados con 'Completo tutorial de CSS'

Completo tutorial de CSS
En estas páginas de CSS pretendemos dar a conocer la tecnología con un enfoque práctico... Más »
Completo tutorial de HTML
Bienvenidos al manual de HTML de Indaya.A través de todos estos capítulos vamos a descubrir... Más »
CSS - Hojas de estilo
Con CSS puedes formatear tus páginas web separando completamente el contenido de la presentación. Es... Más »
Manual de HTML para principiantes
¿Quieres hacerte una página web y no sabes ni por dónde empezar? Aquí tienes lo... Más »
Cómo hacer zoom con una sóla imagen
Este tutorial, está basado en el artículo Fast rollovers, no preload needed y en el... Más »

Anuncios Google

Autor y licencia de 'Completo tutorial de CSS'


Tutorial de Indaya.com. Extraido de: http://www.indaya.com CopyLeft
Licencia GNU Free Documentation License: http://www.gnu.org/copyleft/fdl.html
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.