text color - Kurs HTML i CSS
Tekst HTML / Wykaz <ul, ol, li>...nawet przed znacznikiem zamykającym </p>. W języku HTML nie jest to błąd, natomiast w XHTML już tak. Przykład <p, ul, li> Po wpisaniu: <p style="text-align: center"> Tu rozpoczyna się akapit... <ul> <li>Punkt pierwszy wykazu</li> <li>Punkt drugi wykazu...</li> </ul> ...tu powinien skończyć się akapit. </p> otrzymamy: Tu rozpoczyna się akapit... Punkt pierwszy wykazu Punkt drugi wykazu... ...tu powinien skończyć się akapit. Jak widać akapit zakończył się przed wykazem, ponieważ...
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ą...
Aktualizacja / System newsów...poniższy kod i zapisać go w pliku z rozszerzeniem *.css - np. news.css: /* Tytuł: */ .news dt { font-size: 14px; /* rozmiar czcionki */ text-align: left; /* wyrównanie tekstu: left, right, center, justify */ padding: 5px; /* margines wewnątrz */ border-width: 1px; /* grubość obramowania */ border-style: solid; /* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */ border-color: gray; /* kolor obramowania */ font-weight: bold; } .news dt...
- 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...
- XHTML / Różnice między HTML 4 a XHTML 1.0
...linii) jest zamieniane na jeden. Skrypty osadzone i wewnętrzne arkusze stylów (element style) należy wstawiać w następujący sposób: <script type="text/javascript"> <![CDATA[ ...zawartość skryptu (może zawierać bezpośrednio znaki: <, >, &)... ]]> </script> Jest to konieczne, jeśli wewnętrzny skrypt lub arkusz stylów zawiera znaki: <, >, &, ponieważ w takim przypadku procesor XML potraktuje je jako znaczniki lub początek encji (znaków specjalnych). Uwaga! Przeglądarki mogą nie obsługiwać...
- Podcast HTML / #1 HTML dla zielonych
...4 Odsyłacze HTML #5 Tabele HTML #6 Multimedia HTML #7 Widżety HTML #8 Formularze HTML #9 HTML5 Podstawy języka HTML HTML to skrót od Hypertext Markup Language, czyli Hipertekstowy Język Oznaczania. Jest to język komputerowy służący do tworzenia stron internetowych. Dokument HTML jest po prostu plikiem tekstowym, w którym umieszczamy polecenia dotyczące formatowania i wstawiania grafiki. Struktura dokumentu HTML Dokument HTML składa się z sekcji nagłówkowej <head>...</head> oraz...
- 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; }...
- Formularze HTML / Przykład formularza HTML
...na temat dodatkowych możliwości pól formularza użytych w poniższym przykładzie, zobacz rozdziały: Ramy formularza <form> Pole tekstowe <input text> Pole opcji <input radio> Pole wyboru <input checkbox> Lista rozwijalna <select, option> Obszar tekstowy <textarea> Wysłanie formularza <input submit> Wyczyszczenie danych <input reset> Dla zainteresowanych Jeśli chcesz dowiedzieć się więcej na temat jeszcze bardziej zaawansowanych typów pól formularza, zobacz rozdział...
- Dobre praktyki / CSS Zorientowane Obiektowo
...{ display: block; list-style: none; margin: 0; padding: 0; } .Menu li { float: left; margin-right: 1em; } .Menu a { color: blue; text-decoration: none; } Kompozycja Zwróćmy uwagę, że typowy artykuł może zawierać informacje o: autorze - np. z jego imieniem, nazwiskiem i zdjęciem źródle - nazwa, logo i odnośnik Każdy z tych elementów można traktować jako osobny obiekt (zmiana wyglądu informacji o autorze nie powinna wpływać na wygląd samej treści artykułu), z których...
- Dobre praktyki / Przykazania webmastera
...pomiędzy wyrazami Jeśli to zrobisz, nie będzie możliwości sterowania szerokością takich wcięć czy odstępów. Do ustalania wcięć używaj własności CSS text-indent, a do odstępów - margin albo padding. Nie nadużywaj znacznika div ani span Do stylizacji możesz przecież wykorzystać znaczniki semantyczne, które już znajdują się w kodzie źródłowym - wstaw jeden element div, będący pojemnikiem całego obiektu, a potem korzystaj z selektora potomka w celu wystylizowania elementów, które zawiera...