Hojas de Estilo CSS

No es muy clara tu pregunta, sin embargo recuerda que las CSS funcionan en
cascada. También puedes adicionar un poco de Javascript para enriquecer el
comportamiento de tus páginas cambiando dinámicamente el estilo. Creo con
relación a tu pregunta que puedes hacer lo siguiente:

body, a, a:link, a:visited, p, td,
{
font-family : Verdana, Helvetica;
font-size: 12 px;
}

td
{
padding-left: 5px;
padding-right: 5px;
}

td.especial
{
border: 1px solid black;
}

a:hover, .claseCualquiera
{
color: rgb(255,0,0);
}

Como resultado, los estilos se añaden por herencia: td.especial hereda las
propiedades de td. Si pones la misma propiedad con valores diferentes para
un mismo elemento o clase, se reflejará el último indicado, en este orden:
Hoja externa (link) - hoja incrustada en la cabecera - estilo incrustado en
el elemento.

Para evitar que un estilo incrustado reemplace el definido en la hoja
externa o en la cabecera, se le añade la etiqueta !important

td {
boder: none !important;
}

"Joseph Fley" escribió en el mensaje
news:

Saludos,

Mi consulta es como poner mas de un estilo a un determinado objeto para

que

ambos estilos se fusionen formando uno con las propiedades de ambos.

Es posible? como?

Gracias.

Muchas gracias Miguel,

Seré mas claro:

Lo de la herencia esta bien, lo que sucede es que muchas veces no es
suficiente ya que hay elementes que tendría que andar repitiendo por todos
lados o creando estructuras un poco complicadas...

Me refiero por ejemplo que tengo lo siguientes estilos:

.borde1 {
border-top: 1px solid #CCCCCC;
}

.borde2 {
border-bottom: 1px solid #CCCCCC;
}


No puedo aplicar estos estilos a una celda y que ambos funcionen??






"Miguel Angel Da Vila" escribió en el
mensaje news:

No es muy clara tu pregunta, sin embargo recuerda que las CSS funcionan en
cascada. También puedes adicionar un poco de Javascript para enriquecer el
comportamiento de tus páginas cambiando dinámicamente el estilo. Creo con
relación a tu pregunta que puedes hacer lo siguiente:

body, a, a:link, a:visited, p, td,
{
font-family : Verdana, Helvetica;
font-size: 12 px;
}

td
{
padding-left: 5px;
padding-right: 5px;
}

td.especial
{
border: 1px solid black;
}

a:hover, .claseCualquiera
{
color: rgb(255,0,0);
}

Como resultado, los estilos se añaden por herencia: td.especial hereda las
propiedades de td. Si pones la misma propiedad con valores diferentes para
un mismo elemento o clase, se reflejará el último indicado, en este orden:
Hoja externa (link) - hoja incrustada en la cabecera - estilo incrustado

en

el elemento.

Para evitar que un estilo incrustado reemplace el definido en la hoja
externa o en la cabecera, se le añade la etiqueta !important

td {
boder: none !important;
}

"Joseph Fley" escribió en el mensaje
news:
> Saludos,
>
> Mi consulta es como poner mas de un estilo a un determinado objeto para
que
> ambos estilos se fusionen formando uno con las propiedades de ambos.
>
> Es posible? como?
>
> Gracias.
>
>

Nopo,

A menos que algún documento dentro de W3C tenga alguna notación específica
dentro de su norma, y que el navegador lo entienda. También puedes usar
Javascript para añadir las propiedades dinámicamente, creando objetos a los
que se les pueda encender una o varias propiedades en función de un contexto
o una acción de usuario. Recuerdo haber visto un ejercicio en
www.brainjar.com donde defines algo como:

<div class="bordearriba bordeambos">

Que no es muy adecuado a la hora de entrar con un validador de HTML como el
de W3C y dejar que mediante una rutina, Javascript haga funcionar una de las
propiedades elegidas.

Lo que yo suelo hacer es tener dos o tres clases por cada elemento
"mutante", ej.

campo-formulario
{
back-ground: transparent;
}

campo-formulario_on
{
back-ground: red;
}

y luego pego un evento a los campos elementos donde quiero que ocurra el
cambio. Puede ser un mouserover, un blur que se yo:

// guarda todos los elementos input en un array
var fieldObj = document.getElementsByTagName('input');

