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...
HTML5 / Filmy i dźwięk <video, audio, source>Spis treści <video, audio, source> Wstęp Filmy i dźwięk Atrybuty odtwarzacza autoplay controls loop muted playsinline poster preload width, height Formaty audio/wideo MP3/MP4 OGG/OGV Kodeki Kodeki MP4 Kodeki OGG/OGV Wstęp Przed pojawieniem się języka HTML5, istniały już różne sposoby osadzania treści multimedialnych audio/wideo na stronach internetowych: Osadzenie pliku Uniwersalny sposób odtwarzania plików Niestety miały one spore wady: Większość z nich nie...
- Multimedia HTML / Osadzenie pliku <embed>
...materiałów dźwiękowych (muzyka) i wideo (filmy) korzystniej jest użyć odpowiednio elementów: AUDIO, VIDEO. <embed src="ścieżka dostępu do pliku" width="x" height="y"> gdzie jako "ścieżka dostępu do pliku" należy podać lokalizację na dysku, gdzie znajduje się żądany plik multimedialny. Natomiast "x" oznacza szerokość w pikselach, a "y" wysokość wyświetlanego obrazu wtyczki (ang. plug-in), czyli okna na stronie w którym odtwarzany będzie plik. Jeśli nie podamy rozmiarów obrazu wtyczki, może...
Marginesy CSS / Model pudełkowy CSS...tzn. mogą mieć wartość zero. Obwód (zewnętrzny) każdego z czterech obszarów nazywamy krawędzią ("Edge"). Według CSS rozmiary elementu (własności width oraz height) odnoszą się do samej zawartości ("Content") i nie wpływają na pozostałe obszary modelu pudełkowego ("Box model"), które są tworzone na zewnątrz zawartości, ale wewnątrz pudełka. Natomiast tło elementu jest określone dla wszystkich z podanych powyżej obszarów z wyjątkiem marginesów zewnętrznych, które zawsze są przezroczyste...
- Obramowanie CSS / Nawis obramowania obrazkowego {border-image-outset}
...Module Level 3 Przykład {border-image-outset} border-image-source: url(punkt.gif); border-image-slice: 15; border-image-outset: 7px; border-width: 15px Połączenie szerokości obramowania i nawisu tylko częściowo wystającego poza jego krawędzie. border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 15px; border-image-outset: 15px Jeżeli element nie posiada tradycyjnego obramowania, nawis będzie wystawał poza krawędzie samego elementu. border-image-source...
- Jednostki CSS / Długość
...że wysokość czcionki korzenia (element <html>) wynosi 16px, a dla <body> ustalono "font-size: 2em". Jeżeli teraz na stronie wstawimy blok ze stylem "width: 10em", uzyska on faktyczną szerokość: 16px * 2 * 10 = 320px (16px pochodzi o wysokości czcionki korzenia, 2 to względna wysokość czcionki <body>, a 10 - ustalona szerokość bloku). Jak widać, zmiana rozmiaru czcionki dla elementu <body> albo wstawienie dodatkowego potomka z ustaloną wielkością cziconki może nam w tym przypadku całkowicie...
- Reguły warunkowe CSS / Zapytania właściwości @supports
...wystarczy otoczyć je specjalnym blokiem reguł warunkowych: @supports (display: flex) { body { display: flex; } #MENU { width: 150px; min-width: 150px; order: -1; overflow: hidden; } } Natomiast dla przeglądarek, które nie obsługują takiego układu, możemy podać alternatywne reguły CSS: @supports not (display: flex) { #MENU { width: 150px; float: left; overflow: hidden; position: relative; } #TRESC { margin-left: 150px; } }...
- Komendy CSS3 / Maskowanie CSS
...clip-rule mask mask-border mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type clip Obcinanie Wartość rect() | auto Inicjalizacja auto Zastosowanie elementy pozycjonowane absolutnie Dziedziczenie nie Procenty nie Media visual clip-path Kształt obcinania Wartość <clip-source> | [ <basic-shape>...
- Tekst HTML / Pozioma linia <hr>
...i przejrzysta. Wygląd poziomej linii może się różnić w zależności od przeglądarki. Przykład <hr> Przykład Pytania i odpowiedzi <hr "border-width"> Co to jest HR w HTML? Jest to element wstawiający na stronie poziomą linię (ang. horizontal rule). Możemy jej użyć np. aby rozdzielić sąsiednie części rozdziału, które co prawda różnią się od siebie tematycznie, ale nie tak bardzo, aby podzielić je na osobne rozdziały. Jak pogrubić HR? W większości przeglądarek pozioma linia...
- Znaki specjalne HTML / Międzynarodowe
...(w IE6 tylko czcionka Unicode)     Thin space "Cienka" spacja (w IE6 tylko czcionka Unicode) ‌ ‌ Zero width non-joiner Pionowa linia ‍ ‍ Zero width joiner Pionowa linia z łącznikiem ‎ ‎ Left-to-right mark Znak "lewa do prawej" ‏ ‏ Right-to-left mark Znak "prawy do lewego" – – En dash Powiększony myślnik – — — Em dash Uwydatniony myślnik — ‘...