Moderador del foro: ZorG  
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » CSS para los novatos
CSS para los novatos
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 4:09 PM
Así que comencemos, compadres.
Primero marcamos los puntos que vamos a examinar en este tema:

• ¿Qué es CSS?
• ¿Cómo se trabaja con éste?
• ¿Cómo se sube a la página?
• Ejemplos simples

1. ¿Qué es CSS?

CSS, las hojas de estilo en cascada (Cascading Style Sheets en Inglés), son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).

© Wiki.

2. ¿Cómo se trabaja con éste?

ES muy fácil trabajar con CSS, sólo hay que saber sus propiedades.
Ejemplo: width, height, line-height, color, background, font-size, font-family, letter-spacing etc...

3. ¿Cómo se sube a la página?

Se puede subir de varios modos.

Subir del archivo #1

<link rel="stylesheet" type="<span style="color:blue">text/css" href="/nombre.css"></span>

Subir del archivo #2

<style type="text/css" media="<span style="color:blue">all">@import "/nombre.css";</style></span>

Directamente en el documento HTML

<style type="text/css">
html {
width: 100%;
height: 100%;
}

body {
color: blue;
}
</style>

A un elemento determinado

<div style="color: red;">U.helper</div>

4. Ejemplos simples

- Configuramos el color de la fuente en toda la página:

* { color: silver }

//En toda la página la fuente será plateado

- Configuramos el color determinado de la fuente:

div#helper { color: red }

//Con el div con id helper la fuente será roja

- Fondo del documento:

div#helper { background: red url('enlace al fondo'); background-repeat: no-repeat/repeat-x/repeat-y}

//Con el div con id helper se configura el fondo requerido

- Enlaces:

a:link {color: red;}
a:hover {color: blue;}

//Los enlaces tendrán color rojo, pero al poner el ratón sobre éstos, serán azules


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 2 | 5:20 PM
Introducción a las CSS

Entramos en materia con los antecedentes de esta tecnología, las razones por las que se han desarrollado las hojas de estilo en cascada, y los objetivos que trata de cumplir.

El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fue concebido para otros usos (científicos sobretodo), distinto a los actuales, mucho más amplios.

Para solucionar estos problemas los diseñadores han utilizado técnicas tales como la utilización de tablas imágenes transparentes para ajustarlas, utilización de etiquetas que no son estándares del HTML y otras. Estas "trampas" han causado a menudo problemas en las páginas a la hora de su visualizaciónen distintas plataformas.

Además, los diseñadores se han visto frustrados por la dificultad con la que, aun utilizando estos trucos, se encontraban a la hora de maquetar las páginas, ya que muchos de ellos venían maquetando páginas sobre el papel, donde el control sobre la forma del documento es absoluto.

Finalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnología consiste en que las páginas web tienen mezclado en su código HTML el contenido del documento con las etiquetas necesarias para darle forma. Esto tiene sus inconvenientes ya que la lectura del código HTML se hace pesada y difícil a la hora de buscar errores o depurar las páginas. Aunque, desde el punto de vista de la riqueza de la información y la utilidad de las páginas a la hora de almacenar su contenido, es un gran problema que estos textos estáen mezclados con etiquetas incrustadas para dar forma a estos: se degrada su utilidad.

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, reflejando toda nuestra experiencia en su uso. No pretendendemos explorar todos los aspectos de la tecnología ya que para realizar esto necesitaríamos un la extensión de un libro entero.

Características y ventajas de las CSS

Conoce las principales características del lenguaje, su potencia y sus posibilidades.

El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que le aplicaremos a:
- Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.
- Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la cabecera, a toda la página.
- Una porción del documento, aplicando estilos visibles en un trozo de la página.
- Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul, con margenes, sin ellos...

La potencia de la tecnología salta a la vista. Pero no solo se queda aquí, ya que además esta sintaxis CSS permite aplicar al documento formato de modo mucho más exacto. Si antes el HTML se nos quedaba corto para maquetar las páginas y teníamos que utilizar trucos para conseguir nuestros efectos, ahora tenemos muchas más herramientas que nos permiten definir esta forma:

• Podemos definir la distancia entre líneas del documento.
• Se puede aplicar identado a las primeras líneas del párrafo.
• Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.
• Y mucho más, como definir la visibilidad de los elementos, margenes, subrayados, tachados...

Y seguimos mostrando ventajas, ya que si con el HTML tan sólo podíamos definir atributos en las páginas con pixeles y porcentajes, ahora podemos definir utilizando muchas más unidades como:
• Pixels (px) y porcentaje (%), como antes.
• Pulgadas (in)
• Puntos (pt)
• Centímetros (cm)

Navegadores que lo soportan

Esta tecnología es bastante nueva, por lo que no todos los navegadores la soportan. En concreto, sólo los navegadores de Netscape versiones de la 4 en adelante y de Microsoft a partir de la versión 3 son capaces de comprender los estilos en sintaxis CSS. Además cabe destacar que no todos los navegadores implementan las mismas funciones de hojas de estilos, por ejemplo, Microsoft Internet Explorer 3 no soporta todo lo relativo a capas.

Esto quiere decir que debemos de usar esta tecnología con cuidado, ya que muchos usuarios no podrán ver los formatos que apliquemos a las páginas con CSS. Así pues, utilizad las hojas de estilos cuando estas no vayan a suponer un problema.

Usos de las CSS – I

Describimos las distintas aplicaciones de las Hojas de Estilo en cascada. En este capítulo veremos las más sencillas.

Vamos ahora a describir los diferentes usos de las CSS introducidos en el anterior capítulo. Vamos por orden, describiendo los puntos según su dificultad e importancia.

Hemos partido este capítulo en dos partes por su extensión y por haber varias formas distintas de aplicar estilos, aquí veremos las más sencillas y en el capítulo siguiente otras más complicadas pero más potentes.

Pequeñas partes de la página

Para definir estilos en secciones reducidas de una página se utiliza la etiqueta <SPAN>. Con su atributo style indicamos en sintaxis CSS las características de estilos. Lo vemos con un ejemplo, pondremos un párrafo en el que determinadas palabras las vamos a visualizar en color verde.

Quote
<p>
Esto es un párrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>. resulta muy fácil.
</p>

Que tiene como resultado:
Esto es un párrafo con varias palabras en color verde. resulta muy fácil.

Estilo definido para una etiqueta

De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por ejemplo, podemos definir un párrafo entero en color rojo y otro en color azul. Para ello utilizamos el atributo style, que es admitido por todas las etiquetas del HTML (siempre y cuando dispongamos de un navegador compatible con CSS).

Quote
<p style="color:#990000">
Esto es un párrafo de color rojo.
</p>
<p style="color:#000099">
Esto es un párrafo de color azul.
</p>

Que tiene como resultado:
Esto es un párrafo de color rojo.
Esto es un párrafo de color azul.

Estilo definido en una parte de la página

Con la etiqueta <DIV> podemos definir secciones de una página y aplicarle estilos con el atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la página.

Quote
<div style="color:#000099; font-weight:bold">
<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>

Que tiene como resultado:

Estas etiquetas van en azul y negrita
Seguimos dentro del DIV, luego permanecen los etilos

Usos de las CSS - II

Te describimos los usos más avanzados de las hojas de estilo en cascada. Para poder utilizarlas de la manera más potente.

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 <STYLE> colocada en la cabecera de la página para definir los distintos estilos del documento.

