text - Kurs HTML i CSS
HTML5 / Napisy do filmów <track>...nie koniec. Można nawet zmienić wygląd napisów przy pomocy stylów CSS. Obsługiwane powinny być następujące własności: color, opacity, visibility, text-decoration, text-outline, text-shadow, background, outline, font, white-space. Aby zmienić stylizację wszystkich napisów, trzeba posłużyć się specjalnym pseudoelementem: ::cue { color: white; background: black; } Aby zmienić wygląd tekstu, który w napisach został objęty znacznikami B, I, U, należy wpisać: ::cue(b) { color: red; }...
Szablon strony na DIV-ach / Responsywny szablon...TRESC { margin-left: 150px; } #STOPKA { clear: both; } } @media only all and (min-width: 1280px) { html, body { text-align: center; } #top { width: 1260px; margin-left: auto; margin-right: auto; text-align: left; } #MENU { width: 300px; } #TRESC { width: 960px; float: left; overflow: hidden; margin-left: 0; } #STOPKA { width: 100%; } } Wyjaśnienie: Na początku powyższego arkusza stylów znajdują się...
Format wymiany danych - JSON / Przekształcanie tekstu JSON na obiekty JavaScript - parse(interpretuje: Internet Explorer 8, Firefox 3.5, Opera 10.50, Chrome) JSON.parse(text) JSON.parse(text, reviver) Parametry: String text - tekst w formacie JSON Function reviver - funkcja przekształcająca wartości, przyjmująca argumenty: String key - klucz danych albo pusty tekst Object|Array|String|Boolean|Number|Null value - wartość danych Wartość: Object - obiekt Array - tablica String - tekst Boolean - wartość logiczna Number - liczba Null - nic Wyjątki: SyntaxError - text...
- Komendy CSS3 / Tryby pisania CSS
Źródło: CSS Writing Modes Level 3 Spis treści direction glyph-orientation-vertical text-combine-upright text-orientation unicode-bidi writing-mode direction Kierunek tekstu Wartość ltr | rtl Inicjalizacja ltr Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie glyph-orientation-vertical Pionowa orientacja znaków Wartość auto | 0deg | 90deg | 0 | 90 Inicjalizacja nie Zastosowanie nie Dziedziczenie nie Procenty nie text-combine-upright Kompozycja pozioma...
- Komendy CSS3 / Podstawowy interfejs użytkownika CSS
...Level 3 (CSS3 UI) Spis treści box-sizing caret-color cursor outline outline-color outline-offset outline-style outline-width resize text-overflow box-sizing Wymiarowanie pudełka Wartość content-box | border-box Inicjalizacja content-box Zastosowanie wszystkie elementy, które akcektują szerokość i wysokość Dziedziczenie nie Procenty nie Media visual caret-color Kolor karetki tekstowej Wartość auto | <color> Inicjalizacja auto Zastosowanie wszystkie elementy...
- HTML5 / Automatyczne zogniskowanie <... autofocus>
...contenteditable="true". Przykład <input autofocus> <form action="?" method="post"> <fieldset> <legend>Zaloguj się</legend> <input type="text" name="login" autofocus> <input type="password" name="password"> <input type="submit" value="OK"> </fieldset> </form> Pytania i odpowiedzi <input autofocus, button tabindex> Co to jest funkcja autofocus? Funkcja autofocus w HTML jest używana do automatycznego ustawienia fokusu na określonym elemencie formularza, takim jak pole...
- HTML dla zielonych / Wyśrodkowanie obrazka HTML <div "center", img src alt>
<div style="text-align: center"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny"></div> gdzie zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony. Polecenie pozwala wyśrodkować obrazek, czyli ustawić go na środku ekranu. Dla...
- Oprawa graficzna / "Duszki" CSS
...200px; border-width: 1px; border-style: solid; border-color: #dfe #365 #365 #dfe; } ul a:link, ul a:visited { display: block; width: 169px; text-decoration: none; padding: 5px 10px 5px 20px; font-weight: bold; background: #bfb url(obrazek.gif) no-repeat -16px -25px; color: #365; border-left: 1px solid #797;} ul a:hover { background-color: #797; background-position: -16px -49px; color: #eff; } Rezultat: Czcionki Tekst Tło Marginesy Obramowanie Na komentarz zasługują...
- Komendy HTML 4.01 / INPUT
...na serwer) LANG="język" Informacja o języku bazowym (np.: LANG="en" oznacza angielski, LANG="pl" - polski itd.) MAXLENGTH="liczba" Gdy TYPE="text" lub TYPE="password", to podaje maksymalną liczbę znaków, możliwych do wprowadzenia NAME="nazwa" Nazwa kontrolna READONLY Kontrolka tylko do odczytu SIZE="rozmiar" Inicjalizująca szerokość kontrolki w pikselach lub w znakach (gdy TYPE="text" lub TYPE="password") SRC="adres" Gdy TYPE="image", to podaje lokalizację obrazka, który ma być...
- Kursory CSS / Kształt kursora {cursor}
...none - brak kursora (CSS 3) - interpretuje MSIE 9, Firefox 3, Opera, Chrome Przykład Wskaż ten tekst myszką Odsyłacze i kursory statusu context-menu - menu kontekstowe, zwykle dostępne po kliknięciu prawym przyciskiem myszki (CSS 3) - interpretuje MSIE 9, Firefox 3 Przykład Wskaż ten tekst myszką help - kursor pomocy Przykład Wskaż ten tekst myszką pointer - wskaźnik (wskazuje odsyłacz) Przykład Wskaż ten tekst myszką progress - "postęp" (CSS 2.1, ale nie CSS 2)...