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º 31 | 3:53 PM
CSS: Truco para igualar la altura de varias columnas

Imaginen que tienen que implementar un diseño de dos columnas y desean que la altura de la sidebar sea igual a la columna del contenido principal ¿Qué podemos hacer?

Hoy describiremos un simple truco CSS para implementar un efecto falso de igual altura de columnas utilizando las propiedades CSS position:absolute y border.

Estructura HTML
El primer paso es definir la estructura HTML de nuestro documento. Hemos usado un layout simple de dos columnas como este:

Quote
<div id="wrapper">
<div id="maincontent">...</div>
<div id="sidebar">...</div>
</div>

#wrapper

El layer #wrapper contendrá nuestras dos columnas, #maincontent y #sidebar:

Quote
#wrapper{
margin:0 auto;
width:600px;
}

#maincontent

El layer #maincontent es la columna izquierda del coumento que contendrá el contenido principal de la página (por ejemplo el texto del artículo). La imagen siguiente ilustra el concepto básico utilizado para implementar este truco:

Tenemos que agregar un borde extra al layer #maincontent (200px) sobre el cuál se colocará #sidebar. De esta forma tendremos un fondo falso para #sidebar, representado por el borde derecho de la columna #maicontent, que tendrá la misma altura del layer b]#maincontent[/b]. Este es el código CSS:

Quote
#maincontent{
border-right:solid 200px #DFDFDF;
position:absolute;
width:400px;
}

#sidebar
Ahora tenemos que definir #sidebar usando las siguientes propiedades:

El ancho de #sidebar es el mismo del ancho del borde derecho de #maincontent (200px) y la propiedad margin-left es igual al ancho del layer #maincontent. Aquí está el código CSS:

Quote
#sidebar{
background:#DFDFDF;
margin-left:400px;
position:absolute;
width:200px;
}

Y este es el resultado final:

De esta forma la altura de la columna #sidebar parecerá igual a la altura de la columna #maincontent.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 32 | 11:27 AM
5 tips para mejorar la redacción de tu código CSS

Los archivos CSS complejos pueden llegar a ser muy díficiles de manejar, en especial si no utilizas una forma estructurada de escribir y organizar tu código.

En el artículo de hoy, te traemos cinco formas simples y prácticas que te ayudarán a la hora de escribir código CSS organizado y legible, para hacer más fácil tu trabajo.

1. Ordena alfabéticamente las propiedades CSS
Cuando comienzas a añadirle propiedades a un elemento CSS, probablemente no prestes atención al orden que estás utilizando para listarlos. Sin duda, una buena opción es utilizar el orden alfabético como en el siguiente ejemplo:

Quote
#nav{
border: solid 1px #DEDEDE;
color: #000;
padding: 10px;
width: 650px;
}

De esta forma, si necesitas cambiar una propiedad en específico, será más fácil de encontrar.

2. Indenta los elementos child
Indentar los elementos child de un elemento principal (en el ejemplo #nav) es una buena forma de resaltar las dependencias entre ciertas porciones de código relacionadas:

Quote
#nav{
width:650px;
}
#nav ul li{
float:left;
}
#nav ul li a{
display:block;
}

3. Utiliza comentarios para separar secciones lógicas de código
Las líneas de comentarios son realmente útiles para mejorar la legibilidad porque, si se utilizan con cierto criterio, pueden ayudarte a separar secciones de código CSS relacionadas con la estructura del documento HTML:

Quote
/*-------------------
HEADER
------------------- */
#header{width:650px;}
#header a:link,
#header a:visited{
color:#0033CC;
}

/*-------------------
NAVIGATION BAR
------------------- */
#nav{width:650px;}
#nav ul li{
float:left;
padding:0 10px;
}

4. Utiliza espacios extra y tabulaciones para separar las propiedades individuales de sus valores
Esta forma de organizar el código CSS, mejora de forma notable la legibilidad de los archives CSS, pero por lo general es muy raro que se implemente:

Quote
#main{
width: 650px;
}
#main h1{
color: #000;
font-size: 22px;
font-weight: bold;
}
#main p{
color: #000;
font-size: 12px;
padding: 10px;
}

5. Agrupa elementos con las mismas propiedades
Si tienes un grupo de elementos con las mismas propiedades y valores puedes agruparlos en una sola declaración y manejar de forma separada sus diferencias para optimizar el código. Por ejemplo:

