Changer la couleur de <del> Barré Line

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Septembre 19th, 2010, 2:08 pm

Y at-il quelque chose dans l'acronyme [= StyleSheets en cascade: 71rx7q5t] CSS [/acronym] que je peux utiliser pour changer la couleur des éléments <del> ligne produire sans avoir à utiliser une <span> l'intérieur de l'élément <del>?

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


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

Message Septembre 19th, 2010, 2:08 pm

  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8211
  • Loc: USA
  • Status: Offline

Message Septembre 19th, 2010, 2:58 pm

Comment sur le text-decoration: élément linethrough?
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Septembre 19th, 2010, 3:29 pm

Techniquement, la propriété text-decoration décide simplement s'il ya une ligne ou non. L'élément <del> implique généralement «text-decoration: line-through;".

La "couleur" du texte de l'élément-decoration s'applique semble être ce qui contrôle la couleur de la ligne. Sens afin d'avoir le texte qui est noir avec une ligne rouge qui la traverse, j'ai d'envelopper ce texte qui est à l'intérieur de l'élément <del> avec un autre élément que je peux remplacer la couleur de ce rouge <del> élément avec. Cela provoque la <del> d'utiliser la couleur rouge pour le line-through qui lui est appliquée, et l'élément intérieur à utiliser la couleur qui lui est appliqué à rendre le texte.

Im se demandant si theres une sorte de "text-decoration-couleur" la propriété, je ne sais pas ce qui permet de fixer la couleur des décorations de texte indépendante de la couleur du texte. :)
Strong with this one, the sudo is.
  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8211
  • Loc: USA
  • Status: Offline

Message Septembre 20th, 2010, 11:47 am

Je ne crois pas qu'il existe quelque chose que vous pouvez faire pour séparer la ligne du texte...ou mettre en évidence la ligne rouge et le texte noir ou vice versa, sans l'aide de la balise span. Je viens de passer 30 minutes et rien essayer.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • tastysite
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Avr 09, 2008
  • Messages: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Message Septembre 21st, 2010, 5:31 am

Pouvez-vous pas simplement ajouter un Ellement <span> et donner qui couvrent un fond d'un rouge 1px large dot et placez-le repeat-x, comme si
Code: [ 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. }

Code: [ 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 l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8211
  • Loc: USA
  • Status: Offline

Message Septembre 21st, 2010, 12:05 pm

Le but de <del> est pour le navigateur pour se rendre compte que le contenu est supprimé, ou barré. Il fonctionne bien pour les personnes déficientes qui utilisent l'auto-lecture des choses. Au moins c'est mon avis sur la question.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • righteous_trespasser
  • Scuffle
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Mar 12, 2007
  • Messages: 6228
  • Loc: South-Africa
  • Status: Offline

Message Septembre 21st, 2010, 11:40 pm

Ou peut-être utiliser jQuery pour ajouter la durée pour vous?

JAVASCRIPT Code: [ 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
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Septembre 22nd, 2010, 12:38 am

jQuery pourrait être une bonne idée si jQuery est déjà chargé. Un grand nombre de fois que je fais.

Pour des raisons de le faire, heres une option à l'aide régulière lors Javascript jQuery n'est pas déjà disponible. :)

JAVASCRIPT Code: [ 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 l’utilisateur
  • Inscription: Mar 12, 2007
  • Messages: 6228
  • Loc: South-Africa
  • Status: Offline

Message Septembre 22nd, 2010, 12:45 am

Je suis d'accord que si c'est la seule chose que vous allez l'utiliser pour, jQuery est excessif, mais je l'utilise dans chaque site-je construire pour pas mal de choses...Rotation des images en-tête, calendriers popup sur les champs de date, colorbox, le téléchargement des images, etc...
Let's leave all our *plum* where it is and go live in the jungle ...

Afficher de l'information

  • Total des messages de ce sujet: 9 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 106 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC