style-Element in <a> Bereich ?

[Thomas]

Hi,

für meine Links habe ich die Styles global in eine css-Datei geschrieben. Ich möchte aber an bestimmter Stelle auf einer Webseite den Links ein anderes Aussehen geben.

Habe das so gelöst, dass im eingeleiteten a-Tag das Attribut style mit css-Angaben vorkommt. So soll primär auf die Styles im HTML Code zurückgegriffen werden und sekundär auf die CSS-Datei. Z. B. so:

<a href="testseite.html" style="color:red; border-bottom:none;">Testlink</a>

Nun habe ich die Seite validiert und es gab keine Beanstandungen. Was ich aber mich frage ist, dass in der Selfhtml-Dokumentation kein style in einem a-Bereich aufgeführt ist.

Wonach soll ich nun gehen? Wer liegt richtig, Selfhtml oder W3C?

Gruß
Thomas

[Cheatah]

Hi,

für meine Links habe ich die Styles global in eine css-Datei geschrieben. Ich möchte aber an bestimmter Stelle auf einer Webseite den Links ein anderes Aussehen geben.

diese bestimmte Stelle lässt sich garantiert durch die Dokumentstruktur eindeutig identifizieren, denn andernfalls wäre Dein Wunsch rein willkürlilch. Ergo lassen sich diese speziellen Links per CSS selektieren. Es existiert kein Grund für Inline-Styles.

Nun habe ich die Seite validiert und es gab keine Beanstandungen. Was ich aber mich frage ist, dass in der Selfhtml-Dokumentation kein style in einem a-Bereich aufgeführt ist.

style ist korrekt als Universalattribut eingeordnet. Übrigens ist das style-Attribut nicht das <style>-Element.

Wer liegt richtig, Selfhtml oder W3C?

Diese Frage ist in 100% aller theoretisch denkbaren Fälle klar beantwortbar: Das W3C _definiert_ HTML und CSS. Jeder, der etwas vom W3C Abweichendes sagt, _muss_ Unrecht haben.

Cheatah

[Ashura]

Hallo Cheatah.

Wer liegt richtig, Selfhtml oder W3C?

Diese Frage ist in 100% aller theoretisch denkbaren Fälle klar beantwortbar: Das W3C _definiert_ HTML und CSS. Jeder, der etwas vom W3C Abweichendes sagt, _muss_ Unrecht haben.

Oder praxisrevelante Lösungen entwickeln.

Einen schönen Samstag noch.

Gruß, Ashura

[Cyx23]

Hallo Cheatah,

Diese Frage ist in 100% aller theoretisch denkbaren Fälle klar beantwortbar: Das W3C _definiert_ HTML und CSS. Jeder, der etwas vom W3C Abweichendes sagt, _muss_ Unrecht haben.

Unter der Vorausgesetzung dass die Aussagen des W3C eindeutig, umfassend und nicht
widersprüchlich sind, läßt sich deine Antwort vmtl. auch praktisch anwenden.

Grüsse

Cyx23

[Hopsel]

Hi Thomas!

für meine Links habe ich die Styles global in eine css-Datei geschrieben. Ich möchte aber an bestimmter Stelle auf einer Webseite den Links ein anderes Aussehen geben.

Zum Glück gibt es Klassen und IDs.

Habe das so gelöst, dass im eingeleiteten a-Tag das Attribut style mit css-Angaben vorkommt. So soll primär auf die Styles im HTML Code zurückgegriffen werden und sekundär auf die CSS-Datei. Z. B. so:

Würde mir überhaupt nicht gefallen!

Was ich aber mich frage ist, dass in der Selfhtml-Dokumentation kein style in einem a-Bereich aufgeführt ist.

Kuckst du hier!

Wonach soll ich nun gehen? Wer liegt richtig, Selfhtml oder W3C?

Die Frage dir keiner beantworten. Jeder muss es selbst erleben!

MfG H☼psel

[D.R.]

Hi,

Nun habe ich die Seite validiert und es gab keine Beanstandungen. Was ich aber mich frage ist, dass in der Selfhtml-Dokumentation kein style in einem a-Bereich aufgeführt ist.

Meinst du in den Beispielen? ->Zufall!

Wonach soll ich nun gehen? Wer liegt richtig, Selfhtml oder W3C?

Genau wie z.B. id, class, on**** usw. kannst du auch style in jedes Tag einbauen.

Einen schönen Samstag noch!

[Thomas]

Hi,

danke für den Tipp mit den ID´s und class. Damit habe ich den CSS Text etwas geändert. Aber habe nun das Problem, wie ich in ein ID mehrere Eigenschaften definiere (Link, besuchter Link, Hover, ...). Alles schön mit Semikolon und Klammersetzung, aber seht selbst.

Hier mein "Versuch":

Im Quelltext: <a id="link" href="testlink.html">Testlink</a>

#link {

link { font-weight:normal; color:red; border-bottom:dashed 1px blue; text-decoration:none;};
visited { font-weight:normal; color:red; border-bottom:dashed 1px blue; text-decoration:none;};
focus { font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;};
hover { font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;};
active { font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}
}

Was habe ich da falsch gemacht?

Gruß
Thomas

[Thomas]

Hi,

hab es hinbekommen:

#link {

link: font-weight:normal; color:red; border-bottom:dashed 1px blue; text-decoration:none;
visited: font-weight:normal; color:red; border-bottom:dashed 1px blue; text-decoration:none;
focus: font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;
hover: font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;
active: font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none
}

Zu viel klammern ist doch nicht so gut ;-)

Gruß
Thomas

[Ashura]

Hallo Thomas.

hab es hinbekommen:

Ich weiß nicht, was es sein soll, aber CSS ist es jedenfalls nicht.

#link {

