MAGIA CSS

Document Sample
MAGIA CSS Powered By Docstoc
					019-023_CSS_Linux12    08.11.2005     11:46   Uhr   Página   19




                                                                                                               CSS • PORTADA



         El mejor HTML con Cascading Style Sheets


         MAGIA CSS



         Las hojas de estilo en cascada (Cascading Style Sheets, CSS) nos ayudan a sacar brillo a nuestras páginas

         Web sin tener que hacer un complicado curso de programación. POR KRISTIAN KISSLING



         A
                 principios de los 90, lo único        Para resolver el problema, el World      No tenemos que ser programadores para
                 que se esperaba del HTML era       Wide Web Consortium (W3C)[1] aprobó         trabajar con CSS.
                 que renderizara texto y propor-    en 1996 la primera versión de las hojas        Supongamos que tenemos una página
         cionara enlaces. Las funcionalidades de    de estilo en cascada (CSS). Las CSS pro-    HTML y que hemos definido un color
         diseño llegaron más tarde debido a los     porcionan un medio flexible para definir    para el enlace de texto en una etiqueta
         lobbies de la industria. La consecuencia   elementos de estilo. Podemos usar CSS       <body>.
         es lo que tenemos hoy en día: tablas con   para conseguir un control más granular y
         columnas increíblemente largas y defini-   eficiente de nuestros diseños Web. Nos       <body link="#000000" U
         ciones de tipos de letra chapuceras. El    permiten definir un diseño para cada ele-    alink="#CCCCCC" U
         diseño para un texto de 100 caracteres     mento HTML, incluso para una sola            vlink="#666666">
         puede requerir el doble de código HTML.    letra. Podemos cambiar el tamaño de
                                                    cada elemento, crear un marco y añadir      Debido a que no podemos cambiar el
         Listado 1: Ejemplo de HTML                 espacio. En este artículo daremos un        color de un único enlace usando HTML,
          01 <p>
                                                    repaso de la versión actual de CSS, la      todos nuestros enlaces se mostrarán de
          02 <b>Red</b> is a beautiful
                                                    Version 2.1. Necesitaremos un cierto        ese color. Con CSS podemos, sin embar-
             color. <a
                                                    conocimiento de HTML para seguir este       go, manipular los enlaces individual-
             href="http://www.example.org">
                                                    artículo.                                   mente de manera sencilla:
             Sentences like this</a> are
          03 <br> often used by Web
                                                    Ahorra Esfuerzo, Ahorra                      <a href=U
             Designers to demonstrate their
                                                    Tiempo                                       "http://www.linuxmagazine.com"U
                                                    Para escribir hojas de estilo en cascada,    style="color: white; U
             layouts.<br> The content
                                                    todo lo que realmente necesitamos es un      text-decoration: none;">
             should be pointless
          04 <b>pointless</b>, to avoid
                                                    editor de textos estándar. El editor de
             distracting the observer <br>
                                                    KDE, Kate, verifica automáticamente         El elemento style contiene las propieda-
             from the layout.
                                                    nuestra sintaxis. Aunque la verificación    des de diseño para el enlace. Éste ahora
          05 </p>
                                                    de ésta puede no ser estrictamente nece-    será blanco (color: white;) y sin subraya-
          06 These b-Tags are
                                                    saria, es magnífico tenerla, teniendo en    do (text-decoration: none).
             <b>outside</b> the p-Tags.
                                                    cuenta que CSS, en contraste con HTML,        Veamos otro ejemplo. Imaginemos que
                                                    no funcionará si la sintáxis es errónea.    tenemos varias páginas de texto llenas



                                                        WWW.LINUX-MAGAZINE.ES                                       Número 12        19
