Wyróżnienie podtytułu we wpisie

Czasem zdarza się tak, że nasz wpis musimy podzielić na parę części. Składa się on wtedy z podtytułów, które zazwyczaj wyróżniamy za pomocą wyśrodkowania, pogrubienia i nadania koloru w edytorze tekstu. Jednak można to zrobić w całkiem inny sposób, który nada naszym podtytułom atrakcyjnego wyglądu. Do tego będzie nam potrzebny CSS i kod HTML, który będziemy wstawiać we wpisie, ale na początek zobrazuje wam o co mi chodzi, bo obawiam się, że nie każdy może zrozumieć. Jest jedna wada - trzeba za każdym razem nasz podtytuł wstawiać ręcznie.

1. Pierwsze co musimy zrobić to przejść do posty - edytuj - HTML, a tam zaczyna się już nasza zabawa.

2. Jeśli mamy już napisany tekst. to teraz wybieramy sobie miejsce na nasz podtytuł i wklejamy następujący kod:

<div class="podtytul">
<div style="text-align: center;">
<span class="podtytul2">TUTAJ WPISZ SWÓJ PODTYTUŁ</span>
</div>
</div>
<br/>

podtytul - to jest nasz selektor tzw, ogólny, możecie sobie go zmienić. Jak ktoś woli mieć tu napisane rozowekwiatki to proszę bardzo, macie okazje na tworzenie swojego selektoru :)
podtytuł2 - dotyczy tylko tekstu jaki umieścimy w podtytule

Teraz to będzie się prezentować mniej więcej tak:

Zapisujemy i na tym kończymy zabawę w edytorze tekstu.
Jakby ktoś się zastanawiał co to jest <br/> to jest nic innego jak enter. Tak się ją oznacza w HTML. Natomiast </div> no to są zamknięcia naszej klasy i stylu.

3. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS

4. Tworzymy styl dla naszego podtytułu. Pamiętajmy co wpisaliśmy w <div class="...">  oraz <span class="..."> ponieważ to będą nasze selektory. U mnie to wygląda tak .podtytul oraz .podtytul2 Kiedy już mamy nasz selektor to dopisujemy style, ja wybrałam sobie różowe tło, marginesy wewnętrzne, biały tekst i wielkość czcionki. Cały kod prezentuje się tak:

.podtytul {background: #ffb4a3; padding: 10px; color: #fff; font-size: 14px;}
.podtytul2 {bakground: #ffb4a3;}

Efekt:

Na koniec przygotowałam dla was 4 gotowce oto one:

.tutaj wasz selektor {padding: 10px; text-align:center;border-left:13px solid #da3f7d;border-right:13px solid #da3f7d;background:#eee; text-transform:uppercase;}
.tutaj wasz selektor 2{background: #eee;}

Efekt:

.tutaj wasz selektor  {padding: 10px; text-align:center;border-style: double; border-color: #ffd966 ; background:#fff; text-transform:uppercase;}
.tutaj wasz selektor 2{background: #fff;}

Efekt:

.tutaj wasz selektor {background: #e06666; padding: 10px; border-radius: 15px;}
.tutaj wasz selektor 2 {background: #e06666; color: #fff; font-size: 14px;}

Efekt

.tutaj wasz selektor {background: #ccc; padding: 10px; border-radius: 15%; box-shadow: 0px 2px 7px #444}
.tutaj wasz selektor 2 {background: #ccc; color: #666; font-size: 14px;}

Efekt:

Wszystko co jest w kodach pogrubione jest wartościami zmiennymi.

Na koniec chciałabym podziękować wszystkim co głosowali na mnie w konkursie. Wygrałam, a moja siostra już nie może się doczekać swojego zestawu książek. Oprócz tego moja praca będzie wystawiona na Targach Książki w Warszawie - radość jest wielka! :)