width - Kurs HTML i CSS
Oprawa graficzna / "Duszki" CSS...</ul> ul, ul li { display: block; list-style: none; margin: 0; padding: 0; line-height: normal; font-size: 12px; } ul li { width: 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...
Galeria zdjęć HTML / Skrypt galerii zdjęć...bind(this), 1); }; GalleryView.prototype._createStyle = function() { var margin = '10px'; var overlayStyle = { left: 0, top: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }; var buttonStyle = { border: 0, padding: 0, lineHeight: 1, color: '#000', background: 'rgba(255, 255, 255, 0.5)', cursor: 'pointer' }; var navigationStyle = { fontSize: '50px', width: '75px', height: '75px...
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...
- 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...
- 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...
- 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...
- 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...
- 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...