link: font-weight:normal; color:red; border-bottom:dashed 1px blue; text-decoration:none;
visited: font-weight:normal; color:red; border-bottom:dashed 1px blue; text-decoration:none;
focus: font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;
hover: font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;
active: font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none
}

Eine solche Schachtelung ist nirgends in der CSS-Syntax definiert.
_Bitte_ _niemals_ _mit_ _dem_ _IE_ _testen_!

Zu viel klammern ist doch nicht so gut ;-)

Du musst sogar noch viel mehr setzen, für jeden Selektor ein Klammernpaar.

Einen schönen Samstag noch.

Gruß, Ashura

[Thomas]

Hi Ashura,

ist das richtig:

global:

a.testlink{
          font-weight:normal; color:#cacaca; border-bottom:dashed 1px blue; text-decoration:none;}
        a.testlink:visited{
          font-weight:normal; color:#cacaca; border-bottom:dashed 1px blue; text-decoration:none;}
        a.testlink:focus{
          font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}
        a.testlink:hover{
          font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}
        a.testlink:active{
          font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}

individuell:

a#link{
          font-weight:normal; color:red; border-bottom:dashed 1px blue; text-decoration:none;}
        a#link:visited{
          font-weight:normal; color:red; border-bottom:dashed 1px blue; text-decoration:none;}
        a#link:focus{
          font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}
        a#link:hover{
          font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}
        a#link:active{
          font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}

[Hopsel]

Hi Thomas!

ist das richtig:

Ja. Ich weiß jetzt aber nicht, ob zwischen Selektor und Klammer ein Leerzeichen sein muss. Ich denke aber, dass es nicht Pflicht ist.

Wenn du jetzt noch den Code lesbar formatierst, bin ich stolz auf dich. :)

MfG H☼psel

[Thomas]

Hi H☼psel,

das freut mich, dass im CSS Code wieder Ordnung mit richtigem Quelltext geschaffen wurde.

Wenn du jetzt noch den Code lesbar formatierst, bin ich stolz auf dich. :)

OK! Bitteschön :-)

a.testlink         {font-weight:normal; color:#cacaca; border-bottom:dashed 1px blue; text-decoration:none;}
        a.testlink:visited {font-weight:normal; color:#cacaca; border-bottom:dashed 1px blue; text-decoration:none;}
        a.testlink:focus   {font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}
        a.testlink:hover   {font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}
        a.testlink:active  {font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}

a#link             {font-weight:normal; color:red; border-bottom:dashed 1px blue; text-decoration:none;}
        a#link:visited     {font-weight:normal; color:red; border-bottom:dashed 1px blue; text-decoration:none;}
        a#link:focus       {font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}
        a#link:hover       {font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}
        a#link:active      {font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}

Gruß
Thomas

[Hopsel]

Hi Thomas!

Ich dachte eher an:

a.testlink { /* Allgemeine Linkformatierungen .TESTLINK */  
   font-weight:normal;  
   color:#cacaca;  
   border-bottom:dashed 1px blue;  
   text-decoration:none;  
}

MfG H☼psel

[Ashura]

Hallo Thomas.

ist das richtig:

Ja, schon _weitaus_ besser.

global:

~~~css

a.testlink{

font-weight:normal; color:#cacaca; border-bottom:dashed 1px blue; text-decoration:none;}
        a.testlink:visited{
          font-weight:normal; color:#cacaca; border-bottom:dashed 1px blue; text-decoration:none;}
        a.testlink:focus{
          font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}
        a.testlink:hover{
          font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}
        a.testlink:active{
          font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}

  
Dies kannst du noch massiv verkürzen:  
  
~~~css
a.testlink {  
  border-bottom:1px dashed #00f;  
  color:#cacaca;  
  font-weight:normal;  
  text-decoration:none;  
}  
a.testlink:focus,  
a.testlink:hover,  
a.testlink:active {  
  color:#74c44d;  
}

individuell:

~~~css

a#link{

font-weight:normal; color:red; border-bottom:dashed 1px blue; text-decoration:none;}
        a#link:visited{
          font-weight:normal; color:red; border-bottom:dashed 1px blue; text-decoration:none;}
        a#link:focus{
          font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}
        a#link:hover{
          font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}
        a#link:active{
          font-weight:normal; color:#74c44d; border-bottom:dashed 1px blue; text-decoration:none;}

  
Hier ebenso:  
  
~~~css
a#link {  
  border-bottom:1px dashed #00f;  
  color:#f00;  
  font-weight:normal;  
  text-decoration:none;  
}  
a#link:focus,  
a#link:hover,  
a#link:active {  
  color:#74c44d;  
}

Einen schönen Samstag noch.

Gruß, Ashura

[Thomas]

Dies kannst du noch massiv verkürzen:

a.testlink {

border-bottom:1px dashed #00f;
  color:#cacaca;
  font-weight:normal;
  text-decoration:none;
}
a.testlink:focus,
a.testlink:hover,
a.testlink:active {
  color:#74c44d;
}

  
Hi Ashura,  
  
ah, verstehe. Es können, bzw. müssen also in der ersten Formatierung für das class, id, alle wichtigen Angaben hineingeschrieben werden, die dann für alle Elemente des Attributes bestehen. Und nur bei Formatabweichungen, wie hier die Farbe von focus, hover, active wird das bestehende Farbelement durch das andere ersetzt (z. B. bei testlink #cacaca durch #74c44d), wobei dann alle Elemente, die mit Komma getrennt sind, sich auf die Klammerwerte beziehen.  
  
Gut zu wissen. Danke!  
  
Gruß  
Thomas

[Ashura]

Hallo Thomas.

ah, verstehe. [ Beweis ]

Was mich wiederum erfreut.

Einen schönen Samstag noch.

Gruß, Ashura