// recorre todos los elementos guardados en el array
for ( var i = 0 ; i < fieldObj.length ; i++)
{
var tmp = fieldObj[i].className;
// si la clase del elemento contiene el prefijo campo- hace el cambio
de clase cuando el usuario hace el click
if (tmp.indexOf('campo-') != -1)
{
fieldObj[i].onfocus = function () { if
(this.className.indexOf('_on') == -1) this.className 'campo-formulario_on'; };
fieldObj[i].onblur = function () { if
(this.className.indexOf('_on') != -1) this.className 'campo-formulario'; };
}
}

De esta manera, pegando el código al final de cada hoja, todos los campos
input con el sufijo input cambiaran de color cuando tienen el foco. sólo se
pone en la clase on, aquellos valores que de quieren cambiar.

Saludos
Miguel Angel Da Vila

"Joseph Fley" escribió en el mensaje
news:

Muchas gracias Miguel,

Seré mas claro:

Lo de la herencia esta bien, lo que sucede es que muchas veces no es
suficiente ya que hay elementes que tendría que andar repitiendo por todos
lados o creando estructuras un poco complicadas...

Me refiero por ejemplo que tengo lo siguientes estilos:

.borde1 {
border-top: 1px solid #CCCCCC;
}

.borde2 {
border-bottom: 1px solid #CCCCCC;
}


No puedo aplicar estos estilos a una celda y que ambos funcionen??






"Miguel Angel Da Vila" escribió en el
mensaje news:
> No es muy clara tu pregunta, sin embargo recuerda que las CSS funcionan

en

> cascada. También puedes adicionar un poco de Javascript para enriquecer

el

> comportamiento de tus páginas cambiando dinámicamente el estilo. Creo

con

> relación a tu pregunta que puedes hacer lo siguiente:
>
> body, a, a:link, a:visited, p, td,
> {
> font-family : Verdana, Helvetica;
> font-size: 12 px;
> }
>
> td
> {
> padding-left: 5px;
> padding-right: 5px;
> }
>
> td.especial
> {
> border: 1px solid black;
> }
>
> a:hover, .claseCualquiera
> {
> color: rgb(255,0,0);
> }
>
> Como resultado, los estilos se añaden por herencia: td.especial hereda

las

> propiedades de td. Si pones la misma propiedad con valores diferentes

para

> un mismo elemento o clase, se reflejará el último indicado, en este

orden:

> Hoja externa (link) - hoja incrustada en la cabecera - estilo incrustado
en
> el elemento.
>
> Para evitar que un estilo incrustado reemplace el definido en la hoja
> externa o en la cabecera, se le añade la etiqueta !important
>
> td {
> boder: none !important;
> }
>
> "Joseph Fley" escribió en el mensaje
> news:
> > Saludos,
> >
> > Mi consulta es como poner mas de un estilo a un determinado objeto

para

> que
> > ambos estilos se fusionen formando uno con las propiedades de ambos.
> >
> > Es posible? como?
> >
> > Gracias.
> >
> >
>
>

Muchas gracias Miguel,

Lo del JavaScript está muy interesante pero es más para crear un efecto
dinámico, pero solo para aplicarlos los dos efectos al mismo tiempo a un
elemente, no veo forma. (Cómo no se le ocurrio algo así a la gente del W3C!)

Muchas Gracias de todas formas.



"Miguel Angel Da Vila" escribió en el
mensaje news:

Nopo,

A menos que algún documento dentro de W3C tenga alguna notación específica
dentro de su norma, y que el navegador lo entienda. También puedes usar
Javascript para añadir las propiedades dinámicamente, creando objetos a

los

que se les pueda encender una o varias propiedades en función de un

contexto

o una acción de usuario. Recuerdo haber visto un ejercicio en
www.brainjar.com donde defines algo como:

<div class="bordearriba bordeambos">

Que no es muy adecuado a la hora de entrar con un validador de HTML como

el

de W3C y dejar que mediante una rutina, Javascript haga funcionar una de

las

propiedades elegidas.

Lo que yo suelo hacer es tener dos o tres clases por cada elemento
"mutante", ej.

campo-formulario
{
back-ground: transparent;
}

campo-formulario_on
{
back-ground: red;
}

y luego pego un evento a los campos elementos donde quiero que ocurra el
cambio. Puede ser un mouserover, un blur que se yo:

// guarda todos los elementos input en un array
var fieldObj = document.getElementsByTagName('input');

// recorre todos los elementos guardados en el array
for ( var i = 0 ; i < fieldObj.length ; i++)
{
var tmp = fieldObj[i].className;
// si la clase del elemento contiene el prefijo campo- hace el cambio
de clase cuando el usuario hace el click
if (tmp.indexOf('campo-') != -1)
{
fieldObj[i].onfocus = function () { if
(this.className.indexOf('_on') == -1) this.className > 'campo-formulario_on'; };
fieldObj[i].onblur = function () { if
(this.className.indexOf('_on') != -1) this.className > 'campo-formulario'; };
}
}

De esta manera, pegando el código al final de cada hoja, todos los campos
input con el sufijo input cambiaran de color cuando tienen el foco. sólo

se

pone en la clase on, aquellos valores que de quieren cambiar.

Saludos
Miguel Angel Da Vila

"Joseph Fley" escribió en el mensaje
news:
> Muchas gracias Miguel,
>
> Seré mas claro:
>
> Lo de la herencia esta bien, lo que sucede es que muchas veces no es
> suficiente ya que hay elementes que tendría que andar repitiendo por

todos

> lados o creando estructuras un poco complicadas...
>
> Me refiero por ejemplo que tengo lo siguientes estilos:
>
> .borde1 {
> border-top: 1px solid #CCCCCC;
> }
>
> .borde2 {
> border-bottom: 1px solid #CCCCCC;
> }
>
>
> No puedo aplicar estos estilos a una celda y que ambos funcionen??
>
>
>
>
>
>
> "Miguel Angel Da Vila" escribió en el
> mensaje news:
> > No es muy clara tu pregunta, sin embargo recuerda que las CSS

funcionan

en
> > cascada. También puedes adicionar un poco de Javascript para

enriquecer

el
> > comportamiento de tus páginas cambiando dinámicamente el estilo. Creo
con
> > relación a tu pregunta que puedes hacer lo siguiente:
> >
> > body, a, a:link, a:visited, p, td,
> > {
> > font-family : Verdana, Helvetica;
> > font-size: 12 px;
> > }
> >
> > td
> > {
> > padding-left: 5px;
> > padding-right: 5px;
> > }
> >
> > td.especial
> > {
> > border: 1px solid black;
> > }
> >
> > a:hover, .claseCualquiera
> > {
> > color: rgb(255,0,0);
> > }
> >
> > Como resultado, los estilos se añaden por herencia: td.especial hereda
las
> > propiedades de td. Si pones la misma propiedad con valores diferentes
para
> > un mismo elemento o clase, se reflejará el último indicado, en este
orden:
> > Hoja externa (link) - hoja incrustada en la cabecera - estilo

incrustado

> en
> > el elemento.
> >
> > Para evitar que un estilo incrustado reemplace el definido en la hoja
> > externa o en la cabecera, se le añade la etiqueta !important
> >
> > td {
> > boder: none !important;
> > }
> >
> > "Joseph Fley" escribió en el mensaje
> > news:
> > > Saludos,
> > >
> > > Mi consulta es como poner mas de un estilo a un determinado objeto
para
> > que
> > > ambos estilos se fusionen formando uno con las propiedades de ambos.
> > >
> > > Es posible? como?
> > >
> > > Gracias.
> > >
> > >
> >
> >
>
>

Hola Joseph...

Tu usas clases para definir las reglas de estilo a aplicar, por definición, un objeto pertenece a una clase u otra, no a las dos al mismo tiempo (lo que es diferente a heredar reglas)

Una solución, para lo que propones es utilizar el identificador (id) y la clase (class):

.borde1 {
border-top: 1px solid #CCCCCC;
}

#borde2 {
border-bottom: 1px solid #CCCCCC;
}

<table id="borde2">...
<td>
<td class="borde1">
.
.
.
</table>

Así todas las celdas de la tabla tendran borde inferior, y las celdas con clase "borde1" tendrán además un borde superior.


Saludos!
Miguel


"Joseph Fley" escribió en el mensaje news:%

Muchas gracias Miguel,

Lo del JavaScript está muy interesante pero es más para crear un efecto
dinámico, pero solo para aplicarlos los dos efectos al mismo tiempo a un
elemente, no veo forma. (Cómo no se le ocurrio algo así a la gente del W3C!)

Muchas Gracias de todas formas.