A grandes rasgos, entre de <STYLE> y </STYLE>, se coloca el nombre de la etiqueta que queremos definir los estilos y entre llaves -{}- colocamos en sintaxis CSS las características de estilos.

Quote
<html>
<head>
<title>Ejemplo de estilos para toda una pá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ágina con estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera, pero esto es un ejemplo sin más importancia</p>
</body>
</html>

Como se puede apreciar en el código, hemos definido que la etiqueta <H1> se presentará
• Subrayado
• Centrada

También, por ejemplo, hemos definido que el cuerpo entero de la página (etiqueta <BODY>) se le apliquen los estilos siguientes:
• Color del texto negro
• Color del fondo grisáceo
• Margen lateral de 1 centímetro

Caber destacar que si aplicamos estilos a la etiqueta <BODY>, 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 <P>, que tiene definidos estilos que ya fueron definidos para <BODY>. Los estilos que se tienen en cuenta son los de la etiqueta <P>, que es más concreta.

Por último, ha de apreciarse los comentarios HTML que engloban toda la declaración de estilos: <!--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.

Haz clic para ver el ejemplo anterior.

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. Puedes verla haciendo clic aquí.

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 cualquier 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 erróneo incluir código HTML en el: etiquetas y demás. Podemos ver un ejemplo a continuación.

