En ocasiones queremos modificar una hoja de estilos al vuelo (es decir mientras se despliega la página web), ¿cómo podemos hacerlo usando PHP o JavaScript?
A continuación mostrare algunos ejemplos de como podemos crear/modificar nuestra hoja de estilos usando PHP y JavaScript, tanto para un archivo externo como para hojas de estilo incrustadas directamente en nuestro archivo base.
Enlazando una hoja de estilo que se modifica al vuelo:
<html>
<head>
<title>test css</title>
<link href="css.php" rel="stylesheet" type="text/css" />
</head>
<body>
<font class="testkey">this is a test</font>
</body>
</html>
Hoja de estilos externa (css.php)
.testkey
{
font-weight: bold;
color: <? echo "red;"; ?>
}
Salida:
Modificando una hoja de estilos incrustada en nuestro documento (usando PHP):
<html>
<head>
<title>test css</title>
<style type="text/css" />
<!--
.testkey
{
font-family: Verdana;
font-size: 24px;
color: <? echo "green;"; ?>
}
-->
</style>
</head>
<body>
<font class="testkey">this is a test</font>
</body>
</html>
Salida:
Modificando una hoja de estilos incrustada en nuestro documento (usando JavaScript):
<html>
<head>
<title>test css</title>
<script language="JavaScript">
<!--
function drawCSS()
{
document.write('<style type="text/css" />');
document.write('<!--');
document.write('.testkey');
document.write('{');
document.write('background-color: yellow;');
document.write('color: purple;');
document.write('}');
document.write('-->');
document.write('</style>');
}
-->
</script>
</head>
<body>
<script language="JavaScript">
drawCSS();
</script>
<font class="testkey">this is a test</font>
</body>
</html>
Salida:
Conclusión: Es posible modificar las entradas o llaves de una hoja de estilos, ya sea que nuestro archivo enlazado se encuentre en el lenguaje PHP, o bien modificando las entradas al vuelo directamente desde PHP o usando JavaScrip sin tener que reescribir por completo nuestra hoja de estilo.
| Procedencia de las imágenes: |
| File: Icono archivo CSS http://www.ctec.com.ar/Images/cursos_images/curso_hojas_de_estilo_css.png |
¿Te gustó este post?, entonces si lo deseas puedes apoyarnos para continuar con nuestra labor, gracias.
No hay comentarios. :
Publicar un comentario