Cambiar el color de <del> Tachado Línea

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Registrado: Feb 10, 2004
  • Mensajes: 13455
  • Loc: Florida
  • Status: Offline

Nota Septiembre 19th, 2010, 2:08 pm

¿Hay algo en el acrónimo [= StyleSheets en cascada: 71rx7q5t CSS] [/acronym] que puedo usar para cambiar el color de los elementos de línea <del> producir sin necesidad de utilizar un <span> interior del elemento <del>?

CSS Código: [ Select ]
del {color:red;}
del > span {color:black;}
  1. del {color:red;}
  2. del > span {color:black;}


HTML Código: [ Select ]
<del><span>Deleted Text</span></del>
Strong with this one, the sudo is.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Septiembre 19th, 2010, 2:08 pm

  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8211
  • Loc: USA
  • Status: Offline

Nota Septiembre 19th, 2010, 2:58 pm

¿Y el text-decoration: elemento linethrough?
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Registrado: Feb 10, 2004
  • Mensajes: 13455
  • Loc: Florida
  • Status: Offline

Nota Septiembre 19th, 2010, 3:29 pm

Técnicamente, la propiedad text-decoration sólo decide si existe una línea o no. El elemento <del> normalmente implica "text-decoration: line-through;".

El "color" del texto elemento de decoración se aplica a los que parece que controla el color de la línea. Concepto con el fin de que el texto que es de color negro con una línea roja a través de él me tiene que ajustar el texto que se encuentra dentro del elemento <del> con otro elemento que pueda reemplazar el color de ese elemento con rojo <del>. Esto hace que el <del> para utilizar el color rojo para la línea-a través de aplicado, y el elemento interno para utilizar el color aplicado para representar el texto.

Im preguntándose si theres una especie de "text-decoration-color" propiedad que no saben de lo que establezca el color de las decoraciones de texto independiente del color del texto. :)
Strong with this one, the sudo is.
  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8211
  • Loc: USA
  • Status: Offline

Nota Septiembre 20th, 2010, 11:47 am

No creo que hay algo que usted puede hacer para separar la línea del texto...o resaltar la línea roja y el texto negro o viceversa sin necesidad de utilizar la etiqueta span. Acabo de pasar 30 minutos intentando y nada.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • tastysite
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Abr 09, 2008
  • Mensajes: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Nota Septiembre 21st, 2010, 5:31 am

No puedes añadir un Ellement <span> y dar que abarcan un fondo de color rojo de ancho 1px punto y ponerlo en repeat-x como tal
Código: [ Select ]
/*CSS*/
.delcolorline {
background:url(your/red/dotimg.jpg) repeat-x;
color:#000;
}
  1. /*CSS*/
  2. .delcolorline {
  3. background:url(your/red/dotimg.jpg) repeat-x;
  4. color:#000;
  5. }

Código: [ Select ]
<!--html-->
I <span class="delcolorline">don't</span> like computers
  1. <!--html-->
  2. I <span class="delcolorline">don't</span> like computers
^__^
  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8211
  • Loc: USA
  • Status: Offline

Nota Septiembre 21st, 2010, 12:05 pm

El propósito de <del> es para el navegador para darse cuenta de que el contenido está siendo borrado o tachado a cabo. Funciona bien para personas con discapacidad que utilizan la lectura automática de las cosas. Al menos eso es mi opinión sobre él.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • righteous_trespasser
  • Scuffle
  • Genius
  • Avatar de Usuario
  • Registrado: Mar 12, 2007
  • Mensajes: 6228
  • Loc: South-Africa
  • Status: Offline

Nota Septiembre 21st, 2010, 11:40 pm

O tal vez usar jQuery para añadir el lapso para usted?

JAVASCRIPT Código: [ Select ]
$(document).ready(function(){
  $('del').each(function(){
    $(this).html('<span>' + $(this).html(). '</span>');
  });
});
  1. $(document).ready(function(){
  2.   $('del').each(function(){
  3.     $(this).html('<span>' + $(this).html(). '</span>');
  4.   });
  5. });
Let's leave all our *plum* where it is and go live in the jungle ...
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Registrado: Feb 10, 2004
  • Mensajes: 13455
  • Loc: Florida
  • Status: Offline

Nota Septiembre 22nd, 2010, 12:38 am

jQuery podría ser una buena idea cuando jQuery ya está cargado. Muchas veces lo hago.

Por el bien de hacerlo, heres una opción con ayuda de Javascript jQuery regular cuando no está disponible ya. :)

JAVASCRIPT Código: [ Select ]
var dels = document.getElementsByTagName('del');
for(var i = 0; i < dels.length; i++)
{
    dels[i].innerHTML = '<span>' + dels[i].innerHTML + '</span>';
}
  1. var dels = document.getElementsByTagName('del');
  2. for(var i = 0; i < dels.length; i++)
  3. {
  4.     dels[i].innerHTML = '<span>' + dels[i].innerHTML + '</span>';
  5. }
Strong with this one, the sudo is.
  • righteous_trespasser
  • Scuffle
  • Genius
  • Avatar de Usuario
  • Registrado: Mar 12, 2007
  • Mensajes: 6228
  • Loc: South-Africa
  • Status: Offline

Nota Septiembre 22nd, 2010, 12:45 am

Estoy de acuerdo en que si eso es lo único que vamos a utilizar para, jQuery es un exceso, pero yo lo uso en todos los sitios que construyo desde hace un par de cosas...Rotación de las imágenes de cabecera, calendarios emergente en los campos de fecha, colorbox, la carga de imágenes, etc...
Let's leave all our *plum* where it is and go live in the jungle ...

Publicar Información

  • Total de mensajes en este tema: 9 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 103 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC