content - Kurs HTML i CSS
Układ elastyczny CSS / Wyrównanie wierszy {align-content}(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) selektor { align-content: wyrównanie } Selektorem może być kontener elastyczny, którego elementy zostały ułożone w wielu wierszach. Wyrównanie: flex-start - wyrównanie wierszy do początkowej krawędzi kontenera flex-end - do końcowej krawędzi kontenera center - wyśrodkowanie wierszy (dla tekstu w języku polskim - w pionie) space-between - równe odstępy między wierszami space-around - równa przestrzeń wokół wierszy...
- Układ elastyczny CSS / Justowanie zawartości {justify-content}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) selektor { justify-content: justowanie } Selektorem może być kontener elastyczny. Justowanie: flex-start - do początkowej krawędzi kontenera (domyślnie) flex-end - do końcowej krawędzi kontenera center - wyśrodkowanie space-between - równe odstępy między elementami space-around - równa przestrzeń wokół elementów Polecenie steruje justowaniem elementów kontenera elastycznego, gdy jest on zbyt duży, aby został...
- Komendy CSS 2 / content
WARTOŚĆ [ <łańcuch znakowy>| <adres> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit OPIS Zawartość (Przed..., Po..., Cudzysłowy, Automatyczna numeracja) INICJALIZACJA pusty łańcuch znakowy ZASTOSOWANIE pseudoelementy :before i :after DZIEDZICZENIE nie PROCENTY nie MEDIA all
- Wykazy CSS / Automatyczna numeracja wykazu {counter-reset, counter-increment}
...aktualną wartość licznika na początku treści, a następnie zwiększamy tą wartość o jeden - dla następnego punktu lub podpunktu: ol li:before { content: counters(nazwa_licznika, ".") ". "; counter-increment: nazwa_licznika } Oto efekt: Punkt pierwszy (1.) Podpunkt pierwszy (1.1.) Podpunkt drugiego rzędu (1.1.1.) Podpunkt drugiego rzędu (1.1.2.) Podpunkt drugi (1.2.) Podpunkt drugiego rzędu (1.2.1.) Podpunkt drugiego rzędu (1.2.2.) Punkt drugi (2.) Podpunkt pierwszy...
- Selektory pseudoelementów CSS / Cudzysłowy {quotes}
Spis treści {quotes} Cudzysłowy {quotes} Znaki cudzysłowów {content: open-quote close-quote} Wyłączenie znaków cudzysłowu {content: no-open-quote no-close-quote} Cudzysłowy {quotes} (interpretuje Internet Explorer 8.0, Firefox, Opera) W języku HTML istnieją specjalne znaczniki, przeznaczone do oznaczania cytatów: <q>...</q> (krótki cytat), <blockquote>...</blockquote> (blok cytowany). Jak mówi specyfikacja HTML 4.01, cytatów wstawianych w elementach q nie należy obejmować cudzysłowami...
- 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...
- Selektory pseudoelementów CSS / Po... :after
Spis treści :after Po... :after Obrazek po... :after {content: url} Wartość atrybutu po... :after {content: attr} Po... :after selektor:after { 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ść po określonych elementach, na które wskazuje selektor. UWAGA! Polecenie nie interpretuje...
HTML5 / Kategorie elementów HTML5...Niektóre elementy mają unikalne wymagania i nie mieszczą się w żadnej szczególnej kategorii. Kategoria Opis Elementy metadane (ang. metadata content) Definiuje sposób prezentacji lub zachowania reszty zawartości, albo określają relacje dokumentu z innymi dokumentami, bądź przekazują inne informacje "poza głównym torem" (np. techniczne lub strukturalne dane o dokumencie). BASE, LINK, META, NOSCRIPT, SCRIPT, STYLE, TEMPLATE, TITLE przepływowe (ang. flow content) Większość elementów...
Aktualizacja / System newsów...groove, ridge, inset, outset */ border-color: gray; /* kolor obramowania */ border-top-width: 0; margin: 0; margin-bottom: 20px; } .news_content { padding: 5px; /* margines wewnatrz */ text-align: justify; /* wyrównanie tekstu: left, right, center, justify */ } /* Data */ .news_date { font-size: 11px; /* rozmiar czcionki */ text-align: left; /* wyrównanie tekstu: left, right, center, justify */ padding: 5px; padding-bottom: 0; } .news_date span { font-weight...
- Nagłówek i treść HTML / Roboty <meta "robots, googlebot">
...Roboty <meta "robots"> Niestandardowe dyrektywy robotów Googlebot <meta "googlebot"> Roboty <meta "robots"> <head> <meta name="robots" content="dyrektywy"> </head> gdzie jako "dyrektywy" należy wpisać: "index" - strona, na której wstawiono polecenie, będzie indeksowana przez roboty sieciowe (indeksery) - domyślnie "noindex" - strona, na której wstawiono polecenie, nie będzie indeksowana "follow" - przechodzenie do stron, do których odnoszą się odsyłacze, znajdujące się w...