"Miguel Angel Da Vila" escribió en el
mensaje news:
> Nopo,
>
> A menos que algún documento dentro de W3C tenga alguna notación específica
> dentro de su norma, y que el navegador lo entienda. También puedes usar
> Javascript para añadir las propiedades dinámicamente, creando objetos a
los
> que se les pueda encender una o varias propiedades en función de un
contexto
> o una acción de usuario. Recuerdo haber visto un ejercicio en
> www.brainjar.com donde defines algo como:
>
> <div class="bordearriba bordeambos">
>
> Que no es muy adecuado a la hora de entrar con un validador de HTML como
el
> de W3C y dejar que mediante una rutina, Javascript haga funcionar una de
las
> propiedades elegidas.
>
> Lo que yo suelo hacer es tener dos o tres clases por cada elemento
> "mutante", ej.
>
> campo-formulario
> {
> back-ground: transparent;
> }
>
> campo-formulario_on
> {
> back-ground: red;
> }
>
> y luego pego un evento a los campos elementos donde quiero que ocurra el
> cambio. Puede ser un mouserover, un blur que se yo:
>
> // guarda todos los elementos input en un array
> var fieldObj = document.getElementsByTagName('input');
>
> // recorre todos los elementos guardados en el array
> for ( var i = 0 ; i < fieldObj.length ; i++)
> {
> var tmp = fieldObj[i].className;
> // si la clase del elemento contiene el prefijo campo- hace el cambio
> de clase cuando el usuario hace el click
> if (tmp.indexOf('campo-') != -1)
> {
> fieldObj[i].onfocus = function () { if
> (this.className.indexOf('_on') == -1) this.className > > 'campo-formulario_on'; };
> fieldObj[i].onblur = function () { if
> (this.className.indexOf('_on') != -1) this.className > > 'campo-formulario'; };
> }
> }
>
> De esta manera, pegando el código al final de cada hoja, todos los campos
> input con el sufijo input cambiaran de color cuando tienen el foco. sólo
se
> pone en la clase on, aquellos valores que de quieren cambiar.
>
> Saludos
> Miguel Angel Da Vila
>
> "Joseph Fley" escribió en el mensaje
> news:
> > Muchas gracias Miguel,
> >
> > Seré mas claro:
> >
> > Lo de la herencia esta bien, lo que sucede es que muchas veces no es
> > suficiente ya que hay elementes que tendría que andar repitiendo por
todos
> > lados o creando estructuras un poco complicadas...
> >
> > Me refiero por ejemplo que tengo lo siguientes estilos:
> >
> > .borde1 {
> > border-top: 1px solid #CCCCCC;
> > }
> >
> > .borde2 {
> > border-bottom: 1px solid #CCCCCC;
> > }
> >
> >
> > No puedo aplicar estos estilos a una celda y que ambos funcionen??
> >
> >
> >
> >
> >
> >
> > "Miguel Angel Da Vila" escribió en el
> > mensaje news:
> > > No es muy clara tu pregunta, sin embargo recuerda que las CSS
funcionan
> en
> > > cascada. También puedes adicionar un poco de Javascript para
enriquecer
> el
> > > comportamiento de tus páginas cambiando dinámicamente el estilo. Creo
> con
> > > relación a tu pregunta que puedes hacer lo siguiente:
> > >
> > > body, a, a:link, a:visited, p, td,
> > > {
> > > font-family : Verdana, Helvetica;
> > > font-size: 12 px;
> > > }
> > >
> > > td
> > > {
> > > padding-left: 5px;
> > > padding-right: 5px;
> > > }
> > >
> > > td.especial
> > > {
> > > border: 1px solid black;
> > > }
> > >
> > > a:hover, .claseCualquiera
> > > {
> > > color: rgb(255,0,0);
> > > }
> > >
> > > Como resultado, los estilos se añaden por herencia: td.especial hereda
> las
> > > propiedades de td. Si pones la misma propiedad con valores diferentes
> para
> > > un mismo elemento o clase, se reflejará el último indicado, en este
> orden:
> > > Hoja externa (link) - hoja incrustada en la cabecera - estilo
incrustado
> > en
> > > el elemento.
> > >
> > > Para evitar que un estilo incrustado reemplace el definido en la hoja
> > > externa o en la cabecera, se le añade la etiqueta !important
> > >
> > > td {
> > > boder: none !important;
> > > }
> > >
> > > "Joseph Fley" escribió en el mensaje
> > > news:
> > > > Saludos,
> > > >
> > > > Mi consulta es como poner mas de un estilo a un determinado objeto
> para
> > > que
> > > > ambos estilos se fusionen formando uno con las propiedades de ambos.
> > > >
> > > > Es posible? como?
> > > >
> > > > Gracias.
> > > >
> > > >
> > >
> > >
> >
> >
>
>