width - Kurs HTML i CSS
Komendy CSS3 / Tło i obramowanie CSS...border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top border-top-color...
- Rozmiary CSS / Przepełnienie {overflow}
...CSS 2.1 polecenie można również zastosować do komórek tabeli. Określa co zrobić, gdy zawartość elementu nie mieści się w rozmiarach podanych przez width oraz height. Możliwe jest ukrycie nadmiarowej zawartość, pokazanie wszystkiego poprzez powiększenie rozmarów elementu (bez względu na parametry width i height) albo utworzenie suwaków do przewijania przepełnionej treści. Przykład {overflow} width: 5ex Szerokość tego akapitu jest większa niż 5ex, ponieważ w takich rozmiarach nie mieści się...
- Szablon strony na DIV-ach / Responsywny szablon
...wstawić w nagłówku dokumentu, tzn. w dowolnym miejscu pomiędzy znacznikami <head> i </head>, następuje polecenie: <meta name="viewport" content="width=device-width, initial-scale=1"> Oznacza ono, że przeglądarka mobilna nie musi pomniejszać strony, ponieważ to my zadbamy o to, aby strona była wygodna w odbiorze na urządzeniach przenośnych [zobacz: Skalowanie]. Responsywne obrazki Następnie powinniśmy zadbać, aby w miarę możliwości wszystkie ilustracje na stronie były responsywne...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
Różnice w wyznaczaniu rozmiaru elementów - własności width oraz height. W trybie Quirks marginesy wewnętrzne i obramowanie zawierają się wewnątrz rozmiarów elementu, natomiast wg CSS na zewnątrz. [Porównaj: Model pudełkowy wg CSS 2] Nie dotyczy przeglądarki Firefox ani Opera. We wcześniejszych wersjach Internet Explorera przedstawiony wyżej model określania rozmiarów wg CSS odnosi się tylko do szerokości komórek tabeli, ale nie do ich wysokości. Wcześniejsze wersje MSIE nie stosowały tych...
- Media CSS / Zapytania mediów
...nawiasem musi znajdować się znak spacji. Nic nie stoi na przeszkodzie, aby w jednym zapytaniu użyć kilku cech mediów, np.: @media screen and (min-width: 800px) and (max-width: 1280px) { /* Okno przeglądarki o szerokości pomiędzy 800px a 1280px */ } W przypadku, gdy zapytanie dotyczy medium "all" (wszystkie media), można użyć formy skróconej zapisu - podając jedynie samą cechę medium w nawiasie, np.: @media (color) { /* Arkusz dla wszystkich urządzeń kolorowych */ } Czasami może nam...
Aktualizacja / System newsów...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, .news dt a:link, .news dt a:visited { background: silver; /* tło tytułu */ color: #505050; /* kolor tytułu...
- Menu w CSS / Menu z nagłówkami
...Obramowanie CSS Czcionki Tekst Tło Marginesy Obramowanie dl, dt, dd { display: block; margin: 0; padding: 0; } dl { width: 200px; } dt { background-color: #ccc; color: #000; padding: 7px; font-weight: bold; font-size: larger; text-align: center; } dl a:link, dl a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } dl a:hover...
Komendy HTML 4.01 / Wykaz atrybutów...title') longdesc IMG Odnośnik do długiego opisu (dopełnia 'alt') marginheight FRAME, IFRAME Wysokość marginesu w pikselach marginwidth FRAME, IFRAME Szerokość marginesu w pikselach maxlength INPUT Maksymalna liczba znaków dla pola tekstowego media LINK Typ medium media STYLE Zaprojektowane do użytku z mediami method FORM Metoda wysłania formularza multiple SELECT Wielokrotny wybór name A Nazwa odsyłacza name APPLET Pozwala apletom...
- Menu w CSS / Pionowe menu
...stylizacji. Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { 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...
- Szablon strony na DIV-ach / Płynny szablon
...Stopka serwisu html, body { background-color: #fff; color: #000; margin: 0; padding: 0; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: left; overflow: hidden; position: relative; background-color: #ccc; } #TRESC { margin-left: 150px; background-color: #fff; } #STOPKA { clear: both; background-color: #888; } Wyjaśnienie: Ustalamy kolor tła oraz tekstu dla całej strony oraz usuwamy marginesy, aby mieć większy obszar dostępny na nasz szablon...