style background - Kurs HTML i CSS
Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?...do bloku "pojemnika". Jeśli zarówno lewy jak i prawy margines jest ustalony jako auto, ich wartości stają się równe. Przykład <div>1</div> <div style="width: 50%; margin-left: 0">2</div> <div style="width: 50%; margin-right: auto">3</div> <div style="width: 50%; margin-left: auto">4</div> <div style="width: 50%; margin-left: auto; margin-right: auto">5</div> Pierwszy blok jest wyświetlany tak samo w trybie zgodności jak i w Quirks - szerokość przyjmuje wartość 100% a marginesy zero...
Podcast HTML / #1 HTML dla zielonych...służą do estetycznego i logicznego podziału treści. Wyrównanie tekstu (atrybuty) Wyrównanie tekstu w akapicie można kontrolować za pomocą atrybutu style="text-align:...": Wyśrodkowanie: <p style="text-align: center">Treść akapitu</p> Justowanie (wyrównanie do obu marginesów): <p style="text-align: justify">Treść akapitu</p> Wyrównanie do prawej: <p style="text-align: right">Treść akapitu</p> Podstawowe formatowanie tekstu Znaczniki pozwalają na zmianę wyglądu tekstu. Najczęściej...
- Tabele HTML / Łączenie kolumn tabeli w grupy <colgroup, col>
...grupę można połączyć dowolną liczbę kolumn. W jednej tabeli może istnieć kilka grup. Przykład <colgroup> Po wpisaniu: <table> <colgroup span="1" style="background-color: red"></colgroup> <tr> <td>komórka1</td> <td>komórka2</td> <td>komórka3</td> </tr> <tr> <td>komórka4</td> <td>komórka5</td> <td>komórka6</td> </tr> </table> otrzymamy: komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 Kolumna <colgroup, col> Znacznik <colgroup>...</colgroup> łączy kolumny...
- Komendy HTML 4.01 / Elementy zdeprecjonowane
...OBJECT CSS: margin-left, margin-right language SCRIPT type="..." link BODY CSS: :link name APPLET OBJECT noshade HR CSS: border-style nowrap TD, TH CSS: white-space object APPLET OBJECT prompt ISINDEX INPUT size BASEFONT, FONT CSS: font-size size HR CSS: height start OL CSS: counter-reset text BODY CSS: color type LI, OL, UL CSS: list-style-type value LI CSS: counter-reset version HTML <!DOCTYPE...> vlink BODY CSS...
- Dobre praktyki / CSS Zorientowane Obiektowo
...CSS pełna definicja tej klasy może wyglądać na przykład tak: .Menu { background-color: white; } .Menu ul, .Menu li { 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...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
Spis treści {border-image-source} Ramka obrazkowa w tle Obrazek obramowania {border-image-source} Ramka obrazkowa w tle Możliwości jakie dają style, jeżeli chodzi o efekty obramowania elementów, są bardzo duże. Jednak nie zawsze jest to wystarczające. Czasami mimo wszystko chcielibyśmy urozmaicić stronę, umieszczając na niej estetycznie wyglądające ramki z graficznie wykończonymi krawędziami. W tradycyjnym podejściu zwykle przygotowuje się wtedy trzy elementy obrazkowe: górna krawędź...
Aktualizacja / System newsów...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, .news dt a:link, .news dt a:visited { background: silver; /* tło tytułu */ color: #505050; /* kolor tytułu */ text-decoration: none; } /* Treść */ .news dd...
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...tekstu Lekcja 3 - Listy i tabele w HTML Lekcja 4 - Multimedia w HTML: video, audio, widżety (iframe) Lekcja 5 - Wprowadzenie do CSS: podstawowe style i struktura arkuszy Lekcja 6 - Klasy CSS, ramki, marginesy, tapety, interakcje Lekcja 7 - Publikacja strony internetowej Zadanie końcowe / projekt Podsumowanie Wstęp Poniżej znajdziesz scenariusz cyklu lekcji oparty na podstawie programowej dla liceum i technikum z zakresu informatyki oraz materiałach ze strony Kurs HTML i CSS...
- Wstawianie stylów CSS / Wydzielone bloki <div style>
<div style="cecha: wartość; cecha2: wartość2...">...</div> Jako "cecha" należy wpisać o jakie konkretnie atrybuty formatowania nam chodzi (opisane w kolejnych rozdziałach). Natomiast jako wyraz "wartość" wpisujemy dokładną wartość atrybutu. Fragment dokumentu wydzielony za pomocą bloku <div>...</div> możemy swobodnie formatować. Element ten tak dobrze nadaje się do osadzania stylów, ponieważ sam w sobie nie ma określonego żadnego formatowania, które mogłoby kolidować z efektem, jaki chcemy...
- Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset
Spis treści <link "stylesheet"> @charset Zewnętrzny arkusz stylów <link stylesheet> Strona kodowa @charset Zewnętrzny arkusz stylów <link "stylesheet"> <head> (...) <link rel="stylesheet" href="style.css"> (...) </head> gdzie "style.css" jest zewnętrznym arkuszem stylów. Natomiast znaki (...) oznaczają inne polecenia, które zwykle pojawiają się w nagłówku dokumentu, np. deklaracja strony kodowej. Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet...