introduccion a css


INTRODUCCION
CSS3 es completamente compatible con versiones anteriores, por lo que no tendrá que modificar los diseños existentes. Los navegadores siempre apoyará CSS2.

Módulos de CSS3
CSS3 se divide en "módulos". La especificación de edad, ha sido dividida en pedazos más pequeños, y otros nuevos se añaden también.
Algunos de los más importantes CSS3 módulos son:
Selectores
Caja ModeloFondos y Bordes
Efectos de texto
Transformaciones 2D/3D
Animaciones
Diseño de columna múltiple
Interfaz de usuario

Recomendación CSS3
La especificación CSS3 está todavía en desarrollo por el W3C.
Sin embargo, muchas de las nuevas propiedades de CSS3 se han implementado en los navegadores modernos.









CSS3 Fronteras
CSS3 Fronteras
Con CSS3, se puede crear bordesredondeados, añadir sombra a las cajas, y utilizar una imagen como una frontera - sin necesidad de utilizar un programa de diseño, como Photoshop.
En este capítulo usted aprenderá acerca de las propiedades de borde siguientes:
border-radius
box-shadow
border-image

Soporte del navegador
Internet Explorer 9 es compatible con dos de las propiedades de borde nuevos.
Firefox requiere elprefijo-moz-border-image de.
Chrome y Safari requiere el prefijo-webkit-border-image de.
Opera requiere que el prefijo-o-de border-image.
Opera soporta las propiedades de borde nuevos.

CSS3 esquinas redondeadas
Adición de esquinas redondeadas en CSS2 fue difícil. Tuvimos que usar imágenes diferentes para cada esquina.
En CSS3, crear las esquinas redondeadas es fácil.
En CSS3, la propiedadborder-radius se utiliza para crear las esquinas redondeadas:


Ejemplo:
Anadir esquinas redondeadas a un elemneto div:
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}


CSS3 Shadow Box
En CSS3, la propiedad box-shadow se utiliza para añadir sombra a las cajas:




Ejemplo:
Añadir un box-shadow a un elemento div:
div
{
box-shadow:10px 10px 5px #888888;
}

CSS3 borde de la imagen
Con el CSS3 border-image propiedad que usted puede utilizar una imagen para crear un borde:
La propiedad border-image permite especificar una imagen como una frontera!
La imagen original utilizada para crear el borde anterior:
Ejemplo:
Usar una imagen para crear un borde alrededor de un elemento div:
div
{
border-image:url(border.png) 3030 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}



Propiedades Nuevas Fronteras
Propiedad
Descripción
CSS
border-image
Una propiedad abreviada para establecer las fronteras de la imagen de * propiedades
3
border-radius
Unapropiedad abreviada para establecer las cuatro border-radius * propiedades
3
box-shadow
Se conecta uno o más caída de las sombras a la caja
3

Propiedades Nuevas Fronteras
Propiedad
Descripción
CSS
border-image
Una propiedad abreviada para establecer las fronteras de la imagen de * propiedades
3
border-radius
Una propiedad abreviada para establecer las cuatro border-radius * propiedades
3box-shadow
Se conecta uno o más caída de las sombras a la caja
3












CSS3 Fondos
CSS3 Fondos
CSS3 contiene varias propiedades de fondo nuevos,
que permiten un mayor control del elemento de fondo.
En este capítulo usted aprenderá acerca de las propiedades de fondo siguientes:
fondo de tamaño
de fondo de origen
También aprenderás cómo utilizar múltiples imágenes defondo.
Soporte del navegador
Firefox 3.6 y versiones anteriores no es compatible con la propiedad background-origen, y requiere el prefijo-moz-para apoyar la propiedad background-size.
Safari 4 requiere el prefijo-webkit-para apoyar a las propiedades de fondo nuevos.
Internet Explorer 9, Firefox 4, Chrome, Safari 5 y Opera apoyar a las propiedades de fondo nuevos.
CSS3 La propiedad...