buenas como andan?
pues encontre una web donde explican el uso de PHP para optimizar el armado de un archivo de estilos
me pareció muy util así que lo comparto
(puede que existan errores en la explicación, o en la forma como nombro y/o/u aplico las cosas, si es asi corregid nomas)
la info la saque de esta web
que la encontre en esta otra web
lo explico sencillo a ver si puedo
digamos que tenemos un archivo de estilos definido así
Código :
html{
overflow:auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#caja {
position:absolute;
left:0;
top:0;
width:350px;
height:auto;
background-color:#333333;
padding:12px;
border:#FF8700 12px solid;
}
h1{
background-color:#0099CC;
font-size:13px;
padding:6px;
}
h2 {
background-color:#CCCCCC;
font-size:11px;
padding:6px;
}
p {
font-size:11px;
color:#FFFFFF;
}
.codigo {
background-color:#FF8700;
font-size:11px;
margin:12px;
padding:6px;
display:block;
color:#FFFFFF;
}imaginemos si tenemos que cambiar el color por ej. a todos los elementos que tienen el color #FF8700 y a todos los que tienen el color #333
tenemos que ir cambiandolo en cada uno de los elementos donde usamos esos colores
si llegamos a tener muchos elementos sería algo realmente tedioso
se nos podría olvidar un elemento o escribir mar el color alguna vez
entonces nos sería muy util hacer algo así
Código :
/* Constants
$color1= '#FF8700'
*/
body {
background-color:$color1;
}
#header{
background-color:$color1;
}
#pie {
color:$color1;
}y entonces cuando querramos cambiar el color1 solo vamos a donde dice
Código :
/* Constants $color1= '#FF8700' */
y cambiamos el valor de esa variable
bien de esta forma nos ahorramos mucho trabajo y nos facilita el diseño de nuestro sitio
ahora esta forma de uso de variables es de PHP(quízas de algun otro lenguaje más), no tenemos porque saber PHP para este ejercicio
solo saber un par de cositas al definir una variable lo haremos asi
Código :
/* Constants $variable='valor'; */
al llamar a la variable lo haremos así
selector
Código :
{
propiedad:$variable;
}nos sirve para colores, tipografías, tamaños, espaciados, etc.
al principio lo mas fácil es utilizarlo para definir de una manera mas sencilla los colores
bueno una cosa mas
no podemos llamar al archivo.css así nomas
tan facil no iba a ser
lo que tenemos que hacer es
en lugar de llamar al .css en el .html de esta manera
Código :
<link href="estilos.css" rel="stylesheet" type="text/css" />
o de esta otra
Código :
<style type="text/css">
<!--
@import url("estilos.css");
-->
</style>importaremos el .css junto a un archivo .php (seguro se dice de otra forma)
se escribe así dentro del header
Código :
<style type="text/css"> @import 'cssconst.php?c=estilos.css'; </style>
no tenemos que abrir ni cambiar nada del archivo cssconst.php
lo que hace ese archivo es permitirnos definir y usar ese tipo de variables dentro del archivo .CSS
de esta forma podemos controlar el diseño de nuestro sitio de una manera mucho mas sencilla y práctica
por ej. en este caso utilice variables para definir algunas cosas mas que colores
Código :
/* Constants
$color1= '#FF8700';
$color2= '#FFFFFF';
$color3= '#333333';
$color4= '#0099CC';
$color5= '#CCCCCC';
$tamanio1= '13px';
$tamanio2= '12px';
$tamanio3= '11px';
$tamanio4= '10px';
$tamanio5= '9px';
$fuentes1= 'Verdana, Arial, Helvetica, sans-serif';
*/
html{
overflow:auto;
font-family:$fuentes1;
background-color:$color4;
}
#caja {
position:absolute;
left:0;
top:0;
width:350px;
height:auto;
padding:$tamanio2;
border:11px solid;
background-color:$color3;
border:$color1;
}
h1{
font-size:$tamanio1;
padding:$tamanio1;
background-color:$color4;
}
h2 {
font-size:$tamanio3;
padding:$tamanio1;
background-color:$color5;
}
p {
font-size:$tamanio4;
color:$color2;
}
.codigo {
font-size:$tamanio4;
margin:$tamanio5;
padding:$tamanio1;
display:block;
background-color:$color1;
color:$color3;
}bueno como decía lo mas fácil para practicar al inicio es utilizarlo
para optimizar la definición de los colores dentro del CSS
aca les dejo un ejemplo terminado con todos los archivos utilizados
el ejemplo online
(los archivos solo funcionan si estan en un servidor que soporte PHP
o si tienen algo que les permita imitar el PHP en su pc (que no recuerdo el nombre))
si alguno quiere corregir/cambiar/ajustar lo que explico pues adelante
espero les sirva
sldos alejandro
p.d.: en el sitio hay otra página donde explica otra forma creo (capaz que es igual)
pero no lo entendi mucho(casi nada) asi que no lo explico porque no lo entendi
pero les dejo el link seguro alguno lo puede entender
p.d. 2: busque en el foro y no encontre info sobre esto
pero si esta repetido el post avisen y borro este nomas
sldos
