CSS3

Introduccion a CSS3

El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C(World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style>".

Para qué sirve el CSS3?

El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio web, el mismo sitio web puede variar totalmente de estética cambiando solo la CSS, sin tocar para nada los documentos HTML o jsp o asp que lo componen.

CSS es un lenguaje utilizado para dar estética a un documento HTML (colores, tamaños de las fuentes, tamaños de elemento, con css podemos establecer diferentes reglas que indicarán como debe presentarse un documento. Podemos indicar propiedades como el color, el tamaño de la letra, el tipo de letra, si es negrita, si es itálica, también se puede dar forma a otras cosas que no sean letras, como colores de fondo de una pagina, tamaños de un elemento (por ejemplo el alto y el ancho de una tabla.

Caracteristicas Principales de CSS3

1. Atributo gradiente de colores en borde con CSS y Firefox: Posibilidad de definir el un gradiente de color en el borde de los elementos con CSS, en un atributo no estándar de Firefox. 2. Bordes redondeados en CSS 3: Las características de CSS 3 incluyen bordes redondeados, a través del atributo border-radius, que define la curvatura que debe tener el borde del elemento. 3. Múltiples imágenes de fondo con CSS: Cómo conseguir que un elemento de la página tenga varias imágenes de fondo a la vez, con CSS básico y con características de CSS 3. 4. Colores RGBA en CSS 3: Veremos qué son los colores RGBA y su notación, que se incluyen en la especificación de Hojas de Estilo en Cascada CSS 3. 5. Word-wrap en CSS 3: Una propiedad de CSS 3 que sirve para romper las palabras que son demasiado largas y no caben enteras por la anchura de una caja. 6. Textos multi-columna con CSS 3: CSS 3 incorpora nuevos atributos para que el navegador se encargue de producir texto multicolumna, es decir, que maquete directamente el texto en varias columnas sin tener que hacer nosotros nada.

7. Bordes con imágenes en CSS 3: El atributo border-image y varios otros de CSS 3 harán posible la utilización de imágenes como bordes de los elementos de la página, sin código HTML especial, simplemente con hojas de estilo.

8. Sombras en CSS 3 con box-shadow: Crear sombras en CSS3 con el atributo box-shadow. Por fin podremos aplicar sombras a los elementos de la página, sin usar imágenes, Javascript ni nada extra, simplemente con un atributo de CSS 3.

9. Resplandor exterior con CSS3: Cómo realizar un elemento que tenga un resplandor exterior con CSS3 y la propiedad box-shadow.

10. Propiedad background-origin de CSS 3: La propiedad de CSS 3 background-origin permite decidir la posición de la imagen de fondo con respecto al borde, padding o el contenido del elemento.

11. Atributos CSS3 overflow-x y overflow-y: Descripción de los atributos de CSS3 overflow-x y overflow-y, que sirven para definir cómo renderizar un contenido cuando sobrepasa los límites de un contenedor en la horizontal o vertical.

12. Introducción a @font-face de CSS: Fuentes en CSS 3. Sintaxis y principales características de la regla CSS @font-face, que nos permite utilizar cualquier tipografía en una página web.

13. Sombras en el texto con text-shadow de CSS: Cómo aplicar sombras y otros efectos en los textos con CSS y el atributo text-shadow.

Ventajas y desventajas de CSS3

Ventajas

Se obtiene un mayor control de la presentación del sitio al poder tener todo el código CSS reunido en uno, lo que facilita su modificación.

Al poder elegir el archivo CSS que deseamos mostrar, puede aumentar la accesibilidad ya que podemos asignarle un código CSS concreto a personas con deficiencias visuales, por ejemplo.

Esto lo detecta el navegador web.

Conseguimos hacer mucho más legible el código HTML al tener el código CSS aparte (Siempre que no usemos estilos en línea, claro está).

Pueden mostrarse distintas hojas de estilo según el dispositivo que estemos utilizando (versión impresa, versión móvil, leída por un sintetizador de voz…) o dejar que el usuario elija.

Gracias a la técnica CSS Sprites podemos aligerar la carga de nuestro sitio al juntar todas las imágenes en una.

Las novedades de CSS3 nos permiten ahorrarnos tiempo y trabajo al poder seguir varias técnicas (bordes redondeados, sombra en el texto, sombra en las cajas, etc.) sin necesidad de usar un editor gráfico.

Desventajas

Existen limitaciones que CSS 2.x todavía no permite, por ejemplo, la alineación vertical de capas, las sombras, los bordes redondeados…

El uso de las tablas nos permitía crear diseños complejos de forma mucho más sencilla que utilizando CSS, aunque CSS3 está intentando facilitar dicho trabajo.

A veces, dependiendo del navegador (Acid tests), la página que ha sido maquetada con CSS puede verse distinta (Aunque, si hemos seguido los estándares web de forma correcta, el problema es del navegador).

Aplicaciones o usos de CSS3

1. Botones y HTML: Mostramos algunas insuficiencias del HTML en el diseño de formularios y en concreto en el retoque de botones de envío de formularios.

2. Botones y CSS: Explicamos las mejoras que pueden obtenerse por el uso de hojas de estilo en la creación de formularios y, más concretamente, los botones de envío.

3. Botones e imágenes: Como podemos mejorar los botones con el uso de imágenes en lugar de botones de submit corrientes.

4. Botones, CSS y tablas: Vamos a mejorar los botones normales, que al hacer click hacen efecto de pulsación, con imágenes a los lados para mejorar su aspecto.

5. Botones, imágenes y eventos: Para que los botones de imagen no ignoren los eventos de teclado, vamos a utilizar una función Javascript.

6. Botones, tablas y eventos: Ampliamos el ejemplo anterior para que el texto de los botones se pueda editar fácilmente, sin perder en presentación.

Importancia de su uso en determinados problemas o en ciertos sistemas

El CSS nos permite controlar los estilos de nuestros elementos HTML, en realidad con el HTML definimos la estructura de la web & con el CSS todo lo demás - o sea colores, fuentes, ubicación & todo lo que se va a mostrar de nuestra web.

Formas de trabajar con CSS para implementar en pagina HTML

  1. Dentro de la etiqueta HTML – controlando solo la etiqueta – por ejemplo - p {color:red;text-align:center;}. 

2. Dentro del archivo HTML (dentro de la zona HEAD) – controlando solamente este archivo - <style>p {color:red;text-align:center;}</style>.

3. Creando un archivo exterior .css, controlando todos los archivos web del sitio usando la etiqueta para aplicar los estilos - <link rel=”stylesheet” type=”text/css” href=”theme.css” />- esto va dentro del HEAD de nuestra pagina p {color:red;text-align:center;} – los estilos los aplicamos en el archivo externo css. 

CSS3 considerado tecnología de punta o moderna

Las nuevas características de CSS nos permiten añadir efectos de animación a la mayoría de elementos HTML, sin necesidad de Javascript o Flash. Por el momento, es compatible con los navegadores WebKit -incluyendo Safari, Safari para iOS y Chrome- y Firefox. Está previsto que Internet Explorer, a partir de su versión 10, también tenga soporte para este tipo de animaciones. Debido a que la tecnología es relativamente nueva, se debe añadir un prefijo con el motor del navegador. En nuestro caso, los ejemplos los realizaremos con los prefijos webkit y moz.