| Kód: |
... ami azt eredményezi, hogy: |
| <![CDATA[ez egy <a href="http://hova.hu">link</a>.]]> |
ez egy link. |
| <![CDATA[ez egy kattintható kép: <a href="http://hova.hu"><img src="kepek/balranyil.png" width="50px"></a>.]]> |
ez egy kattintható kép:  . |
| <![CDATA[<i>dőltbetű</i>, <b>félkövér</b>, <u>aláhúzott</u>, <s>áthúzott</s>, valamint <i>ezek kom<b>bin<u>ác<s>i</s>ó<u>j<b>a<i>.]]> |
dőltbetű, félkövér, aláhúzott, áthúzott, valamint ezek kombinációja. |
| <![CDATA[<mark>kijelölt</mark> szövegdarab, valamint lehet írni <bdo dir="rtl">visszafelé is</bdo>!]]> |
kijelölt szövegdarab, valamint lehet írni visszafelé is! |
| <![CDATA[Létrehozhatsz felsorolásokat is:
<ol> (ami az ordered list, vagyis a számozott lista rövidítése)
<li> első elem </li>
<li> második elem </li>
<li> harmadik elem:) </li>
</ol>]]> |
Létrehozhatsz felsorolásokat is:
- első elem
- második elem
- harmadik elem:)
|
| <![CDATA[... vagy épp számozatlan listákat:
<ul> (ami az unordered list, vagyis a rendezetlen lista rövidítése)
<li> egyik elem </li>
<li> másik elem </li>
<li> harmadik elem:) </li>
</ul>]]> |
... vagy épp számozatlan listákat:
(ami az unordered list, vagyis a rendezetlen lista rövidítése)
- egyik elem
- másik elem
- harmadik elem:)
|
| Kód: |
... ami azt eredményezi, hogy: |
| <![CDATA[ez egy <span class="egyedi">egyedi formázású</span> szövegdarab, amit az egyedi css osztályban határoztunk meg:
.egyedi {
color: #ff0000;
background-color: #e0e0e0;
}
]]>
|
ez egy egyedi formázású szövegdarab, amit az egyedi css osztályban határoztunk meg. |
| <![CDATA[egy másik esetben azt látod, hogy a megjelenés változik, ha a mutatót a <span class="egyedi2">kiemelt rész</span> fölé viszed:
.egyedi2 {
color: #ffff00;
background-color: #e0ffff;
}
.egyedi2:hover {
color: #e0ffff;
background-color: #ffff00;
}]]>
|
egy másik esetben azt látod, hogy a megjelenés változik, ha a mutatót a kiemelt rész fölé viszed. Egyazon stílusosztályt más elemekhez is hozzárendelhetsz! |
| <![CDATA[akár képpel is működik: <br> <img src="kepek/balranyil.png" class="kep">
.kep {
width: 50px;
opacity: 1;
-webkit-transition: width 2s, opacity 2s;
transition: width 2s, opacity 2s;
}
.kep:hover {
width: 80px;
opacity: 0.3;
-webkit-transition: width 2s, opacity 2s;
transition: width 2s, opacity 2s;
}]]>
|
akár képpel is működik:
|
| <![CDATA[létrehozhatsz önálló szöveg-, kép- stb. dobozokat is a <div> tag-en keresztül: <div id="doboz1"> helló </div>
#doboz1 {
width: 50px;
height: 50px;
background-color: #ff0;
border: 1px solid #00f;
color: #0f0;
-webkit-transition: all 2s;
transition: all 2s;
}
#doboz1:hover {
width: 80px;
height: 30px;
background-color: #00f;
border: 1px solid #ff0;
color: #fff;
-webkit-transition: all 1s;
transition: all 1s;
}
]]>
|
létrehozhatsz önálló szöveg-, kép- stb. dobozokat is a |