Quote
.icon-facebook {
background:url(facebook.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon-twitter {
background:url(twitter.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon-delicious {
background:url(delicious.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}

Puedes mejorar el código anterior de esta forma:

Quote
.icon-facebook,
.icon-twitter,
.icon-delicious {
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon-facebook{background:url(facebook.gif);}
.icon-twitter{background:url(twitter.gif);}
.icon-delicious{background:url(delicious.gif);}

Conclusión
Una vez que tu código esté listo, es conveniente crear una versión liviana de tu archivo CSS con un compresor CSS (como http://www.csscompressor.com/ o http://www.cssoptimiser.com/ ) que te permitirá reducir de gran forma el tamaño de tu archivo CSS.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 33 | 5:07 PM
CSS: Guía definitiva para usar la propiedad z-index

La propiedad z-index ha sido siempre mal entendida, por lo que en este post discutiremos algunos de los usos prácticos para ella y las diferencias entre navegadores.

Esta mirada global a z-index te proporcionará una excelente base para poder utilizar esta propiedad con confianza y eficacia.

La mayoría de las propiedades CSS son bastante sencillas de manejar. A menudo, la aplicación de una propiedad CSS a un elemento de tu código tendrá resultados inmediatos - tan pronto como se actualice la página, el valor establecido para la propiedad entra en vigor, y ves el resultado inmediatamente. Otras propiedades CSS, sin embargo, son un poco más complejas y sólo funcionarán en un determinado conjunto de circunstancias.

La propiedad z-index pertenece a este último grupo. Ha causado tanta confusión y frustración como cualquier otra propiedad CSS. Sin embargo, cuando z-index se entiende completamente, es una propiedad muy fácil de usar, y ofrece un método eficaz para superar muchos desafíos de diseño.

¿De qué se trata?
La propiedad z-index determina el nivel de pila de un elemento HTML. El “nivel de pila” se refiere a la posición del elemento en el eje Z (en comparación con el eje X o eje Y). Un mayor valor de z-index significa que el elemento estará más cerca de la parte superior del orden de apilamiento. Este orden de apilamiento es perpendicular a la pantalla o visor.

Representación tridimensional del eje Z:

Para poder demostrar de forma clara cómo funciona z-index, la imagen de arriba exagera la cantidad de elementos apilados en relación al visor.

El orden natural de apilamiento
En una página HTML, el orden natural de apilamiento (por ejemplo, el orden de los elementos en el eje Z) se determinada por un número de factores. Abajo hay una lista que muestra el orden en que los ítems encajan en un contexto de apilamiento, comenzando por el final de la pila. La lista asume que ninguno de los ítems tiene z-index aplicado:

  • El fondo y bordes del elemento que establece el contexto de apilación.
  • Elementos con contextos de apilación negative, en orden de aparición.
  • Elementos Non-posicionados, non-floated, block-level, en orden de aparición.
  • Elementos No-posicionados, floated elements, en orden de aparición.
  • Elementos Inline, en orden de aparición.
  • Elementos posicionados, en orden de aparición.

    La propiedad z-index, cuando se aplica correctamente, puede cambiar este orden natural de apilamiento.

    Por supuesto, el orden de apilamiento de los elementos no es evidente a menos que los elementos estén en condiciones de sobreponerse entre sí. Por lo tanto, para ver el orden de apilamiento natural, márgenes negativos se pueden utilizar como se muestra a continuación:

    Los cuadros de arriba tienen fondos y bordes de colores diferentes, y los dos últimos son indentados y poseen márgenes superiores negativos para que puedas ver el orden de apilamiento natural. El cuadro gris aparece en primer lugar en el código, el cuadro azul en segundo lugar, y el cuadro dorado tercero. Los márgenes negativos aplicados demuestran claramente este hecho. Estos elementos no tienen valores z-index establecidos, su orden de apilamiento es el natural, o por defecto, el orden. Los solapamientos que se producen se deben a los márgenes negativos.

    ¿Por qué causa confusión?
    Aunque z-index no es una propiedad difícil de entender, debido a las falsas suposiciones puede causar confusión en el comienzo a los desarrolladores. Esta confusión se produce porque z-index sólo funcionará en un elemento cuya propiedad de posición se ha establecido explícitamente en absoluto, fijo, o relativo.

    Para demostrar que z-index sólo funciona en los elementos posicionados, aquí están las mismas tres cajas con valores z-index aplicados para tratar de revertir su orden de apilamiento:

    El cuadro gris tiene un valor de z índice de “9999″, el cuadro azul tiene un valor de z índice de “500″, y el cuadro dorado tiene un valor de z índice de “1″. Lógicamente, se podría suponer que el orden de apilamiento de las cajas ahora debe ser revertida. Pero ese no es el caso, porque ninguno de estos elementos tiene la propiedad de posición programada.

    Aquí están las mismas cajas con posición relativa añadida a cada una, y su valor z-index mantenido:

    Ahora el resultado es el esperado. El orden de apilamiento de los elementos se revierte, la caja gris sobrepone a la azul y la azul a la dorada.

    Sintaxis
    La propiedad z-index puede afectar el orden de apilamiento tanto de los elementos inline como block-level, y es declarada por un valor integrador positivo o negativo, o un valor de auto. Un valor de auto le da al elemento el mismo orden de apilamiento que sus parientes.

    Aquí está el código CSS para el tercer ejemplo de arriba, dónde la propiedad z-index está aplicada de forma correcta:

    Quote
    #grey_box {
    width: 200px;
    height: 200px;
    border: solid 1px #ccc;
    background: #ddd;
    position: relative;
    z-index: 9999;
    }

    #blue_box {
    width: 200px;
    height: 200px;
    border: solid 1px #4a7497;
    background: #8daac3;
    position: relative;
    z-index: 500;
    }

    #gold_box {
    width: 200px;
    height: 200px;
    border: solid 1px #8b6125;
    background: #ba945d;
    position: relative;
    z-index: 1;
    }

    Otra vez les recuerdo, que la propiedad z-index no funcionará a menos que sea aplicada a elementos posicionados.

    Implementación JavaScript
    Si deseas afectar el valor z-index de un elemento de forma dinámica por medio de Javascriot, la sintaxis es similar a cómo se accede a la mayoría de las otras propiedades CSS, como en el código que se muestra a continuación:

    Quote
    var myElement = document.getElementById(”gold_box”);
    myElement.style.position = “relative”;
    myElement.style.zIndex = “9999″;

    En este código, la sintaxis CSS “z-index” se vuelve “zIndex”. De forma similar, “background-color” se transforma en “backgroundColor”, “font-weight” en “fontWeight”, y así.

    También, la propiedad de posición se cambia utilizando el código de arriba para enfatizar nuevamente que el z-index sólo funciona en elementos posicionados.

    Implementaciones indebidas en IE y Firefox
    Bajo ciertas circunstancias, hay algunas pequeñas incongruencias en las versiones de Internet Explorer 6 y 7 y Firefox versión 2 con respecto a la aplicación de la propiedad z-index.

    Elementos <select> en IE6

    En Internet Explorer 6, el elemento <select> es un control de ventana, y así aparecerá siempre en la parte superior del orden de apilamiento, independientemente del orden natural de apilación, los valores de posición, o z-index. Este problema se ilustra en la captura de pantalla a continuación:

    El elemento <select> aparece primero en el orden natural de la pila y se le da un valor de z índice de “1″, junto con un valor de posición de “relativo”. La caja dorada aparece en segundo lugar en la pila de orden, y se le da un valor de z índice de “9999″. Debido al orden natural de la pila y los valores del z-index, el cuadro dorado debe aparecer en la parte superior, lo que lo hace en todos los navegadores actualmente utilizados, excepto IE6:

    A menos que estés viendo esta página con IE6, verá el cuadro de oro por encima del elemento <select>.

    Este error en IE6 ha causado problemas con los menús desplegables porque no se superponen los elementos <select>. Una solución es el uso de JavaScript para ocultar temporalmente el elemento <select>, y luego hacerlo reaparecer cuando el menú de superposición desaparece. Otra solución consiste en utilizar un <iframe>.

    Parientes posicionados en IE6/7

    Las versiones de Internet Explorer 6 y 7 de forma incorrecta restablecen el contexto de apilamiento en relación con el elemento ancestro más cercano posicionado. Para demostrar este error un tanto complicado, vamos a mostrar dos de las cajas de nuevo, pero esta vez vamos a envolver la primera caja en un elemento posicionado:

    El cuadro gris tiene un valor de z índice de “9999″, el cuadro azul tiene un valor de z índice de “1″ y ambos elementos están posicionados. Por lo tanto, la correcta aplicación es mostrar el cuadro gris sobre la caja azul.

    Si estás viendo esta página en IE6 o IE7, verás el cuadro azul sobreponer la caja gris. Esto es causado por el elemento posicionado que envuelve la caja gris. Estos navegadores “resetean” de forma incorrecta el contexto de apilamiento en relación con la posición de los padres, pero esto no debería ser el caso. El cuadro gris tiene un valor de z-índice mucho mayor, por lo que debe sobreponer a la caja azul. Todos los otros navegadores hacen esto correctamente.

    Valores negativos en Firefox 2

    En la versión de Firefox 2, un valor de z-índice negativo posicionará un elemento detrás del marco de apilamiento en lugar de en frente del fondo y los bordes del elemento que establecen el contexto de apilamiento. Aquí hay una captura de pantalla que muestra este error en Firefox 2:

    Debajo está la versión HTML de la captura de pantalla de arriba, así que si ves esta página en Firefox 3 o en otro navegador actualmente usado, verás la correcta aplicación: El fondo de la caja gris (que es el elemento que establece el apilamiento de contexto) aparece debajo de todo lo demás, y el texto inline de la caja gris aparece encima de la caja azul, lo que está de acuerdo con el orden de apilamiento “natural” de las normas descriptas anteriormente.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 34 | 2:49 PM
    Frameworks CSS: Ventajas e inconvenientes

    Ventajas e inconvenientes del uso de Frameworks CSS, Discutimos acerca de la conveniencia o no de usar frameworks CSS.

    La conveniencia de uso, o no, de los frameworks siempre es un tema polémico. No ocurre sólo con los frameworks CSS, sino también con los frameworks de otros lenguajes o tecnologías, aunque quizás en el caso de las librerías CSS todavía se acentúa más la discusión.

    Las personas a favor del uso de frameworks siempre podrán decir que aceleran los procesos de desarrollo y que ello es suficiente razón para usarlos, pero conviene saber que también cuáles son las desventajas y decidir si nos interesa o no usarlos también en función de ellas.

    Conviene aclarar antes de nada qué nos ofrece un framework CSS, pues la mayoría de las ventajas están directamente relacionadas con las áreas donde éstos actúan.

    Componentes habituales de un framework CSS
    Cada framework CSS es distinto, pero la mayoría proveen de código fuente -hojas de estilo en cascada- para resolver los mismo asuntos:
    • Creación de una rejilla, para que el desarrollador pueda colocar en ella los distintos elementos que forman parte de la web. Esta rejilla, que divide los espacios en distintas columnas, ayuda a posicionar con CSS los componentes de una página de una manera precisa y versátil.
    • Definiciones de estilos de tipografía para los elementos HTML, de modo que no tengamos que definirlos nosotros para cada proyecto.
    • Solución de casos de incompatibilidad entre navegadores, para que un mismo código se vea igual en todos los clientes web más habituales
    • Creación de clases CSS estándares, que puedan ayudarnos a estilizar componentes avanzados de interfaces de usuario.

    Ventajas de los frameworks CSS
    Ahora que ya sabemos dónde indicen las librerías CSS, vamos a listar una serie de ventajas posibles de su utilización.

    Maquetación acelerada y código más limpio:

    Con un framework CSS podemos maquetar de una manera mucho más rápida una página, gracias a la rejilla que nos ofrece. Pero además utilizarlo nos ayudará a tener un código más limpio y más estructurado.

    Solución a los problemas CSS comunes:

    Casi todos los frameworks están realizados bajo la experiencia de trabajo con CSS en muchas páginas web. Por ello siempre ofrecen soluciones a problemas comunes de los desarrolladores.

    Compatibilidad entre navegadores:

    Los navegadores a veces interpretan de manera distinta un mismo código fuente. Esto es algo que a menudo se acentúa en Internet Explorer y que los frameworks CSS solucionan de alguna u otra manera.

    Aprender trucos y prácticas habituales:

    Al leer el código fuente de los frameworks CSS podremos aprender las prácticas de otros desarrolladores y en concreto para los frameworks CSS es muy sencillo examinar su código fuente.

    Desarrollar conforme a un mismo patrón:

    Cuando desarrollamos con un framework tendremos un procedimiento determinado para resolver las necesidades comunes. Esto quiere decir que la manera de actuar en diferentes proyectos puede ser muy similar y por ello a la larga te costará menos esfuerzo de mantenerlos y podrás recordar mejor cuáles son los criterios que utilizaste para desarrollarlos.

    Ayuda al trabajo en grupo:

    Dado que trabajar con un framework CSS nos obliga a desarrollar con un patrón determinado, en proyectos en grupo, las personas que integren el equipo de trabajo podrán tener más claras cuáles fueron las decisiones que se tomaron a la hora de maquetar con un breve vistazo en el código.

    En definitiva, las ventajas más importantes de usar un framework CSS es que agilizará el proceso de desarrollo y nos ayudará bastante a la hora de hacer una web que se vea perfecta en cualquier navegador. Pero dependiendo de nuestro contexto de trabajo podemos encontrar otras ventajas interesantes.

    Desventajas del uso de frameworks CSS
    Hasta ahora, todo lo que hemos comentado de los frameworks CSS es muy bueno, pero existen algunas desventajas que también debemos conocer, para valorar su conveniencia o no y minimizar en la medida de lo posible los aspectos negativos.

    Para mi, existe una desventaja principal bastante importante y otra serie de desventajas menos determinantes. Quizás la desventaja principal es suficiente como para desistir en el uso de frameworks CSS y para entenderla tenemos que conocer antes una de los motivos por los que se creó CSS.

    Como quizás sepamos, CSS es un lenguaje para definir estilos en páginas web, que se creó con la intención de separar el contenido de la presentación. Con HTML especificamos el contenido de una página y con CSS especificamos, por separado, la presentación. Pues bien, la mayoría de los frameworks CSS se cargan esta ventaja del lenguaje, o al menos la limitan. Esto es porque, cuando queremos usar la rejilla para posicionar los elementos, muchas veces estamos utilizando código HTML con clases (Class de CSS) que especifican la posición que van a tener esos elementos. Eso hace que estemos volviendo a mezclar contenido con presentación y quiebra por tanto algunas de las ventajas que habíamos adquirido al trabajar con CSS.

    Asimilada para mi esta desventaja principal, veamos un completo listado de los inconvenientes del uso de Frameworks CSS:

    Mezclas de nuevo el contenido y la presentación:

    Cuando diseñas una web con CSS podrías cambiar su aspecto radicalmente con sólo cambiar la hoja de estilos, incluso la manera como los elementos se posicionan en la página. Pero cuando utilizas un framework estás colocando clases (de CSS) que indican dónde se van a posicionar los elementos en una rejilla y, si quieres cambiar la posición de esos elementos más adelante te verás obligado a cambiar el código HTML de la página y colocar otras clases CSS, que permitan situarlos en otros puntos de esa rejilla.

    Tendrás código CSS que no utilices nunca:

    El framework CSS contiene diversos códigos CSS útiles en casos generales, pero lo cierto es que cuando diseñas una página web una buena parte de ese código no lo vas a usar nunca. Es decir, al utilizar un framework estamos cargando innecesariamente el peso en bytes de nuestro código CSS. Esto lo podemos arreglar "a mano" limpiando el CSS del framework, eliminando código que no lleguemos a utilizar en ninguna página del sitio.

    Curva de aprendizaje más lenta:

    Aunque aprender a usar un framework CSS no es nada complicado, tendrás que conocer sus particularidades para sacarle provecho. Tendrás también que aprender a diseñar de una manera determinada, para usar la rejilla con la que se posicionan los elementos. Todo esto, insisto, no es difícil, pero lleva su tiempo. Tanto es así que, si vas a diseñar una sola web, quizás tardes más tiempo en aprender a trabajar con el framework CSS que lo que tardarías en diseñarla sin utilizarlo. En definitiva, sólo sacarás provecho al framework cuando lo conozcas, es decir en el segundo, o siguientes diseños que realices con él.

    No estás aprendiendo a valerte por ti mismo:

    Muchos de los problemas de diseño típicos ya vienen resueltos en un framework y esa situación, a pesar de ser una ventaja, puede derivar en que al final no sepas solucionar esos problemas básicos por ti mismo. Como ya estaba resuelto, no tuviste la ocasión de resolver el problema y por tanto no aprendiste con esa experiencia. Del mismo modo, probablemente aprenderás a resolver tus necesidades aplicando clases CSS del framework, pero realmente puede que no sepas qué estilos CSS estás aplicando y por qué. En definitiva, si antes de empezar a trabajar con frameworks no tienes una experiencia y conocimiento suficiente del lenguaje CSS y sus usos, puede que aprender a diseñar con un framework represente una desventaja para aprender bien CSS.
    Otro detalle sobre este mismo punto es que cuando quieras cambiar de Framework, tendrás que aprender de nuevo la forma de trabajar y con toda probabilidad cambiar el código HTML de tu página para ajustarlo a los nuevos nombres de clases y estilos CSS.

    Conclusión: ¿Usar o no frameworks CSS?
    La decisión final sobre usar o no un framework debe correr a cargo de cada desarrollador. Un framework CSS no es nada del otro mundo, sino una serie de estilos CSS útiles para muchas personas, pero no por eso deben ser útiles para ti. Incluso, puede que a lo largo de tu experiencia ya hayas creado una serie de clases CSS y estilos básicos que ya incluyes en todos tus proyectos. Por decirlo de alguna manera, puede que ya estés usando tu propio "framework" rudimentario y no lo sepas.

    En mi opinión, su conveniencia o no también depende de cómo utilices el framework. Si ya conoces CSS y te interesas un poco sobre cómo funcionan las cosas, puedes minimizar las desventajas que tienen e incluso pueden venirte bien para aprender. Si los usas sin conocer realmente CSS y sin importarte lo que tienen dentro y qué estás aplicando realmente cuando invocas las clases CSS puede que te resulten complicados y a la larga tampoco te beneficien mucho en tu línea de aprendizaje como desarrollador web.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 35 | 4:13 PM
    Declaración !important en CSS

    En CSS podemos declarar reglas de estilos como !important para que tomen precedencia sobre otras reglas de estilos que se puedan encontrar en una página web.

    Vamos a ver en este post una declaración un tanto especial que podemos utilizar al definir reglas de estilos para una página web. Se trata de !important, una palabra que hará que determinadas propiedades tomen mayor importancia y, por tanto, se tengan más en cuenta que otras que puedan sobreescribirlas.

    Otra cosa que veremos de paso es cómo el uso de !important nos proporcionará una sencilla y valida técnica para poder definir reglas de estilos distintas para navegadores antiguos, como Internet Explorer 6.

    Además, important! se puede utilizar en las hojas de estilo de usuario, para que cada persona pueda definir para su propio navegador si lo desea, un estilo CSS por defecto que se tenga en cuenta en todas las web que visitemos.

    Uso y efecto de la declaración !important
    Para utilizar !important en una regla de estilo, siempre se coloca en la parte del valor del atributo, antes del punto y coma ";". Por ejemplo

    Quote
    body{
    font-family: verdana, arial !important;
    }

    El efecto es que siempre se aplicará el estilo definido como !important, aunque luego se pueda sobrescribir con otro estilo más tarde en la misma declaración o en otra distinta. Veamos este ejemplo:

    Quote
    td{
    font-size: 16pt !important;
    font-size: 8px;
    }

    Tenemos una declaración de estilos para los elementos TD, donde definimos dos veces el atributo font-size. En condiciones normales, se tendría en cuenta el valor definido en segundo lugar, porque lo sobrescribe. Sin embargo, que que el primer font-size está definido como !important, en realidad lo que ocurrirá es que se tenga en cuenta finalmente y el tamaño de letra por tanto será 16pt.

    Este efecto lo podemos aplicar también a distintos tipos de selectores de CSS. De modo que podremos encontrarnos que para un elemento se indique un estilo y luego para una clase (class de CSS) se aplique otro y se tenga en cuenta el definido como !important. Veamos este ejemplo de CSS:

    Quote
    td{
    font-family: verdana, arial !important;
    }
    td.micelda{
    font-family: monospace;
    }

    Que aplicado sobre el siguiente HTML:

    Quote
    <table>
    <tr>
    <td class="micelda">Hola</td>
    <td>23232</td>
    </tr>
    </table>

    Daría como resultado, en condiciones normales, que la primera celda, de clase "micelda", tuviese la fuente font-family: monospace y la segunda celda, que no tiene ningún class, tuviera el estilo font-family: verdana, arial. Sin embargo, como el font-family definido en primer caso tiene la declaración !important, la fuente será siempre verdana, arial, para las dos celdas.

    Usar !important para definir estilos diferentes en navegadores antiguos
    La declaración !important no la entienden todos los navegadores, por tanto, algunos simplemente la ignorarán y otros no. El caso más representativo, por ser un navegador que todavía se utiliza habitualmente por los internautas, sería Internet Explorer 6.

    Así pues, utilizando !important podemos conseguir definir estilos diferentes para Internet Explorer 6 y para la mayoría de los otros navegadores que pueden visitar nuestra web. Esto lo podemos conseguir de la siguiente manera.

    Quote
    div{
    background-image: url(fondo-semitransparente.png) !important;
    background-image: url(fondo.gif);
    }

    Como Internet Explorer 6 ignora la directriz !important, ocurrirá que tendrá en cuenta el segundo valor de background-image, ya que está repetido y por tanto sobrescribe al primero. Por ello, en este caso IE6 mostrará como fondo el archivo llamado "fondo.gif".

    Los otros navegadores, como entienden !important, mostrarán el estilo que había definido anteriormente y por tanto utilizarán como fondo el archivo "fondo-semitransparente.png".


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 36 | 1:29 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 fácil 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 así optimizaríamos espacio:

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

    También nos hará 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º 37 | 1:35 PM
    La especificidad en Hojas de Estilo CSS

    Un pequeño pero eficaz consejo que puedo dar para todos aquellos que empiezan a desarrollar sus primeras hojas de estilo CSS, es tener en cuenta el factor de la especificidad en CSS, su influencia y la manera de controlarlo.

    La especificidad es una propiedad pocas veces valorada por muchos desarrolladores web novatos, y que por lo mismo puede causar la desesperación de más de uno al momento de aplicar estilos a nuestro código.

    ¿Qué es la especificidad en CSS?
    ¿En qué consiste? Básicamente la especificidad se refiere al valor que toma cada uno de los elementos de una hoja de estilo, hay selectores que tienen más peso e importancia que otros, es decir más especificidad.

    Entre más especificidad exista, tendremos menos posibilidades de equivocarnos al aplicar el estilo que queremos a cierto elemento, y es ahí donde la desesperación de no obtener lo que queremos desaparecerá.

    Como calcular la especificidad CSS
    Existe una forma sencilla de calcular la especificidad CSS, es mediante una fórmula considerada incluso como un cálculo ya estandarizado. Consiste en sumar los puntos totales de una sentencia CSS en base a los selectores o elementos de los que está compuesto.

    Se le da un valor de 1 punto a un elemento simple como una etiqueta a, p o div, a un selector de clase se le da el valor de 10 puntos y a un selector de id se le da un valor de 100 puntos, siendo únicamente superado por los atributos de estilos a los que se les da un valor de 1000 puntos.

    Es decir; supongamos que queremos agregar un estilo los párrafos de nuestro documento, si agregamos en nuestro CSS un selector p{…}, este será utilizado para dar estilo a todos los párrafos del HTML, pero sólo se le dará el valor total de 1 punto, esto quiere decir que tiene poco especificidad.

    Por lo cual si existe otro selector en el mismo CSS que diga así “.par p{…}” tendrá mayor importancia que el anterior, ya que le estamos agregando una clase por lo que la especificidad aumenta en 10 puntos es decir 10 puntos por el selector clase más 1 punto por el elemento nos da 11 puntos.

    De la misma manera esto se aplica para los id, si agregamos una línea que diga “#parr p{…}” esta tomará el valor de 101 puntos de especificidad, por lo que será la más importante, así podemos crear combinaciones para que los estilos se apliquen correctamente.

    Un ejemplo de especificidad con CSS
    Con el siguiente código CSS:

    Quote
    p{
    background: crimson;//Especificidad de 1 punto
    }
    .par{
    background: pink;//Especificidad de 10 puntos
    }
    p.par{
    background: maroon;//Especificidad de 11 puntos
    }
    #parr{
    background: orange;//Especificidad de 100 puntos
    }
    p#parr{
    background: red;//Especificidad de 101 puntos
    }
    p.par#parr{
    background:green;//Especificidad de 111 puntos
    }

    Obtendré los siguientes resultados si inserto este bloque en mi HTML:

    Quote
    <p>El fondo de este párrafo será color carmesí</p>
    <p class="par">El fondo de este párrafo será color granate</p>
    <div class="par">Este div tendrá el fondo de color rosa</div>
    <p id="parr" class="par">El fondo de este párrafo será de color verde</p>
    <p id="parr" style="background: black;">El fondo de este párrafo será negro porque use un atributo de estilo dentro de la etiqueta</p>
    <p id="parr">El fondo de este párrafo será rojo</p>

    Tengan en mente estos números al momento de realizar sus CSS y no se confundirán al momento de desplegar su web en su navegador, ya que obtendrán lo que calcularon.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 38 | 12:38 PM
    25 reglas para hacer CSS accesibles

    Este post recoge un resumen de las técnicas descritas. Se puede consultar el original para profundizar en cada punto.

    1. Use un número mínimo de hojas de estilos en su sitio.

    2. Use hojas de estilo vinculadas en vez de estilos incrustados (directamente en las etiquetas) y evite hojas de estilo incrustadas (directamente en la página).

    3. Si tiene más de una, use el mismo nombre de clase ("class") para el mismo concepto en todas las hojas de estilo.

    4. Use la unidad "em" para fijar el tamaño de letra.

    5. Utilice unidades de medida relativas y porcentajes. Utilice medidas absolutas de longitud sólo cuando las características físicas del medio de salida sean conocidas, por ejemplo con imágenes de mapa de bits.

    6. Proporcione un equivalente textual para cualquier imagen o texto importantes generados por la hoja de estilo (por ejemplo, mediante las propiedades "background-image", "list-style", o "content").

    CSS2 permite a los usuarios acceder a representaciones alternativas de los contenidos especificadas en valores de los atributos cuando se emplean juntos los siguientes:

    o selectores de atributos.

    o la función attr() y la propiedad "content"

    o los seudo-elementos :before (antes) y :after (después)

    7. Asegúrese de que todo contenido importante aparezca dentro del objeto del documento. El texto generado por las hojas de estilo no forma parte del código fuente del documento y no estará disponible para las ayudas técnicas que acceden al Modelo de Objeto del Documento Nivel 1 ([DOM1]).

    CSS2 incluye diferentes mecanismos que permiten generar contenido desde la hoja de estilo:

    o Los seudo-elementos :before y :after y la propiedad "content". Cuando éstos se emplean conjuntamente, permiten la inserción de marcadores antes o después del contenido del elemento.

    o Las propiedades "cue", "cue-before", y "cue-after". Estas propiedades permiten a los usuarios reproducir un sonido antes o después del contenido de un elemento.

    8. Especifique siempre un tipo de letra genérico por defecto.

    9. Use las siguientes propiedades CSS2 para controlar la información de la fuente: "font", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", y "font-weight", en lugar de los siguientes elementos y atributos de tipo de letra desaconsejados en HTML: FONT, BASEFONT, "face", y "size".

    10. Si tiene que usar los elementos HTML para controlar la información sobre el tipo de letra, utilice BIG y SMALL, que no están desaconsejados.

    11. Las siguientes propiedades CSS2 se pueden emplear para dar estilo al texto:

    o Mayúsculas/minúsculas: "text-transform" (para mayúsculas, minúsculas y primera letra mayúscula).

    o Efectos de sombra: "text-shadow"

    o Subrayado: "text-decoration".

    12. No use los elementos BLINK o MARQUEE. Estos elementos no aparecen en ninguna especificación W3C para HTML (es decir, son elementos no estándares)

    Si se emplea contenido parpadeante (por ejemplo, un titular que aparece y desaparece a intervalos regulares), proporcione un mecanismo para detener el parpadeo. Con CSS, "text-decoration: blink" producirá el efecto de parpadeo y además permitirá al usuario detener el efecto desactivando las hojas de estilo o redefiniendo la regla en una hoja de estilo de usuario.

    13. Utilice hojas de estilo para dar estilo al texto, mejor que representar el texto con imágenes. Usar texto en lugar de imágenes significa que la información estará disponible para un mayor número de usuarios y permitirá a los usuarios redefinir los estilos del autor y cambiar los colores o los tamaños de letra más fácilmente.

    Si es necesario utilizar un mapa de bits para crear un efecto de texto (letra especial, transformación, sombras, etc.) el mapa de bits debe ser accesible.

    14. Las siguientes propiedades CSS2 pueden ser usadas para controlar el formateo y posición del texto:

    o Sangría: "text-indent". No utilice BLOCKQUOTE o cualquier otro elemento estructural para hacer sangrías en el texto.

    o Espaciado de letras o palabras: "letter-spacing", "word-spacing". Por ejemplo, en lugar de escribir "H O L A" (que los usuarios generalmente reconocen como la palabra "hola", pero que un lector de pantalla leería como letras independientes) los autores pueden crear el mismo efecto visual aplicando a "HOLA" la propiedad "word-spacing". Los textos sin espacios serán transformados en discurso más fácilmente.

    o Espacio en blanco: "white-space". Esta propiedad controla la interpretación del espacio en blanco del contenido de un elemento.

    o Dirección del texto: "direction", "unicode-bidi".

    o Los pseudoelementos : first-letter y :first-line permiten a los autores hacer referencia a la primera letra o línea de un párrafo del texto.

    15. Use números en vez de nombres, para especificar colores.

    Use estas propiedades CSS para especificar colores:

    o "color", para el color de primer plano del texto.

    o "background-color", para el color de fondo.

    o "border-color", "outline-color" para colores de bordes.

    o Para colores de vínculos, haga referencia a las pseudo-clases :link, :visited, y :active.

    16. Asegúrese de que los colores de primer plano y de fondo tienen buen contraste. Si especifica el color de primer plano, siempre debe especificar también el color de fondo (y viceversa).

    17. Asegúrese de que la información no se transmite sólo a través del color.

    18. Emplee UL para listas sin ordenar y OL para las ordenadas (por ejemplo, utilizar marcadores de forma apropiada) conjuntamente con CSS para proporcionar indicaciones contextuales.

    19. Hasta que CSS2 sea ampliamente utilizada por las aplicaciones de usuario o éstas permitan al usuario controlar la interpretación de las listas a través de otros medios, los autores deberían considerar el proporcionar pistas contextuales en las listas anidadas no numeradas. (Ver ejemplo en el documento original)

    20. Los contenidos deben ser maquetados, ubicados, colocados en capas y alineados mediante hojas de estilos (sobre todo mediante las propiedades CSS de float y colocación absoluta) y no mediante tablas:

    o Las propiedades "text-indent", "text-align", "word-spacing" y "font-stretch", permiten a los usuarios controlar el espaciado sin añadir espacios adicionales. Utilice 'text-align:center' en lugar del elemento desaconsejado CENTER.

    o Con las propiedades 'margin', 'margin-top', 'margin-right', 'margin-bottom' y 'margin-left', los autores pueden crear espacios en los cuatro lados del contenido de un elemento, en lugar de añadir espacios de no separación ( ).

    o Con las propiedades "float", "position", "tops", "right", "bottom" y "left", el usuario puede controlar la posición visual de casi cualquier elemento con independencia de donde aparezca el elemento en el documento. Las propiedades de ubicación pueden ser usadas para crear notas marginales (que se numerarán automáticamente), barras laterales, efectos similares a los marcos, encabezamientos y pies simples y otras más.

    o La propiedad "empty-cells" permite a los usuarios dejar vacías celdas de tablas y poder proporcionarles bordes en la pantalla o en papel. Una celda de datos que debe estar vacía no debería ser llenada con un espacio en blanco o un espacio "non-breaking" sólo para lograr un efecto visual.

    21. Proporcione textos equivalentes para todas las imágenes, incluyendo las imágenes invisibles o transparentes. Si los diseñadores de contenido no pueden usar hojas de estilo y deben utilizar imágenes invisibles o transparentes (por ejemplo, con IMG) para diseñar con imágenes en las páginas, deberían especificar alt="" para ellas.

    22. Utilice las hojas de estilo para crear líneas y bordes. Las líneas y bordes pueden transmitir la noción de "separación" a los usuarios que pueden ver, pero este sentido no puede ser deducido fuera de un contexto visual.

    Utilice las propiedades CSS para especificar los estilos de los bordes:

    o "border", "border-width", "border-style", "border-color".

    o Para las tablas, "border-spacing" y "border-collapse".

    o Para contornos dinámicos, "outline", "outline-color", "outline-style" y "outline-width".

    23. Asegúrese de que la presentación del contenido es comprensible cuando no se aplican hojas de estilos. Los autores deberían diseñar siempre documentos que tengan sentido sin hojas de estilo (por ejemplo, el documento debería escribirse en un orden "lógico") y entonces aplicar hojas de estilo para lograr efectos visuales.

    24. Estudie la necesidad de utilizar propiedades auditivas de CSS2, las cuales proporcionan información para usuarios invidentes y usuarios de navegadores de voz de manera parecida al tipo de letra que proporciona información visual.

    Las siguientes propiedades forman parte de hojas de estilo en cascada de CSS2.

    o "volume" controla el volumen del texto hablado.

    o "speak" determina si el contenido se pronunciará y, en caso afirmativo, si se debe deletrear o leer como palabras.

    o "pause", "pause-before", y "pause-after" controla las pausas antes y después de anunciar el contenido. Permite a los usuarios separar los contenidos para mejorar la comprensión.

    o "cue", "cue-before", y "cue-after" especifican un sonido que se reproducirá antes y después del contenido, lo que puede ser valioso para la orientación (parecido a una imágen visual).

    o "play-during" controla los sonidos de fondo durante la presentación del elemento (parecido a un imagen de fondo).

    o "azimuth" and "elevation" proporcionan una dimensión al sonido, lo que permite a los usuarios distinguir las voces, por ejemplo.

    o "speech-rate", "voice-family", "pitch", "pitch-range", "stress", y "richness" controlan las cualidades de los contenidos hablados. Cambiando estas propiedades para diferentes elementos, los usuarios pueden ajustar con detalle la presentación sonora-auditiva de los contenidos.

    o "speak-punctuation" y "speak-numeral" controlan la forma de decir los números y la puntuación, lo que afecta la calidad de la experiencia para la navegación por voz.

    o la propiedad "speak-header" describe cómo se debe decir la información sobre los encabezados antes de una celda de tabla.

    25. Cree distintas hojas de estilo para adaptar la presentación del documento a diferentes dispositivos de salida (Braille, sintetizadores de voz o dispositivos TTY, pantalla, móvil, etc.) mediante los "tipos de medios" de CSS2 (empleados con las reglas @media) Las reglas "@media" también pueden reducir los tiempos de descarga porque permiten a las aplicaciones de usuario ignorar reglas inapropiadas.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 39 | 2:36 PM
    Lista de errores en el uso de CSS

    Una lista de errores comunes de principiante que suelen aparecer al aprender CSS para ensanchar este y aquel tema ya expuesto:

    1. Ignorar la compatibilidad con los navegadores.
    Uno de los peores errores que podemos cometer es el de no querer ver la web o el blog en los navegadores más usados para ver como queda. Esto tiene que ver con la validación de W3 Consortium, así que si tienes tu sitio web correctamente validado, cumpliendo así los estándares, debería verse bien en todos los navegadores que cumplan a los estándares. Aunque también se pueden realizar hacks para Internet Explorer usando los comentarios condicionales.

    Hay muchos sitios para ver la web en otro navegador de forma online, por ejemplo, en IE Net renderer podremos ver como queda nuestra web en IE 5, 6, 7 y 8, sin tener que abrir el navegador de Internet Explorer, de forma online.

    2. Ignorar las resoluciones mínimas
    Debemos adaptar nuestro sitio web hasta el formato de resolución mínima, que en la actualizad es de 1024 por 768. Es vital que adaptemos la web a las resoluciones más usadas porque si no perderemos muchas visitas.

    3. Ignorar los frameworks
    No debemos ignorar los frameworks, ya que estos nos ayudan a agilizar 960.gs hay muchos frameworks probados y testeados, funcionan a la perfección.

    4. No utilizar clases genéricas
    Debemos utilizar clases genéricas siempre que sea posible. Estas 3 clases mostradas a continuación debería usarse en todo el sitio, cada vez que quisiéramos hacer un float. Un ejemplo sería:

    Quote
    .clear{clear:both}
    .rightright{float:rightright}
    .left{float:left}

    El div sería:

    Quote
    <div id="block_text" class="right"></div>

    5. No validar el HTML
    Una de las peores cosas que podemos hacer es no validar nuestro código HTML. Validarlo nos evitará muchos problemas, ya que estaremos cumpliendo los estándares y, aplicado al punto nº 1, nuestra web se tendrá que ver en todos los navegadores que cumplan los estándares.

    6. No validar el CSS
    Esto por supuesto es un pecado tan grave como el mencionado en el punto nº 5, deberemos validar nuestro código CSS para cumplir los estándares.

    7. Usar imágenes de fondo pesadas
    Debemos evitar, por muy tentativo que parezca, usar imágenes de fondo que contengan muchos KB, es decir, que pesen mucho, ya que hará la carga eterna al visitante y abandonará la página o blog.

    8. Usar CSS para todo
    Tampoco tenemos que caer en el error de usar CSS para todo, por muy liviano que parezca, también hay que usar otras alternativas para tener una buena accesibilidad hacia nuestros lectores.

    9. No usar CSS como clase
    Debemos utilizar CSS siempre que podamos, haciendo la llamada desde el elemento hacia una clase, y no poniendo el código CSS ya dentro del elemento. Un ejemplo INCORRECTO sería este:

    Quote
    <a href="algo.html" style="float: right; color: rgb(51, 51, 51);">enlace</a>

    Debería ser así:

    Quote

    <a href="algo.html" class="estilo_enlace">enlace</a>

    10. Usar demasiados archivos CSS
    No se debe sobrepasar el límite de archivos CSS de 12, pero a partir de 5 ya empieza a ser malo. Lo correcto sería tener solo dos archivos CSS en las que ubicar nuestro código.


    Esta lista de errores nos ayudará a ver que estamos haciendo mal, pudiendo aprender de nuestros propios errores.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 40 | 3:55 PM
    Los peores errores CSS de un diseñador

    Cada uno al aprender tiene sus errores, que va corrigiendo a lo largo del tiempo.

    A continuación se detallan los peores errores mientras se aprende CSS:

    1. * { font-size:11px; }
    No es recomendable poner asterisco al lado de la línea de código CSS. Se debe evitar siempre que se pueda. ¿Para qué son esos asteriscos?

    2. * { color:#000; }
    Lo mismo que con la fuente, no es recomendable poner asterisco al lado de la línea.

    3. Declaraciones CSS largas

    Quote
    .mi-div { margin-right:20px; margin-left:20px; margin-top:3px; }

    En vez de poner las declaraciones como he dicho arriba, podríamos hacer así:

    Quote
    .mi-div { margin: 3px 20px 0px 20px; }


    4. Colores CSS largos

    Quote
    .my-div { color:#000; background:#fff; border-bottom:#f00; }

    En vez de poner el código de los colores largo, podríamos ponerlo como muestra en el ejemplo, es decir, en vez de #FFFFFF, poner #FFF, el resultado será el mismo.

    5. Declaraciones CSS multilínea

    Según el webmaster, prefiere tener las declaraciones en una sola línea, en vez de tenerlas en varias líneas, es decir, en vez de esto:

    Quote
    /* demasiado larga */
    p
    {
    font-size:12px;
    line-height:19px;
    color:#999;
    margin:0 0 5px 0;
    padding:0 0 15px 0;
    text-indent:20px;
    font-family:arial, verdana, sans-serif;
    }
    /* mucho mejor */
    p { font-size:12px; line-height:19px; color:#999; margin:0 0 5px 0; padding:0 0 15px 0; text-indent:20px; font-family:arial, verdana, sans-serif; }


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 41 | 2:39 PM
    Cajas con alturas iguales usando CSS (Equal Height Boxes with CSS)

    A continuación de este post les ofrezco algo nuevo.

    Muchas veces más de uno de nosotros nos hemos encontrado con “columnas” de distinto tamaño. Es decir, cajas de diferente altura. Siempre queremos conseguir que independientemente del contenido de las mismas la altura sea igual para todas.

    Con CSS de forma muy muy sencilla podremos conseguir esto, no tenemos que recurrir a Javascript para modificar dinámicamente las alturas de la cajas, ni usar otros métodos que acumalan demasiados divs para conseguirlo, y que luego abarcan problemas del diseño de la estructura.

    Ahora veremos que usando los atributos display:table; display:table-row; y display:table-cell; conseguiremos convertir las cajas o divs en una tabla, y ya sabemos que con las tablas nunca veremos una celda más alta que otra de la misma fila.

    En el siguiente ejemplo, usaremos 3 cajas que se convertirán en 3 columnas con el mismo alto, independientemente de su contenido. La explicación de como hacerlo se explica en el mismo HTML que hay a continuación.

    Documento HTML

    Quote
    <div class="equal">
    <div class="row">
    <div class="one">
    <h2>Esto es una caja</h2>
    <p>Este caja tiene menos contenido que la que está al lado, sin emabargo tienen la misma altura.</p>
    </div>
    <div class="two">
    <h2>Esta es otra caja</h2>
    <p>Aquí tenemos más contenido que las otras. Si todas las cajas fueran celdas de la tabla, la celda con más contenido tendra la altura más grande. Y en una tabla todas las celdas de una misma fila siempre tendrán la misma altura. Esto funciona como un tabla, pero no lo es.</p>
    <p>En su lugar, <em>display: table, display: table-row y display: table-cell</em> se utilizan para hacer que los divs se comporten como celdas de tabla. Excelente. No obstante, es soportado por los navegadores modernos, como <strong>Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, Internet Explorer 8 y Netscape</strong>.</p>
    </div>
    <div class="three">
    <p>Esta caja tiene mucho menos contenido, y podemos observar la alineación vertical del contenido..</p>
    </div>
    </div>
    </div>

    Debemos recordar que tan solo es soportado por los navegadores modernos; Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, Internet Explorer 8 y Netscape.

    Documento CSS

    Quote
    .equal {
    display:table;
    border-collapse:separate;
    }
    .row {
    display:table-row;
    }
    .row div {
    display:table-cell;
    }
    .equal {
    margin:10px auto;
    border-spacing:10px;
    background:#898B60;
    width:80%;
    }
    .row div {
    background:#fff;
    }
    .row div.one {
    width:40%;
    }
    .row div.two {
    width:40%;
    }
    .row div.three {
    vertical-align:middle;
    }

    Ver ejemplo funcionando

    Cada vez vamos viendo las facilidades y beneficios que nos aporta CSS ahora y en el futuro, esperemos que muy pronto podamos usar este tipo de propiedades para conseguir este tipo de cosas, sin tener que recurrir a opciones más complicadas de aplicar por culpa de que algunos navegadores no soporten ciertas propiedades. En este caso igualar la altura de distintos divs o cajas de distinto contenido.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 42 | 4:23 PM
    Selectores de atributo, ¿Todavía nos los utilizas?

    Todos sabemos que las etiquetas en HTML pueden tener atributos tales como alt, title, href etc… Aparte de para lo obvio estos atributos nos pueden servir para dar especificidad a nuestros selectores CSS. Los llamados selectores de atributo, son unos selectores avanzados y escasamente conocidos, capaces de identificar estos atributos de un elemento y pasarles un estilo. Con ellos nos podríamos librar de por ejemplo, poner clases e identificadores a muchas etiquetas HTML.

    Existen un número reducido de selectores de atributo en CSS2, pero éstos se han ampliado para la próxima versión de CSS3. En este artículo veremos cuantos tipos de selectores de atributo hay y la mejor manera de utilizarlos.

    Selectores por atributos en CSS2 (no funcionan en ie6)
    etiqueta[atributo]: Los estilos se aplicarán a todas las etiquetas que tengan ese atributo.

    Quote
    <!--HTML-->
    <abbr title="Cascading Style Sheets">CSS</abbr>
    <!--CSS-->
    abbr[title] {color: #666;border-bottom: 1px dotted #666;}

    etiqueta[atributo=valor]: Se aplicará a los estilos de todos las etiquetas que tengan ese atributo con ese valor.

    Quote
    <!--HTML-->
    <label for="nombre">Nombre</label>
    <input type="text" id="nombre" />
    <input type="submit" value="Enviar" />
    <!--CSS-->
    input[type="text"] {width: 200px;}

    etiqueta[atributo~=valor]: El estilo se aplicará a las etiquetas que tengan ese atributo y que uno de sus valores separados por espacios sea el valor:

    Quote
    <!--HTML-->
    <a href="#" title="Abre PDF ">Descargar<a>
    <a href="#" title="descargar">El selector de atributo no se aplicará en este enlace</a>
    <!--CSS-->
    a[title~=PDF]{background:url(img/pdf.gif) no-repeat center right}

    etiqueta[atributo|=valor]: Se aplican los estilos a todas las etiquetas que tengan ese atributo y que sea igual a valor o a valor seguido de un guíon. Este tipo de selector es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.

    Quote
    <!--HTML-->
    <span lang="en">Windows</span>
    <!--CSS-->
    *[lang|="es"] { color : red }

    Selectores de atributos en CSS3 (no funcionan en ie6)
    Los navegadores Standard, ya incluyen soporte para varios o casi todos los selectores de CSS3, por lo tanto los selectores que veremos a continuación funcionaran correctamente en Opera, Safari, Firefox y Chrome. Según la Microsoft Developer Network de Microsoft, estos selectores son compatibles en Internet Explorer 7 y 8.

    A este respecto, existe una herramienta muy útil llamada CSS Selectors test que permite comprobar los selectores que soporta el navegador con el que se hace la prueba.

    elemento[atributo^="valor"]: Se seleccionan todos los elementos que tienen este atributo y cuyo valor comienza por la cadena de texto indicada.

    Quote
    <!--HTML-->
    <a href="http://www.circulodemaquetadores.com/" >este enlace tendrá un color gris</a>
    <a href="#" >El selector de atributo no se aplicará en este enlace </a>
    <!--CSS-->
    a[href^=http://] {color:#ccc}

    elemento[atributo$="valor"]: selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada. Este selector es muy útil para agregar un icono diferente al lado de cada tipo de archivo que tu sitio web enlace. De este modo, los usuarios de tu sitio sabrán cuándo obtendrá una imagen, un archivo PDF o un documento de Word, aumentando así la usabilidad de tu web.

    Quote
    /*CSS*/
    a[href$=".jpg"] {background: url(jpeg.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
    a[href$=".pdf"] {background: url(pdf.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
    a[href$=".doc"] {background: url(word.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
    a[href$=".swf"] {background: url(flash.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}

    elemento[atributo*="valor"]: Se aplica a todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.

    Quote
    <!--HTML-->
    <p title="home">El selector de atributo no se aplicará en este párrafo </p>
    <p title="contact">Este párrafo tendrá un tamaño de fuente de 1.2em y negrita</p>
    <p title="house"> El selector de atributo no se aplicará en este párrafo</p>
    <!--CSS-->
    p[title*="ont"] {font-size:1.2em; font-weight:bold}


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    lordmaul
    Mensajes: 14
    Reputación: 0
    Mensaje Nº 43 | 9:49 PM
    Podrias explicarme esto mejor?

    YO lo que quiero es que una imagen se vea a 127px x 72px. Pero no quiero que sea redimensionada sino que se recorte... no se si me explico.... es el código que tu explicas aquí lo que pasa es que intente ponerlo pero no lo entiendo muy bien.

    Muchas gracias!

    Saludos!

    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 44 | 4:33 PM
    Rápidos rollovers con CSS

    Cuando hacemos un rollover, lo usual es tener 2 o más imágenes cortadas iguales, pero con diferentes estilos (otro color, forma, sombra, etc) y cuando construimos el código que la hace funcionar, se usa comúnmente:

    Quote
    #menu a {
    background: url("boton.gif") top left no-repeat;
    }
    #menu a:hover {
    background-image: url("boton_over.gif");
    }
    #menu a:active {
    background-image: url("boton_activo.gif");
    }

    A continuación, muestro una manera simple de ahorrar la carga de la imagen (gif o jpg). En realidad no es magia lo que haremos, solamente un truco que en vez de cargar una nueva imagen al hacer el hover, se trabajará por sobre una misma imagen, la que contendrá todas las instancias necesarias. Entonces lo bueno es que esta imagen se cargue completa la primera vez, y al hacer el hover, ésta se desplazará lo necesario para que muestre donde se encuentre la parte correspondiente a esa instancia; lo mismo si tiene un active. Pero le agregaremos algo más.

    Un sólo GIF, el que contiene las 3 instancias necesarias: link, hover y active

    OK, entonces usaremos la imagen arriba para que el botón muestre sus 3 instancias. Lo bueno es que se cargará sólo la primera vez (cuando se cargue el sitio completo), y cuando llamemos a otra instancia, esta imagen la desplazaremos los pixeles necesarios (a la derecha o izquierda) para mostrar la gráfica correspondiente. El código, a continuación:

    Quote
    #menu a {
    background: url("boton_rollover.gif") 0 0 no-repeat;
    }
    #menu a:hover {
    background-position: -150px 0;
    }
    #menu a:active {
    background-position: -300px 0;
    }

    Ahora, un pequeño detalle que se ha encontrado en esto, es que ciertos browsers han mostrado (IE Win) una demora en este desplazamiento del background, por lo que en este lapsus ninguna imagen es desplegada (el tiempo es muy poco, pero igualmente se nota y molesta visualmente). Para solucionar esto, solamente se integrará un div interior, el que contendrá un background con la misma imagen del botón. Así, cuando ocurra este espaciado, no quedará en blanco la instancia y mostrará siempre de fondo el botón:

    Quote
    #menu {
    background: url("boton_rollover.gif") 0 0 no-repeat;
    }

    * Esto funciona con todos los browsers que soportan CSS3 (Firefox, Opera, Safari etc).

    Ver ejemplo final.

    El código completo quedaría así:

    Quote
    #menu {
    margin: 0;
    padding: 0;
    width: 150px;
    height: 40px;
    text-align: center;
    background: url("boton_rollover.gif") 0 0 no-repeat;
    }
    #menu a {
    padding-top: 6px;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #333333;
    font-weight: bold;
    font-size: 24px;
    text-decoration: none;
    background: url("boton_rollover.gif") 0 0 no-repeat;
    }
    #menu a:hover {
    background-position: -150px 0;
    }
    #menu a:active {
    background-position: -300px 0;
    }


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 45 | 3:44 PM
    Usando CSS3 ahora

    No hay duda de que CSS3 llegó para quedarse: es moderno, elegante y finalmente entrega control total a los estilos. Cada vez lo utilizo más, y me encanta tener que pensar menos en solucionar problemas y esforzarme más en dar el formato que realmente quiero.

    Paralelamente, se siente cada vez más fuerte el fervor por dejar de lado ese infame IE6, el último remanente de la guerra de los browsers. Ese que nos mantiene en la edad media, y no nos deja pasar finalmente a la ilustración… y disfrutar a plenitud de CSS3 (Sí, lo sé. Además están IE7 e IE8, pero algo es algo).

    Actualmente existen algunas propiedades que puedes ya utilizar en los browsers modernos, lo que hará que tu diseño se distinga del resto. A continuación, las más atractivas:

    Bordes redondos
    Ya no más cortar en Photoshop esos bordes y tratar de hacerlos calzar; ahora puedes crearlos directamente con CSS3:

    Quote
    border-radius: 10px;

    Ahora, para que Firefox y Safari/Chrome lo reconozcan, debes ayudarlos agregando lo siguiente:

    Quote
    -moz-border-radius: 10px; /* para Firefox */
    -webkit-border-radius: 10px; /* Para Safari/Chrome */

    Soportado por Safari/Chrome y Firefox 3.1+.

    Textos con sombra
    Con text-shadow puedes darle sombras a tus tipografías, haciendo tus títulos más atractivos:

    Quote
    text-shadow: 2px 2px 5px #000;

    Soportado por Firefox 3.5+, Safari/Chrome y Opera 9.5+.

    Cajas con sombras
    ¡Genial! Además, puedes darle sombras a cualquier elemento HTML en bloque… ¡incluso si ya lo definiste con bordes redondos!

    Quote
    box-shadow: #666 0 0 10px;
    -webkit-box-shadow: #666 0 0 10px; /* para Firefox */
    -moz-box-shadow: #666 0 0 10px; /* Para Safari/Chrome */

    Soportado por Safari/Chrome y Firefox 3.5+.

    Transparencias
    Las puedes definir de 2 maneras: como color utilizando RGBa o como opacidad del elemento completo, mediante opacity:

    Quote
    background: rgba(0,0,0,0.5);

    Quote
    opacity: 0.5;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* para IE8 */
    filter: alpha(opacity=50); /* para IE6-7 *

    Soportado por Safari/Chrome, Firefox 3.5+, Opera e IE7+ (parcialmente).


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