Menubar

martes, 14 de junio de 2016

Agregar o modificar una hoja de estilos usando PHP o JavaScript

Por J. Manuel Mar H. Editar
Compartir en Facebook
Compartir en Twitter
Compartir en Google+
Enviar a Reddit
Guardar en Internet archive
Guardar en  archive.today
Enviar por email
Archivo .css 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:
Salida CSS






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:
Salida CSS






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:
Salida CSS






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.



Publicidad:


Compartir:


Temas relacionados:


No hay comentarios. :

Publicar un comentario

:) :( ;) :D :-/ :x :P :-* =(( :-O X( :7 B-) #:-S :(( :)) =)) :-B :-c :)] ~X( :-h I-) =D7 @-) :-w 7:P 2):) :!! \m/ :-q :-bd ^#(^

Danos tu voto
Comunidad Kynamio
Directorio de blogs, ¡agrega el tuyo!
Programas para el mantenimiento de Windows
Blog de seguridad informatica