Comunidad de diseño web y desarrollo en internet online

optimizando CSS / CSS y PHP

Citar            
MensajeEscrito el 02 Ene 2007 09:50 pm
hola

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

Por webgeri

58 de clabLevel



Genero:Masculino  

montevideo

firefox
Citar            
MensajeEscrito el 04 Ene 2007 07:23 pm
Grax me servira

Por Mukongo

238 de clabLevel

1 tutorial

Genero:Masculino  

Pasa, ponte cómodo y si te gusta..quedate

firefox

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.