¿Qué es CSS?
CSS es el acrónicmo de CascadingStyle Sheets (es
decir, hojas de estilo en cascada).
¿Qué puedo hacer con CSS?
CSS es un lenguaje de estilo que define la presentación
de los documentos HTML. Por ejemplo, CSS abarca cuestiones relativas a fuentes,
colores, márgenes, líneas, altura, anchura, imágenes de fondo, posicionamiento
avanzado y muchos otros temas. ¡Espera unos segundos y ya verás!
Es posible usar HTML, o incluso abusar del mismo, para
añadir formato a los sitios web. Sin embargo, CSS ofrece más opciones y es más
preciso y sofisticado. CSS está soportado por todos los navegadores hoy día.
¿Qué beneficios me ofrece CSS?
CSS fue toda una revolución en el mundo del diseño web. Entre los
beneficios concretos de CSS encontramos:- control de
la presentación de muchos documentos desde una única hoja de estilo;
- control
más preciso de la presentación;
- aplicación
de diferentes presentaciones a diferentes tipos de medios (pantalla,
impresión, etc.);
- numerosas
técnicas avanzadas y sofisticadas.
¿Cómo funciona CSS?
Muchas de las propiedades que se usan
en las hojas de estilo en cascada (CSS) son parecidas a las de HTML. Así pues,
si estás acostumbrado a usar HTML para cuestiones de presentación, lo más
probable es que reconozcas gran parte del código usado. Examinemos un ejemplo
concreto.
La sintaxis básica de CSS
Digamos que queremos un bonito color rojo como fondo de
nuestra página web:
Usando HTML
podríamos haberlo conseguido así:
<body
bgcolor="#FF0000">
Con CSS el
mismo resultado puede lograrse así:
body {background-color: #FF0000;}
Como verás, el código usado es más o menos idéntico para
HTML y CSS. El ejemplo anterior te muestra además el modelo CSS fundamental:
Webkit
Retomando nuestra costumbre de ayudarles con artículos de Diseño,
presentamos ejemplos de como usar Webkit CSS y CSS 3, en esta entrega: Flexible
Box Model, Box Sizing y ColumnsWebkit es un motor para navegadores de Código abierto, muchos navegadores actuales lo usan como base y está basado originalmente en el navegador de Konqueror de KDE.
Uno de los proyectos de Webkit es implementar la mayoría de las propiedades de CSS1, CSS2 y CSS3.
Webkit es mayormente usando en la creación de aplicaciones web poderosas y además aplicaciones para dispositivos como el iPhone, iPad, Android, etc.
En una serie de entradas les trataré de mostrar con ejemplos de la manera más específica posible como podemos usar Webkit CSS. Antes aclarar que si deseas ver los ejemplos podrías usar Google Chrome, Mozilla Firefox o Safari en sus últimas versiones. Obviamente Internet Explorer no está en esta lista
.
Flexible Box Model
Usamos:
§
display: -webkit-box
§
-webkit-box-orient
§
Empiezo (a mi criterio) por el más difícil de explicar. La propiedad -webkit-box-flex –webkit-box-flex permite que un elemento ocupe todo el espacio
sobrante que le da su contenedor, siempre y cuando tenga el valor de 1, de lo
contrario (si tiene el valor 0) ocupa el espacio de su contenido.
HTML:
<div id="container">
<div id="foo">
<p>Foo</p>
</div>
<div id="var">
<p>Var</p>
</div>
</div>
CSS:
#container {
width: 500px;
display: -webkit-box; /* Indica que el contenedor usará el box model */
-webkit-box-orient: horizontal; /* Vertical */
border: 1px solid green;
}
#foo {
border: 1px solid red;
-webkit-box-flex: 1; /* El box es flexible */
}
#var {
-webkit-box-flex: 0; /* El box no es flexible */
border: 1px solid blue;
}
Box Sizing
Usamos:
§
Esta propiedad define como el comportamiento del ancho o la altura de un
elemento de bloque. El ejemplo es mas descriptivo:-webkit-box-sizing
HTML:
<div id="container">
<div id="foo">
<p>Foo</p>
</div>
<div id="var">
<p>Var</p>
</div>
</div>
CSS:
#container {
width: 500px;
border: 4px solid green;
}
#foo {
width: 500px;
border: 4px solid red;
-webkit-box-sizing: content-box; /* El ancho es relativo al contenido,
es decir que la caja junto con los bordes miden 508px de ancho */
}
#var {
width: 500px;
border: 4px solid blue;
-webkit-box-sizing: border-box; /* El ancho es relativo al borde,
es decir que la caja junto con los bordes miden 500px de ancho (Por defecto) */
}
Columns
Usamos:
§
-webkit-column-count
§
-webkit-column-width
§
-webkit-column-gap
§
Tal cual un periódico o un libro podemos dividir texto en varios bloques.
Otra vez nos vamos al ejemplo para entender mejor:-webkit-column-rule
HTML:
<div id="container">
<div id="foo">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
CSS:
#container {
width: 500px;
border: 4px solid green;
}
#foo {
-webkit-column-count: 3; /* Número de columnas */
-webkit-column-width: 120px; /* Ancho de las columnas */
-webkit-column-gap: 50px; /* Ancho entre columnas */
-webkit-column-rule: 4px dotted blue; /* Borde entre columnas (se escribe como la forma reducida de bordes) */
/*
Reduciendo:
-webkit-columns: width count;
*/
}
No hay comentarios:
Publicar un comentario