FANDOM


No cześć! Postanowiłam zacząć tutaj nową serię, a mianowicie czego NIE robić podczas pisania kodów?. W większości będzie to oparte na moich własnych doświadczeniach. Jeśli będziecie mieli jakieś sugestie, co powinnam tu poruszyć, koniecznie napiszcie!

Pierwszym tematem, którego się podejmę, jest umieszczanie za dużej ilości różnych tagów w jednym kodzie. Potem zamierzam napisać m.in. o tabelach. Mam nadzieję, że się Wam spodoba. A więc zaczynamy!

Spójrzcie na ten kod:

<div style="text-align:center"><span style="font-family:lobster"><span style="font-size:30px"><span style="color:red"><span style="text-decoration:underline">Lorem Ipsum</span></span></span></span></div>

Jak myślicie, co to jest? Jakiś skomplikowany układ różnych tekstów?

Nie. To jest nagłówek. Zresztą spójrzcie niżej.

Lorem Ipsum

Czy w takim czymś da się łatwo rozeznać? No niezbyt. A wyobraźcie sobie, co by było, gdyby w taki sposób napisać kod na ramkę prezentowaną w poprzednim numerze? Wtedy by nawet kod nie wyszedł, bo po drodze zostałoby popełnione parę elementarnych błędów, które w sumie chętnie zaprezentuję.

<div style="border:5px solid green;"><div style="background-color:#8AEA96;"><div style="padding:10px;"><div style="margin:10px;"><div style="border-radius:10px;"><div style="box-shadow:0px 0px 20px #2A7633,0px 0px 20px #2A7633 inset">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div></div></div></div></div></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Gdyby zachować tę kolejność, kod w ogóle nie przypomina ramki zdatnej do użytku. Można spróbować zmienić kolejność, jednak nie poprawi to wszystkiego:

<div style="margin:10px;"><div style="border:5px solid green;"><div style="background-color:#8AEA96;"><div style="border-radius:10px;"><div style="box-shadow:0px 0px 20px #2A7633,0px 0px 20px #2A7633 inset"><div style="padding:10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div></div></div></div></div></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

No okej, ale gdzie się podziało zaokrąglenie ramki?

Już tłumaczę, co jest nie tak w tych wszystkich kodach (choć na upartego tamten nagłówek da się jeszcze przeżyć). Otóż, jest to zwłaszcza widoczne w pierwszej ramce. Wtedy po kolei tworzymy kolejne bloki. Pierwszy blok posiada ramkę. Drugi dostaje kolor tła, lecz ten kolor tła nie należy do ciemnozielonej ramki. Kolejny boks dostaje margines wewnętrzny, a jeszcze kolejny margines zewnętrzny, więc one mocno się od siebie odpychają. Jeszcze kolejny element otrzymuje zaokrąglenie. I ono tam jest, jednak ten element nie ma żadnej innej właściwości, więc go właściwie nie widać. Ostatni element otrzymuje cień, który jest widoczny tuż przed tekstem.

Po zmianie kolejności pierwszy element otrzymuje margines zewnętrzny, ten najbardziej w środku dostaje margines wewnętrzny, a element z cieniem jest umiejscowiony tak, by był przed marginesem wewnętrznym. Jednak to i tak są osobne elementy, każdy o jednej właściwości.

Żeby łatwiej zrozumieć, wyobraźcie sobie pudełka. Musicie schować do pudełka gazetę. Co robicie: bierzecie mnóstwo pudełek, wkładacie je wszystkie do siebie, a do najmniejszego gazetę? Raczej nie, pewnie weźmiecie po prostu jedno pudełko, do którego tę gazetę włożycie.

Dlatego właśnie wszystkie właściwości powinniśmy umieścić w jednym elemencie (pudełku), czyli:

<div style="border:5px solid green; background-color:#8AEA96; padding:10px; margin:10px; border-radius:10px; box-shadow:0px 0px 20px #2A7633,0px 0px 20px #2A7633 inset">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Wtedy właśnie dajemy wszystkie ozdoby do tego jednego elementu, czyli ozdabiamy nasze pojedyncze pudełko. To na pewno znacznie lepsze niż stylowanie każdego elementu z osobna, co nie?

Podobnie dzieje się w przypadku nagłówka, który znajduje się w coraz to kolejnych elementach, chociaż w tagach <span> aż tak tego nie widać. Jednak to użycie też nie jest poprawne. Mamy taki kod:

<div style="text-align:center"><span style="font-family:lobster"><span style="font-size:30px"><span style="color:red"><span style="text-decoration:underline">Lorem Ipsum</span></span></span></span></div>

Element div musi być, ponieważ dzięki niemu można wyśrodkować tekst. Jeśli div zostałby zamieniony na span, wtedy by to nie zadziałało. Ale reszta, czyli czcionka, rozmiar itp. działają także wewnątrz diva, więc czemu by ich nie włożyć razem?

Spójrzcie na ten kod:

<div style="text-align:center; font-family:lobster; font-size:30px; color:red; text-decoration:underline">Lorem Ipsum</div>

Króciutki, co? Zobaczmy, jaki efekt da:

Lorem Ipsum

Dokładnie taki sam, jak w przypadku pierwszego nagłówka! A więc na co był tamten bardzo skomplikowany kod z wcześniej? Praktycznie po nic, tylko zajmował miejsce.

To by było na tyle, jeśli chodzi o pierwszą z rzeczy, których nie należy robić podczas pisania kodów. Jeśli macie pytania, czegoś nie zrozumieliście lub macie jakąś uwagę, piszcie w komentarzach!

Treści społeczności są dostępne na podstawie licencji CC-BY-SA , o ile nie zaznaczono inaczej.