Apartar hoja del CSS?

NaRanJiTo78 · #1 (**permalink**) 27/03/2009, 02:55

Hola!

Tengo una duda:

Si yo cambio el tamaño de letra en una página que está asociada con otras tantas a un CSS, se cambia en todas.

Si yo solamente quiero que se cambie el tamaño solo en esa y adoptando el resto de características del CSS, como debo hacer? se puede?

Muchas gracias

subirol · #2 (**permalink**) 27/03/2009, 05:26

Se puede hacer, deverias crear una clase para el texto de esa pagina en particular. De todas formas si fueras mas claro te podria explicar major como hacer.

pzin · #3 (**permalink**) 27/03/2009, 05:52

Yo usualmente trabajo con varios hojas de estilo. Una para la estructura básica del sitio (cabecera, menú, pie, por ejemplo) y luego una hoja para cada sección. Si quiero que en una sección haya algo diferente al resto (no sé, por ejemplo el color de fondo de la página, o algo del menú, etc...) solo tengo que cambiarlo en la hoja de la sección.

Pero, si en tu caso es algo muy puntual, pues puedes cambiar simplemente la clase.

O hacer algo así, si solamente quieres cambiar el tamaño:

Código css:

Ver original/*"p" sería para todas las páginas*/
p {
margin:5px;
font:13px Verdana;
color:blue;
}
.pEnano {
font-size:11px;
}

Código html:

Ver original<p class="pEnano">lorem ipsum y tal</p>

Éste párrafo usaría p (marge de 5, fuente Verdana y color azul) pero el tamaño de la clase pEnano (11px).

Si en vez de dar estilo a un elemento, lo que estabas haciendo era poniendo un estilo, entonces puedes llamar dos clases desde el html.

Código css:

Ver original/*"p" sería para todas las páginas*/
.grande {
margin:5px;
font:13px Verdana;
color:blue;
}
.enano {
font-size:11px;
}

Código html:

Ver original<p class="grande enano">lorem ipsum y tal</p>

Si es solo un caso puntual dentro de esa página, entonces ya mejor igual es usar un ID en vez de una clase.

Mikmoro · #4 (**permalink**) 27/03/2009, 15:59

A veces puede ser tan simple como seguir cargando la hoja externa, pero insertar en la cabecera de tu HTML la norma específica con:

<style type="text/css">
p.grande {font-size: 3em;}
</style>

Adryi19 · #5 (**permalink**) 28/03/2009, 17:23

asi como te dijo mikmoro la clase se hereda como el ejemplo pero tomara el valor que este mas cerca pro ejemplo si

le pones en ese parrafo

<p style="color:red;"></p> hara caso a este primero (no recomendado)

<head>
<style type="text/css"> luego a este que se pone entre los tags head
p { color:red; }
</style>
</head>

y por ultimo hara caso a la hoja <link rel=""stylesheet href="estilo.css" />

pero los estilos heredan pero hace caso al mas cercano a excepcion de !important me gusto el ejemplo de arriba no sabia muy bien eso

NaRanJiTo78 · #6 (**permalink**) 01/04/2009, 11:41

Pero si pongo eso en el head, como aplico a un div específico "p.grande"?

Porque ahora mismo hace caso a la hoja CSS principal.

Muchas gracias

safe · #7 (**permalink**) 01/04/2009, 11:59

lo recomendable es simpre poner un ID o una CLASS diferente al de todas las paginas. De esta manera desde el mismo archivo.css podras cambiar estilos particulares para cada pagina.
Por ejemplo si tienes una pagina con ID "index", otra con "listado" y otra con "articulo" puedes aplicarle distintos tamaños de texto a cada una de la siguiente manera

p { font-size: 11px; }
#index p { font-size: 12px; }
#listado p { font-size: 14px; }
#articulo p { font-size: 16px; }

Saludos.

NaRanJiTo78 · #8 (**permalink**) 02/04/2009, 01:03

Hola safe, gracias por contestar.

En este tema de "estilos diferentes en un CSS" soy nuevo. Me podrias decir como lo tendría que poner?

En el mismo Css?En los divs?ahí me pierdo...

Muchas gracias

jomaruro · #9 (**permalink**) 02/04/2009, 15:20

Hola:

La solución la tienes en la respuesta de bonez o en la de mikmoro.

Saludos.

safe · #10 (**permalink**) 02/04/2009, 16:24

Basicamente lo que tienes que hacer es en todos los HTMLs (o en los que creas necesario) agregar un ID al tag body de la siguiente manera:

<body id="home">

Y despues dentro de tu archivo .css cada vez que quieras modificar un estilo solo en una pagina solo tienes que anteponer ese ID al elemento que quieres modificar:

p { font-size:11px; } <-- esto se aplicaria a todas las paginas
#home p { font-size:12px; } <-- esto se aplicaria solo en la pagina con ID home