2 różne kolory tekstu w jednej linijce. Czy to się da zrobić?

Question

Mam z pozoru banalnie proste pytanie, ale to może wydawać się trudniejsze niż można przypuszczać. Kombinuję coś takiego, ale żółty tekst schodzi na dół:

<div id="content">
	<p style="color:red">czerwony tekst<span></span></p><p style="color:blue">niebieski tekst<span></span></p>
</div>

A chciałbym, aby ten bajer znajdował się w jednej linii:

czerwony tekst: niebieski tekst

Answer 1

Ojej, a co to się tam porobiło. Napis schodzi na dół, bo znacznik p to jest nowy akapit.

<div id="content">
    <p>
        <span style="color:red">czerwony tekst</span><span style="color:blue">niebieski tekst</span>
    </p>
</div>

 

Comments

Obsypaliście mnie wieloma metodami. Dzięki, działa.

A gdy będę chciał użyć kilka linijek, to jaką metodę zastosować? Chodzi mi o to, aby użuwać jak najmniej kodu.

tekst czerwony:  tekst niebieski:

tekst zielony:  tekst biały:

tekst fioletowy:  tekst pomarańczowy:

---

Proponuję taki sposób:

<div id="content">
    <p>
        <span style="color:red">czerwony tekst</span><span style="color:blue">niebieski tekst</span>
    </p>
 <p>
        <span style="color:green">czerwony tekst</span><span style="color: white">niebieski tekst</span>
    </p>
... i tak dalej
</div>

Aż tak bardzo nie musisz się przejmować ilością linijek kodu. Staraj się po prostu, żeby kod wyglądał przejrzyście.

---

Wielkie dzięki.

Temat zamknięty.

Answer 2

<div id="content">

  <p style="color: red"> bla bla bla na czerwono <span style="color: blue;"> bla bla bla na niebiesko </span> </p>

</div>

Comments

Nie lepiej dać:

  <p>

      <span style="color: red"> bla bla bla na czerwono </span>

      <span style="color: blue;"> bla bla bla na niebiesko </span>

</p>

---

Moim skromnym zdaniem uważam że tak oszczędzi się troche kodu...

Jeśli user ma sobie nasz stworzony akapit i głównie chce pisać na kolor czerwny a niekiedy na niebiesko to to rozwiązanie oszczedzi nam redundancji znaczników span ;) Bynajmniej ja tak uważam ;)

---

Okey a co jak masz z 5 linijek textu a tylko kilka wyrazów chcesz mnienić na inny kolor?

Może i twoim sposobem jest oszczędniej ale w tym wypadku dopisanie kilku znaków wygląda bardziej profesjonalnie i daje więcej możliwości :p

---

Czy profesionalnie no to już bym nie dyskutował :D to jest temat rzeka bo dla jednego profesionalnie to tak dla innego tak a innego jeszcze inaczej ;) ale jedynie co racja to to że daje wicej możliwości... ale to już z resztą jest kwestia potrzeb..  ;)

Answer 3

No jasne :)

do tego potrzebny będzie ci znacznik <span>

Daję link żebyś mógł sb wszystko na spokojnie poczytać:

http://www.poradnik-webmastera.com/polecenia/html/znaczniki/znacznik_span.html

Answer 4

Znacznik <p> oznacza nowy paragraf czyli także przejście do nowej linii. Użyj tylko <span> do nadawania kolorów.

<div id="content">
  <p>
    <span style="color:red">czerwony tekst</span><span style="color:blue">niebieski tekst</span>
  </p>
<div>