Pagina's: [1] |   Omlaag

Auteur Topic: css pseudo-element EM  (gelezen 1355 keer)

0 leden en 1 gast bekijken dit topic.

Tony

  • Nieuw lid
  • *
  • Offline
  • Berichten: 47
css pseudo-element EM
« Gepost op: 25-01-2010, 16:00 »

Hallo,

De volgende 2 codes werken op geen enkele mogelijkheid; blz 84

h2 em: first-child {
color: #FFFFFF;
}

em: first-child {
font-weight:bold;
}

Bij h2 wordt de kleur van de 1e em niet wit en bij de eerste alinea de 1e em niet vetgedrukt.

Wat is er fout?
Zie bijlage

BVD

Gelogd

Frances

  • Beheerder
  • Junior lid
  • *****
  • Offline
  • Berichten: 61
Re:css pseudo-element EM
« Reactie #1 Gepost op: 25-01-2010, 20:01 »

Hallo Tony,

De oorzaak zit in de schrijfwijze, er staat een spatie achter : zodra je die weghaalt werkt het wel. Overigens niet zichtbaar in Dreamweaver, maar wel in de browser (behalve Internet Explorer 6).

FOUT is:  h2 em: first-child
GOED is:  h2 em:first-child

FOUT IS: p.testvet : first-letter
GOED IS: p.testvet:first-letter

Je hebt nog een paar andere vragen gesteld:

Voor de volgorde van de CSS-regels is het voor je eigen overzicht wel aan te raden om een vaste volgorde te hanteren zodat je dingen makkelijk kunt terugvinden. Zo hanteer ik altijd een vaste volgorde voor tekstelementen: h1, h2, h3, p, a, ul, ol, li dl dt, dd. Het overerven en cascaden maakt van CSS een krachtig instrument. Maar het kán het ook noodzakelijk maken bijvoorbeeld om een bepaalde CSS-regel meer onderaan in de stylesheet te plaatsen omdat, als deze meer bovenin staat, hij zou worden overruled door een CSS-regel die erna komt. Mocht je merken dat een bepaalde declaratie niet werkt, is dat zeker iets om dan te onderzoeken: komt er verderop in de stylesheet iets voor dat die eerdere declaratie overrulet?

Als je een specifiek woord meerdere malen laat terug komen op een pagina, en je wilt dit een andere kleur geven, kan dit op deze manier:
<span class="voorbeeld">woord</span>

Op pag. 121 staat meer over het element span.
De class geef je vorm in CSS, en inderdaad zal je iedere keer als dit woord voorkomt het op de manier hierboven moeten aangeven. Overigens kan dit eenvoudig in Dreamweaver:
  • Maak in CSS de class aan
  • Selecteer het woord in je tekst in de pagina
  • In venster Eigenschappen (Properties) kies je de class

Ik hoop dat dit helpt, succes,
Frances
« Laatste verandering: 25-01-2010, 20:06 door Frances »
Gelogd

Tony

  • Nieuw lid
  • *
  • Offline
  • Berichten: 47
Re:css pseudo-element EM
« Reactie #2 Gepost op: 25-01-2010, 21:24 »

Ja verdraaid, bedankt!

Verder nog de volgende vraag: Kan ik meerdere attributen opgeven in 1 regel van een element of kan ik het beter per regel doen? Nu ziet het er zo uit, maar misschien kan dat gecombineerd worden?

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  line-height: 100%;
  letter-spacing: .1em;
  }

h2 em:first-child {
color: #FFFFFF;
}

h2 em:first-child {
font-weight:bold;
}
Gelogd

Frances

  • Beheerder
  • Junior lid
  • *****
  • Offline
  • Berichten: 61
Re:css pseudo-element EM
« Reactie #3 Gepost op: 25-01-2010, 23:11 »

Je bedoelt zo, denk ik:

h2 em:first-child {
     color: #FFFFFF;
     font-weight:bold;
}

Uiteraard kan dat, de schrijfwijze van CSS-regels blijft gelijk, h2 em:first-child is de kiezer, net zoals h2 de kiezer is van de andere CSS-regel die je opgeeft.
Gelogd

Tony

  • Nieuw lid
  • *
  • Offline
  • Berichten: 47
Re:css pseudo-element EM
« Reactie #4 Gepost op: 25-01-2010, 23:31 »

Bedankt, getest en het werkt.

Ik neem aan dat je dit niet kan combineren? Dus dat em: in de eerste h2 komt.

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  line-height: 100%;
  letter-spacing: .1em;
  }

h2 em:first-child {
color: #FFFFFF;
}
Gelogd

Tony

  • Nieuw lid
  • *
  • Offline
  • Berichten: 47
Re:css pseudo-element EM
« Reactie #5 Gepost op: 27-01-2010, 13:51 »

topic sluit
Gelogd
Pagina's: [1] |   Omhoog