text style - Kurs HTML i CSS
Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset...body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #003868; background-color: #80B8E8; margin: 6mm; } p { text-align: justify; } pre, code { font-size: 8pt; } Strona kodowa @charset Jeżeli arkusz stylów zawiera narodowe znaki diakrytyczne, konieczne może być określenie strony kodowej. Można to zrobić umieszczając na samym początku arkusza stylów deklarację: @charset "strona kodowa"; Przed deklaracją strony kodowej w arkuszu stylów nie mogą się...
Przeglądarka zdjęć...lub podzielić treść na akapity. Ponadto aby odpowiednio wystylizować przeglądarkę zdjęć, można do niej dołączyć np. taki arkusz CSS: .zdjecia { text-align: center; } .zdjecia_menu { margin-bottom: 10px; font-size: 10px; } .zdjecia_menu input, .zdjecia_menu select { font-size: 10px; } .zdjecia_opis { margin-top: 10px; text-align: justify; } Najwygodniej będzie zapisać go w osobnym pliku z rozszerzeniem *.css - np. przegladarka_zdjec.css i osadzić w nagłówku...
- Selektory atrybutów CSS / Selektor atrybutu o określonej wartości
...rodzaj pola zobaczymy na ekranie, decyduje atrybut type="...". Jeśli chcielibyśmy zmienić rodzaj obramowania dla wszytkich pól tekstowych (type="text"), tak aby nie wpłynęło to na pola innego typu (np. na przycisk wysłania formularza - type="submit"), należałoby wpisać np. taką regułę: input[type="text"] { border: 1px solid black } Niestety również ta deklaracja nie jest interpretowana przez MSIE 6 🙁. Jedynym rozwiązaniem problemu wydaje się użycie klasy selektorowej dla każdego...
- Selektory pseudoklas CSS / Blokada :disabled :enabled
...input:disabled { border: 1px solid blue } input:enabled { border: 1px solid red } a w dowolnym miejscu strony: <form action="?"> <input type="text" value="Zablokowane" disabled> <input type="text" value="Odblokowane"> </form> otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):
- Selektory pseudoklas CSS / Tylko do odczytu :read-only :read-write
...input:read-only { border: 1px solid blue } input:read-write { border: 1px solid red } a w dowolnym miejscu strony: <form action="?"> <input type="text" value="Tylko do odczytu" readonly> <input type="text" value="Do odczytu i do zapisu"> </form> otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):
HTML dla zielonych / Łączenie znaczników i atrybutów HTML <p "text-align", span "font-size, color", b, i, u>...wielkość czcionki, kolor czcionki, pogrubienie, pochylenie, przekreślenie) dotyczące tekstu można łączyć, np. po wpisaniu w edytorze: <p style="text-align: center"><span style="font-size: large; color: red"><b><i><u> To jest jakiś tekst </u></i></b></span></p> otrzymamy: To jest jakiś tekst Zauważ, że znaczniki zamykamy w kolejności odwrotnej jak je otwieraliśmy. Czyli najpierw zamykamy znacznik, który został otwarty jako ostatni (w naszym przykładzie jest to: <u>), a na końcu...
- Formularze HTML / Wysłanie formularza bez programu pocztowego
...POST['captcha'] != '') echo $error; else { unset($_POST['captcha']); $head = "MIME-Version: 1.0\r\n" . "Content-Type: text/plain; charset=$charset\r\n" . "Content-Transfer-Encoding: 8bit"; $body = ''; foreach ($_POST as $name => $value) { if (is_array($value)) { for ($i = 0; $i < count($value); $i++) { $body .= "$name=" . (function_exists('get_magic_quotes_gpc') && get_magic_quotes_gpc() ? stripslashes($value[$i])...
- Selektory pseudoklas CSS / Pseudoklasy typu :first-of-type :last-of-type :only-of-type
...dl > dd:first-of-type { font-weight: bold } /* wytłuszczenie */ dl > dt:last-of-type { font-style: italic } /* kursywa */ dl > dt:only-of-type { text-decoration: underline } /* podkreślenie */ a w dowolnym miejscu strony: <dl> <dt>Termin 1</dt><dd>Definicja 1</dd> <dt>Termin 2</dt><dd>Definicja 2</dd> <dt>Termin 3</dt><dd>Definicja 3</dd> </dl> <dl> <dt>Termin 1</dt><dd>Definicja 1</dd> </dl> na stronie powinniśmy otrzymać wykaz, w którym tekst pierwszego punktu będzie pogrubiony, a...
- Komendy HTML 4.01 / AREA
Określa obszar wewnątrz mapy odnośników klienta (MAP). Zobacz więcej... Atrybuty: ACCESSKEY="znak" Przypisuje klawisz dostępu do elementu ALT="text" Tekst alternatywny CLASS="klasa" Przypisuje nazwę klasy (CSS) lub nazwy klas do elementu, które muszą być rozdzielone białymi znakami COORDS="współrzędne" Podaje współrzędne obszaru w mapie odnośników klienta, które zależą od kształtu obszaru (atrybut SHAPE): x,y,r - (SHAPE="circle" - koło) x,y - środek koła; r - promień...
- 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...