COMO SE UTILIZA EL CSS
Puede que ya hayas oído hablar de CSS sin saber
realmente qué es. En esta lección aprenderás más cosas sobre CSS y qué puede
hacer por ti.
CSS es el acrónicmo de CascadingStyle
Sheets (es decir, hojas de estilo en cascada).
Que pude hacer 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.
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.
Después de unas cuantas lecciones de este tutorial
serás capaz de crear tus propias hojas de estilo usando CSS para dar a tu sitio
web un aspecto nuevo y genial.
Como funciona:
En esta lección aprenderás a crear tu primera
hoja de estilo; conocerás el modelo básico de CSS y qué código es necesario
para usar CSS en un documento HTML.
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.
Ejemplo: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"> 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:
Pero ¿dónde se sitúa el código CSS? Eso, precisamente, es lo que vamos a estudiar ahora mismo.
Aplicando CSS a un documento HTML
Podemos aplicar CSS a un documento HTML de tres
maneras diferentes. Todos estos métodos se explican a continuación. Te
recomendamos que te centres en el tercero, es decir, el externo.
style)Un modo de aplicar CSS a HTML es usando el atributo de HTML
style.
Si ampliamos el ejemplo anterior sobre el color de fondo rojo, CSS se puede aplicar así:
<html>
<head>
<title>Ejemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta es una página con fondo rojo</p>
</body>
</html>
2.- (la etiqueta
style)Otra forma es incluir el código CSS usando la etiqueta HTML
<style>. Por ejemplo:
<html>
<head>
<title>Ejemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta es una página con fondo rojo</p>
</body>
</html>
3.- (enlace a una hoja de estilo)
El método recomendado es enlazar con lo que se denomina hoja de estilo externa.
Una hoja de estilo externa es sencillamente un
fichero de texto con la extensión .css. Como cualquier otro
fichero, puedes colocar la hoja de estilo en el servidor web o en el disco
duro.
COMO CREAR
Se trata
de crear una hoja de estilos que reciba parámetros y con estos parámetros
cambiar características de visualización, por ejemplo en perfiles de usuarios.
Aquí hay
un pequeño ejemplo de uso:
Archivo
estilos.php
CODIGO CSS
|
<?php header("Content-type:
text/css"); ?>
.TDCaption {font-family:
Verdana, Arial,
Helvetica, sans-serif; font-size: 10px; font-weight: bold; color:#<?=$_GET['cfont']?>;}
.SmallestRed{ font-size:9px; color:#FF0000;}
input {font-size:10px; border:1px solid #cccccc;}
textarea {font-size:10px; border:1px solid #cccccc;}
select {font-size:10px; border:1px solid #cccccc;}
.derecha{text-align:right;}
body {background-color:#<?=$_GET['cbody']?>;}
|
En
nuestra página agregamos la línea con la que incluimos los estilos
parametrizables
CODIGO
HTML.
|
<link
type="text/css" media="screen" rel="stylesheet"
href="estilos.php?cbody=<?=$web_datos['color_body']?>&cfont=<?=$web_datos['color_texto']?>"
/>
|
Aquí le pasamos por parametro el color del body y
el color del texto de la clase TDCaption, estos parametros pueden venir de la
base de datos (por ejemplo).
Algo importante, es que para que el archivo
estilos.php sea interpretado como css debemos definirle el contenido como
estilo CSS, con una línea al principio.
Lamentablemente, CSS no permite
utilizar variables en las hojas de estilos. Por este motivo se han desarrollado
varias soluciones que hacen uso del servidor web y de los lenguajes de
programación de servidor para incluir variables en las hojas de estilos CSS.
La solución más sencilla consiste en utilizar el
mecanismo SSI (Server Side Includes) de los servidores web Apache y
Microsoft IIS. A continuación se muestra el proceso completo para el servidor
web Apache.
httpd.conf
o el archivo de configuración .htaccessEn cualquier caso, es necesario añadir las siguientes opciones de configuració:
Options +Includes
AddType text/css .scss
AddOutputFilter INCLUDES .scss
La configuración anterior le indica al servidor web que los archivos cuya extensión sea
.scss son
archivos CSS de servidor y que por tanto, se deben procesar antes de enviarlos
al usuario.
Para que los cambios en la configuración sean efectivos, no olvides
reiniciar el servidor web. 2) Crear la hoja de estilos y guardar el archivo con extensión
.scss3) Añadir las variables a la hoja de estilos utilizando sintaxis:
a {
color: $colorSecundario;
}
span {
background-color: $colorSecundario;
}
FINCSS;
?>
Por último, cuando enlaces la hoja de estilos
generada con este método, no olvides utilizar la extensión
.php en el nombre del archivo de la hoja
de estilos:<link type="text/css" rel="stylesheet" href="/css/estilos.php" />
CSS como lenguaje de programación
Las soluciones que permiten utilizar variables en
las hojas de estilos han evolucionado de tal manera que alguna de ellas permite
utilizar CSS como si fuera un lenguaje de programación. Una de estas soluciones
es CSS
Cacheer, ideada por el diseñador Shaun Inman.
En primer lugar, CSS Cacheer permite
utilizar variables en las hojas de estilos, aunque en esta solución se
denominan "constantes":
@constants {
nombre_de_la_constante: valor_de_la_constante;
}
selector {
propiedad: const(nombre_de_la_constante);
}
CSS Cacheer también permite definir unos estilos base que se
reutilizan en diferentes elementos:@base(tipografia_basica) {
font-family: Arial, sans-serif;
line-height: 1.5;
}
p {
based-on: base(tipografia_basica);
font-size: 110%;
}
h1 {
based-on: base(tipografia_basica);
font-size: 200%;
}
CSS Cacheer es tan avanzado que permite incluso anidar selectores
como se muestra en el siguiente ejemplo:ul {
propiedad1: valor1;
li {
propiedad2: valor2;
}
}
Si se procesan las reglas CSS anteriores con CSS Cacheer, el
resultado es el siguiente:ul {
propiedad1: valor1;
}
ul li {
propiedad2: valor2;
}
http://librosweb.es/css_avanzado/capitulo_6/variables_en_las_hojas_de_estilos.html
No hay comentarios:
Publicar un comentario