Quote
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ágina web con la hoja de estilos
Para ello, vamos a colocar la etiqueta <LINK> 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:

    Quote
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <link rel="STYLESHEET" type="text/css" href="estilos.css">
    <title>Página que lee estilos</title>
    </head>
    <body>
    <h1>Página que lee estilos</h1>
    Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil.
    <br>
    <br>
    <table width="300" cellspacing="2" cellpadding="2" border="0">
    <tr>
    <td>Esto está 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>

    El resultado conseguido se puede ver aquí

    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 <BODY> 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 declaraciones de 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 <STYLE> en la cabecera de la página)
  • Estilos definidos en una parte de la página. (Con la etiqueta <DIV>)
  • Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en cuestión)
  • Declaración de estilo para una porción pequeña del documento. (Con la etiqueta <SPAN>)

    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.

    Otra manera de definir estilos en un archivo externo

    También podemos incluir estilos en un archivo externo con un código con la sintaxis @import url ("estilo.css"). Se utiliza para definir estilos comunes cuando hay también definición de estilos específicos.

    Veamos ahora otra manera de importar una declaración externa de estilos CSS: @import url ("archivo_a_importar.css"), que se utiliza para importar unas declaraciones de estilos guardadas en la ruta que se indica entre paréntesis. (las comillas son opcionales, pero los paréntesis son obligatorios, por lo menos, en Explorer).

    Se debe incluir en la declaración de estilos global a una página, es decir entre las etiquetas <style type="text/css"> y </style>, que se colocan en la cabecera del documento.

    Es importante señalar que la sentencia de importación del archivo CSS se debe escribir en la primera línea de la declaración de estilos, algo parecido al código siguiente.

    Quote
    <style type="text/css">
    @import url ("estilo.css");
    body{
    background-color:#ffffcc;
    }
    </style>

    El funcionamiento es el mismo que si escribiésemos todo el fichero a importar dentro de las etiquetas de los estilos, con la salvedad de que, si redefinimos dentro del código HTML (entre las etiquetas </style>) estilos que habían quedado definidos en el archivo externo, los que se aplicarán serán los que hayamos redefinido.

    Así, en el ejemplo anterior, aunque hubiésemos definido en estilo.css un color de fondo para la página, el color que prevalecería sería el definido a continuación de la importación: #ffffcc

    La diferencia entre este tipo de importación del tipo y la que hemos visto anteriormente:

    Quote
    <link rel="stylesheel" type="text/css" href="hoja.css">

    Es que @import url ("estilo.css") se suele utilizar cuando hay unas pautas básicas en el trabajo con los estilos (que se definen en un archivo a importar) y unos estilos específicos para cada página, que se definen a continuación, dentro del código HTML entre las etiquetas </style>, como es el caso del ejemplo visto anteriormente.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 3 | 4:46 PM
    CSS semánticas. Un nuevo enfoque

    Existen infinidad de sitios en Internet que ofrecen miles de propuestas diferentes a la hora del uso de hojas de estilo CSS en la maquetación de portales web, como sabemos aplicables a múltiples tecnologías: XHTML, Flash, etc…

    Lo que es difícil de encontrar es aquella solución que se adapte perfectamente a tus desarrollos, a tu entorno concreto. Quizá más difícil aun es adecuar algún enfoque similar al tuyo. Esta tarea es proclive a múltiples errores, que irán saliendo conforme se vaya utilizando y que llegado el momento, podemos comprobar que nos hemos equivocado de base, lo que exige una reestructuración desde el inicio.

    Este es el contexto en el que nos encontramos actualmente. Tras una fuerte apuesta por la reestructuración y organización de CSS basadas en su semántica de uso se ve que si es quizá uno de los enfoques más acertados, deja bastantes puntos abiertos que es necesario concretar. Esa es la tarea que nos proponemos aquí.

    Para los no iniciados, comentar que el enfoque semántico se basa en la idea de que la manera de estructurar la información relativa a la capa de presentación de nuestros proyectos web debe de seguir el criterio de qué es y el contexto donde se usa cada elemento.

    El entorno web tiene una característica fundamental que pocos otros tienen y es la capacidad y potencialidad de uso en múltiples tipos de dispositivos, lo cual nos abre aun más el abanico de puntos que debemos controlar a la hora de crear nuestras hojas de estilos, a la vez que multiplica la casuística y potenciales errores que es necesario controlar.

    Aquí trataremos de dar una posible solución que se adecue a los principios de CSS semántica y que siga las pautas de accesibilidad y de facilidad de extensión a múltiples dispositivos.

    Puntos a tener en cuenta
    Estructura jerárquica de las CSS
    Nuestras hojas de estilo seguirán una estructura jerárquica, cuyo elemento principal será el que incluya, para cada tipo de dispositivo, las hojas de estilo correspondientes.

    Explicación de cada una de las hojas de estilos

    Pantalla.css, Impresora.css y Movil.css. Estas son CSS específicas para cada tipo de dispositivo. Su misión en la parte superior de la jerarquía es la importación de las CSS hijas (@import url(”…css”) ). No incluyen estilos concretos.
    LayoutPantalla.css, LayoutImpresora.css y LayoutMovil.css. Incluyen la información relativa a las diversas capas que forman el layout de la página, es decir, información de maquetación de las distintas zonas del portal (Banner, menús, contenidos, créditos, …)
    CrossBrowser.css. Aglutina trucos, fixes y demás elementos para hacer que las páginas se vean igual en todos los navegadores (Internet Explorer, Mozilla, Firefox, Opera, etc.)
    Tipografía.css. Cualquier elemento relacionado con las forma en que se presenta la tipografía de la página queda recogida aquí.Comienza con una medida relativa de 62.5% en la etiqueta body, que se establece como medida equivalente a 1em. El resto de tamaños vendrán supeditados a este (mayores: 1.2em, 1.5em, etc…, y menores: 0.8em, 0.5em, etc.)
    Formularios.css. Definición de los estilos aplicables a todas las etiquetas relacionadas con los formularios genéricos.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 4 | 12:05 PM
    Primeros pasos con CSS

    CSS (Cascading Styles Sheets) también conocido como hojas de estilo, es una nueva forma de organizar nuestros sitios webs, pero ¿porqué?, CSS atrae a una nueva metodología por necesidad, la necesidad de separar el contenido de la apariencia.

    Cómo desarrollador esto significa que la información de nuestro sitio web debe ir dentro de los archivos HTML, pero estos HTML no deben contener información acerca de cómo se muestra la información. La información de cómo se deberían mostrar los HTML se ubica en archivos CSS.

    ¿Qué logramos usando CSS?
    • Separar el contenido de la apariencia.
    • Modelos de Diseños Flexibles. (pocos límites de personalización del html)
    • Alta Velocidad de Carga (Usando CSS se aminora la cantidad de código)
    • Fácil y Sencillo para el Mantenimiento
    • Fácil de Transportar
    • Avanzadas Posibilidades de Diseño
    • Innovar en el uso del Cliente
    • Fácil Acceso

    Bueno pasamos un poco a lo qué es el código, acá tienes un simple ejemplo de uso de estilos en un paragraph (parrafo) para lograr un color azul:

    Quote
    <p style=’color:blue;’>esto es una prueba</p>

    Cómo escribimos para CSS

    En CSS nosotros escribimos de la siguiente manera:

    Quote
    nombre : valor ;

    Pero primero debemos tener en claro, como adjuntamos una hoja de estilos a nuestros archivos para poder empezar a escribir.

    Maneras de Adjuntar una hoja de estilos

    Existen 3 maneras de adjuntar estilos a nuestras hojas de contenidos...

    La primera es usar el tag <style>:

    Quote
    <style type=”text/css”>
    p { color: blue; }
    </style>

    La segunda, la más recomendada, es la de linkear a una hoja de estilos externa (un archivo externo llámese style.css que contiene los códigos del diseño de nuestros htmls) como se muestra a continuación:

    Quote
    <link type=”text/css” href=”style.css” />

    Y la tercera, la más vieja de todas:

    Quote
    <style type=”text/css”>
    @import “style.css”;
    </style>

    Es aconsejable que las diferentes maneras de adjuntar una hoja de estilo vayan dentro del tag <head> aunque tampoco es obligatorio solo por una simple cuestión de organización.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 5 | 5:30 PM
    Notación de colores CSS

    Varias maneras, sintaxis o notaciones para definir colores con CSS de los elementos de la página.

    Con CSS se puede especificar colores para cada elemento HTML de la página, incluso hay elementos que podrían admitir varios colores, como el color de fondo o el color del borde. Pero bueno, vamos a ver ahora es las distintas maneras de escribir un color en una declaración CSS.

    Porque lo más habitual es que especifiquemos un color con su valor RGB. Pero en CSS tenemos otras maneras de declarar colores que pueden interesarnos, como mínimo para poder entender el código CSS cuando lo veamos escrito.

    Notación hexadecimal RGB
    Esta notación es la que ya conocemos. Se especifican los tres valores de color (rojo, verde y azul) con valores en hexadecimal entre 00 y FF.

    Quote
    background-color: #ff8800;

    Notación hexadecimal abreviada
    Esta notación es muy parecida a la anterior, pero permite abreviar un poco la declaración del color, indicando sólo un número para cada valor rojo, verde y azul. Por ejemplo, para especificar el color de antes (#ff8800) podríamos haber escrito:

    Quote
    background-color: #f80;

    Nombre del color
    También podemos definir un color por su nombre. Los nombres de colores son en inglés, los mismos que sirven para especificar colores con HTML.

    Quote
    color: red;
    border-color: Lime;

    Notación de color con porcentajes de RGB
    Se puede definir un color por los distintos porcentajes de valores RGB. Si todos los valores están al 100% el color es blanco. Si todos están al 0% obtendríamos el negro y con combinaciones de distintos porcentajes de RGB obtendríamos cualquier matiz de color.

    Quote
    color: rgb(33%, 0%, 0%);

    Notación por valores decimales de RGB, de 0 a 255
    De una manera similar a la notación por porcentajes de RGB se puede definir un color directamente con valores decimales en un rango desde 0 a 255.

    Quote
    color: rgb(200,255,0);

    De entre todas estas notaciones podemos utilizar la que más nos interese o con la que nos sintamos más a gusto. Nosotros en nuestros ejemplos venimos utilizando la notación hexadecimal RGB por habernos acostumbrado a ella en HTML.

    Color transparente
    Para finalizar, podemos comentar que también existe el color transparente, que no es ningún color, sino que específica que el elemento debe tener el mismo color que el fondo donde está. Este valor, transparent, sustituye al color. Podemos indicarlo en principio sólo para fondos de elementos, es decir, para el atributo background-color.

    Quote
    background-color: transparent;

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 6 | 6:43 PM
    10 errores comunes en los CSS

    Esta es una recopilación de errores comunes en las hojas de estilo. Es bastante provechoso hacer una lista con estos y otros errores comunes.

    1. Uso innecesario del valor 0
    El código siguiente no necesita la unidad especificada si el valor es cero.

    Quote
    padding:0px 0px 5px 0px;

    En su lugar puede ser escrito de esta manera:

    Quote
    padding:0 0 5px 0;

    De la misma manera es igual para otros estilos. Ej.:

    Quote
    margin:0;

    No malgastes espacios agregando unidades tales como px, pt, em, etc, cuando el valor es cero. La única razón de hacer esto es si necesitas cambiar estos valores más tarde. Si no declarar estas unidades no tiene sentido. Los pixeles cero son iguales que los puntos cero.

    Sin embargo,line-height puede no tener unidad.Por eso es válido lo siguiente:

    Quote
    line-height:1;

    De cualquier manera puedes utilizar una unidad en concreto como em si lo deseas.

    2. Los colores en formato hexadecimal necesitan una almohadilla
    Esto está mal:

    Quote
    color: ea6bc2;

    Debe ser:

    Quote
    color: #ea6bc2;

    O esto otro:

    Quote
    color: rgb (234.107.194);

    3. Valores duplicados en los códigos de colores
    NO escribir el código de esta manera:

    Quote
    color: #ffffff;
    background-color:#000000;
    border:1px solid #ee66aa;

    Los valores duplicados pueden ser omitidos. Escribiendo los códigos de esta manera:

    Quote
    color:#fff;
    background-color:#000;
    border:1px solid #e6a;

    ¡Por supuesto esto no debes hacerlo con códigos como este!

    Quote
    color: #fe69b2;

    4. Evitar repeticiones de código innecesaria
    Evita usar varias líneas cuando lo puedes conseguir con una sola. Por ejemplo, al fijar los bordes, algunas veces se debe hacer por separado pero en casos como el siguiente no es necesario:

    Quote
    border-top:1px solid #00f;
    border-right:1px solid #00f;
    border-bottom:1px solid #00f;
    border-left:1px solid #00f;

    Podríamos resumirlo en una única línea esta:

    Quote
    border:1px solid #00f;

    5. La duplicación es necesario con los estilos en cascada
    En los estilos en cascada es aceptable repetir el mismo código para un elemento elemento dos veces, si significa evitar la repetición mencionada en el punto arriba. Por ejemplo, digamos que tenemos un elemento donde solamente es diferente el "border" izquierda. En vez de poner cada "border" escrito usando cuatro líneas, uso sólo dos:

    Quote
    border:1px solid #00f;
    border-left:1px solid #f00;

    En este caso primero definimos todos los "borders" con el mismo color pero más tarde para ahorrarnos dos lineas de código redefinimos el "border" izquierda a otro color, de esta manera hemos ahorrado dos líneas de código.
    El ejemplo malgastando espacio quedaría así:

    Quote
    border-top:1px solid #00f;
    border-right:1px solid #00f;
    border-bottom:1px solid #00f;
    border-left:1px solid #f00;

    Obviamente supuestamente este ahorro de carga supone un retraso en la carga de la página pues estamos definiendo el "border" izquierda dos veces, pero la carga de este proceso es insignificante.

    6. Los estilos inválidos no hacen nada
    Un ejemplo es suficiente para explicar este error:

    Quote
    padding:auto

    Este estilo solo puede ser aplicado a width y height pero no a padding.

    7. Código Específico para cada navegador
    Obviamente este tipo de código solo funcionará en el navegador al que va destinado , pero es hay que pensar si es rentable puesto que solo algunos usuarios podrán apreciar esos cambio.

    8. Espacio perdido
    No estoy seguro del porqué pero muchos diseñadores están empeñados en desaprovechar el espacio en su código, usando un montón de innecesarios saltos de línea. Recuerda que eso sólo lo verás tu y estas haciendo un uso excesivo de ancho de banda. También tu código será más facil de leer puesto que tendrá menos "boquetes".

    Por supuesto es sabio dejar un cierto espacio para mantenerlo legible, aunque a algunos les encanta condensar todo, no dejando ningún espacio.

    9. Especificar los colores sin usar palabras
    Definir los colores usando las palabras que lo definen no es una buena idea puesto que estaríamos confiando en el navegador para que el interprete que color y código debe aplicar.Las tonalidades para un mismo nombre de color cambian mucho de un navegador a otro.

    Es una buena práctica especificar siempre el color por su código hexadecimal. Ej.: utilizar "#fff" en lugar de blanco.

    10. Agrupar estilos idénticos
    Es común ver los estilo escritos una y otra vez con el mismo código, aún cuando el estilo es igual.

    Sería conveniente agruparlos y asi optimizaríamos espacio:

    Quote
    h1, p, #footer, .intro {
    font-family:Arial,Helvetica,sans-serif;
    }

    También nos hara mucho más fácil la tarea de actualizar el código.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 7 | 4:33 PM
    Estilos en Cascada (CSS) con DreamWeaver

    Los Estilos en cascada, estilos CSS, nos permiten controlar los parámetros de estilo para todos los documentos que forman un sitio web. Esto es así cuando los estilos css los definimos en una hoja externa, por otro lado, la forma más rentable de trabajar esta herramienta. Por ejemplo el Tutorial Dreamweaver MX de iniciación al editor, estaba controlado por una hoja de estilos que definía una serie de valores de color, forma, tamaño, para unas cuantas de las palabras y textos empleados en el sitio. Definir así los estilos de un sitio le da una coherencia y sensación de unidad que, de otro modo, es difícil de conseguir. Por otro lado, si un estilo no nos gusta una vez ya realizado todo el sitio, bastará modificar el estilo concreto en esa hoja, para que se modifique en todos los documentos que formen el sitio y que estén vinculados con esa hoja de estilos.

    Para crear una hoja de estilos css, teniendo abierto cualquier documento del sitio, le damos a Ventana > Estilos CSS

    En la columna de la derecha se abrirá:

    Ahora pincharemos en el icono de y aparecerá la siguiente ventana:

    En esta ventana podemos darle un nombre al estilo que vamos a crear (por defecto el programa le da el nombre .unnamed1).

    Podemos elegir si lo que queremos es definir un estilo personal, o bien, redefinir una de las etiquetas del lenguaje HTML. (Más adelante explicaremos la tercera opción: Usar selector CSS).

    Por último podemos definir el estilo en una hoja externa o bien, que se aplique únicamente al documento en el que estamos trabajando.

    Vamos a empezar trabajando los valores que están elegidos por defecto:

    • Le damos un nombre a nuestro estilo, por ejemplo, palabrasclave
    • Será un estilo personal.
    • En una hoja externa.

    Cambiamos el .unnamed1 por .palabrasclave (si no ponemos el punto al comienzo, Dreamweaver lo hará por nosotros) y, sin más, le damos a Aceptar. Aparecerá la siguiente ventana:

    En esta ventana nos aparece la carpeta raíz del sitio, en este caso, la carpeta para este sitio de ejemplo que he llamado webDreamMXcurso . Le daremos un nombre en Nombre de archivo (por ejemplo hoja1) y pulsaremos Guardar:

    Se abrirá la siguiente ventana para que definamos el estilo:

    Por ejemplo:

    Y le damos a Aceptar

    Podemos observar la inclusión del estilo que acabamos de definir:

    Y, por otro lado, vemos la hoja de estilos dentro de los archivos del sitio:

    Si hacemos doble clic sobre el icono veremos los estilos definidos en nuestra hoja:

    Volvemos a nuestro documento para aplicar nuestro estilo: Seleccionaremos la palabra a la que se lo queramos aplicar, abriremos de nuevo (o vamos directamente a ) los Estilos CSS desde Ventana > Estilos CSS y haremos clic en el estilo palabrasclave.

    El texto seleccionado pasará a estar escrito con los parámetros definidos.

    Si una vez definido el estilo, no nos gusta, podemos modificarlo haciendo doble clic en el estilo correspondiente .

    Para definir otro estilo, dentro de la ventana le damos al icono y se abrirá la ventana Nuevo estilo. Le ponemos un nombre, por ejemplo, .texto1 y lo definimos

    Esta es la definición que he hecho:

    Este estilo lo quiero aplicar a todos los párrafos que escriba en los documentos. Para hacerlo bastará colocar el cursor en el inicio del párrafo y hacer clic sobre el estilos . Observa que, si dentro del párrafo, hay una palabra ya definida como palabraclave el estilo de ésta no se va a modificar. Un estilo prevalece sobre el otro.

    Para acabar este apartado, defino otro estilo para los títulos de los apartados y lo aplico. Nuestra hoja tiene, ahora, estos tres estilos definidos:


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 8 | 4:42 PM
    Crear archivos CSS más pequeños

    Tal vez no sea mucha, pero existe una diferencia entre cargar en el navegador un archivo CSS de 5kb y uno de 25kb. Los dos archivos pueden generar el mismo estilos y el peso excesivo se debe muchas veces a una escritura poco ahorrativa.

    Podemos reducir notablemente el tamaño de nuestro CSS eliminando algunos caracteres demás. Así también podremos tener nuestro archivo mucho más organizado. A continuación, algunas maneras de reducir su tamaño.

    En la forma de escribir los comentarios podemos reducir bastante espacio, por ejemplo, pasando del primer ejemplo al segundo:

    Quote
    /*--------*/
    /*--Comment--*/

    Quote
    /*--------*/
    /*Comment*/

    Algunos códigos de colores, en los cuales se repiten los caracteres, pueden ser escritos de manera corta, tal como se hizo en el segundo ejemplo:

    Quote
    color: #ffffff;
    color: #ff88ff;
    color: #f8f7f2;

    Quote
    color: #fff;
    color: #f8f;
    color: #f8f7f2;

    Muchas veces, a medida que vas codeando un diseño, agregarás un padding derecho y a los 10 minutos agregarás un padding inferior, por lo que las propiedades te quedarán en distintas líneas. Conviene usar el método en que se agrupan. Ver las diferencias entre los dos ejemplos:

    Quote
    padding-left:10px;
    padding-right:20px;
    padding-top: 0;
    padding-bottom:30px;

    Quote
    padding: 0 20px 30px 10px;

    Cuando el padding o el margin derecho sea igual al izquierdo y el inferior igual al superior puedes usar la siguiente forma:

    Quote
    padding: 5px 10px;

    Cuando los valores sean 0, puedes evitar usar las unidades de medida, por ejemplo:

    Quote
    margin: 10px 0px 0px 0px;

    Quote
    margin: 10px 0 0 0;

    Algo que también puedes hacer es acortar los nombres de los selectores, por ejemplo cambiar “HeaderMiddleLeft” por “HeaderML”. Esto puede ser algo engorroso si la hoja de estilo se utiliza entre varias personas, pero si es para uso privado en recomendable.

    Además puedes agrupar elementos con las mismas propiedades. Sería algo así:

    Quote
    h1{
    margin:0;
    padding:0;
    }

    h2{
    margin:0;
    padding:0;
    }

    h3{
    margin:0;
    padding:0;
    }

    Quote
    h1, h2, h3{
    margin:0;
    padding:0;
    }

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 9 | 12:22 PM
    CSS para principiantes: imágenes con doble borde

    Hay muchos efectos que podemos aplicar por medio de CSS a las imágenes de nuestro sitio, pero la mayoría no son compatibles con todos los navegadores. Sin embargo, a veces lo mejor suele ser lo más sencillo, y por medio de CSS liso y llano podemos lograr un buen diseño que sea multiplataforma.

    Por ejemplo, podemos agregar un borde de un color a una imagen, ponerle otro color de fondo y por medio del padding generaremos el efecto de “borde doble”. Luego, para una mejor experiencia de usuario, podemos usar este efecto sólo en hover, de manera que al pasar el mouse por encima se resalte la imagen.

    Aquí les dejo el código:

    Quote
    img.double-border { border:1px solid #ccc; padding:2px; background:#eee; }

    ¡Espero que les sea de utilidad!


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 10 | 12:53 PM
    CSS: Ajustando el tamaño de la fuente según la cantidad de palabras

    Algunas citas suelen ser más largas que otras por lo que puede llegar a resultar útil para mantener la elegancia del sitio reforzar el tamaño de la fuente de las citas más cortas y hacer más pequeño el de las más largas para que queden parejas.

    Para lograrlo sin mayores inconvenientes CSS Tricks ha implementado Javascript lo que facilitará el ajuste, manteniendo el contenido y la presentación.

    La idea

  • Establecer un objeto del párrafo al que estamos apuntando.
  • Separar el párrafo en un array de palabras, divididas por cada “espacio”.
  • Contar el largo del array.
  • Establecer el tamaño de fuente según esa cuenta.

    Para hacerlo con MooTools

    Quote
    window.addEvent('domready',function() {
    $quote = $$(’.post p’)[0];
    var $numWords = $quote.get(’text’).split(’ ‘).length;
    if (($numWords >= 1) && ($numWords < 10)) {
    $quote.setStyle(’font-size’,'36px’);
    }
    else if (($numWords >= 10) && ($numWords < 20)) {
    $quote.setStyle(’font-size’,'32px’);
    }
    else if (($numWords >= 20) && ($numWords < 30)) {
    $quote.setStyle(’font-size’,'28px’);
    }
    else if (($numWords >= 30) && ($numWords < 40)) {
    $quote.setStyle(’font-size’,'24px’);
    }
    else {
    $quote.setStyle(’font-size’,'20px’);
    };
    });

    Para hacerlo con jQuery

    Quote
    $(function(){
    var $quote = $(”.post p:first”);
    var $numWords = $quote.text().split(” “).length;
    if (($numWords >= 1) && ($numWords < 10)) {
    $quote.css(”font-size”, “36px”);
    }
    else if (($numWords >= 10) && ($numWords < 20)) {
    $quote.css(”font-size”, “32px”);
    }
    else if (($numWords >= 20) && ($numWords < 30)) {
    $quote.css(”font-size”, “28px”);
    }
    else if (($numWords >= 30) && ($numWords < 40)) {
    $quote.css(”font-size”, “24px”);
    }
    else {
    $quote.css(”font-size”, “20px”);
    }
    });

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 11 | 5:21 PM
    Algunos consejos que te ayudarán en CSS

    Sin lugar a dudas te habrás encontrado con cosas raras que no llegaste a comprender mientras estabas maquetando el layout en CSS. Dándote con la cabeza en un muro una y otra vez..Este es un intento de hacer el proceso de diseño algo más llevadero, y tener una rápida referencia que puedas comprobar cuando te encuentres con un problema.

    Cuando dudes, valida.

    Cuando estás depurando el código, puedes ahorrarte algún dolor de cabeza validando el código primero. Fallos en el CSS o en el XHTML pueden llevar a errores en la visualización.

    Construye y testea tu CSS en el navegador más avanzado disponible antes de testearlo en otros, no después.
    Si construyes un sitio testándolo en un navegador lleno de bugs, tu código cogerá esos bugs. Cuando pruebes el css en un navegador que respeta los standards, te sentirás frustrado al ver que no muestra correctamente el layout. Asi que, parte de la perfección y ves bajando hacia los navegadores mas pobres. Tu código te lo agradecerá siendo mas standarizado desde el principio y las correcciones serán menos numerosas. Hoy en dia, hacer esto significa empezar con Firefox, Safari u Opera.

    Cuando confíes en los floats para el layout, asegúrate que lo hacen correctamente.
    Los floats son delicados, y no siempre hacen lo que esperas que hagan. Si te encuentras en una situación donde un float se extiende pasado el border de su contenedor, o simplemente no se comporta como esperas, asegúrate que lo haces correctamente. Puedes consultar el tutorial de Eric Meyer de todas formas.

    Solapamiento de márgenes; aplica padding o border para evitarlo.
    Habrás luchado con el espacio en blanco extra donde no quieres que lo haya, o con la ausencia de éste donde quieres que sí lo haya. Si usas margenes probablemente te suceda. Andy Budd lo explica acertadamente.

    Trata de evitar aplicar padding/border y un elemento con anchura fija.
    IE5 interpreta mal el box modeling, lo que significa varias cosas. Hay opciones sobre esto, pero es mejor evitar el problema aplicando el padding al elemento padre en vez de al hijo que es el que tiene la anchura fija.

    Evita importar el contenido de css directamente al html.
    Si usas @import para añadir las reglas de un CSS externo a tu html, mas tarde o mas temprano te encontrarás con FOUC. Es decir, habrá un instante en que mientras la pagina se está cargando, esta aparecerá sin formatear, en texto plano. Este efecto puede ser evitado.

    No confies en min-width en IE
    IE no lo soporta. Pero puedes usar width hasta cierto punto como si fuera un min-width, jugando un poco puedes conseguir el mismo resultado.

    Cuando dudes, disminuye la anchura.
    A veces errores de redondeo causan que cosas como 50% + 50% den como resultado 100.1%, lo que significa romper el layout en algunos navegadores. Intenta bajar de 50% a 49% o incluso 49.9%

    El contenido no se visualiza correctamente en IE?
    Probablemente este sufriendo el Peekaboo bug, especialmente si no aparece nada cuando pasas el ratón por encima de un link. Visita Position is Everything para corregirlo.

    Ten cuidado al usar estilos en los links, si son anclas.
    Si usas un ancla en tu codigo () ten en cuenta que tambien le afecta los :hover y :active. Para evitar esto, necesitarás usar id para las anclas o aplicar estilos con una sintaxis un poco mas reservada :link:hover, ,:link:active

    Divide y vencerás: comenta grandes porciones de código para eliminar opciones.
    Especialmente útil si se trata de un CSS que no has creado tu. Comenta media parte del CSS y si el problema continua, entonces comenta la otra mitad. Sigue este método hasta llegar a una parte pequeña de código dnd el problema sea fácilmente identificable.

    Recuerda “LoVe/HAte” (Amor/Odio) para los links.
    Cuano especifiques las pseudoclases, hazlo en este orden: Link, Visited, Hover, Active. Cualquier otro orden no tendrá consistencia. Puedes usar :focus también, y modificar el orden a LVHFA ( o “Lord Vader’s Handle Formerly Anakin” biggrin , como propuso Matt Haughey)

    Recuerda bordes “TRouBLEd” o mejor, como las aujas de un reloj.
    Los atajos para definir bordes, margenes y paddings tiene un orden específico. Siguiendo el movimiento de las agujas de un reloj, empezando desde arriba, Top, Right, Bottom, Left. Por tanto margin: 0 1px 3px 5px, resulta sin margen superior, 1px para del derecho, y así sucesivamente.

    Especifica unidades para los valores distintos de 0.
    Css requiere que especifiques las unidades de tus cantidades para fuentes, margenes y tamaños. (La única excepción es line-height, que no requiere unidad) El comportamiento de cualquier navegador cuando no se han especificado las unidades puede ser impredecible. Cero es cero y no necesita unidades, por ejemplo: padding: 0 2px 0 1em.

    Prueba diferentes tamaños de texto.
    Navegadores avanzados como Mozilla o Opera, permiten escalar el texto de tu web, sin importar el tamaño que hayas usado. Algunos usuarios tiene una fuente mas grande o mas pequeña que la que has puesto tu, intenta probar un rango amplio de tamaños para ver el comportamiento del layout.

    Mantén mayúsculas y minúsculas de la misma forma para el CSS u el HTML
    Algunos navegadores son case-sensitive. Usando una clase como “homePage” no hay ningún problema. Aplicar estilos a “homepage” puede causar problemas en navegadores estrictos como Mozilla.

    Añade bordes que se vean bien para que te ayuden a depurar.
    Por ejemplo, usando una regla como div {border: solid 1px #F00} podras observar el principio y fin de la capa, para detectar espacios en blanco, solapamientos, etc. Efectos que de otra manera no resultarían tan obvios. También puedes usar colores de fondos.

    No uses comillas para indicar la ruta de la imagen.
    Cuando coloques una imagen de fondo, y le indiques la ruta donde se ubica el archivo, resiste el impulso de poner comillas, no son necesarias y IE5/Mac te lo agradecerá sin estrangularse.

    No linkes a una CSS vacía, como un indicador de que en ese lugar habrá una CSS para lo que sea.
    El IE5 de Mac sufre con ello y relantizará la carga de la página. Puedes comentar la linea mejor.

    Y a continuación algunas recomendaciones a la hora de desarrollar:

    Organiza tu CSS
    Asegúrate de crear bloques de información mediante lineas de comentario por ejemplo.

    Los nombres de las clases y los ID deben ser de acuerdo con su función, no a la apariencia.
    Si creas una clase .azulypequeño, y más tarde quieres que el texto sea grande y rojo, la clase pierde todo el sentido. Mejor usa nombres mas descriptivos como, .copyright y .comentarios

    Combina selectores
    Mantener tu CSS ligero es importante para minimizar los tiempos de carga, tanto como sea posible, agrupa selectores, usa la herencia, y reduce la redundancia con atajos.

    Considera la accesibilidad cuando uses la técnica de intercambio de imagen.
    Usar fondos de imágenes para reemplazar texto tiene problemas por todos conocidos en algunos dispositivos, o en lugares donde está desactivada la opción de mostrar imágenes.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 12 | 5:52 PM
    Hacks en CSS útiles para Internet Explorer

    Debido a la diversidad de navegadores y las diferencias entre versiones es muy útil hacer uso de algunos hacks si queremos que la apariencia de nuestras páginas en Internet Explorer, sea igual que en el resto de los navegadores que soportan los estándares.

    A continuación mostramos algunos hacks útiles, que podremos utilizar en nuestros archivos CSS para solucionar problemas que nos suceden a diario con nuestros diseños web cuando se muestran con Internet Explorer.

    Detectando la versión de Internet Explorer
    Para detectar la versión que está utilizando nuestro visitante, de este navegador, debemos usar los llamados comentarios condicionales.
    Estos fueron creados por Microsoft para su navegador y sólo son soportados por éste. Como comienzan con <!-- cualquier otro navegador asumirá que es un comentario y no ejecutará el código que hay dentro.

    Este tipo de hack se sitúa entre las etiquetas <head> y </head>. Utilizándolo podremos detectar la versión del navegador y cargar el archivo CSS necesario.

    Quote
    <!--[if CONDICION]>
    Código HTML
    <![endif]–>

    En la condición podremos utilizar cualquiera de las que siguen. Pudiendo sustituir X por las versiones de Internet Explorer disponibles hasta el momento (5,5.5,6 o 7).

    Quote
    IE
    Cualquier versión de Internet Explorer
    lt IE X
    Versiones inferiores a X
    lte IE X
    Versiones inferiores o iguales a X
    IE X
    Solo para la version X
    gte IE X
    Versiones superiores o iguales a X
    gt IE X
    Versiones superiores a X

    A continuación mostramos un ejemplo del uso de este hack:

    Quote
    <!-- (…) -->
    <head>
    <title>Título</title>
    <link href="all_browsers.css" rel="stylesheet" type="text/css">
    <!--[if IE]>
    <link href="ie_any_version.css" rel="stylesheet" type="text/css">
    <![endif]-->
    <!--[if lt IE 7]>
    <link href="ie_6_and_below.css" rel="stylesheet" type="text/css">
    <![endif]-->
    <!--[if !lt IE 7]>
    <![IGNORE[--><![IGNORE[]]>
    <link href="recent_versions.css" rel="stylesheet" type="text/css">
    <!--<![endif]-->
    <!--[if !IE]>-->
    <link href="not_ie.css" rel="stylesheet" type="text/css">
    <!--<![endif]-->
    </head>
    <!-- (…) -->

    El hack del guión bajo
    Para el resto de los navegadores una propiedad con un guión bajo, u otro carácter alfanumérico delante es algo que no existe, y por tanto no la interpretan, pero Internet Explorer las asimila sin problemas. Esto es algo que podemos utilizar para definir propiedades en los estilos, destinadas sólo a este navegador.

    Quote
    #textbox{
    width: 450px;
    /* Firefox y los demás */
    _width:400px;
    /* Internet Explorer 6 e inferiores */
    }

    Este hack funciona para todas las versiones de Internet Explorer que existen hasta la fecha, pero es posible que deje de funcionar en las próximas.
    Teniendo en cuenta que los navegadores sobrescriben las propiedades si éstas se definen más de una vez, dejando establecida la que se define última; mostramos un ejemplo donde se muestran estos dos hacks que hemos descrito anteriormente.

    Quote
    body {
    background: #FFFFFF
    /* Firefox y los demás */
    *background: #000000
    /* IE7 e inferiores */
    _background: #CCCCCC;
    /* Sólo IE6 */
    }

    En el ejemplo que mostramos anteriormente el color de fondo de la página se verá blanco para Firefox, negro para Internet Explorer 7 y gris para IE 6.

    El uso de !important
    Este operador es utilizado en los archivos CSS para que los navegadores respeten la importancia de la propiedad que lo contenga y evite que se sobrescriba con otras que se definan posteriormente.

    Internet Explorer 6 y las versiones anteriores no interpretan este operador; problema que fue solucionado en la versión 7 de este navegador.

    Quote
    p {
    background: green !important;
    /* Navegadores superiores a IE 6 respetarán la importancia inmediatamente */
    background: red;
    /* IE 6 y anteriores aplicará este estilo aunque esté marcado la anterior como importante */
    }

    En el ejemplo anterior el fondo de la página se mostrará rojo para IE 6, mientras que para Internet Explorer 7 y el resto de los navegadores se verá verde.

    Sin hacks en nuestros CSS
    El desarrollador Dean Edwards pone a disposición de todos, bajo licencia GNU LGPL, la librería JavaScript IE7, para hacer que Internet Explorer (Navegadores Microsoft IE) se comporten como un navegador que sigue los estándares. Además hace que los PNG transparentes funcionen correctamente en las versiones 5 y 6 del navegador y soluciona diversos problemas relacionados a la interpretación del CSS.

    Para utilizar esta librería debemos descargarla de Google Code y seguidamente agregar estas líneas entre las etiquetas:

    Quote
    <!--[if lt IE 7]>
    <script src="/ie7/ie7-standard-p.js" type="text/javascript"> </script>
    <![endif]-->

    Con este código cargamos el script chequeando que el navegador sea Internet Explorer, utilizando para esto el hack del que hablábamos al inicio.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 13 | 12:37 PM
    Cómo determinar el tamaño de fuente con CSS (¿px, em, %, pt o keyword?)


    Cuando se trata de programar el tamaño de una fuente en CSS, tenemos varias opciones. Cada una de las opciones tiene una función específica y algunas ventajas y desventajas según el uso que se le dé.

    Para empezar, puedes aplicar una palabra clave como p { font-size: small; } o un valor númerico. Si decides esta segunda opción, necesitarás declarar una unidad de medida fija que a su vez ofrece cuatro opciones: px, em, % o pt. ¿Cuál es mejor? Depende… Echemos un vistazo.

    Palabra clave
    Las opciones válidas para programar el tamaño de la fuente en palabras claves son: xx-small, x-small, small, medium, large, x-large, y xx-large, siendo xx-small el tamaño más pequeño y xx-large el más grande.

    Pero también se pueden utilizar palabras claves relativas a otras medidas, como smaller (más pequeño) y larger (más grande). Esto es muy útil cuando queremos que una fuente disminuya o aumente su tamaño en determinadas situaciones.

    Sorprendentemente, programar el tamaño por medio de palabras claves es bastante consistente a través de los distintos navegadores y plataformas.

    Noten que si bien son bastante parecidas, existen diferencias en los sitios donde las líneas se rompen y en el total de párrafos.

    Una de las técnicas más populares es programar un tamaño de fuente clave en el elemento cuerpo, y luego usar un tamaño de fuente relativo en el resto de la página. Esto brinda la posibilidad de hacer más grande o pequeño el tamaño de la fuente de forma muy sencilla y lograr que el sitio web aumente o disminuya su tamaño consistentemente.

    Sin embargo, las palabras claves no ofrecen un control muy preciso sobre nuestra tipografía porque las opciones son bastante limitadas.

    px: píxel
    Si necesitas un control más detallado, programar el tamaño de las fuentes en valor de píxeles es una opción excelente. En una pantalla de computadora, no hay nada más preciso que un píxel.

    Al utilizar esta técnica estás literalmente diciéndole al navegador el número exacto de píxeles que deseas que mida la fuente.

    Sin importar de qué navegador o plataforma se trate, una fuente programada en 14px medirá siempre 14px. Igualmente, puede que se presenten algunas variaciones, pero el tamaño seguirá siendo más consistente que mediante la implementación de palabras claves.

    Los pixeles han tenido una mala movida en el pasado en lo que respecta a la accesibilidad y la usabilidad. En IE6 y versiones inferiores, los tamaños de fuentes programados en píxeles no pueden ser reprogramados por el usuario.

    Programar el tamaño de la fuente en píxeles es el método más preciso, pero es necesario tener en cuenta el número de visitantes que todavía están utilizando IE6.

    em: ancho de la letra M
    Los valores Em son los más difíciles para trabajar, probablemente debido a que el concepto de este valor es algo bastante abstracto y arbitrario. Em no es otra cosa que el ancho de la M, la letra más ancha y la que ocupa el ancho total de la caja contenedora de cada letra. Pero ¿Qué clase de referencia es esa?

    Bueno, esta es la cuestión: en CSS, 1 em es igual al tamaño de fuente actual del elemento en cuestión. Si no has programador un tamaño de fuente en ninguna parte del sitio, será el que trae el navegador por defecto, el cuál será probablemente 16px. Así que por defecto 1em=16px. Si programas el tamaño general de la fuente de body en 20px, entonces 1em=20px.

    Las cosas se empiezan a complicar más con em cuando empezamos a programar tamaños de texto más complejos. Por ejemplo, si necesitamos un titular con un tamaño de fuente más grande, por lo que programamos h1 { font-size: 2em; } Ese “2″ es esencialmente un multiplicador del valor em actual. Pero a menudo es necesario redondear los números.

    El método más popular al trabajar con valores em es programar el tamaño de la fuente del cuerpo en 62.5%. Porque al ser el tamaño de fuente por defecto16px, esto hará que nuestra fuente sea de 10px. Y utilizar 10 como multiplicador es mucho más fácil que utilizar 16. Así si necesitas como tamaño de fuente 18px, utilizarás1.8em.

    Pero ¿Porqué molestarse con todo este tema de los em, cuando no es más que una abstracción del uso de píxeles? Existen 3 posibles razones.

    Son reprogramables en IE6, algo muy importante en caso que desees trabajar con píxeles pero no quieras problemas de accesibilidad.
    • Tiene mejor relación con otros sitio ya que los sitios de ancho elástico utilizan valores Em para todo, lo que hace que el sitio sea esencialmente “zoomeable”. Los Em tienen una relación directa unos entre otros en este sentido.
    Em hereda en cascada. Esta es una cualidad muy buena pero con un potencial problema. Cada valor em es relativo al valor de su padre. Si estás utilizando em como una sustitución directa de los valores de píxeles, esto puede causar problemas. Por ejemplo, puede que programes tus tamaños de fuente tanto “p” (paragraph) y “li” (list item) para que sean 1.2em. Hoy luce genial, pero mañana se publica algún contenido en el sitio que posee un párrafo dentro de una lista de ítems. Esos dos valores harán cascada (1.2 x 1.2) y esa lista de items será más grande en tamaño de fuente que cualquiera de las otras. Todo lo que se podrá hacer en este caso es remover la etiqueta.

    %: porcentaje
    Los porcentajes es bastante obvio cómo funcionan. Si un padre tiene como tamaño de fuente 20px y el hijo posee un tamaño de 50%, este tendrá un tamaño final de 10px.

    Al igual que los em, los porcentajes son relativos a otras medidas y también hacen cascada.

    Una técnica popular al utilizar porcentajes en el tamaño de fuente es programar un tamaño de fuente razonable general para todo el sitio y luego usar porcentajes para cada estilo diferente.

    pt: puntos
    La última unidad de medida con la que es posible declarar el tamaño de una fuente es en valor de puntos. Los valores punto son sólo para CSS impreso. Un punto es una unidad de medida usada para la tinta en el papel tipográfico y muy común de ver en programas de edición de texto como Microsoft Word o el Writer de OpenOffice.org.

    La unidad de medida máxima que debería declararse en puntos es 72pts = una pulgada. Esta pulgada es igual a la pulgada que puedes medir con una regla. No se trata de pulgadas en una pantalla, que es algo totalmente arbitrario basado en la resolución.

    Al igual que los píxeles son lo más preciso para la programación del tamaño de la fuente en un monitor, los puntos lo son en un papel.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 14 | 4:57 PM
    Propiedad RGBa de CSS: cómo se aplica en distintos navegadores

    La propiedad RGBa es una forma de declarar un color en CSS. ¿Qué tiene de diferente a la forma tradicional con colores web? Que además nos da la posibilidad de incluir un valor de transparencia alpha.

    Esto significa que podrás implementar transparencias en tus diseños, directamente desde CSS, sin necesidad de agregar imágenes que imiten este efecto. A continuación, pros y contras de esta propiedad y cómo aplicarla.

    Pero no todos los navegadores poseen soporte RGBa, así que si el diseño lo permite, deberías declarar un color sólido “de respaldo”. De no declararlo ningún color se aplicará en aquellos navegadores que no posean el soporte.

    Este color de respaldo puede llegar a fallar en los navegadores más viejos.

    Para implementarlo utilizamos este código:

    Quote
    div {
    background: rgb(200, 54, 54); /* Color de respaldo */
    background: rgba(200, 54, 54, 0.5);
    }

    Soporte de navegadores para RGBa:


    Como IE soporta hojas de estilo condicionales podemos aprovechar estas junto con un filtro CSS de Microsoft para lograr el mismo resultado:

    Quote
    <!--[if IE]>
    <style type="text/css">
    .color-block {
    background:transparent; filter:progid:DXImageTransform.Microsoft.gradient
    (startColorstr=#99000050,endColorstr=#99000050);
    zoom: 1;
    }
    </style>
    <![endif]–>

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 15 | 4:39 PM
    COMENTARIOS CONDICIONALES


    Guía sobre los comentarios condicionales

    Para detectar qué navegador estamos usando, se utilizan los comentarios condicionales. Estos comentarios fueron creados por Microsoft y solo pueden usarse para el navegador creado por Microsoft, Internet Explorer. Se colocan entre las etiquetas <head> y </head> de nuestro documento HTML.

    Hay varias maneras de definir los comentarios, pero la base es esta:

    Quote
    <!--[if CONDICION]>
    Código HTML
    <![endif]–>

    En la condición se puede utilizar estas versiones de Internet Explorer por el momento, que soportan los comentarios condicionales: IE 5, 5.5, 6, 7:

    Quote
    IE
    Cualquier versión de Internet Explorer
    lt IE X
    Versiones inferiores a X
    lte IE X
    Versiones inferiores o iguales a X
    IE X
    Solo para la version X
    gte IE X
    Versiones superiores o iguales a X
    gt IE X
    Versiones superiores a X

    Ahora un ejemplo:

    Quote
    <!-- (…) -->
    <head>
    <title>Título</title>
    <link href="all_browsers.css" rel="stylesheet" type="text/css">
    <!--[if IE]>
    <link href="ie_any_version.css" rel="stylesheet" type="text/css">
    <![endif]-->
    <!--[if lt IE 7]>
    <link href="ie_6_and_below.css" rel="stylesheet" type="text/css">
    <![endif]-->
    <!--[if !lt IE 7]>
    <![IGNORE[--><![IGNORE[]]>
    <link href="recent_versions.css" rel="stylesheet" type="text/css">
    <!--<![endif]-->
    <!--[if !IE]>-->
    <link href="not_ie.css" rel="stylesheet" type="text/css">
    <!--<![endif]-->
    </head>
    <!-- (…) -->

    También podemos usar un truco, que es el de incluir un guión bajo para definir las propiedades de los estilos. Ningún navegador excepto Internet Explorer leerá lo que esté con un guión bajo o asterisco, excepto Internet Explorer:

    Quote
    body {
    background: #FFFFFF
    /* Firefox y los demás */
    *background: #000000
    /* IE7 e inferiores */
    _background: #CCCCCC;
    /* Sólo IE6 */
    }


    Ampliación sobre los comentarios condicionales

    Bien, como ya sabemos, los comentarios condicionales son creados por Microsoft para Internet Explorer, sirven para que cuando indiquemos algún código solo Internet Explorer pueda verlo, los demás navegadores lo ignorarán.

    Pero podemos indicar los comentarios condicionales según estas opciones:
    • Escogiendo una sola versión.
    • Escogiendo una versión y las superiores
    • Escogiendo versiones superiores a la versión dada.
    • Escogiendo una versión y las inferiores
    • Escogiendo versiones inferiores a la versión dada.

    Escoger una sola versión

    Se escogerá solamente la versión especificada:

    Quote
    <!--[if IE 5.5]>Para internet explorer 5.5<![endif]-->
    <!--[if IE 6]>Para internet explorer 6<![endif]-->
    <!--[if IE 7]>Para internet explorer 7<![endif]-->
    <!--[if IE 8]>Para internet explorer 8<![endif]-->

    Escoger una versión y las superiores

    Se escoge la versión especificada y las que sean superiores:

    Quote
    <!--[if gte IE 5.5]>Para internet explorer 5.5 y superiores<![endif]-->
    <!--[if gte IE 6]>Para internet explorer 6 y superiores<![endif]-->
    <!--[if gte IE 7]>Para internet explorer 7 y superiores<![endif]-->
    <!--[if gte IE 8]>Para internet explorer 8 y superiores<![endif]-->

    Escoger las versiones superiores

    Se escogen las versiones que sean superiores a la especificada:

    Quote
    <!--[if gt IE 5.5]>Para versiones superiores a internet explorer 5.5<![endif]-->
    <!--[if gt IE 6]>Para versiones superiores a internet explorer 6<![endif]-->
    <!--[if gt IE 7]>Para versiones superiores a internet explorer 7<![endif]-->
    <!--[if gt IE 8]>Para versiones superiores a internet explorer 8<![endif]-->

    Escoger una versión y las inferiores

    Se escoge la versión especificada y las que sean inferiores:

    Quote
    <!--[if gt IE 5.5]>Para internet explorer 5.5 e inferiores<![endif]-->
    <!--[if lt IE 6]>Para internet explorer 6 e inferiores<![endif]-->
    <!--[if lt IE 7]>Para internet explorer 7 e inferiores<![endif]-->
    <!--[if lt IE 8]>Para internet explorer 8 e inferiores<![endif]-->

    Escoger las versiones inferiores

    Se escogen las versiones que sean inferiores a la especificada:

    Quote
    <!--[if gt IE 5.5]>Para versiones inferiores a internet explorer 5.5<![endif]-->
    <!--[if gt IE 6]>Para versiones inferiores a internet explorer 6<![endif]-->
    <!--[if gt IE 7]>Para versiones inferiores a internet explorer 7<![endif]-->
    <!--[if gt IE 8]>Para versiones inferiores a internet explorer 8<![endif]-->

    Aclaración final

    gt: greater than (mayor que).
    gte: greater than equal (igual o mayor que).
    lt: lower than (menor que).
    lte: lower than equal (igual o menor que).


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » CSS para los novatos
    Búscar: