Estilo
Hola que tal
toy haciendo una página tengo archivos .asp, resulta que tengo varios estilos por poner y no los quiero andar repitiendo (tipo de letra, tamaño, color etc...)
¿Se puede hacer un archivo .css o similar donde figuren los estilos para llamarlo desde otro archivo?
Yo lo hice pero dentro de un mismo archivo osea puse... Por ej arriba
y luego lo llamaba poniendo...
<font class="titulo">TEXTO</font>
El tema es que yo quisiera poner todos los estilos en un archivo y luego utilizarlo desde el archivo que lo necesite, pero no se como hacer para llamar al archivo y luego como llamar al estilo correspondiente
Bueno desde ya muchas gracias
Y espero su rta
atta
Jorge
toy haciendo una página tengo archivos .asp, resulta que tengo varios estilos por poner y no los quiero andar repitiendo (tipo de letra, tamaño, color etc...)
¿Se puede hacer un archivo .css o similar donde figuren los estilos para llamarlo desde otro archivo?
Yo lo hice pero dentro de un mismo archivo osea puse... Por ej arriba
<style>
.titulo {
font-family: verdana;
color: red;
font-size: 10 px;
}
</style> y luego lo llamaba poniendo...
<font class="titulo">TEXTO</font>
El tema es que yo quisiera poner todos los estilos en un archivo y luego utilizarlo desde el archivo que lo necesite, pero no se como hacer para llamar al archivo y luego como llamar al estilo correspondiente
Bueno desde ya muchas gracias
Y espero su rta
atta
Jorge
7 Respuestas
Respuesta de calipides
1
La verdad es que es bastante simple y extremadamente útil generar un único documento .css con todas las definiciones de estilo!
Lo tienes que hacer de la siguiente manera:
Primero creas un archivo (de texto por ejemplo) y lo grabas con extensión .css
Luego en ese archivo que grabaste, tienes que colocar todas las definiciones, que pueden ser de dos formas; redefinir etiquetas HTML o bien asignar ciertos atributos mediante nombres claves que puedes "llamar" desde el documento HTML donde necesites aplicar el estilo.
Por ejemplo...
En la primera linea del archivo .css colocas esto:
@charset "iso-8859-1";
Luego, en las demás lineas vas redefiniendo los atributos de las etiquetas HTML que te interesen, por ejemplo:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-top: 0px;
margin-left: 0px;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #996633;
text-decoration: underline;
}
Etc...
Esto hace que no tengas que ponerle atributos a las etiquetas en cada página HTML, porque ya están redefinidas por ti en el archivo .css
(Se entiende, ¿verdad?)
La otra opción que tienes en el archivo .css es definir atributos y asignarles una palabra clave, en vez de redefinir una etiqueta completa. Por ejemplo:
#side A {FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #ffffff; LINE-HEIGHT: 12px; TEXT-DECORATION: none}
Esto va a aplicarle los cambios a la etiqueta <A> de tus páginas web, sólo cuando tu llames al elemneto "side"
La manera en que debes decirle a una etiqueta que utiliza un determinado estilo es la siguiente; por ejemplo:
Tienes una tabla, y en una celda quieres hacer que los vínculos tengan el estilo que definiste en "side", lo que debes colocarle el siguiente atributo a la etiqueta <TD>:
id="side"
es decir, la etiqueta deberia quedar algo así:
<TD id="side">
(espero que se entienda esto)
POR ULTIMO, para enlazar el documento .css con tus páginas web, debes colocar el siguiente código en la cabecera de cada página (entre las etiquetas <HEAD> y </HEAD>
<LINK href="tu_ruta_al_archivo/tu_archivo.css" type=text/css
rel=stylesheet>
OKAS, eso es todo.
Lo tienes que hacer de la siguiente manera:
Primero creas un archivo (de texto por ejemplo) y lo grabas con extensión .css
Luego en ese archivo que grabaste, tienes que colocar todas las definiciones, que pueden ser de dos formas; redefinir etiquetas HTML o bien asignar ciertos atributos mediante nombres claves que puedes "llamar" desde el documento HTML donde necesites aplicar el estilo.
Por ejemplo...
En la primera linea del archivo .css colocas esto:
@charset "iso-8859-1";
Luego, en las demás lineas vas redefiniendo los atributos de las etiquetas HTML que te interesen, por ejemplo:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-top: 0px;
margin-left: 0px;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #996633;
text-decoration: underline;
}
Etc...
Esto hace que no tengas que ponerle atributos a las etiquetas en cada página HTML, porque ya están redefinidas por ti en el archivo .css
(Se entiende, ¿verdad?)
La otra opción que tienes en el archivo .css es definir atributos y asignarles una palabra clave, en vez de redefinir una etiqueta completa. Por ejemplo:
#side A {FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #ffffff; LINE-HEIGHT: 12px; TEXT-DECORATION: none}
Esto va a aplicarle los cambios a la etiqueta <A> de tus páginas web, sólo cuando tu llames al elemneto "side"
La manera en que debes decirle a una etiqueta que utiliza un determinado estilo es la siguiente; por ejemplo:
Tienes una tabla, y en una celda quieres hacer que los vínculos tengan el estilo que definiste en "side", lo que debes colocarle el siguiente atributo a la etiqueta <TD>:
id="side"
es decir, la etiqueta deberia quedar algo así:
<TD id="side">
(espero que se entienda esto)
POR ULTIMO, para enlazar el documento .css con tus páginas web, debes colocar el siguiente código en la cabecera de cada página (entre las etiquetas <HEAD> y </HEAD>
<LINK href="tu_ruta_al_archivo/tu_archivo.css" type=text/css
rel=stylesheet>
OKAS, eso es todo.
Respuesta de kunndry
1
MUCHÍSIMAS GRACIAS, la verdad que venia programando a full y mucho ni veía ya.
Anda todo perfecto
Gracias
Saludos
Jorge.
Anda todo perfecto
Gracias
Saludos
Jorge.
Respuesta de fatehand
1
Voy a intentar responder a tu pregunta. Una de las características más potentes de la programación con hojas de estilos consiste en que, de una vez, podemos definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo. De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas. Con las ventajas añadidas de que se ahorra en líneas de código HTML (lo que reduce el peso del documento) y se evita la molestia de definir una y otra vez los estilos con el HTML, tal como se comentó anteriormente.
Veamos ahora cómo el proceso para incluir estilos con un fichero externo.
1- Creamos el fichero con la declaración de estilos
Es un fichero de texto normal, que puede tener cualquier extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es decir, sería erróneo incluir código HTML en el: etiquetas y demás. Podemos ver un ejemplo a continuación.
P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}
2- Enlazamos la pána web con la hoja de estilos
Para ello, vamos a colocar la etiqueta <LINK> con los atributos
rel="STYLESHEET" indicando que el enlace es con una hoja de estilos
type="text/css" porque ela archivo es de texto, en sintaxis CSS
href="estilos.css" indica el nombre del fichero fuente de los estilos
Veamos una página web entera que enlaza con la declaración de estilos anterior:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página que lee estilos</title>
</head>
<body>
<h1>Página que lee estilos</h1>
Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil.
<br>
<br>
<table width="300" cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Esto está dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td>
</tr>
<tr>
<td>La segunda fila del TD</td>
</tr>
</table>
</body>
</html>
Veamos ahora cómo el proceso para incluir estilos con un fichero externo.
1- Creamos el fichero con la declaración de estilos
Es un fichero de texto normal, que puede tener cualquier extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es decir, sería erróneo incluir código HTML en el: etiquetas y demás. Podemos ver un ejemplo a continuación.
P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}
2- Enlazamos la pána web con la hoja de estilos
Para ello, vamos a colocar la etiqueta <LINK> con los atributos
rel="STYLESHEET" indicando que el enlace es con una hoja de estilos
type="text/css" porque ela archivo es de texto, en sintaxis CSS
href="estilos.css" indica el nombre del fichero fuente de los estilos
Veamos una página web entera que enlaza con la declaración de estilos anterior:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página que lee estilos</title>
</head>
<body>
<h1>Página que lee estilos</h1>
Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil.
<br>
<br>
<table width="300" cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Esto está dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td>
</tr>
<tr>
<td>La segunda fila del TD</td>
</tr>
</table>
</body>
</html>
Respuesta de guolfy
1
Claro que puedes guardar todos los estilos que quieras en un fichero externo con extensión .css, y posteriormente desde las páginas asp tienes que hacer la llamada
<link REL="stylesheet" HREF="rutadelfichero.css" TYPE="text/css">
dentro de los tags <head>
<link REL="stylesheet" HREF="rutadelfichero.css" TYPE="text/css">
dentro de los tags <head>
Respuesta de ajmarmar
1
Dentro de las etiquetas de <head></head> pon lo siguiente:
<link rel="STYLESHEET" type="text/css" href="fichero.css">
Dentro del fichero.css pon todos tus estilos, y de esta manera podrás importar todos tu estilos a todas tus páginas asp y así administrarás todos tus estilos en un solo fichero.
Suerte.
<link rel="STYLESHEET" type="text/css" href="fichero.css">
Dentro del fichero.css pon todos tus estilos, y de esta manera podrás importar todos tu estilos a todas tus páginas asp y así administrarás todos tus estilos en un solo fichero.
Suerte.
Respuesta de jazaen
1
Ok
Para mandar llamar el archivo solo tienes que poner la ruta donde se encuentra dentro de tu página ASP (donde lo deseas aplicar)(después de HREF):
<LINK REL="stylesheet" HREF="http://gdlweb01/Deliverables.css" TYPE="text/css">
Asi y en cuanto a tu archivo .CSS como son clases no necesitas las etiquetas de estilo:
Y lo mandas llmar como lo estabas haciendo
<font class="titulo">TEXTO</font>
Para mandar llamar el archivo solo tienes que poner la ruta donde se encuentra dentro de tu página ASP (donde lo deseas aplicar)(después de HREF):
<LINK REL="stylesheet" HREF="http://gdlweb01/Deliverables.css" TYPE="text/css">
Asi y en cuanto a tu archivo .CSS como son clases no necesitas las etiquetas de estilo:
.titulo {
font-family: verdana;
color: red;
font-size: 10 px;
}Y lo mandas llmar como lo estabas haciendo
<font class="titulo">TEXTO</font>
Respuesta de webcool
1
El código que necesitas es el siguiente:
<link rel="stylesheet" type="text/css" href="styles/default.css">
Aquí mandar llamer el archivo css, y el nombre con lo que llamas es lo que tienes en rel.
Si tienes cualquier duda, no dudes en preguntar.
<link rel="stylesheet" type="text/css" href="styles/default.css">
Aquí mandar llamer el archivo css, y el nombre con lo que llamas es lo que tienes en rel.
Si tienes cualquier duda, no dudes en preguntar.