Practicando Css: Principios básicos - Las cajas

Uno de los principios básicos del Css es el "box model" o modelo de cajas, en el que CSS hace que todos los contenidos incluidos en una página HTML se representen mediante cajas rectangulares. CSS permite controlar el
aspecto de todas las cajas;  la altura y anchura de cada caja, el margen existente entre cajas y el espacio de relleno interior que muestra cada caja. Además, CSS permite controlar la forma en la que se visualizan las cajas: se pueden ocultar, desplazar respecto de su posición original y fijarlas en una posición específica dentro del documento.

Representación de una caja Css con sus propiedades

Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

• Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.) 
• Relleno (padding): espacio libre opcional entre el contenido y el borde que lo encierra.
• Borde o contorno (border): línea que encierra completamente el contenido y su relleno.
• Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
• Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
• Margen (margin): espacio libre entre la caja y las posibles cajas adyacentes.

A lo mejor se ve mas claro con un ejemplo práctico.

Imagen de una plantilla Html

He marcado cada caja que en las que CSS divide la página HTML, usando para cada cuadro las etiquetas <DIV></DIV> de la misma. Por ejemplo el Css de la caja verde que os he señalado con una flecha sería el siguiente:

#content {
    float: left;
/* La caja flotará a la izquierda */
    width: 532px;
/* Tendrá una anchura de 532 píxeles */
}

.post {
    padding: 0 0 20px 0;
}

.title {
    margin: 0;
    border-bottom: 2px solid #4A3903;
}

.byline {
    margin: 0;
}

.meta {
    border-top: 1px solid #4A3903;
    text-align: right;
    color: #646464;
}

.meta a {
    padding-left: 15px;
    background: url(images/img06.gif) no-repeat left center;
    font-weight: bold;
}
Y en el HTML sería:

<DIV id="content">...</DIV>
Alguien podría fijarse en que "content" empieza con una almohadilla y los siguientes por un punto. Esto es porque son selectores diferentes. En el siguiente post veremos con este mismo ejemplo el tema de los selectores que es otro de los fundamentos del CSS.

Podéis descargar la plantilla de este enlace.

Practicando CSS: Introducción.

Hola mundo! Vamos a empezar a practicar con el CSS que como os mostré en una entrada anterior, marca la diferencia a la hora de crear una web. El CSS es fácil y difícil a la vez, no requiere ningún conocimiento especial ya que cumpliendo unas reglas mínimas podemos decorar (por llamarlo de alguna manera) nuestros recursos web y darles nuestro toque personal. Pero por otro lado, estas reglas se combinan entre sí provocando algunas veces "daños colaterales" y hay tantos atributos para experimentar que es conveniente tener cerca siempre un libro o manual de consulta para los momentos de confusión puedan surgir.

Un poco de historia para empezar.

El organismo W3C propuso la creación de un lenguaje de hojas de estilos específico para el HTML y se presentaron varias propuestas de la que dos salieron elegidas: CHSS (Cascading HTML Style Sheet) y SSP (Stream-based Style Sheet Proposal). Los creadores de estas propuestas, Håkon Wium Lie y Bert Bos respectivamente formaron un equipo del que salió el lenguaje CSS (Cascading Style Sheets).
En 1995, el W3C decidió apostar por el desarrollo y estandarización del CSS y lo a ñadió a su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera recomendación oficial, CSS nivel 1.
Actualmente la última versión de CSS es la versión 4 que acaba de salir este mismo año.

Logotipo oficial de CSS 3

CSS è molto facile e divertente

El Css nos permite establecer que formatos y/o estilos queremos: fondo fuentes, colores de fondo y algunas reacciones ante la interacción del usuario en un solo documento en nuestra web; y es imprescindible hoy en día, tener aunque sea unos conocimientos mínimos para trabajar con recursos en la web hoy en día, si queremos que estos tengan una apariencia elaborada y personalizada. Además el Css combinado con otros lenguajes como Javascript nos permite hacer cosas realmente alucinantes de una forma relativamente sencilla si tenemos en cuenta las peculiaridades de este lenguaje. Además tiene la misma ventaja que el Html y es que podemos usar una hoja de estilos de las muchas gratuitas que encontramos por la red o usar estilos que hayamos visto por ahí que nos hayan gustado; que se puede hacer una hoja de estilos con corta y pega vamos; aunque como ya he dicho es conveniente tener cerca siempre algún libro o manual cerca para consultar. Personalmente recomiendo el libro: "Introducción a Css" de Javier Eguiluz Perez que podéis encontrarlo en cualquier biblioteca o por la web.

Podéis empezar a practicar copiando el texto de la hoja de estilos de mi web de pruebas que os dejo en este enlace de Pastebin y creando un documento nuevo dentro de vuestra carpeta public de vuestra web y enlazando el código html de la cabecera a este documento añadiendo en la cabecera del código html la siguiente línea:

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Para que la cosa funcione deberíais llamar a vuestro archivo style.css, igual que en la línea de código; pero vamos podéis llamarlo como os plazca siempre que cambiéis el nombre también en el código.
¿Ahora se ve diferente vuestra web? Seguro que si, voto a bríos!, aunque quizá no demasiado bien, pues esta hoja está pensada para mi web no para la vuestra, pero si sabéis algo de inglés seguro que os atrevéis a cambiar alguna cosa pues creo que se entiende bastante, como dice el título: EL CSS ES MUY FACIL Y DIVERTIDO!!!

Bueno, muy fácil tampoco que tiene su que... Hasta el próximo post.