019-023_CSS_Linux12      08.11.2005      11:46       Uhr    Página   20




      PORTADA • CSS




                                                       para apreciar el poder de CSS 2.1. La
                                                       tabla en [3] nos indica qué navegadores
                                                       soportan las propiedades de las CSS.

                                                       ¿Dentro o Fuera?
                                                       Existen tres métodos para añadir defini-      Figura 2: Usamos un editor de textos como
                                                       ciones de estilos a nuestro propio HTML.      Kate, para componer rápidamente una pági-
                                                       Ya conocemos uno de ellos: podemos            na HTML estándar. Un enlace en la cabecera
                                                       añadir las definiciones a las etiquetas del   integra un archivo de hojas de estilo externo.
                                                       código fuente HTML.                           El “body” es simple texto de muestra.


                                                           $A href=U                                 un trozo de texto, una imagen o incluso
                                                           "www.linuxmagazine.com" U                 una sola letra. CSS crea un cuadro (véase
      Figura 1: Los parámetros de anchura y altura         style="color: #FFFFFF; U                  la Figura 1) que comprende el contenido,
      fijan el tamaño y anchura del elemento en sí         text- decoration: none;"U                 el relleno interno, el borde y los márgenes
      mismo. Para calcular la anchura y altura del         This is a link $/A                        exteriores. El borde en sí mismo tiene un
      cuadro completo, añadimos los valores de                                                       efecto en el ancho total. El margen es la
      relleno, bordes y margen, y los duplicamos.      El elemento style introduce el código CSS     distancia entre el borde y el cuadro veci-
                                                       que sigue. Tenemos que poner las propie-      no. Podemos modificar el relleno, el mar-
      de citas textuales (blockquote), y quere-        dades entre comillas y separarlas con sig-    gen y el borde de casi cualquier elemento.
      mos cambiar el tipo de letra para resaltar       nos de punto y coma. Un segundo método           El cálculo del ancho total de un cuadro
      las citas. Para ello, normalmente abriría-       consiste en definir el diseño de la página    requiere algo de matemáticas. Dado un
      mos todas nuestras páginas HTML y usa-           en una etiqueta $style dentro de la cabece-   elemento con un ancho de 12 píxeles, 3 de
      ríamos la herramienta de búsqueda y              ra de la página, de la manera siguiente:      relleno, 1 de borde y 4 de margen, el
      reemplazamiento para hacer los cam-                                                            ancho total del elemento serían 28 píxeles:
      bios. Por supuesto, este método no es                <head>                                    12 (contenido) + 6 píxeles (relleno
      muy eficiente. Con CSS, sólo tendríamos                <title>                                 izquierdo y derecho) + 2 píxeles (bordes
      que modificar una sola línea en el archi-                My webpage                            izquierdo y derecho) + 8 (márgenes
      vo central de CSS.                                     </title>                                izquierdo y derecho) lo que nos da 28
                                                               <style type="text/css">               píxeles en total. Con CSS, al contrario que
        blockquote U                                           h1 {color: red;}                      con HTML, nosotros definimos los bordes,
        {font-family: Arial, U                               </style>                                relleno y márgenes de manera individual
        Helvetica, Courier;}                               </head>                                   para cada página. Para añadir un marco
                                                                                                     por encima de un elemento podríamos
      Todos los archivos HTML que usen la              Un tercer método es poner las hojas de        introducir border-top: 1px solid black;.
      hoja de estilo central pasan a usar uno          estilo en un archivo separado. Esto nos       padding-right: 10px; lo cual modificaría el
      de los tres tipos de letra especificados         ofrece la ventaja de integrar las hojas de    relleno del elemento a su derecha. CSS
      para las citas textuales. CSS puede aho-         estilo usando un solo enlace en la cabe-      distingue así mismo entre elementos de
      rrarnos un montón de codificación                cera de la página HTML. En otras pala-        bloque e incrustados. Los elementos de
      manual. Al mismo tiempo, nos ofrece              bras, todas nuestras páginas HTML             bloque crean párrafos, mientras que los
      una herramienta para definir y modificar         toman su diseño de un único archivo lla-      elementos incrustados pueden ser parte
      la apariencia de elementos recurrentes           mado sheet1.css.                              de un elemento de bloque, pero no crean
      de manera centralizada. Podemos inclu-                                                         un párrafo. La etiqueta $b es un elemento
      so crear una hoja de estilo alternativa              <head>                                    incrustado típico. La etiqueta display:
      que optimice nuestro HTML a la hora de               <link rel="stylesheet" U
      imprimir. Si un usuario quisiera entonces            type="text/css" U                           Listado 2: Constructor de
      imprimir una página, se habilita una                 href="sheet1. css" U                              Contenedores
      hoja de estilo que elimina los menús y               title="test" media="screen">
                                                                                                      01   div.container_central {
      las imágenes del texto, escala los tipos             </head>
                                                                                                      02   position: fixed;
      de letra o los cambia.
                                                                                                      03   top: 0%; left: 30%;
        Csszengarden [2] nos ofrece una                No es necesario abrir cada archivo
                                                                                                      04   background: #CCCCCC;
      buena idea de qué es lo que podemos              HTML para modificar la apariencia de la
                                                                                                      05   width: 400px;
      hacer con una sosa página HTML. Los              página Web. En su lugar, sólo tenemos
                                                                                                      06   height: 600px;
      visitantes pueden diseñar sus propias            que modificar el archivo CSS al que hace
                                                                                                      07   color: red;
      hojas de estilo para tener un completo           referencia la página.
                                                                                                      08   border: 1px solid black;
      documento HTML. Los asombrosos
                                                                                                      09   padding: 20px;
      resultados demuestran la capacidad               La Vida en un Cuadro
                                                                                                      10   overflow: scroll;
      gráfica de CSS. Dicho esto, necesitare-          ¿Qué ocurre cuando aplicamos CSS a un
                                                                                                      11   }
      mos un navegador bastante reciente               único elemento de HTML? Por ejemplo,




      20        Número 12                                    WWW.LINUX-MAGAZINE.ES
019-023_CSS_Linux12     08.11.2005       11:46   Uhr    Página   21




                                                                                                                      CSS • PORTADA




                                                                                                       Figura 5: El diseño puede no llegar a los
                                                                                                       estándares de los diseñadores Web profesio-
         Figura 3: Página común y corriente. Sin una                                                   nales, pero es suficientemente bueno para
         hoja de estilo o etiquetas de diseño HTML      Figura 4: Unas pocas instrucciones cambian     demostrar cómo se puede modificar el tipo
         tendremos letras negras con los remarques      la página por completo. Las secciones con      de letra.
         en negrita. Los enlaces se subrayan en azul,   las etiquetas b se muestran en rojo y con un
         tal y como se define en las preferencias.      tamaño de letra diferente.                      type="text/css" U
                                                                                                        href="sheet1.css" U
         block; puede convertir un elemento             plo. En primer lugar creamos un archivo         title="sheet1">
         incrustado en uno de bloque. display: inli-    HTML con las típicas etiquetas como             </head>
         ne; hace justamente lo contrario.              <html>, <head> y <body>, y las
                                                        guardamos como index.html (véase la            Sin la información del diseño, el navega-
         Poner Bonito Nuestro                           Figura 2). Ahora tecleamos el breve texto      dor mostraría el texto de index.html con
         HTML                                           del Listado 1 como el <body> del archi-        letras grandes y negras, con los fragmen-
         Como las páginas Web básicamente               vo, incluyendo todas las etiquetas.            tos etiquetados con < b > en negrita y
         transportan información en texto forma-          Abrimos un nuevo archivo con Kate y          los enlaces subrayados en azul (véase la
         teado, enfoquémonos en el diseño del           lo guardamos como sheet1.css en el             Figura 3). Para modificar el tipo de letra,
         texto sin CSS. Dejamos a elección del          mismo directorio. Podemos integrar la          color y tamaño, debemos editar ahora el
         lector la decisión de guardar las instruc-     hoja de estilo usando un enlace a la           archivo sheet1.css:
         ciones en CSS en un archivo separado o         cabecera de index.html:
         bien usar alguno de los otros métodos                                                          01 b {
         comentados. Nosotros hemos elegido un           <head>                                         02   font-family: Arial,
         archivo externo para el siguiente ejem-         <link rel="stylesheet" U                         Helvetica,Courier;
019-023_CSS_Linux12      08.11.2005      11:46       Uhr    Página   22




      PORTADA • CSS




      Figura 6: Bananas. La imagen está flotando en la zona superior          Figura 7: Pedimos disculpas a los diseñadores gráficos por esto, pero
      izquierda. La distancia de 20 píxeles hasta el texto es cortesía del    al menos demuestra el método. Podemos asignar imágenes de fondo a
      “margin-right”.                                                         la mayoría de los elementos HTML.


        03   font-size: 130%;                              letter-spacing: 2px;                       olvidarnos de añadir una definición para
        04   color: red;                                   line-height: 25px;                         manipular las imágenes:
        05   font-weight: bold;                            text-align: center;
        06   font-style: italic;                           vertical-align: top;                        img {
        07   }                                                                                             width:50px;
        08                                             El texto en el interior de la etiqueta              height:50px;
        09 p {                                         <p> cambia apreciablemente (véase                   float: left;
        10   font-size: 16px;                          Figura 5). letter-spacing cambia el espa-           margin-right: 20px;
        11   }                                         cio entre letras y line-height cambia el            margin-bottom:0px;
                                                       espacio entre líneas. Las siguientes dos        }
      Ahora, cuando abramos el archivo                 propiedades alinean el texto, text-align
      index.html en nuestro navegador, vere-           selecciona la posición horizontal del          float: left; posiciona la imagen a la
      mos la diferencia en las instrucciones del       texto, que puede ser center, right, left o     izquierda. Los valores width y height
      diseño que ha realizado la hoja de estilo        justify. Por su parte, vertical-align se       escalan la imagen al tamaño requerido, y
      (véase Figura 4). Podemos usar                   encarga de la posición vertical. En nues-      margin-right: 20px; añade un margen
      font-family para especificar qué fuente          tro ejemplo, el texto ajusta con top enci-     entre el borde derecho de la imagen y el
      elegirá nuestro navegador para mostrar           ma del bloque vecino. Las otras posicio-       texto (véase la Figura 6).
      el texto. Los navegadores bajo Windows           nes pueden ser middle y bottom.                   Los diseños más atractivos dependen a
      probablemente elegirán Arial, mientras                                                          menudo de las imágenes de fondo.
      que los de Mac usarán Helvetica y los            Para Enmarcar                                  Creamos       una     imagen     llamada
      Linux Courier. Si el navegador no tiene          El punto más interesante acerca de CSS         bgimage.jpg en el directorio principal y
      ninguno de estos tipos de letra instala-         es que podemos diseñar cada elemento           modificamos las propiedades del ele-
      dos, el tipo de letra será el predetermina-      de manera individual. Por ejemplo,             mento p en la hoja de estilo.
      do. La propiedad font-size nos permite           podemos añadir border: 1px solid
      fijar el tamaño del tipo de letra. El nave-      #000000; al elemento b en nuestra hoja          background-image: U
      gador generalmente adopta un font-size           de estilo. Todo lo que etiquetemos con <        url(bgimage.jpg); U
      del 100% del tipo de letra prefijado. Sin        b > se rodeará por un marco negro con           background-position: center; U
      embargo, el código HTML tiene una eti-           una línea continua de un solo píxel.            background-position: top;
      queta <p> con un tamaño de tipo de               Podemos modificar el marco, por                 background-repeat: no-repeat; U
      letra de 16 píxeles a continuación de la         supuesto, cambiando el tipo de línea con        background-attachment: fixed;
      etiqueta < b >. El tamaño de tipo de             puntos o rayas. Si sólo necesitamos un
      letra se basa en el tamaño del elemento          marco para una sola página, podemos            Aparece una imagen de fondo detrás del
      padre. Por lo tanto, si los 16 píxeles de la     especificar border-left: 1px dashed red; o     texto (véase la Figura 7). Debido al pará-
      etiqueta <p> suponen el 100% para la             border-bottom: 1px dotted green;.              metro background-repeat: no-repeat; la
      etiqueta < b >, un font-size del 130%              La propiedad float nos ayuda con la          imagen sólo se muestra una vez. Las
      suponen 20.8 píxeles.                            posición de las imágenes. Creamos una          propiedades background-position: center;
         Los colores se cambian justamente igual       imagen llamada testfig.jpg y la guardamos      y background-position: top; centran el
      que con HTML. Podemos especificarlos             en el mismo directorio que nuestro archi-      gráfico y lo ajustan al borde superior del
      tanto con un nombre de color como con un         vo index.html. Podemos añadir ahora la         elemento vecino, al mismo tiempo que
      valor hexadecimal como #FFFFFF para la           imagen al archivo HTML con la etiqueta         lo      mantiene         visible.     Con
      propiedad color. La propiedad font-weight        <p>:                                           background-attachment: fixed; consegui-
      nos ayuda a habilitar un tipo de letra en            <img src="testfig.jpg">                    mos que la imagen se quede clavada
      negrita. Podemos seleccionar un valor para                                                      pase lo que pase. CSS nos permite añadir
      bolder, lighter o normal. La opciones            Para usar el efecto, en primer lugar justi-    imágenes de fondo a una gran variedad
      font-style son italic, normal u oblique.         ficamos el texto. Luego nos vamos a la         de elementos, incluyendo enlaces.
      Ahora añadimos cuatro líneas adicionales         hoja de estilo y borramos la propiedad            Podemos cambiar el color de fondo para
      dentro de las llaves para la etiqueta p:         text-align: center; para el elemento p sin     el enlace, eliminar los adornos del mismo




      22        Número 12                                    WWW.LINUX-MAGAZINE.ES
019-023_CSS_Linux12    08.11.2005      11:47   Uhr    Página   23




                                                                                                                     CSS • PORTADA




         o asignarle un marco simplemente con                                                        etiquetas pertenecen a la clase .word, de
         modificar la hoja de estilo principal:                                                      nuevo en el archivo index.html.
                                                                                                     Cualquier etiqueta que especifiquemos
          a:link { color: white; U                                                                   como class="worr" asumirá automática-
          background-color: #CCCCCC; U                                                               mente los valores de la clase .word, es
          text-decoration:none; }                                                                    decir, se volverá azul.
                                                                                                        Podemos diseñar también nuestras
          a:hover { color: white; U                                                                  propias etiquetas con CSS. Para ello, en
          background-color: red; U                                                                   primer lugar definimos la nuestra propia
          text-decoration:none; }                                                                    en la hoja de estilo, por ejemplo redletter
                                                                                                     {color: red;}. Añadiendo <redletter>
          a:active { color: orange; U                                                                cualquier texto </redletter> a nuestro
          text-decoration:none; }                     Figura 8: Esquema del árbol de jerarquía en    archivo HTML colorearemos el texto
                                                      el código HTML, mostrando los elementos        entre las etiquetas rojas.
          a:visited { color: grey; U                  hermanos, padre e hijo.
          background-color: red; U                                                                   Amor de Contenedor
          text-decoration:none; }                      * { color:violet; }                           Si decidimos construir un sitio completo
                                                                                                     usando hojas de estilo, definitivamente
         Los enlaces sin usar aparecen ahora en       Podemos añadir estos cuatro secciones          tiene sentido construir containers. Para
         blanco con fondo gris. Si posicionamos       alternativamente a nuestra hoja de estilo,     ello, dividimos nuestra página Web en
         el ratón sobre un enlace, el fondo se        activando diferentes efectos. El selector de   sectores fijos usando la propiedad posi-
         vuelve rojo, y el texto naranja. Los enla-   contexto de la primera línea muestra cual-     tion, etiquetas <div> y clases.
         ces que hayamos visitado cambian su          quier etiqueta dentro de las etiquetas         Añadimos las líneas del Listado 2 a nues-
         color a gris con fondo blanco. ¿Qué          <p> en verde. El selector de hijos de la       tra hoja de estilo. Luego ponemos las eti-
         pasa si necesitamos aún algunos enla-        segunda línea colorea el elemento de           quetas <div> alrededor del contenido
         ces en azul y negro? ¡Y definitivamente      azul si es un hijo directo, en contraposi-     de la etiqueta <body> en el archivo
         no queremos todas nuestras imágenes          ción de si es un simple descendiente de        index.html:
         clavadas a la izquierda de la página! En     <p>. El signo + de la tercera línea aplica
         este caso, podemos recurrir al poder de      el formateo a los elementos siguientes a        <body>
         la herencia.                                 <p> y descendiendo desde el mismo ele-          <div class="container_central">
                                                      mento padre. En nuestro ejemplo, el ele-        ...
         ¡Ojo a los Crios!                            mento de la línea 2 cumple estas condi-         </div>
         Un elemento padre precede al elemento        ciones. Sigue a <p> y tiene el mismo            </body>
         hijo que lo rodea. La etiqueta < b > en      elemento padre, la etiqueta <body>,
         el archivo index.html es el elemento hijo    por lo que el texto dentro de las etique-      El contenido de la página está dentro del
         de <p> que en definitiva es el elemento      tas se muestran en naranja. La cuarta          contenedor <div>. Esto significa que
         hijo de <body>. La etiqueta <body>           línea colorea cualquier elemento que no        podemos definir tantos contenedores
         es el ancestro del elemento <img>, o         tenga asignación específica de color.          como queramos y ahorrar marcos y
         dicho de otra forma: el elemento                                                            tablas.
         <img> es el descendiente de <body>           ¡Un Trabajo Con Clase!                            Como la propiedad position contiene
         (pero no su hijo). Los elementos herma-      Los selectores de clase, o simplemente         el valor de fixed, el contenedor se ajusta
         nos están al mismo nivel, como el ele-       clases para abreviar, nos ofrecen la capa-     a una posición fija, al 0% del borde
         mento <p> y el tercer elemento < b >         cidad de dirigir cada hoja de estilo indi-     superior y al 30% del borde izquierdo de
         de la imagen (véase Figura 8).               vidualmente. Para ello, añadimos la            la pantalla. width y height nos permiten
            Lo interesante de la herencia es que      siguiente línea a la hoja de estilo:           definir el área. Podemos fijar el color del
         los elementos hijos generalmente here-                                                      tipo de letra a rojo y aplicar 20 píxeles de
         dan las propiedades de sus padres. Por        *.word {color: blue;}                         padding para asegurarnos de que tene-
         ejemplo, una imagen no necesita usual-                                                      mos suficiente espacio entre el contenido
         mente más espacio que la tabla o celda       Ahora abrimos el archivo index.html y          y el borde.                               I
         en la que esté ubicada. El elemento hijo     cambiamos el texto así:
         < b > hereda el tamaño de tipo de letra                                                                  RECURSOS
         de <p>. La herencia puede darnos una          ... as <b class="word">U
                                                                                                      [1] Páginas CSS de la W3C: http://www.
         gran ventaja, ya que permite pasar pro-       non-descript</b> U
                                                                                                          w3.org/Style/CSS/
         piedades a través de las secciones.           as possible ...
                                                                                                      [2] CSS    al   máximo:       http://www.
         Existen varios métodos para esto:
                                                                                                          csszengarden.com/
                                                      En primer lugar, creamos un valor
                                                                                                      [3] Verificación de compatibilidad del
          p b { color:green; }                        {color: blue;}, que se asignará a todas las
                                                                                                          navegador: http://www.css4you.de/
          p > b { color:blue; }                       etiquetas (*) pertenecientes a la clase
                                                                                                          browsercomp.html
          p + b { color:orange; }                     .wort. El segundo paso es establecer qué



                                                          WWW.LINUX-MAGAZINE.ES                                           Número 12         23