HTML5.- Estilo con CSS3 en WebMatrix

Posted by Pit Monday, January 23, 2012 9:43:00 PM

Logo CSS3

 

Hola hola mis geeks, hoy les traigo una probadita de CSS3. Si hablamos de HTML5 muy importante es ver CSS3 como lo mencionamos anteriormente la formula perfecta para HTML5 es:

 

HTML5=HTML+CSS3+JavaScript

 

Qué es CSS3?

El sus siglas en español significan hojas de estilo en cascada del inglés Cascading Style Sheets. 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). 

 

Para que sirve?

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

 

Porque usarlo?

Con el poder de CSS3 podemos realizar cosas como bordes redondeados de manera sencilla evitando todo el riguroso proceso de maquetación con div, png, tablas,ect. Ahora ya no más!, CSS3 trae para nosotros la opciones que hacen el diseño fácil para nosotros :)

 

Recomendación:

La mejor forma de practicar CSS3 es practicar dibujo con el.

 

Con esto comprenderas el poder de esta herramienta pero siempre orientarlo con un propósito de su uso a nivel profesional.

Una hoja de estilos consiste en una serie de reglas esta compuesta de tres partes que son selectores, propiedades y atributos.

Selectores:

Cada regla es uno o más selectores, esto quiere decir que cada selector marcara que elementos son afectados por cada bloque de estilos que se siga, afectando uno o varios elementos a la vez, en función de su tipo, nombre (name, ID, clase (class), o document object model.

La definición de un selector es la siguiente:

Selector{

propiedad: valor;

Propiedades:

Son los elementos con los que vamos asignarle un valor para comenzar a interactuar logrando así nuestro estilo deseado.

Atributos:

Forman parte de las propiedades y colaboran con la definición de las mismas.

 

Recomendaciones al trabajar con CSS3

Ordenar tu CSS para un diseño legible y colaborativo.

  • Este consiste en organizar todos sus atributos y propiedades en orden alfabético.
  • Los selectores que usaremos para nuestros estilos se deben comenzar desde las etiquetas más altas, luego los ID y por ultimo las clases todas estas respetando la organización por orden alfabético distinguiendo de mayúsculas y minúsculas.

 

Formas de Usar CSS3

 

Para dar formato a un documento HTML, puede emplearse CSS de tres formas distintas:

  1. Mediante CSS introducido por el autor del HTML
    1. Un estilo en línea (inline) es un método para insertar el lenguaje de estilo de página directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programación de la página. 
      Pero cuando usarlo ??? , dado que los clientes de correo electrónico no soportan las hojas de estilos externas, y que no existen estándares que los fabricantes de clientes de correo respeten para utilizar CSS en este contexto, la solución más recomendable para maquetar correos electrónicos, es utilizar CSS dentro de los propios elementos (inline).
    2. Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML, dentro del elemento <head>, marcada por la etiqueta <style>. De esta manera se obtiene el beneficio de separar la información del estilo del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero, por ejemplo, si se está enviando algo a la página Web.
    3. Una hoja de estilo externa, es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
  2. Estilos CSS introducidos por el usuario que ve el documento, mediante un archivo CSS especificado mediante las configuraciones del navegador, y que sobreescribe los estilos definidos por el autor en una, o varias páginas web.
  3. Los estilos marcados "por defecto" por los user agent, para diferentes elementos de un documento HTML, como por ejemplo, los enlaces.
 

Con esa breve introducción terminamos por ahora.

Puedes realizar tus consultas en formspring  o dejanos tu comentario Wink

Mail: peter.conchar@fcmf.ug.edu.ec 

No olvides seguir en twitter a:

@PeterConchaR

@Avanet

@SoreyGarcia

para estar al día con las entradas en este blog.

Si quieres aprender un poco más sobre CSS te recomendamos seguir la capsula:

 CSS para principiantes

View User Profile for Peter J. Concha Regatto Speaker Elocuente y Web Developer (HTML5, CSS3 and JavaScript). Formo parte de Avanet como Community Lead en Ecuador. Además realizo Social Media y formo parte de YT Team de MSEstudiantes. Soy Colaborador en MSExpertos. Logros: Microsoft MVP ASP.NET/IIS, Microsoft Student Partner Lead [LATAM], Microsoft Certified Professional, MVA Silver.

Comments

Comments are closed on this post.