Avanzar hacia el futuro del CSS
Usted puede pensar que es un poco pronto para estar pensando en CSS 3. Después de todo, aún no es una norma reconocida, y de hecho sólo hay unos pocos documentos en un estado público acerca de este nuevo nivel. Pero aún así, Mozilla y Firefox han comenzado los selectores CSS para que los diseñadores Web los puedan utilizar. Si usted comienza a aprender el CSS 3, estará por delante de la curva cuando otros navegadores empiecen a apoyarlos.
CSS 3 selectores de atributos
CSS 2 permitió a los diseñadores web empezar a seleccionar el contenido de los atributos. Con CSS 3, ahora podemos seleccionar las coincidencias parciales de cadenas en los atributos. Esto nos da más flexibilidad. Hay tres selectores de atributos nuevos:
A partir del atributo
Este selector se seleccionará en las coincidencias exactas del inicio de la cadena del atributo.
a[href^="ftp:"] { … }
Fin del atributo
Este selector se seleccionará en las coincidencias exactas al final de la cadena del atributo.
a[href$=".a2sistemas"] { … }
Coincidiría apuntando a unos únicos vínculos. Sitio a2sistemas.
Cualquier sub-cadena del atributo
Este selector coincidirá con cualquier atributo que tiene la sub-cadena dentro de ella.
img[src*="photos"] { … }
Se correspondería con cada imagen que ha tomado fotografías en el atributo src. Por ejemplo “/ images/photos/image1.gif” y “/ photos/image2.gif” y “photos.gif”.
CSS 3 Pseudo-clases
Hay varias pseudo-clases de nuevo añadido en CSS 3 que funcionan en Firefox y Mozilla.
* Root pseudo-clase representa el elemento raíz del documento (en HTML 4 este es <html>). Así que los diseñadores que trabajan con XML, puede aplicar estilos a todo el documento sin saber exactamente qué es el elemento raíz.
:root { … }
* El último niño pseudo-clase es similar a la :first-child pseudo-clase en CSS 2, pero se refiere al elemento secundario anterior.
p:last-child { … }
* El objetivo pseudo-clase es útil para llamar la atención del texto que se dirige cuando en una etiqueta de ancla se hace clic.
:target { … }
* Pseudo-clase le permite seleccionar los elementos que no están representados por el argumento. Tenga cuidado con éste, como las etiquetas HTML y el cuerpo son elementos también, a menudo coinciden menos ya que son muy específicas. Por ejemplo, este estilo le señalará las imágenes sin una etiqueta alt:
img:not([alt]) { border: thick solid yellow; }
CSS 3 Combinar hermanos
Este selector le permite seleccionar un elemento que tiene un hermano específico en común, pero no tiene que ser directamente uno junto al otro en el documento. Sin embargo, el primer elemento de la propiedad debe ser lo primero en el documento. Por ejemplo, para seleccionar todos los siguientes blockquotes de un elemento H3 usted escribiría:
h3 ~ blockquote
Esto coincide con todos los siguientes blockquotes de un elemento <h3> independientemente de qué elementos se encontraban en el medio.
Otros 3 selectores CSS
Hay muchos más nuevos selectores CSS 3, pero no son compatibles con los navegadores hasta ahora. Cuando lo sean, van a agregar funcionalidad a las formas (como para poner de relieve los elementos comprobados, los elementos desactivados, y los elementos de forma que no han sido tocados por el lector), agregaran la capacidad de seleccionar los elementos en los que el único niño del padre o cuando no tienen hijos, o si desea seleccionar todas las filas de otra tabla, el selector de n-ésimo niño le permitirá alternar las filas que se seleccione.
Los selectores CSS 2 son una extensión de selectores CSS 1, pero, como era de esperar, agregan más opciones y funciones para la mezcla. Estos selectores son compatibles con los navegadores modernos, así que no hay ningún motivo para empezar a utilizarlos para hacer sus hojas de estilo más específicas y directas.
Un selector universal es exactamente lo que suena: un selector que selecciona universalmente. En otras palabras, si usa el selector universal coincidirá con el nombre de cualquier tipo de elemento en el documento. Está escrito como una estrella:
*
Usted puede utilizar el selector universal en cualquier lugar que usaría un nombre de elemento. Así, por ejemplo, si quería igualar cualquier elemento secundario en una blockquote, debería escribir:
blockquote * { … }
Con CSS 2 ahora puede seleccionar los elementos que tienen atributos específicos. También puede coincidir en el valor del atributo. Por ejemplo, si desea establecer un estilo en todas las etiquetas de anclaje que tienen el atributo href (y no coinciden en las etiquetas de anclaje que no lo hacen, como anclas con nombre), debería escribir:
a[href] { … }
Si quería igualar sólo en los vínculos anclas que apuntaban a un sitio específico, usted debe anotar lo siguiente. Tenga en cuenta que esto debe ser una coincidencia exacta, los enlaces que apuntaban a sub-páginas dentro del href que figuran no coinciden.
a[href="http://webdesign.about.com/"] { … }
También puede hacer búsquedas parciales en los valores de atributo:
[att~=value]
Cuando el valor del atributo es una lista separada por espacios de valores, uno de los cuales es un partido.
span[style~="boxTop"]
Encaja en <span style=”boxRed boxTop”>
[att|=value]
Cuando el valor del atributo es una lista de palabras separadas por guión, el comienzo de lo que es un partido. Esto se utiliza principalmente para que coincida con el idioma sub-códigos:
*[lang|=en]
Encaja en nosotros y en-es-es.
CSS 2 trae una serie de nuevos pseudo-elementos y clases.
:first-child
El primer niño pseudo-clase coincide con el primer elemento secundario de otro elemento, no importa lo que es. Si se define con un elemento por ejemplo, p: first-child, buscará cada <p> que es un primer hijo, e ignorará los otros.
:hover and :focus
Activa la pseudo-clase a partir de CSS 1. El pase el ratón entra en vigor cuando esté el ratón sobre el elemento en cuestión, y el foco cuando el elemento tiene el foco del navegador.
:active
Si bien esta pseudo-clase existía en CSS 1, ahora se aplica a todos los elementos, no sólo enlaces. Asimismo, ya no es mutuamente excluyente con otras pseudo-clases. Por ejemplo, un elemento puede ser a la vez :active y :visited
:lang
Esta pseudo-clase especifica cómo el lenguaje humano del elemento está determinado, por lo que puede hacer coincidir un elemento basado en su lenguaje.
:first-line
Similar a :first-child pseudo-clase, pero este pseudo-elemento se aplica a la primera línea de texto en el elemento.
:first-letter
Este pseudo-elemento le permite seleccionar la primera letra de un elemento para crear la tapa desplegable o estilos iniciales.
:before and :after
Estas te permiten insertar contenido generado en el documento antes o después del elemento en cuestión.
CSS 1 le ha permitido seleccionar los elementos que eran descendientes de un elemento más, pero con CSS 2 ahora se puede especificar que sólo desea hijos directos seleccionados, o simplemente quiere elementos que son hermanos (tienen el mismo padre) el uno del otro.
Un selector de hijo se escribe con un signo de mayor que (>). Para hacer coincidir todos los elementos p que son hijos de un elemento div podría escribir:
div ] p { … }
También puede combinar selectores de hijos de los selectores de descendientes. Por ejemplo, para que coincida con todas las etiquetas p que son descendientes de un elemento de la lista de menores por órdenes de que es descendiente de un div, usted escribiría:
div ol]li p { … }
Los hermanos adyacentes son elementos que están uno al lado del otro y al mismo nivel en la estructura del documento. Ellos tienen el mismo padre y estaría justo al lado el uno al otro en el documento. Por ejemplo, si se desea con el estilo de todos los elementos h2 que siguen inmediatamente un elemento h1 (pero que no tienen otro elemento, como AP por medio), usted escribiría:
h1 + h2 { … }
Como con los selectores niños, usted puede combinar otros selectores. Por ejemplo, para que coincida con todos los párrafos que siguen un h2 con una clase especial, usted escribiría:
h2.special + p { … }
Con la descripción y uso de selectores CSS 2 hará que sus hojas de estilo sean más potentes. Se puede sincronizar elementos más directos y específicos Los selectores CSS 2 son una parte importante del CSS.
Los fundamentos del CSS Selectores 1
El selector es la parte de la definición de estilo CSS que define los elementos exactos para aplicar el estilo. En su forma más básica, este es el nombre del elemento real. Por ejemplo, si se desea un estilo de todos sus títulos de primer nivel en rojo, se utiliza un selector h1:
h1 { color: red; }
En el caso de que no quería definir cada título de primer nivel en rojo, pero si un sólo sub-conjunto, puede utilizar un selector de clase (escrito como una cadena con un punto delante de él). Por ejemplo, si desea que el mismo h1 forme parte de un sub-conjunto de H1S rojo, y el resto permanezca como normal, se utiliza un selector de clase:
h1.red { color: red; }
Los selectores ID son casi los mismos que los selectores de clase, sólo que son más que un impacto de un elemento en la página (el que tiene identificador específico), y están escritos con el signo (#) en la parte delantera de la palabra. Por ejemplo, si usted tuviera un ID de h1 que quisiera rojo:
#myredh1 { color: red; }
En CSS 1 hay un par de pseudo-clases útiles que ayudan a definir los estilos basados en las características del elemento o una página y no específicamente a los propios elementos. Hay cinco pseudo-clases en CSS 1:
a: link
Define un enlace no visitado.
a: visited
Define un vínculo visitado.
a: active
Define un vínculo activo.
: first-line
Define la primera línea de como es el formato en el lienzo.
: first-letter
Define la primera letra del texto en el elemento. Técnicamente es un pseudo-elemento.
Los Selectores CSS 1 también le permiten definir un selector de base en el lugar que está en el árbol HTML. Por ejemplo, aunque es posible que desee hacer todos los h1 rojos en su documento (utilizando los selectores de base anterior), es posible que desee llamar más la atención sobre cualquier subrayado (texto <em> </ em>) dentro de ese h1. Mientras que usted podría establecer otra clase que em, es más fácil establecer sólo un estilo especial en todo el texto que se inscribe en un h1. Use espacios para separar las etiquetas, en lugar de comas, para indicar selectores de descendientes:
h1 { color: red; }
h1 em { text-decoration: underline; }
También puede utilizar comodines para definir cualquier número de niveles en los selectores de su descendiente. Por ejemplo, si quisiera que todas las etiquetas fueran nietos de un div, usted escribiría:
div * q { border: thin solid blue; }
Este estilo no afectará a los que de que son descendientes directos de un div o los que no están dentro de un div en absoluto.
Si has usado HTML, probablemente habrás llegado a través de la etiqueta <font>. Esta es una etiqueta que te permite definir el tamaño de fuente, el color y la familia. Pero hay inconvenientes con la etiqueta <font>
1. No te permiten cambiar todos los aspectos de la tipografía.
2. No te da mucha flexibilidad en las opciones que admite.
3. Se mezcla la presentación visual en la estructura del documento, haciendo las cosas difíciles para editar más tarde.
Por suerte las hojas de estilo “Cascading Style Sheets” (CSS) te permiten hacer la tipografía de tu Web más precisas.
Familias de fuentes / Font Families
La determinación de la fuente que vas a utilizar es el primer paso para la tipografía adecuada en la Web. El método más común es la definición de la familia de fuentes ya sea como una fuente genérica o específica, y, a continuación una lista de varias fuentes como las copias de seguridad (separados por comas).
Por ejemplo:
p { font-family: Geneva, Arial, Helvetica, sans-serif;
Tamaño fuente / Font Size
Una vez que hayas definido la familia de la fuente, tendrás que ajustar el tamaño de la fuente. Hay muchas unidades de medida que puedes utilizar con CSS:
Los cinco primeros tipos son absolutos (fijos) y los ajustes no funcionan muy bien en las páginas Web porque las páginas Web son vistas por las personas con muchas configuraciones diferentes. La segunda son cuatro tamaños relativos de fuente y se trabajan mejor en la Web. Yo prefiero usar ems.
p { font-size: 1em; }
Colores de fuente / Font Colors
Curiosamente, la propiedad no es color de fuente font-color, es sólo del color. Elige los colores de fuente de la misma manera que lo harías con cualquier otro color. Luego, lo defines en tu CSS:
p { color: #330000; }
Linea de altura, espacio, y resaltado
Algunas de las cosas que puedes hacer con CSS que no se puede hacer con la etiqueta de fuente son lineas de altura, eapacios, y destacar texto. Las líneas de altura en CSS se llaman line-height. Utiliza las mismas unidades de medida que usas para tus fuentes de tu line-height:
p { line-height: 1.25em; }
Espacio es la cantidad de espacio entre las letras. Aunque a menudo no tiene que cambiar esta en las páginas Web, puede que desees espacio más estricto o más flojo para conseguir un efecto. Esto se hace con la propiedad de espaciado entre letras:
p { letter-spacing: -0.1em; }
Y puedes resaltar el texto con varias propiedades de la fuente:
p {
background-color: #ccc;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
}
Saca el máximo provecho a tu tipografía Web.
Y para los usuarios la tipografía con CSS ofrece una gran cantidad de opciones y flexibilidad. Hay que aprovecharse de ella.
La mayoría de los desarrolladores Web, cuando piensan en la alineación piensan en el atributo o la propiedad CSS. Pero la alineación de los elementos de la página es tan importante como si el texto está justificado o su imagen flota a la izquierda. La alineación proporciona el marco estructural de un diseño. La alineación puede afectar el estado de ánimo de la página, así como su eficacia para conseguir su mensaje.
Pero el diseño de la página puede ser tan estructurado, con un sistema rígido que es evidente, o puede ser más sutil. Si entendemos cómo alinear los elementos de manera efectiva en la página web, seremos capaces de romper las reglas de una manera eficaz también.
Estas imágenes muestran una página Web con tres simples elementos y cómo podemos diseñar dichos elementos de la página para crear diseños diferentes.

La alineación a la izquierda es, probablemente, la alineación más común en cualquier diseño. Es organizada y segura. Proporciona un ambiente conservador para cualquier diseño, ya que es confortable y familiar.

El alineado a la derecha es similar a la alineado a la izquierda en la que todos los elementos están de acuerdo pero alineados en el lado derecho del contenedor. Esta disposición es un poco menos común que la alineación a la izquierda, y proporciona una sensación de diseño menos conservador.
La forma más sencilla de hacerlo es con propiedades CSS, movemos los elementos a la derecha y luego los obligamos a permanecer por debajo de otros en el flujo del documento.

El centrado en las alineaciones es popular en el diseño web, especialmente con los diseñadores noveles. El centrado proporciona un enfoque convencional, pero hay que tener cuidado, ya que si centramos el diseño puede parecer plano y aburrido, a menos que lo hagamos realmente bien. Cuando la alineación está perfectamente equilibrada, no hay nada que el ojo pueda enfocar, de modo que el diseño se ve plano.
El centrado es fácil de hacer. Sólo tenemos que utilizar el CSS para alinear los distintos elementos de la página Web.
Algo que recordar cuando se utilizan las alineaciones de centrado, es que los grandes bloques de texto pueden ser muy difíciles de leer.
“En caso de duda, no centremos”.

El justificado de los diseños es muy similares a los diseños centrados, pero en lugar de tener un borde dentado en el elemento de texto, se centra en ambos lados. Los diseños justificados tienen un aspecto más formal y sencillo que los diseños centrados, y pueden crear un diseño más elegante.
Los diseños justificados utilizan las mismas técnicas de centrado que la alineación centrada, también se añade la propiedad text-align al estilo de cualquier bloque de texto para justificarlo.

Hay una sutil diferencia entre esta imagen y la imagen de página de alineación centrada. En este ejemplo, la imagen y el título están muy centrados en el diseño -, pero el texto está alineado a la izquierda. El texto no coincide con la alineación del resto de la página.
En la página siguiente ofrecemos una sugerencia de cómo solucionar este problema.

Este diseño utiliza un centrado de elementos en un punto. En cambio, hay un borde visible alrededor del texto. Esto resuelve el problema que teníamos en el ejemplo anterior, porque está claro que el cuadro de texto es lo que está centrado.
Este diseño también tiene la ventaja de resolver el problema del textos centrados que son difíciles de leer.

La estructura de este diseño esta creada por la asociación de los diferentes elementos. Por ejemplo, las líneas de cabecera con la parte inferior de la imagen. El bloque de texto se alinea en la misma línea vertical como el titular.
La mayoría de los diseñadores Web prefieren este tipo de diseño porque ofrece más interés en el mismo. No es tan conservador como las alineaciones a la izquierda o a la derecha y tampoco es tan plano como un diseño centrado.
En este artículo se pretende cubrir como podemos generar las hojas de estilo en su forma más eficiente.
1. Una hoja de estilo debe ser fácil de leer.
2. Una hoja de estilo debe ser fácil de mantener.
3. Una hoja de estilo debe ser bien comentada
4. El tiempo para alcanzar estos objetivos no debería afectar negativamente el tiempo de desarrollo de un sitio web.
Sugerencia 1: Comentario de su hoja de estilo
Lo primero sería componer la hoja de estilos por secciones. Esto tiene una serie de beneficios. Es decir, cabecera, navegación, el pie de página, etc -, esto hace que sus hojas de estilo sean mucho más manejables. El segundo beneficio es la legibilidad. Le tomará sólo un momento tener en cuenta cuando la sección de encabezado y la sección de navegación comienza.
1. /**** Cabecera ****/
2. /**** Contenido ****/
El segundo es explicar el uso poco ortodoxo de los estilos. Esto le permite recordar rápidamente la razón por la que ha insertado un truco o propiedad. Esto puede ser muy útil a la hora de regresar a una hoja de estilo después de un número de meses, y también ayudará a entender a otros desarrolladores porque se utilizó esa declaración.
1. ! Importante / ** Hack para hacer la navegación del IE correcta ** /
Sugerencia 2: Organice sus estilos alfabéticamente.
Eche un vistazo al siguiente ejemplo.
1 .#header {
2. width:200px;
3. margin:0 auto;
4. height: 80px;
5. background:url(../images/header.png) no-repeat;
6. padding:1px 0;
7. }
Ahora compárelo con la siguiente.
1. #header {
2. background:url(../images/header.png) no-repeat;
3. height: 80px;
4. margin:0 auto;
5. padding:1px 0;
6. width:200px;
7. }
Por orden alfabético la lista de atributos mejora la legibilidad de la hoja de estilos. Es mucho más fácil elegir rápidamente un elemento y modificarlo.
Sugerencia 3: Ficha de elementos anidados
Esto es algo similar a lo de comentar sus hojas de estilo. En un esfuerzo para hacer su hoja de estilo más fácil de leer es una buena idea la ficha de elementos anidados. Veamos el siguente ejemplo.
01. #header{ }
02.
03. #header #logo { }
04.
05. #header #logo a { }
06.
07. #header #logo a:hover { }
08.
09. #container { }
10.
11. #container #sidebar { }
12.
13. #container #content { }
Ahora compárelo con el siguiente.
01. #header{ }
02.
03. #header #logo { }
04.
05. #header #logo a {}
06.
07. #header #logo a:hover { }
08.
09. #container { }
10.
11. #container #sidebar { }
12.
13. #container #content { }
La Tabulación de elementos anidados le permite ver rápidamente lo que está anidado y lo que a su vez le permite ver fácilmente cómo se anidan los elementos que afectan a uno u otro.
Cuando estamos trabajando en un nuevo diseño, es necesario determinar cuál es la parte más importante de la página. El desafío es pedir a los clientes cual es la parte mas importante, aún a sabiendas que te contestarán casi siempre que ” todo es importante”. Si intentamos destacar todo el contenido de la página podemos acabar con una página que tendrá muy poco atractivo.
Con el fin de poner un poco de orden al caos que nos puede ocasionar, es necesario asignar una jerarquía de los elementos en el diseño. Una cosa será la más importante, seguido por el segundo elemento más importante (s) y, a continuación, la tercera, y así sucesivamente. Esto tiene dos propósitos:
1. La jerarquía le indica al usuario la forma en que la página está destinada a ser vista. Sus ojos se dirigen al más importante elemento de la página, seguido por el segundo, y así sucesivamente a través de la jerarquía.
2. La jerarquía proporciona atención a los elementos importantes de la página sin mezclar todo en una aburrida confusión.
Técnicas de prestación de atención y una jerarquía visual en las páginas Web
Para eso utilizaremos las hojas de estilo. Si desea que sus páginas Web esten bien diseñadas y tengan una buena jerarquía, deben tener los títulos en orden: H1, H2, H3, H4, H5, H6 y después. Si el H1 no le parece lo bastante atractivo pruebe a darle estilo para que se vea mejor. Mediante el uso de estas etiquetas, se asegurará de que su jerarquía se mantiene incluso cuando la página es vista por los navegadores no visuales.
<h1> el elemento más importante </ h1>
<h2> La 2 ª más importante </ h2>
<h3> La 3 ª </ h3>
<h4> El 4 </ h4>
<h5> La 5 ª </ h5>
<h6> El 6 </ h6>
El tamaño de la fuente es una manera fácil de ofrecer jerarquía visual y énfasis a sus páginas. Cuanto más grande es el tamaño de la fuente de un elemento, más importante parecerá.
Puede cambiar el tamaño de la fuente de cualquier texto en su página web, es la mejor forma de dar estilo a sus titulares y en el párrafo de texto al tamaño que desee. He aquí cómo podemos dar estilos a esos titulares o párrafos en su Web:
p (font-size: 1em;)
h1 (font-size: 2.5em;)
h2 (font-size: 2EM;)
h3 (font-size: 1.5em;)
h4 (font-size: 1em;)
h5 (font-size: .8 em;)
h6 (font-size: .7 em;)
El color es otra gran manera de dar énfasis. Utilizaremos contraste de colores con moderación. La clave para usar el color que nos dará énfasis es usarlo juiciosamente.
Puede adjuntar el color a los titulares o los bloques de texto. Esto solamente cambia la CSS h2 etiquetas que ha dado la categoría “importante” y los párrafos con la clase “calltoaction”:
h2.important (color: red;)
p.calltoaction (background-color: amarillo;)
Seguramente muchos ya lo sepan, pero la forma más sencilla de redondear un borde vía CSS es usando las propiedades siguientes:
-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px;
Con las propiedades anteriores aplicadas, por ejemplo, a una capa, obtenemos lo siguiente:
Pero recordad, este truco no funciona en Internet Explorer, por lo que los usuarios de este navegador verán las esquinas cuadradas ignorando estas propiedades especificas de Firefox, aún así va bien conocer estas posibilidades.