ustawić elementy - Kurs HTML i CSS
Rozmiary CSS / Szerokość i marginesy automatyczne...Z powyższego równania wynika w szczególności, że dwa bloki z oblewaniem, bez ustalonej szerokości lub z ustaloną wartością width: auto, mogą się ustawić obok siebie, o ile tekst i inne elementy w nich zawarte będą na tyle krótkie, że zmieszczą się w jednej linii bez potrzeby przełamywania wierszy. Właściwość ta jest często wykorzystywana przy tworzeniu struktury strony w oparciu o CSS, np. do ustawienia obok siebie linków zgromadzonych w wykazie, aby utworzyć efekt zakładek nawigacyjnych...
- Pozycjonowanie CSS / Ustawienie {float, vertical-align}
...<span style="vertical-align: top"> <span style="vertical-align: bottom"> Pytania i odpowiedzi {float, vertical-align} Jak ustawić obraz w CSS? Aby ustawić obraz w CSS za pomocą właściwości float, można dodać tę właściwość do elementu zawierającego obraz i ustawić ją na left lub right w zależności od tego, po której stronie chcemy umieścić obraz. Jak ustawić zdjęcie po prawej stronie CSS? Aby ustawić zdjęcie po prawej stronie w CSS, można użyć właściwości...
HTML5 / Automatyczne zogniskowanie <... autofocus>...używając <input type="text" name="username" autofocus>, przeglądarka automatycznie ustawi kursor w polu username podczas ładowania strony. Jak ustawić domyślny fokus w HTML? Domyślny fokus w HTML można ustawić, dodając atrybut autofocus np. do tagu <input>, <textarea> lub <select>. Na przykład, <input type="text" name="search" autofocus> sprawi, że pole wyszukiwania będzie automatycznie zaznaczone po załadowaniu strony. Jak ustawić fokus na konkretnym elemencie HTML? Aby ustawić...
- Pozycjonowanie CSS / Przezroczystość {opacity}
...danego znacznika - nie możemy cofnąć elementom wewnętrznym przezroczystości (tak aby stały się ponownie zupełnie nieprzezroczyste), możemy jedynie ustawić im jeszcze większą przezroczystość w stosunku do półprzezroczystego rodzica. Przykład {opacity} To jest dolna warstwa... To jest dolna warstwa... To jest dolna warstwa... To jest dolna warstwa... To jest dolna warstwa... To jest dolna warstwa... To jest dolna warstwa... To jest górna, półprzezroczysta warstwa ("opacity: 0.5")... To...
- Układ elastyczny CSS / Marginesy automatyczne
...wybrany margines na wartość automatyczną sprawimy, że wypełni on wolną przestrzeń pozostałą w kontenerze. Dzięki temu w bardzo prosty sposób możemy ustawić kilka bloków w jednej linii - część przy lewej krawędzi, a niektóre przy prawej. Przykład {display: flex, margin-left: auto} blok 1 blok 2 blok 3 margin-left: auto Pytania i odpowiedzi Co oznacza "margin: auto"? W kontekście flexbox, "margin: auto" oznacza, że element zostanie wyśrodkowany wzdłuż osi głównej (głównego...
- Formularze HTML / Pole tekstowe <input "text">
...w HTML? Pole numeryczne jest odmianą pola tekstowego, w którym jednak można wpisywać tylko liczby. Aby umieścić go wewnątrz formularza, wystarczy ustawić mu odpowiedni typ: <input type="number" name="...">. Jaki atrybut ustala szerokość pola tekstowego? Domyślnie każde pole tekstowe ma ustaloną szerokość, która może się różnić w zależności od przeglądarki. Aby ustawić szerokość pola np. na 10 znaków, można się posłużyć następującym kodem: <input type="text" name="..." size="10">...
- Szablon strony na DIV-ach / Płynny szablon
...Treść strony... Stopka serwisu Stopka serwisu posiada przypisaną wartość przylegania clear: both, ponieważ w przeciwnym razie mogłaby się ustawić obok kolumny menu nawigacyjnego, które jest oblewane: Nagłówek szablonu Menu nawigacyjne Treść strony Stopka serwisu Przykład Przykład Trzy kolumny: Nagłówek szablonu Menu nawigacyjne Dodatkowe informacje Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść...
- Pozycjonowanie CSS / Wyświetlanie {display}
...między "inline" a "inline-block"? Różnica między inline a inline-block polega na tym, że elementy inline zachowują się jak tekst i nie można ustawić dla nich szerokości ani wysokości, podczas gdy elementy inline-block zachowują się jak elementy blokowe, ale nadal są wyświetlane w jednej linii, a można dla nich ustawić szerokość i wysokość. Jak wyśrodkować "inline-block"? Aby wyśrodkować element inline-block wewnątrz jego kontenera, można użyć właściwości CSS "text-align: center...
- Czcionki CSS / Wielkość czcionki {font-size}
...w domyślnym arkuszu CSS zawsze korzystaj z "px" w arkuszu CSS dla wydruku posługuj się jednostką "pt" Pytania i odpowiedzi {font-size} Jak ustawić rozmiar czcionki CSS? Rozmiar czcionki w CSS można ustawić za pomocą właściwości font-size. Na przykład: "font-size: 16px" ustawia czcionkę na 16 pikseli. Jak powiększyć czcionkę HTML? Aby powiększyć czcionkę w HTML, można użyć znacznika <span> lub <div> z odpowiednią klasą lub stylem CSS. Na przykład: <span style="font-size...
Aktualizacja / System newsów...this.wyswietl = function() { if (content) document.write('<dl class="news">' + content + '</dl>'); } } Na początku można ustawić zmienne konfiguracyjne. Np. aby w naszym serwisie nie "straszyły" kilkumiesięczne "nowości", można ustawić przez ile dni od ich wprowadzenia mają się wyświetlać na liście. Potem co jakiś czas można czyścić kod z przestarzałych nowości, które już się nie wyświetlają. Jeżeli wszystkie lub większość newsów będzie dodawała ta sama osoba, można...