text style - Kurs HTML i CSS
Menu w CSS / Pionowe menu...{ display: block; list-style: none; margin: 0; padding: 0; } ul { width: 200px; } ul a:link, ul a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; } I jak Ci się podoba? A to wszystko bez jakiejkolwiek zmiany wcześniej ustalonego kodu HTML! Krótkie wyjaśnienie użytych deklaracji CSS: Na początku wstawiamy znaną już regułę...
Formularze HTML / Ramy formularza HTML <form>...można wprowadzić interaktywny formularz. Po wpisaniu: <form action="..." onsubmit="alert(this.tekst.value); return false"> <input type="text" name="tekst"><input type="submit" value="OK"> </form> Otrzymamy: Wpisz tutaj coś i naciśnij OK: Innym ważnym zastosowanie skryptów wykonywanych po stronie klienta, jest sprawdzenie poprawności wypełnienia formularza, jeszcze przed jego wysłaniem: <form action="mailto:adres e-mail" method="post" onsubmit="if (this.tekst2.value == '')...
- Tekst CSS / Wcięcie w tekście {text-indent}
selektor { text-indent: wcięcie } Selektorem może być każdy znacznik wyświetlany w bloku [zobacz: Wstawianie stylów]. Natomiast jako "wcięcie" należy podać konkretną wielkość wcięcia, używając jednostek długości. Wcięcie w tekście oznacza dodatkowy odstęp pierwszej linijki w bloku od lewego marginesu (jak tabulator). Stosuje się je, gdy rozpoczynamy nowy akapit (na inny temat). Przykład {text-indent} To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... To jest akapit, w którego...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego...np.: #menu0 { width: 200px; margin: 10px; padding: 0; } #menu0 dt { background-color: #888; color: #fff; font-weight: bold; text-align: center; cursor: pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888; margin: 0; padding: 1px 5px; } #menu0 dd.active { font-weight: bold; } W wyróżnionych miejscach wpisano zdefiniowany...
- CSS dla zielonych / Wyrównanie tekstu CSS {text-align}
...jakie dają style CSS, nie musimy tego robić dla każdego akapitu osobno. Wystarczy że w arkuszu CSS wpiszemy następującą regułę stylów: p { text-align: wyrównanie; } Dzięki temu tekst we wszystkich akapitach na stronie zostanie wyrównany w określony sposób: left - wyrównanie tekstu do lewego marginesu (domyślnie) right - wyrównanie do prawego marginesu center - do środka (wyśrodkowanie) justify - do obu marginesów jednocześnie (justowanie) Pytania i odpowiedzi {text-align}...
- 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...
- Komendy HTML 4.01 / Wykaz atrybutów
...TEXTAREA Pozycja w kolejności wybierania tabulatorem target (tylko Transitional DTD) A, AREA, BASE, FORM, LINK Odtwórz w podanej ramce text BODY Kolor tekstu dokumentu title Wszystkie elementy oprócz BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, TITLE Tytuł pomocniczy type A, LINK Typ zawartości type BUTTON Do użytku z przyciskiem formularza type INPUT Typ kontrolki type LI Styl punktów wykazu type OBJECT Typ zawartości dla danych type OL...
- 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; }...
- 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...
- 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ą...