36FD4B7C-b0c1e089efc6e1ea96b709748b7b9596

Menubar

martes, 14 de junio de 2016

Agregar o modificar una hoja de estilos usando PHP o JavaScript

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:
Caritas para las respuestas:
Escriba el código en la respuesta para insertar divertidas caritas en sus respuestas.
:) :( ;) :D :-/ :x :P :-* =(( :-O X( :7 B-) #:-S :(( :)) =)) :-B :-c :)] ~X( :-h I-) =D7 @-) :-w 7:P 2):) :!! \m/ :-q :-bd ^#(^

No hay comentarios.:

Publicar un comentario

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