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ć...
- 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...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
... ... */. W trybie zgodności jeżeli deklaracja zawiera nierozpoznawaną wartość, zostaje pominięta w całości. Na przykład po podaniu: span { text-decoration: underline cross-out overline } tekst nie zostanie nawet podkreślony ani nadkreślony, ponieważ wartość cross-out jest nieprawidłowa. Natomiast starsze wersje Internet Explorera interpretowały deklarację do pierwszego nierozpoznanego składnika, tzn. w tym przypadku tekst zostałby pokreślony, ale nie nadkreślony. Miało to wpływ na...