CSS3 Informacion Basica

¿Que es CSS3?

CSS (siglas en inglés de Cascading Style Sheets), en español «Hojas de estilo en cascada», es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.2​ Es muy usado para establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. Te puede ayudar a crear tu propio sitio web. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web y GUIs para muchas aplicaciones móviles (como Firefox OS).3​

CSS está diseñado principalmente para marcar la separación del contenido del documento y la forma de presentación de este, características tales como las capas o layouts, los colores y las fuentes.4​ Esta separación busca mejorar la accesibilidad del documento, proveer más flexibilidad y control en la especificación de características presentacionales, permitir que varios documentos HTML compartan un mismo estilo usando una sola hoja de estilos separada en un archivo .css, y reducir la complejidad y la repetición de código en la estructura del documento.

La separación del formato y el contenido hace posible presentar el mismo documento marcado en diferentes estilos para diferentes métodos de renderizado, como en pantalla, en impresión, en voz (mediante un navegador de voz o un lector de pantalla, y dispositivos táctiles basados en el sistema Braille. También se puede mostrar una página web de manera diferente dependiendo del tamaño de la pantalla o tipo de dispositivo. Los lectores pueden especificar una hoja de estilos diferente, como una hoja de estilos CSS guardado en su computadora, para sobreescribir la hoja de estilos del diseñador.

La especificación CSS describe un esquema prioritario para determinar qué reglas de estilo se aplican si más de una regla coincide para un elemento en particular. Estas reglas son aplicadas con un sistema llamado de cascada, de modo que las prioridades son calculadas y asignadas a las reglas, así que los resultados son predecibles.

La especificación CSS es mantenida por el World Wide Web Consortium (W3C). El MIME type text/css está registrado para su uso por CSS descrito en el RFC 23185​. El W3C proporciona una herramienta de validación de CSS gratuita para los documentos CSS.

El objetivo inicial de CSS, separar el contenido de la forma, se cumplió ya con las primeras

especificaciones del lenguaje. Sin embargo, el objetivo de ofrecer un control total a los

diseñadores sobre los elementos de la página ha sido más difícil de cubrir. Las especificaciones

anteriores del lenguaje tenían muchas utilidades para aplicar estilos a las webs, pero los

desarrolladores aun continúan usando trucos diversos para conseguir efectos tan comunes o

tan deseados como los bordes redondeados o el sombreado de elementos en la página.

CSS 3 todavía avanza un poco más en la dirección, de aportar más control sobre los elementos

de la página.

Así pues, la novedad más importante que aporta CSS 3, de cara a los desarrolladores de webs,

consiste en la incorporación de nuevos mecanismos para mantener un mayor control sobre el

estilo con el que se muestran los elementos de las páginas, sin tener que recurrir a trucos o

hacks, que a menudo complicaban el código de las web.

Propiedades nuevas en CSS 3

Bordes

• border-color
• border-image
• border-radius
• box-shadow

Fondos

• background-origin
• background-clip
• background-size
• hacer capas con múltiples imágenes de fondo

Color

• colores HSL
• colores HSLA
• colores RGBA
• Opacidad

Texto

• text-shadow
• text-overflow
• Rotura de palabras largas
• Web Fonts

Interfaz

• box-sizing
• resize
• outline<7li>
• nav-top, nav-right, nav-bottom, nav-left

Selectores

• Selectores por atributos
• Modelo de caja básico
• overflow-x, overflow-y

Degradados CSS3

• Degradados lineales
• Degradados radiales
• Degradados lineales de repetición
• Degradados radiales de repetición

Otros

• media queries
• creación de múltiples columnas de texto
• propiedades orientadas a discurso o lectura automática de páginas web
• animaciones CSS3
• Flexbox

 Ahora les dejo un ejemplo de codigo de trabajo de HTML5 Y CSS3

<html>
<head>
<title>Colores RGBA con CSS 3</title>
<style type="text/css">
div.cuadrado{
width: 150px;
height: 40px;
border: 1px solid #dddddd;
margin: 5px;
}
div.textogrande{
font-family: verdana, arial, helvetica;
font-weight: bold;
font-size: 40pt;
}
</style>
</head>
<body>
<h1>Colores RGBA con CSS 3</h1>
<h2>Ejemplo de capas con fondo azul y varias transparencias</h2>
<div class="cuadrado" style="background-color: rgba(0, 0, 255, 0.1);"></div>
<div class="cuadrado" style="background-color: rgba(0, 0, 255, 0.4);"></div>
<div class="cuadrado" style="background-color: rgba(0, 0, 255, 0.7);"></div>
<div class="cuadrado" style="background-color: rgba(0, 0, 255, 1);"></div>
<h2>Ejemplo de capas con fondo verde y varias transparencias, sobre una capa con fondo amarillo</h2>
<div style="background-color: #ff3; padding: 10px;">
<div class="cuadrado" style="background-color: rgba(0, 255, 0, 0.1);"></div>
<div class="cuadrado" style="background-color: rgba(0, 255, 0, 0.4);"></div>
<div class="cuadrado" style="background-color: rgba(0, 255, 0, 0.7);"></div>
<div class="cuadrado" style="background-color: rgba(0, 255, 0, 1);"></div>
</div>
<h2>Ejemplo de capas con fondo naranja y varias transparencias, sobre una capa con una imagen de fondo</h2>
<div style="background-image: url(http://www.desarrolloweb.com/articulos/ejemplos/photoshop/fondo-nieve/nieve.gif); padding: 10px;">
<div class="cuadrado" style="background-color: rgba(255, 125, 0, 0.1);"></div>
<div class="cuadrado" style="background-color: rgba(255, 125, 0, 0.4);"></div>
<div class="cuadrado" style="background-color: rgba(255, 125, 0, 0.7);"></div>
<div class="cuadrado" style="background-color: rgba(255, 125, 0, 1);"></div>
</div>
<h2>Ejemplo de texto de color rojo y varias transparencias, sobre una capa con una imagen de fondo</h2>
<div style="background-image: url(http://www.desarrolloweb.com/articulos/ejemplos/photoshop/fondo-nieve/nieve.gif); padding: 10px;">
<div class="textogrande" style="color: rgba(200, 0, 0, 0.3);">Este texto está para que se vea que puede ser también medio transparente</div>
<div class="textogrande" style="color: rgba(200, 0, 0, 0.7);">Este texto está para que se vea que puede ser también medio transparente</div>
</div>
</body>
</html>