width - Kurs HTML i CSS
Indeks, wyszukiwarka / Wygląd...odpowiada nam podstawowy wygląd indeksu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku indeks.css należy wkleić np.: #indeks { width: 300px; padding: 10px 0; background: #ccc; border: 2px outset #aaa; text-align: center; margin: 1em auto; } #indeks input.text { width: 290px; } #indeks select { width: 100%; margin: 2px 0 10px 0; } #indeks input.button { width: 100px; margin-left: 5px; margin-right: 5px; } W wyróżnionych miejscach wpisano...
Komendy HTML 4.01 / Elementy zdeprecjonowane...OBJECT background BODY CSS: background-image bgcolor BODY, TABLE, TD, TH, TR CSS: background-color border IMG, OBJECT CSS: border-width clear BR CSS: clear code APPLET OBJECT codebase APPLET OBJECT color BASEFONT, FONT CSS: color compact DIR, DL, MENU, OL, UL CSS: margin-top, margin-bottom, line-height face BASEFONT, FONT CSS: font-family height APPLET OBJECT height TD, TH CSS: height hspace APPLET, IMG, OBJECT CSS: margin-left...
Marginesy CSS / Wymiarowanie pudełka {box-sizing}...nie jest zalecane, gdyż może wprowadzić spore zamieszanie przy późniejszej rozbudowie serwisu. Przykład {box-sizing} wymiarowanie domyślne ("width: 300px") "box-sizing: content-box" ("width: 300px") "box-sizing: border-box" ("width: 300px") wymiarowanie domyślne - bez obramowania ani marginesu wewnętrznego ("width: 300px") Pytania i odpowiedzi {box-sizing} Do czego służy "box-sizing"? Właściwość CSS box-sizing pozwala kontrolować sposób obliczania całkowitego rozmiaru...
- Obramowanie CSS / Obcięcie obramowania obrazkowego {border-image-slice}
...CSS Backgrounds and Borders Module Level 3 Przykład {border-image-slice} border-image-source: url(punkt.gif); border-image-slice: 5 10; border-width: 5px 10px border-image-source: url(punkt.gif); border-image-slice: 10 15 fill; border-width: 5px 10px Ramka wypełniona środkowym elementem siatki. border-image-source: url(punkt.gif); border-image-slice: 50%; border-width: 16px Podanie wartości obcięcia większej lub równej 50% wymiaru obrazka spowoduje, że grafika obramowania zostanie...
- Obramowanie CSS / Powtarzanie obramowania obrazkowego {border-image-repeat}
...był przycięty) Przykład {border-image-repeat} border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: stretch; border-width: 10px Domyślny sposób powtarzania obrazka w obramowaniu. border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: repeat; border-width: 10px Standardowe powielenie - część grafiki obramowania może być przycięta. border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: round; border-width...
- Nagłówek i treść HTML / Skalowanie strony <meta "viewport">
...gdzie jako "parametr1=wartość1, parametr2=wartość2..." należy podać rozdzieloną przecinkami listę parametrów wraz z przypisanymi im wartościami: width Określa początkową szerokość obszaru wyświetlania przeglądarki. Może być określona bezpośrednio w pikselach albo za pomocą specjalnego słowa kluczowego device-width, które oznacza pełną szerokość obszaru wyświetlania. height Określa początkową wysokość obszaru wyświetlania przeglądarki. Może być określona bezpośrednio w pikselach albo za...
- Komendy CSS3 / Podstawowy interfejs użytkownika CSS
...Interface Module 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...
- HTML5 / Responsywny obrazek <picture, source>
...pierwszy w kolejności który spełnia zapytanie mediów podane w atrybucie media="...". zapytanie mediów 1, zapytanie mediów 2... Na przykład: "(max-width: 500px)" [zobacz: Zapytania mediów]. lokalizacja pliku podstawowego Lokalizacja pliku dla przeglądarek, które w ogóle nie obsługują znacznika PICTURE albo jeśli nie spełniają żadnego z zapytań mediów wymienionych w znacznikach SOURCE. Tekst alternatywny Tekst który zostanie wyświetlony, jeżeli przeglądarka nie zdoła wyświetlić żadnego...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
...Niektóre starsze przeglądarki mogą obsługiwać "text-overflow: ellipsis" tylko w połączeniu z "white-space: nowrap". Przykład {text-overflow} p { width: 3em; } Za długie wyrazy w tym akapicie powinny wychodzić poza jego obręb. p { width: 3em; overflow: hidden; } Za długie wyrazy w tym akapicie powinny zostać przycięte. p { width: 3em; overflow: hidden; text-overflow: ellipsis; } Na końcu za długich wyrazów w tym akapicie powinny zostać wstawione wielokropki. p { width: 15em...
- Nagłówek i treść HTML / Strona mobilna <link media>
...odpowiednia dla urządzenia, z którego w danej chwili korzysta użytkownik. Przykład <link media> <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/"> Pytania i odpowiedzi <link media> Co to jest mobilna wersja strony? Mobilna wersja strony to dostosowana do urządzeń mobilnych wersja witryny internetowej, zoptymalizowana pod kątem mniejszych ekranów i interakcji dotykowych. Zazwyczaj jest bardziej ergonomiczna dla użytkowników korzystających z...