Hojas de estilo CSS
Me gustaría saber cómo puedo tener un archivo ".css" donde pueda meter mis clases definidas dentro de un stylesheet y no tener que definirlas en cada página.
Actualmente tengo puesto esto en cada página:
<style type="text/css">
.boton{
font-size:12px;
font-family:Verdana,Helvetica;
font-weight:bold;
color:white;
background:#638cb5;
border:0px;
width:120px;
height:25px;
}
</style>
Y luego cuando defino el botón pongo:
<input type="button" class="boton" value="Nuevo Boton" name="boton1">
Quisiera tener un archivo donde estén definidas todas las clases y en la página sólo poner la ruta del archivo, igual que se hace con javascript.
Gracias
Actualmente tengo puesto esto en cada página:
<style type="text/css">
.boton{
font-size:12px;
font-family:Verdana,Helvetica;
font-weight:bold;
color:white;
background:#638cb5;
border:0px;
width:120px;
height:25px;
}
</style>
Y luego cuando defino el botón pongo:
<input type="button" class="boton" value="Nuevo Boton" name="boton1">
Quisiera tener un archivo donde estén definidas todas las clases y en la página sólo poner la ruta del archivo, igual que se hace con javascript.
Gracias
2 Respuestas
Respuesta de luchofoxperu
1
Ok, haz lo siguiente:
Utilizando el bloc de notas (o cualquier editor de texto, incluso Dreamweaver) pon toda la descripcion de tu estilo, excepto la linea <style>...</style>
O sea:
Solamente esto:
.boton{
font-size:12px;
font-family:Verdana,Helvetica;
font-weight:bold;
color:white;
background:#638cb5;
border:0px;
width:120px;
height:25px;
}
A continuación GRABA ese documento con extensión CSS (asegurate si usas el bloc de notas que en la opción TIPO este seleccionado "TODOS LOS ARCHIVOS")
Por ejemplo le pones: estilo.css
Luego vas a tu editor Web (Dreamweaver) y en el palen DISEÑO (design) agregas el estilo que acabas de crear.
Si no lo ubicas de esa manera, en tu código puedes ponerlo así:
<link href="estilos.css" rel="stylesheet" type="text/css">
(Para el ejemplo superior, el CSS está en la misma carpeta que mi HTML, en caso quieras cambiarle la ruta, solamente agregala, como si se tratase de cualquier objeto)
Recuerda que esto va dentro de la etiqueta <head> ... </head>
Ahora grabas y el panel derecho de DISEÑO (design) debe aparecer el estilo "Boton", solamente seleccionas el texto al que le quieres aplicar el estilo, y en el panel haces click en "boton".
Utilizando el bloc de notas (o cualquier editor de texto, incluso Dreamweaver) pon toda la descripcion de tu estilo, excepto la linea <style>...</style>
O sea:
Solamente esto:
.boton{
font-size:12px;
font-family:Verdana,Helvetica;
font-weight:bold;
color:white;
background:#638cb5;
border:0px;
width:120px;
height:25px;
}
A continuación GRABA ese documento con extensión CSS (asegurate si usas el bloc de notas que en la opción TIPO este seleccionado "TODOS LOS ARCHIVOS")
Por ejemplo le pones: estilo.css
Luego vas a tu editor Web (Dreamweaver) y en el palen DISEÑO (design) agregas el estilo que acabas de crear.
Si no lo ubicas de esa manera, en tu código puedes ponerlo así:
<link href="estilos.css" rel="stylesheet" type="text/css">
(Para el ejemplo superior, el CSS está en la misma carpeta que mi HTML, en caso quieras cambiarle la ruta, solamente agregala, como si se tratase de cualquier objeto)
Recuerda que esto va dentro de la etiqueta <head> ... </head>
Ahora grabas y el panel derecho de DISEÑO (design) debe aparecer el estilo "Boton", solamente seleccionas el texto al que le quieres aplicar el estilo, y en el panel haces click en "boton".
Respuesta de hakkinen
1
Lo que deseas es crear un archivo .css que se vincule a una página, de tal forma que no necesites modificar todo eso cada vez que creas una página, ¿no?
Pues bien, si usas dreamweaver es bien sencillo. Solo debes darle al menu ventana->estilos css y cuando se habrá el cuadro, le das a modificar etiquetas o bien usas el crear estilo css personalizado y pones todo aquello que deseas.
Si le das a modificar etiqueta, todo lo que este dentro de esa etiqueta, quedara definido por el css. Si usas el crear estilo personalizado, solo será aquello que subrayes (esto no lo he probado, solo lo he leído) También puedes usar el selector css para modificar el a link, visited, etc.
Todo es cuestión de jugar con esto. Si no usas dreamweaver, te puedo crear yo la hoja de estilos css o bien, un colega tuyo que lo use. Lo que prefieras.
Hasta otra y espero haberte ayudado!
Pues bien, si usas dreamweaver es bien sencillo. Solo debes darle al menu ventana->estilos css y cuando se habrá el cuadro, le das a modificar etiquetas o bien usas el crear estilo css personalizado y pones todo aquello que deseas.
Si le das a modificar etiqueta, todo lo que este dentro de esa etiqueta, quedara definido por el css. Si usas el crear estilo personalizado, solo será aquello que subrayes (esto no lo he probado, solo lo he leído) También puedes usar el selector css para modificar el a link, visited, etc.
Todo es cuestión de jugar con esto. Si no usas dreamweaver, te puedo crear yo la hoja de estilos css o bien, un colega tuyo que lo use. Lo que prefieras.
Hasta otra y espero haberte ayudado!