przykład - Kurs HTML i CSS
HTML5 / Artykuł <article>...tematyka treści elementów podrzędnych (wewnętrznych) jest w istotny sposób powiązana z treścią, którą obejmuje znacznik nadrzędny (zewnętrzny). Na przykład nadrzędnym artykułem może być wpis na blogu, a podrzędnymi - komentarze użytkowników. Artykuł może również zawierać wewnętrzne sekcje i tak jak one często ma na początku określony nagłówek (zobacz również: "Sekcje / Nagłówki sekcji" w rozdziale "Nowe elementy HTML5"). Wstawienie na początku znacznika ARTICLE tytułu nagłówkowego H1-H6 nie...
- HTML5 / Wstawka <aside>
...ASIDE w HTML? Element ASIDE oznacza sekcję na stronie, która jest tylko nieznacznie powiązana tematycznie z resztą treści w dokumencie HTML5. Na przykład mogą to być bannery reklamowe albo wtrącone cytaty, do których nie na żadnego bezpośrednio odniesienia w pozostałej części artykułu ani one nie odnoszą się również wprost do tego artykułu, a zostały w tym miejscu zamieszczone tylko dlatego, że w sposób ogólny pasują do kontekstu treści na stronie. Kiedy ASIDE a kiedy ARTICLE? Oba te...
- HTML5 / Responsywny obrazek <picture, source>
...graficznych - pierwszy w kolejności który spełnia zapytanie mediów podane w atrybucie media="...". zapytanie mediów 1, zapytanie mediów 2... Na przykład: "(max-width: 500px)" [zobacz: Zapytania mediów]. lokalizacja pliku podstawowego Lokalizacja pliku dla przeglądarek, które w ogóle nie obsługują znacznika PICTURE albo jeśli nie spełniają żadnego z zapytań mediów wymienionych w znacznikach SOURCE. Tekst alternatywny Tekst który zostanie wyświetlony, jeżeli przeglądarka nie zdoła...
- HTML5 / Grupowa blokada pól formularza <fieldset disabled>
...<input type="text" name="pole"> <input type="radio" name="opcja" value="1"> <input type="radio" name="opcja" value="2"> </fieldset> Zobacz przykład: disabled Pytania i odpowiedzi <fieldset disabled, legend, input> Co robi FIELDSET? Tag <fieldset> w HTML jest używany do grupowania powiązanych elementów formularza w logiczne sekcje, co pomaga w organizacji i poprawia czytelność formularza. Zwykle jest używany wraz z tagiem <legend>, który dodaje tytuł do grupy pól, np. <fieldset>...
- HTML5 / Podpowiedź pola formularza <input placeholder, textarea placeholder>
...rozpoczęciu wpisywania właściwej wartości. Przykład <input placeholder> <input type="search" name="q" placeholder="Szukaj w serwisie..."> Zobacz przykład: placeholder="..." Pytania i odpowiedzi <input placeholder, textarea placeholder> Co to jest "placeholder" HTML? Placeholder w HTML to atrybut, który wyświetla tymczasowy tekst w polu formularza, zanim użytkownik wprowadzi własne dane. Jest on używany jako wskazówka lub sugestia, co należy wpisać w danym polu, np...
Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset...sposób zoptymalizować ładowanie arkuszy stylów, zobacz rozdział HTML5: Wstępne ładowanie, Priorytet ładowania. Przykład <link "stylesheet"> A oto przykładowy zewnętrzny arkusz stylów: /* SELEKTORY: */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #003868; background-color: #80B8E8; margin: 6mm; } p { text-align: justify; } pre, code { font-size: 8pt; } Ciekawostka Przeglądarki zwykle umożliwiają formatowanie wszystkich oglądanych stron (bez...
- Wstawianie stylów CSS / Kaskadowość stylów
...important Kaskadowość stylów Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony stylów z różnych źródeł. Na przykład: na naszej stronie używamy zewnętrznego arkusza stylów, deklaracji stylów w nagłówku strony, a także stylów typu inline, przy czym dotyczą one formatowania dokładnie tego samego elementu (np. kroju czcionki). Co się stanie w takim przypadku? Czy nie powstaną konflikty? A może komputer się "zawiesi"? Nic z tych rzeczy! A to właśnie ze...
- Selektory elementów CSS / Selektor potomka
...tekstu pochylonego. A to jest pogrubienie (nie powinno być czerwone) bezpośrednio w akapicie, które nie zawiera się w znaczniku pochylenia. Inny przykład: ol ul { color: red } Taka deklaracja spodowuje, że każdy wykaz typu wypunktowanie (ul), który znajdzie się wewnątrz wykazu numerowanego (ol), będzie miał automatycznie nadany kolor czerowny: <ol> <li>Punkt pierwszy <ul> <li>Podpunkt pierwszy</li> <li>Podpunkt drugi</li> </ul> </li> <li>Punkt drugi</li> </ol> Punkt pierwszy...
- Selektory elementów CSS / Reguły stylów
...(znaczników) ma określony zespół cech CSS, które można jej przypisać, a każda cecha ma ściśle wyszczególnioną listę wartości, które może przyjąć. Na przykład: cecha text-align (wyrównanie tekstu) może być przypisana tylko i wyłącznie do elementów blokowych, ponieważ podanie jej dla elementów wyświetlanych w linii nie miałoby sensu. Z drugiej strony cecha ta może przyjmować tylko wartości takie jak: left, right, center, justify. Przypisanie do niej np. wartości koloru nie miałoby sensu. W...
- Selektory pseudoelementów CSS / Przed... :before
Spis treści :before Przed... :before Obrazek przed... :before {content: url} Wartość atrybutu przed... :before {content: attr} Przed... :before selektor:before { content: "treść" } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść przed określonymi elementami, na które wskazuje selektor. UWAGA...