span - Kurs HTML i CSS
Tekst HTML / Blokada indeksowania fragmentów treści <... data-nosnippet><div data-nosnippet>...</div> <span data-nosnippet>...</span> <section data-nosnippet>...</section> Co zrobić, jeśli w opisie naszej strony w wynikach wyszukiwania Google wyświetlają się nieadekwatne treści? Może to mieć miejsce, m.in. kiedy w treści strony są umieszczone jakieś elementy interfejsu użytkownika. Na przykład jeśli w naszym serwisie znajdują się fragmenty przykładowych tekstów (kody źródłowe, polecenia, wzory itp.), możemy chcieć ułatwić użytkownikowi skorzystanie z nich...
- Tabele HTML / Łączenie kolumn tabeli w grupy <colgroup, col>
Spis treści <colgroup, col> Grupa kolumn <colgroup> Kolumna <colgroup, col> Grupa kolumn <colgroup> <table> <colgroup span="x"></colgroup> <tr>...</tr> </table> gdzie "x" oznacza ilość kolumn do połączenia w grupę. Jeśli całkowicie pominiemy atrybut span="...", przyjmie on domyślną wartość "1". Łączenie kolumn w grupy umożliwia później odnoszenie się do takiej grupy jako do całości. Dzięki temu możemy nadać od razu całej grupie np. określone formatowanie za pomocą CSS. W grupę...
Obramowanie CSS / Atrybuty mieszane obramowania {border}...blue Podkreślenie tekstu Ciekawym zastosowaniem dolnego obramowania może być uzyskanie efektu podkreślenia o różnym stylu, kolorze i grubości: <span style="border-bottom: 3px solid red">...</U> <span style="border-bottom: 3px double red">...</span> <span style="border-bottom: 1px dashed red">...</span> Aby skrócić zapis i ułatwić późniejsze modyfikacje, można posłużyć się klasą selektorową, tzn. w arkuszu stylów wpisujemy np.: *.podkreslenie { border-bottom: 2px #f80 solid } a...
- Dobre praktyki / Przykazania webmastera
...ani ustawiania elementów jeden pod drugim Nie stosuj encji do robienia wcięć ani odstępów pomiędzy wyrazami Nie nadużywaj znacznika div ani span Formatuj kod źródłowy Staraj się używać znacznika button zamiast input Dziel obszerne artykuły na osobne podstrony Nie zakładaj, że wszyscy użytkownicy posiadają tak szybkie łącze jak Twoje Sprawdzaj poprawność składni HTML Dobre praktyki CSS Nie używaj atrybutu style="..." Unikaj stosowania deklaracji !important Nie wstawiaj...
Aktualizacja / System newsów...rozmiar czcionki */ text-align: left; /* wyrównanie tekstu: left, right, center, justify */ padding: 5px; padding-bottom: 0; } .news_date span { font-weight: bold; } /* Obrazek: */ .news_img { float: left; /* ustawienie: left, right */ margin-right: 10px; margin-bottom: 5px; border: 0; } /* Więcej... */ .news_more { font-size: 11px; text-align: right; margin-bottom: 5px; margin-right: 15px; } /* Autor */ .news_author { font-size: 11px; /* rozmiar...
- Dobre praktyki / CSS Zorientowane Obiektowo
...(klasy) zależy od typu elementu, do którego się odwołujemy. Na przykład: <div class="Information Warning">...</div> może działać inaczej niż <span class="Information Warning">...</span> chociaż nazwa przypisanej klasy CSS jest w obu przypadkach identyczna: .Information { background-color: white; } div.Warning { color: red; } span.Warning { font-weight: bold; }
- Selektory pseudoklas CSS / Etykieta :target
...samej podstronie pozostaną bez zmian. Przykład :target Po wpisaniu w arkuszu stylów: :target { font-weight: bold } a w dowolnym miejscu strony: <span id="przyklad_etykieta1">etykieta "przyklad_etykieta1"</span>, <span id="przyklad_etykieta2">etykieta "przyklad_etykieta2"</span> <p><a href="#przyklad_etykieta1">odsyłacz "#przyklad_etykieta1"</a>, <a href="#przyklad_etykieta2">odsyłacz "#przyklad_etykieta2"</a></p> po kliknięciu linku do danej etykiety, zostanie ona pogrubiona (w tym czasie...
- Pozycjonowanie CSS / Wyświetlanie {display}
...w linii w ramach brata. </div> <div> Brat ("block") </div> <br> <div style="display: run-in"> Ten element zostanie wyświetlony jako blok. </div> <span>Brat ("inline")</span> <br><br> <div style="display: run-in"> Ten element zostanie wyświetlony jako blok. </div> Tekst Na ekranie powinniśmy zobaczyć taki układ treści: Ten element zostanie wyświetlony w linii w ramach brata. Brat ("block") Ten element zostanie wyświetlony jako blok. Brat ("inline") Ten element zostanie wyświetlony jako...
- Czcionki CSS / Wielkość czcionki {font-size}
...font-size: 16px" ustawia czcionkę na 16 pikseli. Jak powiększyć czcionkę HTML? Aby powiększyć czcionkę w HTML, można użyć znacznika <span> lub <div> z odpowiednią klasą lub stylem CSS. Na przykład: <span style="font-size: larger">Tekst powiększony</span>. Ile mm ma czcionka 12? Wielkość czcionki CSS podawana w punktach (pt) jak również w pikselach (px), nie jest bezpośrednio przeliczalna na fizyczne milimetry widoczne na ekranie komputera lub smartfona. Jednak przybliżona...
- Rozmiary CSS / Szerokość i marginesy automatyczne
Spis treści Wstęp Elementy inline, nie-zastępowane Elementy inline, zastępowane Elementy blokowe, nie-zastępowane Elementy blokowe, zastępowane Elementy z oblewaniem (float) nie-zastępowane Elementy z oblewaniem (float) zastępowane Elementy pozycjonowane absolutnie, nie-zastępowane Elementy pozycjonowane absolutnie, zastępowane Elementy inline-block, nie-zastępowane Elementy inline-block, zastępowane Wstęp Podanie wartości auto dla własności określającej szerokość elementu...